Back in November, I presented a series dedicated to the development of Adobe AIR AJAX applications which concluded with the development of a Truveo video search application. Today we kick off a five part series which builds from this foundation to create an application which makes it easy to migrate pictures from the local filesystem to Xdrive and back again.
Adobe AIR applications offer an interesting mix of technologies you can use to build desktop applications with traditional web development methods. The Xdrive application we're going to create will take full advantage of not only the local filesystem privileges that AIR entitles to us, but also the AJAX capability used to incorporate the Xdrive data. Although we're basically building an AJAX application, the added features of Adobe AIR give special consideration to the development workflow, specifically relating to security.
Adobe AIR HTML Security Model
Since AIR provides access to resources on the desktop such as the filesystem, some protective measures we're put in place to prevent threats such as script injection. You can certainly still make traditional AJAX requests but they must be managed in their own sandbox if you want to make requests that do not adhere to the same origin policy you're used to. AIR's security basically comes down to two sandboxes, the application sandbox and the browser sandbox. The application sandbox is where you define and process AIR-specific functionality such as filesystem access. The browser sandbox is where you perform anything else you would normally want in an AJAX application such as remote requests. While this seems very separate, both sandboxes are able to communicate over a bridge. You simply define what functionality you want to expose to either side. For a complete rundown of the HTML security model, Adobe has a good FAQ on this topic.
To get started building the Xdrive AIR application, we're going to be working with the following directory structure:
+--- assets | +--- script | | +--- root.js | | +--- ui.js | | | +--- style | +--- main.css | +--- ext-2.0 | +--- ... ext files ... | +--- AIRAliases.js +--- application.xml +--- root.html +--- ui.html
At first glance, there are two things to note. First, this application will be using Ext JS so you'll need to download the latest build and place it into the directory structure as shown. Also, the AIRAliases.js file shipped with AIR is being used to shorten up calls to AIR methods through the air namespace. As mentioned before, two sandboxes are required for our application to work. Here, the application sandbox is defined in the root.html and root.js files and the browser sandbox is defined in the ui.html and ui.js files. Let's take a look at each in depth.
Application Sandbox
The application sandbox is a secure area used to define AIR-specific functionality for your AJAX-based AIR application. You use this space to define what you need from AIR and expose what you wish to the browser sandbox. Our application sandbox is represented by the root.html and root.js files shown below:
root.html
<html>
<head>
<title>Adobe AIR - AJAX Template</title>
<link rel="stylesheet" type="text/css" href="assets/style/main.css" />
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="assets/script/root.js"></script>
</head>
<body>
<input type="button" value="AirBrowser.test();" onClick="AirBrowser.test();" />
<iframe id="UI"
src="ui.html"
sandboxRoot="http://developer.stegoworks.com/"
documentRoot="app-resource:/"
width="100%"
height="100%">
</iframe>
</body>
</html>
root.js
// define object used to expose AIR functionality
// to the browser sandbox
var AirApp = {
// expose the AIR trace method
trace: function( str ) {
air.trace( str );
}
// ... define other AIR functionality here ...
}
window.onload = function() {
// attach the exposed functionality to the parentSandboxBridge
document.getElementById( "UI" ).contentWindow.parentSandboxBridge = AirApp;
// get the browser functionality
AirBrowser = document.getElementById( "UI" ).contentWindow.childSandboxBridge;
};
The HTML contains a button control used to test a function defined in the browser sandbox which is provided by the iframe. The scripting defined in the application sandbox first defines an object named AirApp which will contain the AIR functionality to be exposed to the browser sandbox. Using the onload event handler, the application sandbox is exposed through the parentSandboxBridge and the browser sandbox is received through the childSandboxBridge.
Browser Sandbox
The browser sandbox is defined in the ui.html and ui.js files as shown below:
ui.html
<html>
<head>
<title>Simple test</title>
<link rel="stylesheet" type="text/css" href="ext-2.0/resources/css/ext-all.css" />
<script type="text/javascript" src="ext-2.0/adapter/ext/ext-base.js"></script>
<script type="text/javascript" src="ext-2.0/ext-all-debug.js"></script>
<script type="text/javascript" src="assets/script/ui.js"></script>
</head>
<body>
<input type="button" value="parentSandboxBridge.trace();" onClick="parentSandboxBridge.trace(
'application sandbox' );" />
</body>
</html>
ui.js
var AirBrowser = {
test: function() {
alert( "I'm from the browser sandbox!" );
}
}
window.onload = function() {
childSandboxBridge = AirBrowser;
Ext.Ajax.request(
{
url: "http://dev.aol.com/",
success: function( r, o ) {
alert( "success" );
},
failure: function( r, o ) {
alert( "failure" );
}
}
);
};
The browser sandbox defines an object named AirBrowser which is then defined as part of the iframe contentWindow object so it can be used in the application sandbox. To demonstrate and test that Ext is installed correctly, an AJAX call is defined to get content from the AOL Developer Network homepage. To test this out, run the following command:
<pathToAIRSDK>/bin/adl <pathToAppRoot>/application.xml
Executing this command lets you test the AIR application without having to package it up each time. When you run this command you should see the success alert from the AJAX call and be able to run each function attached to the buttons defined here successfully.
Next time, we'll be defining the user interface for the application using Ext JS. Until then, check out the following resources: