PDA

View Full Version : ext.direct and AIR



Stju
29 Dec 2009, 10:42 AM
Hello!
Has anybody tried application to work with ext.direct libraries?
I'm on the way to porting my web application to AIR, but stuck now a little..
HTML part as follows:


<script type="text/javascript" src="http://here.my.web.hostname/ext_direct/api.php"></script>
Javascript part, again everything more, less standard:


Ext.Direct.addProvider(Ext.app.REMOTING_API);
Code works flawlessly in browser, but in AIR application same code throwing an error


Type Error: Result of expression 'provider' [undefined] is not an object.
Error happens in ext-debug.js line 22322..
Any advice or solution would be greatly appreciated. Maybe due to weird sandboxing issues of this AIR platform use of direct classes is impossible?

khebs@live.com
29 Dec 2009, 7:10 PM
Hi Stju, the error your having might be related to cache?

This is for code embed style or code ondemand, might help someone, what i did is to create a DOM element for a childSandbox bridge, with eval in it.. ill try to digg in to the codes since im in Titanium now.

heres how i got it.. the Childsandbox script, i named it ChildSandbox, the Namespace is just like Ext.ns




/**
* ChildSandbox
*
* @author khebs
* @email khebs@live.com
* @date December 10, 2009
* @version 0.1a
* @singleton
*
*/

Namespace('Base.ChildSandbox');

Base.ChildSandbox = {
/**
* The IFRAME Dom Element
* @type object
*
*
<iframe id="sandbox"
style="display:none"
sandboxRoot='http://www.example.com/'
documentRoot="app:/"
allowCrossDomainXHR="true"></iframe>
*
*/
dom: Ext.DomHelper.append(Ext.getBody(), {
id: 'child-sandbox',
tag: 'iframe',
style: 'display:none;',
sandboxRoot: 'http://www.example.com/',
src: 'Base/assets/child.html',
documentRoot: 'app:/',
allowCrossDOmainXHR: 'true'
}),

/**
* Get Bridget ChildSandBoxBridge
* @public
*/
getBridge: function()
{
return this.dom.contentWindow.childSandboxBridge;
}
};


and then you will need the the html for the childsandbox, child.html



<!--
To change this template, choose Tools | Templates
and open the template in the editor.
-->
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<script type="text/javascript" src="../libraries/frameworks/ext/release/ext-base.js"></script>
<script type="text/javascript" src="../libraries/frameworks/ext/release/ext-all.js"></script>
<script>

var bridge = {
eval: function(source, scope)
{
try {
return eval.call(scope, source);
} catch(e) {
return e;
}
}
};

window.childSandboxBridge = bridge;
</script>
</head>
<body>
TODO write content
</body>
</html>



And how to execute the code..



// Specify Handlers for Success & Failure
var success_handler = Base.util.isDefined(config.success) ? config.success : function(){};
var failure_handler = Base.util.isDefined(config.failure) ? config.failure : function(){};

// Call Ajax Request
Ext.Ajax.request({
method: 'POST',
url: Base.Module.System.Preferences.Data.API_ADDRESS,

// onSuccess Event Handler
success: function(r)
{
var result = r.responseText;

// bind the resulting
DirectAPI.API.provider = Base.ChildSandbox.getBridge().eval(result);

try
{
// Add a Direct API, accessable using DirectAPI.API.<API>
Ext.Direct.addProvider(DirectAPI.API.provider);
// Bind Exception Event Listener
Ext.Direct.on('exception', function(e){
MessageBox.show({
title : 'DirectAPI Exception',
msg : Ext.encode(e),
icon : MessageBox.MINUS
});
failure_handler(config, 'Trace Error: ' + e);
});
// Calls the Success Handler
success_handler();
}
catch(err)
{
// Calls the Failure Handler when catched error
failure_handler(config, err);
}
},

// onFailure Event Handler
failure: function(r)
{
// Calls the Failure Handler when catched error
failure_handler(config, r.responseText);
}
});


There is a better way "maybe" but for now, this codes just works..
Hope this helps..

vahid4134
30 Dec 2009, 9:53 AM
Because you want to load js file from domain you must use non-application sandbox

aconran
19 Jan 2010, 6:34 PM
Newer versions of the Ext.Direct server-side stacks allow you to specify a URL parameter of format=json.

This will allow you to add Ext.Direct providers through a cross domain XHR and inside the application sandbox.



Ext.Ajax.request({
url: "/api.php?format=json",
success: function(response, opts) {
var o = Ext.decode(response.responseText);
Ext.Direct.addProvider(o);
}
});