Building an Adobe Air application with Flex

In a previous tutorial we introduced the Adobe Air framework that illustrated how to create a simple application. Remember that Adobe Air is a framework that enables web developers, usually involved in html/js/flash programming, to build desktop applications. In this tutorial we will illustrate how to build an Adobe Air application with Flex, an open source set of technologies for the development of rich internet applications.

Step 1 – Quick Introduction to Flex

Flex is a framework which allows generating SWF files. You might ask: what is the difference with respect to Flash? Apart from differences behind the scenes the main difference with respect to Flash is the presence of a markup language called MXML. The figure below illustrates the process of generating a SWF file.

Mxml is an xml-based language, which looks more friendly to designers than Actionscript, and it is similar in concept to HTML (with tags and properties). At compilation time the Mxml is transcoded into Actionscript, which is then included in the final SWF file. In this perspective you can consider Mxml as an abstraction of Actionscript, much more simpler to deal with. Flex SDK is born as a development toolkit to generate swf files (the same files generated with Flash). After some modification from Adobe Flex can now generate also Adobe Air applications.

Step 2 – Installation and Configuration of Flex SDK

The Flex SDK is open source and can be downloaded from here. It is is contained in a zip file that, when expanded, looks like this.

The most important files, which we will use in this tutorial are located in the bin/ directory. More specifically we will use:

• AMXMLC (the compiler)
• ADL (the debugger/launcher)
• ADT (the developer tool)

The SDK has to be configured to be run form every folder of your computer. The configuration is very similar to the one of the Adobe Air framework, explained in the
previous tutorial. I will report it here for convenience. On MacOSX follow this script.

1. Open the Terminal

   (/Applications/Utilities/Terminal)

2. Type cd to be sure you are in your home folder
3. look for a file named .profile or .bash_profile. If it does not exist create it.
4. Look for a line similar to this: export PATH=$PATH:/usr/bin
5. add another line like

   this: export PATH=$PATH:/flexsdk/bin

6. if the path to the flex SDK contains white

   spaces wrap it with a double quote (e.g. "/my pathtosdk/air")

7. in my file, for example, I have the following

   line: /Applications/flex_sdk_3/bin

8. Close and reopen the terminal. Or type source.profile

On Windows this is the procedure to configure the SDK.

1. Right click on My Computer, choose Properties
2. Select the Advanced Tab and then click the Environment Variables button
3. Select PATH from the bottom list and add the path to the sdk folder at the end, as in figure.

To test the configuration let's open the shell and try to type the following command:

amxmlc

If the result is like the following the SDK is correctly installed.

Step 3 - Creation of the Description file

Let's create a folder which will contain of the files of our project. As explained in the previous tutorial, an Adobe Air application has to include a description file, which describes the features of the application. Let's create a file named MyApplication-descr.xml with the following content.

The first line is just the declaration of the file format; the real specification starts from line two until the end of the file.The id embeds the identifier of the application. I'll include my website domain to ensure it is unique. The version tag indicates the number of the release. Remember to change it accordingly as you release new versions of your application. The tag filename, whose name can be misleading, contains the name of the application, which will appear in the main window of the application, in the menus, etc. Content specifies the first file to be loaded by the Air application at startup. This file is commonly referred to as root file or entry point. We set the visible property to true, in order to visualize
the application as it is loaded. The systemChrome indicates the look and feel of the window hosting your application. If you set it to standard the application will have a window identical to the ones of the operative system you are using. If you set it to none Flex
will use its own chrome that, on MacOsX, appears like the following.

On Windows (XP/Vista) it is very similar. The main difference is the position of the resize/close buttons.

In this tutorial we will build an application with a standard chrome. The transparent property indicates whether the main window of the application is transparent, whereas lines 11 and 12 specify the initial width and height of the window when displayed on the desktop.

Step 4 - Writing the Actual Code

Now we will start building the code of the application, which will be compiled in the SWF file.

The WindowedApplication tag contains all your application, similarly to the <html> tag for web pages. The property title defines the string that will appear at the top of the application.Flex contains a huge list of graphical components. The complete list of components is available here. Let's now put a button in our window.

As you can see, in a way pretty similar to html, you open a tag (Button) and specify the features of the component via attributes. In this case we define the text to be displayed on the button via the label property (line 3). Now we will attach some action to the button.

As you can see we can embed ActionScript code, which resembles JavaScript, that allows defining what is commonly called the "logic" of our program (lines 3-11). At line five we import the Alert
component, which is a sort of popup window. We then define a function (line 7). The action associated is to show an Alert window containing the message "Hello" (line 8). To attach the code at the click of the button we simply fill the click attribute of the button with the name of the function (line 12).

Step 5 - Compile and Test

To compile the application we have to move to project folder and then run the following command:

	amxmlc MyApplication.mxml

The shell should return a message like this:

The message contains a warning that, unlike an error, does not require a fix. The compiler is simply suggesting to check out the code and "improve" it. To correctly run the application, and the for the scope of this tutorial, there is no need to fix it. Now we are ready to test our application. From the same directory we type the following command:

	adl MyApplication-descr.xml

(Notice that we pass the descriptor xml file and not the mxml with the actual code). We should see the following window appearing.

If we click the button the alert is visualized correctly.

Step 6 - Styling the Application

It is likely that you are not happy with the default color/layout of Flex SDK. You can style your Air application via CSS, as you do with your html pages. Of course the are differences with respect to standard W3C CSS, but the idea and the syntax is almost the same. Let's for example change to white the label of all the buttons in our application. We insert a snippet of CSS in our mxml file as in the figure
below (lines 3-7).

To have an idea of the styling capabilities of Flex look at this link.

Step 7 - Create the Distributable File

The last step to create our first application is to package a distributable file, to be installed on other machines. First we need a certificate. For more details about the need of a certificate please consult the
previous tutorial (step 7). We will report here just the command to create a self-signed certificate needed to build the distributable package.

	adt -certificate -cn SelfSigned 1024-RSA mycertificate.p12 

mypassword

The final application will be distributed as a .air file which can be built using the following command.

adt -package -storetype pkcs12 -keystore mycertificate.p12 
MyApplication.air MyApplication-descr.xml 
MyApplication.swf 

The keystore parameter indicates the file containing the certificate generated above.
After that we need to specify the name of the .air file we want to generate, the description of the
application (contained in MyApplication-descr.xml) and the root file generated previously (MyApplication.swf). This command will ask you for the password you specified during the creation of the certificate. You can now redistribute the resulting MyApplication.air file to your users. Remind them they need to install the Air Installer.