Mike's Blabberings

One of the greatest things about Flex and Air is the low barrier to entry for us software geeks. There’s nothing stopping any non-flash software dev from writing some kickass desktop apps. There’s no reason you have to buy anything to start writing, testing, and distributing Adobe Air apps. You don’t need their fancy (unsupported) IDE, FlexBuilder. You don’t need to purchase a code signing certificate. You don’t have to pay fees to get into a app store. All you need is a terminal, some links to good samples and tutorials, and this article to get you moving in the right (hopefully) direction.

Disclaimer
I’ve only spent a grand total of about 3 hours researching and coding anything flash-related. Any information distributed here could lead you down a long and lonesome path — however, more likely, it’ll get your feet wet enough so that you can take off on your own adventure.

Prerequisistes:

1. Download and install the Adobe Flex SDK. I’m using Adobe Flex version 3.4 on Ubuntu 9.10
2. Have basic familiarity with a command line terminal (Linux, cygwin, etc.)

Good so far? Great. Here’s what I hope to help you understand, because it was what I struggled with.

1. Filesystem layout for your application
2. Writing your application, coding mxml and ActionScript
3. Packaging and signing your application
4. Installing and running your new application

There are a lot of other more advanced topics that I’d like to learn myself, including but not limited to:

1. Using third party libraries (.swc’s)
2. Unit testing your application with ASUnit
3. Upgrading your life with ANT buildscripts

Steps to writing your first air application:

1. Create a directory to hold this project and its source code.

       $ mkdir myairapp
       $ mkdir myairapp/src

2. Generate a new .mxml file inside your source code folder.

       $ vim myairapp/src/MyAirApp.mxml

   FlexBuilder admittedly helps a ton here, but you don’t need it. This file defines what your application will look like, using XML markup to indicate panes, widgets, and all sorts of fun stuff. However, there’s no reason it can’t be done in VIM or your favorite text editor. This file (along with your actionscript files) will likely be the most volatile part of the project as you continue to code. Here’s a basic template you can download and use. Stick this in your root source folder.

   <?xml version="1.0" encoding="utf-8"?>
   <mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:ns1="*"
           layout="absolute" width="300" height="200" showTitleBar="false" showStatusBar="false"
           currentState="load_state" creationComplete="init()">
       <mx:states>
           <mx:State name="load_state"></mx:State>
       </mx:states>
       <mx:Script>
       <![CDATA[
           private function init():void {
           }
       ]]>
       </mx:Script>
   </mx:WindowedApplication>

3. Update the “mx:states”, which will be used to represent different viewports/panes within this app. Each state will have a button, and it will be a different color for each. The first, named “load_state”, has a green button as defined by the “fillColors” attribute. The second, named “clicked_state”, has a blue button.

        <mx:states>
           <mx:State name="load_state">
               <mx:AddChild position="lastChild">
                   <mx:Button x="24" y="36" width="250" height="122" fillAlphas="[1.0, 1.0]"
                               fillColors="[#00FF00, #00FF00]" label="Page 1"/>
               </mx:AddChild>
           </mx:State>
           <mx:State name="clicked_state">
               <mx:AddChild position="lastChild">
                   <mx:Button x="24" y="36" width="250" height="122" fillAlphas="[1.0, 1.0]"
                               fillColors="[#0000FF, #0000FF]" label="Page 2"/>
               </mx:AddChild>
           </mx:state>
       </mx:states>

4. Write some actionscript code to toggle between states when you click the buttons. The currently visible one can be read and changed based on a global variable, `currentState`.

           private function onState1ButtonClick():void {
               // Go to the 2nd "state" when this button is clicked
               currentState = "clicked_state";
           }
    
           private function onState2ButtonClick():void {
               // Return to the initial "state" when this button is clicked
               currentState = "load_state";
           }

   Then, wire-up the events so that clicking will actually trigger the code. Add a “click” attribute to the “mx:Button” element to match

               <mx:Button ... click="onState1ButtonClick()" ... />
               <mx:Button ... click="onState2ButtonClick()" ... />

5. The last thing you’ll need before you can play with your masterpiece is your “application.xml” file. Stick this in the main project directory, rather than in with your source code.

       $ vim myairapp/MyAirApp-app.xml

   See the Adobe AIR documentation for an example.

Packaging, code signing, generating .air, and installing
Your app is *almost* ready to run. The basic steps to get the app transformeed from source to binary are:

1. Generate .swf with amxmlc
2. Generate code signing certificate with adt (alternatively, if you’re a linux whizbang you can use openssl)
3. Tweak your application .xml. Link to .swf from step #1
4. Package it up into .air with adt

I’ve created a shell script to automate the package, code signing, and generating air step. Copy this into “myairapp/build.sh”

#!/bin/bash
APP_NAME=MyAirApp
FLEX_BIN=/opt/flex_sdk_3.4/bin
 
# build a .swf
mkdir release
$FLEX_BIN/amxmlc ./src/$APP_NAME.mxml -output ./release/$APP_NAME.swf
 
# generate code signing certificate
$FLEX_BIN/adt -certificate -cn $APP_NAME 1024-RSA cert.pfx $APP_NAME
 
# package into .air
$FLEX_BIN/adt -package -storetype pkcs12 -keystore cert.pfx \
    -storepass $APP_NAME \
    ./release/$APP_NAME.air ./$APP_NAME-app.xml ./release/$APP_NAME.swf \
    # Uncomment the following lines if you have icons that you have created
    #-C assets icon_16.png \
    #-C assets icon_32.png \
    #-C assets icon_48.png

Now execute the build script. Assuming there were no errors, your new application is ready to be installed. Open up the newly generated .air file in the release directory, and the air installer should walk you through the install process.

If you want to start getting fancier, the next step you’ll want to do is externalize your ActionScript code. All you have to do is create a “.as” file (or an entire directory if you want to break up your code into namespaces), stick it next to the .mxml, and then you’ll be able to “import” it and use functions, classes, etc from it. I prefer to keep the actual event wiring within the .mxml code, but don’t let it get too cluttered.

Additionally, you’ll want to start adding assets (icons, images, sound files, etc) to your project. Create a separate “assets” directory to hold them.

Additional Flex development references

• http://opensource.adobe.com/wiki/display/flexsdk/Flex+SDK
• http://www.adobe.com/devnet/flex/
• http://flex.org/
• To find great examples, search Google for “flex site:googlecode.com”

More help with compiling and packaging:

• http://www.adobe.com/devnet/air/articles/signing_air_applications_print.html
• http://blog.devsandbox.co.uk/?p=163
• http://livedocs.adobe.com/flex/3/html/help.html?content=compilers_13.html#150640

Best of luck!