Monday, March 16, 2009

Developing AIR Apps on Windows With Unix Tools

I've been happily developing Flex apps on Windows using Unix dev tools for some time now. Last week I wanted to create my first AIR app - which is just like any other Flex app, but with access to desktop friendly APIs.

Here are a few hurdles I had to clear before I could be productive.

Compiling AIR Apps

I've found emacs + fcsh to be a great combination for developing and compiling Flex content. If you try this same approach with AIR specific classes, you'll get a compilation error explaining that the class doesn't exist.

After much poking around, I learned that web based Flex apps and AIR based Flex apps both use the same compiler, but start off with different configuration files. As an aside - if you've downloaded Flex 3, you have everything you need for AIR - there's no need to download the AIR SDK. To control the different config file in use for compiling, you can set the line argument +configname. You could, for example, run the following two commands:

 # Compile with web based Flex settings
 mxmlc +configname=flex Foo.mxml

 # Compile with AIR based Flex settings
 mxmlc +configname=air Foo.mxml

It's worth noting that two commands toggle between the configuration files found in $FLEX_ROOT/frameworks/flex-config.xml and $FLEX_ROOT/frameworks/air-config.xml. Don't forget to enable debugging in these config files to get line numbers when there's an exception (oh, and for web content, you'll want the debugging Flash player).

I folded the above information into my emacs setup by adding the following functions:

(defun fcsh-flex-mode ()
  "Setup fcsh to compile in flex mode"
  (interactive)
  (setq *fcsh-mxmlc-command* "mxmlc +configname=flex"))

(defun fcsh-air-mode ()
  "Setup fcsh to compile in flex mode"
  (interactive)
  (setq *fcsh-mxmlc-command* "mxmlc +configname=air"))

Now, when I'm ready to start developing I type M-x fcsh-air-mode and then M-x fcsh-compile, and I'm all set.

Previewing AIR Apps

There's nothing too exotic here. The Flex SDK comes with the command adl.exe. Go ahead and point it to your application descriptor, and you can run your AIR app without installing it:

  adl.exe Foo.xml

Packing AIR Apps

Packing up an AIR app isn't all that difficult. You'll use the adt.bat file with the -package argument. I've found make works great for this.

Before, you can get started though, you'll need to create a test certificate to allow for the package process to continue. To setup a test certificate (which apparently is its own stand alone keyring as well), you can run the command:

adt.bat -certificate -cn "YourName" -c US 2048-RSA cert.p12 somepass

Once you've got cert.p12, you can setup the following make rule to package up things quickly:

# Makefile to build our AIR app
ADT = /c/tools/flex3/bin/adt.bat
APPS = Foo.air
CERT = cert.p12
PASS = somepass    # same as what you used to create with above

# Our rule to package up Foo.air
package : $(APPS)

%.air : %.xml %.swf
  $(ADT) -package -storetype pkcs12 -keystore $(CERT) -storepass $(PASS) $@ $<

Now, packing up my AIR file is a simple one command (make) ordeal.

Enabling One Click Installs

One of the features that attracted me to AIR is the one click badge install. Essentially, users without AIR installed can click on a widget on your web page, and the appropriate AIR runtime and application will be installed. Give it a try here here.

There's nothing Unix or Windows specific about getting this setup. I had initially thought that the badge functionality was specifically built into AIR. But, it turns out, it's just a nice add on.

The Flex SDK comes with the badge code in its samples directory (named, not surprisingly, badge). To get the badge working, all you really need from that directory is badge.swf. You should also look in default_badge.html to see how it's used.

The badge is nothing more than a regular SWF file that takes in arguments which include the preview image to show and the AIR file to download/install.

The first time I attempted to put this in place, I attempted to install the application and got the error:

Sorry, an error has occurred.

The application could not be installed. Try installing it again. If the problem persists, contact the application author.

Error# 2032

But I am the application author - who do I contact? Well, Google of course. And Josh Buhler ran into the same problem I did. Turns out, the path handed to badge.swf needs to be a full URL, not just a relative path to your AIR file. I fixed this, and my badge worked as advertised.

Happy Coding

After getting the above tools straightened out, I'm happy to say, I've been off and developing without a problem. If you haven't tried AIR, you really should. Imagine the lexically scoped beauty of JavaScript with a complete and modern widget/functionality set. It's good stuff.

A special thanks to Christian Cantrell, who was instrumental in me understanding the nuances of AIR and how to get the above working.

2 comments:

  1. I really admire this, I mean it really looks interesting! I'm actually glad to see all this stuff...

    ReplyDelete
  2. Hi. I wanted to drop you a quick note to express my thanks. I've been following your blog for a month or so and have picked up a ton of good information as well as enjoyed the way you've structured your site.

    ReplyDelete