How to load external ExtJS built app into Air sandbox

**pestilencia** · 3 Jan 2011 6:12 AM

I'm new to Adobe Air, so the question might be obvious, but I couldn't get to work for days of struggling with it.
I'm trying to build an application with air which has the embedded required code, to build the starting process and fetching runtime-required resources from the deployed web application and inject it in the main application. I've build the two different sandboxes (parent sandbox for main air app, and an iframe as child sandbox for deployed app). here's what I've done:

air.html

HTML Code:

<html>
<head>
   ...
   <script type="text/javascript" src="/scripts/app/load.js"></script>
</head>

<body id="baseBody" onload="Load.init();">
   <iframe 
      id="sandbox" 
      sandboxRoot="http://localhost:8080/webapp/" 
      style="width:0;height:0;display:none;" 
      ondominitialize="Load.bridge();">
   </iframe>
</body>
</html>

load.js (Parent sandbox)

PHP Code:


Load = function() {
   return {
      sandbox: null, 
      bridge: function() {
         document.getElementById('sandbox').contentWindow.parentSandboxBridge = {
            initChild: function() {
               sandbox = document.getElementById('sandbox').contentWindow.childSandboxBridge;
               sandbox.loadSignin();
               sandbox.buildParent();
            }, 
            buildBase: function() {
               signin = new App.Signin({
                  ...
               });
               new Ext.air.Window({
                  ...
                  items: [signin], 
                  ...
               });
            },
            importing: function(url) {
               // Creating Script tag and Append it to Head tag
            }
         };
      }, 
      init: function() {
         document.getElementById('sandbox').src = './load';
      }
   };
}();

load (JSP on child sandbox)

HTML Code:

<html>
<head>
   <script type="text/javascript" src="http://localhost:8080/webapp/scripts/app/load.js"></script>
</head>

<body onload="Load.init();"></body>
</html>

load.js (Child sandbox)

PHP Code:


Load = function() {
   return {
      init: function() {
         window.childSandboxBridge = {
            loadSignin: function() {
               // "The Line"
               window.parentSandboxBridge.importing('/path/to/signin/script/on/web/server');
            }, 
            buildParent: function() {
               window.parentSandboxBridge.buildBase();
            }

            window.parentSandboxBridge.initChild();
         };
      }
   };
}();

signin.js

PHP Code:


Ext.namespace('App.Signin');

App.Signin = Ext.extend(Ext.form.FormPanel, {
   initComponent: function() {
      var formPanelConfig = {
         items: [{
            ...
         }]
      };

      Ext.apply(this, Ext.apply(this.initialConfig, formPanelConfig));
      App.Signin.superclass.initComponent.apply(this, arguments);
   }
});

I've tried different thing on "The Line" mentioned above, such as inserting just the url, getting the content by ajax and passing the content, passing the eval()-ed content to parent sandbox. and no matter which, I got Result of expression 'App.Signin' [undefined] is not a constructor. And well, it is Not available in the DOM element in Air Introspector as well.
I remember reading somewhere about loading javascript before onLoad event but I couldn't recall where exactly, and more important I don't know how to implement it. Isn't my approach before onLoad?
Or could you please show me the guide to solve this problem.

**makana** · 4 Jan 2011 8:41 AM

Hi pestilencia,

According to the Adobe Help you cannot access dynamically created scripts.

To communicate to external scripts you have to use the sandbox bridge (as you created). The properties there are the only accessible ones.

But even if you map the App variable in the signin.js to a childSandboxBridge property, its properties (like Signin) are not accessible. Why, I'm not 100% sure.
But I've got another solution. Create the instance of App.Signin in the non-application sandbox content and return it to the application sandbox.

load.js (Parent sandbox)

Code:

Load = function() {
   var signin;
   return {
      sandbox: null, 
      bridge: function() {
         document.getElementById('sandbox').contentWindow.parentSandboxBridge = {
            initChild: function() {
               sandbox = document.getElementById('sandbox').contentWindow.childSandboxBridge;
               signin = sandbox.loadSignin(someOptionalConfigurationObject);
               sandbox.buildParent();
            }, 
            buildBase: function() {
               signin = new App.Signin({
                  ...
               });
               new Ext.air.Window({
                  ...
                  items: [signin], 
                  ...
               });
            },
            importing: function(url) {
               // It is a useless function now
               // Creating Script tag and Append it to Head tag
            }
         };
      }, 
      init: function() {
         document.getElementById('sandbox').src = './load.html';
      }
   };
}();

load (JSP on child sandbox)

HTML Code:

<html>
<head>
   <!-- we need the extjs script files as well here, because we're loading local content -->
   <!-- http://localhost:8080/webapp/ can be left out -->
   <script type="text/javascript" src="http://localhost:8080/webapp/scripts/app/signin.js"></script>
   <script type="text/javascript" src="http://localhost:8080/webapp/scripts/app/load.js"></script>
</head>

<body onload="Load.init();"></body>
</html>

load.js (Child sandbox)

Code:

Load = function() {
   return {
      init: function() {
         window.childSandboxBridge = {
            loadSignin: function(config) {
               // "The Line"
               window.parentSandboxBridge.importing('/path/to/signin/script/on/web/server');
               return new App.Signin(config);
            }, 
            buildParent: function() {
               window.parentSandboxBridge.buildBase();
            }

          };
           // consider the changes in these lines here (order)
           window.parentSandboxBridge.initChild();

      }
   };
}();

Hope that helps!

Greets
makana

**pestilencia** · 9 Jan 2011 12:36 PM

Hello Makana,

Thanks for your fast response. I was so busy with something else and honestly I've forgotten about checking the thread!
Anyway, I've had changed the structure a little bit and made it working by change the way "importing: function()" from:

Code:

document.createElement()...

to

Code:

Ext.get('predefined-empty-script-element').update(responseText);

I believe your ways should be better than my work around solution? Isn't it?
All in all, I just changed the code as you proposed now, but I'm getting 'comp.getItemId' [undefined].

TypeError: Result of expression 'comp.getItemId' [undefined] is not a function.
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 12765
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 8937
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 12782
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 12775
at app:/scripts/extjs/3.3.1/ext-base-debug.js : 458
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 12776
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 12701
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 16936
at app:/scripts/extair/3.3.0/ext-air-wo-xlayer-debug.js : 5185
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 10626
at app:/scripts/extjs/3.3.1/ext-base-debug.js : 246
at app:/scripts/extjs/3.3.1/ext-base-debug.js : 246
at app:/scripts/extjs/3.3.1/ext-base-debug.js : 246
at app:/scripts/extjs/3.3.1/ext-base-debug.js : 246
at app:/scripts/extair/3.3.0/ext-air-wo-xlayer-debug.js : 5706
at app:/scripts/extair/3.3.0/ext-air-wo-xlayer-debug.js : 5686
at app:/scripts/extair/3.3.0/ext-air-wo-xlayer-debug.js : 4068
at app:/scripts/extair/3.3.0/ext-air-wo-xlayer-debug.js : 3675
at app:/scripts/extair/3.3.0/ext-air-wo-xlayer-debug.js : 5656
at app:/scripts/app/load.js : 50
at app:/scripts/app/load.js : 101
at app:/scripts/extjs/3.3.1/ext-all-debug.js : 5949
undefined at undefined : undefined

And load.js, line 50 would be: "items: [signin]"

Then what do you believe is wrong with the code?

Best Regards,
Khosrow

**makana** · 11 Jan 2011 11:24 AM

If your version works, it is good if you want to create the signin form with the local extjs framework and so with the overrides that you have in your air app. With my version the form is created remote with the remote extjs loaded.

I don't want to say which version is best.

Your error means, that your "signin" object is no component. i.e. the signin form instance is not created remote. Make sure, you have (additionally to load.js and signin.js) the extjs framework included in your remote load.html.
That's very important for my solution. If you take yours it doesn't matter.

**pestilencia** · 14 Jan 2011 1:57 PM

Many thanks Makana.

How to load external ExtJS built app into Air sandbox

Thread Tools

Search Thread

Display

How to load external ExtJS built app into Air sandbox

How to load external ExtJS built app into Air sandbox

Similar Threads

How to compile an ExtJs App into Adobe Air ?!?

Air DateField (AIR runtime security violation for JavaScript code in sandbox)

The easiest way to convert an j2ee app to an AIR app

AIR runtime security violation with sandbox issu!! plz help me.

Raptr: Adobe AIR app built with Ext 2.2