(Javascript && HTML) + AIR == aGoodTime
Steven G. Chipman
@sgchipman
AIR ...
- Is easy to set up
- Rich APIs for desktop integration.
- Runs on Windows, OS X and Linux
- Easy communication between AIR and Javascript
Some of the cooler stuff you get ...
- Unlimited local storage (encrypted too)
- Notifications (making the dock icon bounce)
- Native process APIs
- Complete control over appearence of application windows
- Sockets - for sending and receiving data
The Most Important Part
You can build the majority of your application with HTML, Javascript and CSS against a single rendering engine - webkit, requiring very little knowledge of Flex or AS3.
This is not a hack!
Seriously.
Easy to set up
- File → New → Flex Project
- Check "AIR" & Give it a Name
- Add this:
<mx:HTML id="html" width="100%" height="100%" location="http://www.yourapp.com/version/app.html" />
- Profit
The bulk of what you end up with ...
<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication
xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx">
<mx:HTML id="html" width="100%" height="100%" location="http://www.yourapp.com/version/app.html" />
<fx:Script>
<![CDATA[
// AS3 code goes here.
]]>
</fx:Script>
</s:WindowedApplication>
All of this is HTML
Not to be outdone ...
See?
Our code running in Safari
Now with some flash sprinkled on top ...
The AIR Bridge
How Javascript talks to AIR
- public object named airBridge that points to public methods in the Actionscript
- set html.domWindow.airBridge to our AS3 airBridge
- Javascript can now call into AIR via window.airBridge.functionName
// AIR
public var airBridge:Object = {
photoUploads: {
uploadPhotos: uploadPendingPhotos // uploadPendingPhotos is an AS3 method
},
// ...etc
}
// javascript
window.airBridge.photoUploads.uploadPhotos();
The AIR Bridge
And the reverse is also true ...
AIR can call out to Javascript via html.domWindow. You'll recall that "html" is the id of the mx:html object we set up earlier.
html.domWindow.alert("oh hai!");
//or even better
var element:Object = html.domWindow.getElementById("foo");
element.className = "active";
// also cool
var userName:String = html.domWindow.ls.util.getUserId();
Its all great! Except for ...
- Installer is funky, and doesn't report failures
- Webkit lags behind latest release by several versions
- Like all Adobe products, Flash Builder 4 is wildly overpriced. (But the SDK is free, so long as you are comfortable compiling from the command line)
Beyond AIR
Questions?
Thanks for coming!
Contact Me