Twitter Trends: Experimenting with Adobe Air

Now that there are a couple of Adobe Air applications in my regular toolbox ([Tweet Deck][], in particular), I figured it was time to find out more about how Air works.

I knew you could create Air applications with [Flash][] (and also [Flex][]), but I was pleasantly surprised to see that you can also create Air applications with [HTML/Ajax][].

After working through the [Air SDK tutorial][], I set about writing a simple Air app that interacts with the [Twitter API][].

Step 1: Download & install the [Air SDK][]

The SDK has all of the tools for debugging & packaging Air apps. This is especially useful for HTML Air apps when you're just working from a text editor.

Step 2: Create the application descriptor file

Every Air app has a descriptor XML file which specifies the application name, version, window size, etc.

~~~~ {.xml name="code"} testing.html.TwitterTrends 0.1 TwitterTrends TwitterTrends.html true 300 400 wzxhzdk:0

The HTML is pretty basic as well

~~~~ {.html name="code"} Twitter Trends

Twitter Trends

~~~~

Step 5: Run it!

To run the app in debug mode, run adl *application-descriptor-file* (found in the bin directory of your AirSDK install).

>

adl TwitterTrends-app.xml

If all goes well, you should see something like this:

![Twitter Trends app window][]

You'll also notice some debug messages (courtesy of the air.trace() function) in the terminal window where you ran the adl command:

![debug message][]

Step 6: Package it up

Once you have a working app, you might want to actually share it with other people. The first step is to create a self-signed certificate to sign your app with (using the **adt** program in the bin directory of the SDK).

>

> > adt –certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword > >

This creates a certificate file **sampleCert.pfx** which has a password of *samplePassword* that you can use for signing your Air application. And now you can actually package the whole thing up:

>

> adt -package -storetype pkcs12 -keystore sampleCert.pfx > TwitterTrends.air TwitterTrends-app.xml TwitterTrends.html > AIRAliases.js prototype-1.6.0.3.js scriptaculous.js effects.js > >

The basic format of the command is **adt** -package -storetype pkcs12 -keystore *certificate-name* *output-air-filename* *list-of-all-files-in-the-app*. Note that you have to explicitly name **every** file to be included in the app. Thus concludes our brief Adobe Air tutorial. You can download a [.zip file][] with all of the files used in this example, including the sample certificate and a batch file for packaging things up. [Tweet Deck]: http://tweetdeck.com/beta/ [Flash]: http://www.adobe.com/devnet/air/flash/ [Flex]: http://www.adobe.com/devnet/air/flex/ [HTML/Ajax]: http://www.adobe.com/devnet/air/ajax/ [Air SDK tutorial]: http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3d118666ade46-7ecc.html [Twitter API]: http://apiwiki.twitter.com/ [Air SDK]: http://www.adobe.com/products/air/tools/sdk/ [PrototypeJS]: http://www.prototypejs.org/ [Scriptaculous]: http://script.aculo.us/ [Google Code]: http://code.google.com/apis/ajaxlibs/documentation/#prototype [http://search.twitter.com/trends/current.json]: http://search.twitter.com/trends/current.json [Twitter Trends app window]: http://farm4.static.flickr.com/3413/3638165969_0ba229fe56_o.png [debug message]: http://farm4.static.flickr.com/3607/3638980812_0d1a0b9916_o.png [.zip file]: http://mark.biek.org/blog/static/TwitterTrends.zip