(Javascript && HTML) + AIR == aGoodTime

Steven G. Chipman

@sgchipman

AIR ...

Adobe AIR Bus

Some of the cooler stuff you get ...

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

  1. File → New → Flex Project
  2. Check "AIR" & Give it a Name
  3. Add this:
    <mx:HTML id="html" width="100%" height="100%" location="http://www.yourapp.com/version/app.html" />
  4. 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

AOL Lifestream app screenshot.

Not to be outdone ...

The AOL Lifestream bus at SXSW in Austin, TX in March 2010.

See?

Our code running in Safari

Now with some flash sprinkled on top ...

The AIR Bridge

How Javascript talks to AIR

// 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 ...

Beyond AIR

Questions?

Thanks for coming!

Contact Me