Introduction to Adobe Air

This tutorial will introduce you to Adobe Air, a framework to build rich internet applications. This first introduction will show how to create a simple application using Html/Js technologies.

What is Adobe Air?

Adobe Air is a framework which allows building desktop applications.
Adobe Air applications are based on two technologies: Html/Js and Flash.
Developers can choose to build desktop application via Html/Js, Flash or Flex. After a brief overview of the architecture, we will build a simple application using Html/Js.

Step 1 – Architecture of an Air application

An Air application is executed by means of a runtime component, which executes the code contained in the air file. As you can see in the figure Adobe provides the runtime component for the three mayor operative systems, Mac OS X, Windows (XP/Vista) and Linux (note: the Linux version is still in beta). The figure might lead to think that the two approaches are exclusive, either you develop in HTML/JS or Flash. Since the air runtime allows “bridging” between Javascript and ActionScript engines, you can call javascript code from an swf, manipulate HTML/DOM via ActionScript, etc.

Step 2 – OS level functionalities

Adobe Air runtime is not simply an integration of HTML/JS and Flash technologies. The runtime provides a set of API which allows air applications to interact with OS functionalities like:

• File read and write
• Native Windows/Menus creation and management
• Retrieval of internet resources

Adobe Air includes also SQLite, a database engine to locally store and retrieve data.

Step 3 – Installation

To repeat the steps described below you need to install the runtime and the sdk (Software Development Kit), which enables you to build air applications.

The runtime can be downloaded from http://www.adobe.com/go/getair. Just run the installer and follow the instructions.
The SDK can be downloaded from: http://www.adobe.com/go/getairsdk
Unzip the SDK and place the folders in the location you prefer (macosx users will have to mount a .dmg image). Remember the location of the SDK, we will refer to it as SDKPATH.
The directory of the SDK should look like this:

Step 4 – Configuration

The SDK has to be configured, otherwise the OS will not find the commands to be executed.
In fact, if you open a shell a type adl, your OS will say something like “command not found”. This will work only if you move to the bin directory of the SDK folder. Since we want to be able to run build and test commands from every folder we have to configure the SDK. It is important to type correctly the absolute path of the bin directory in the SDK folder.

On a Mac OS X follow this procedure:

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. 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:/airsdk/bin
6. if the path to the air SDK contains white spaces wrap it with a double quote (e.g. “/my pathtosdk/air”)
7. Close and reopen the terminal. Or type source .profile

On Windows follow these steps:

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 whether the configuration is successful let’s open a shell and type the
adt command.
The result should be the following:

This response technically means that we have provided a wrong number of parameters to the command, but it also
means that the SDK has been correctly installed and configured.

Step 5 – Project creation

Let’s now create our project folder. We call it myTest and we create two files: myTest.html and myTest.xml.

The xml file is the configuration file, which enables setting up the air application. Open it with your preferred editor and insert the following code.

The first line is a standard header for xml files. The second line starts the definition of our application. The id is the unique identifier of your application. In this case I prefixed that with my domain name. The filename is the name of the executable that we will generate. Name is the name of the application, as seen by the user. The description is a snippet which is shown during the installation to describe the application. Version indicates the version number of your app, 0.1 in our case.

After specifying metadata about the application we go to the definition of the graphics, enclosed in the tag.

Line 10 specifies the root file, that is the file to be loaded in the air application at startup. In this case the myTest.html that we will show later. Title is the string that will appear in the upper part of the window. The systemChrome specifies whether your application has the standard chrome (the one of the hosting OS), or none. Chrome is a set of standard tools which allows manipulating a windows in a desktop environment, namely the title bar, close/resize buttons, borders and the area to grip for resizing.

The background of an Air application can be set to transparent, but this option is valid only if the chrome is set to none. Visible allows to decide whether you application should be displayed when launched. This is useful when the startup takes some time and you don't want to display the graphics to users.
The meaning of tags minimizable, maximizable and resizable should be intuitive and should not need explanation.

Now let's look at myTest.html which actually contains our application.

As you can see it is a standard html page, with a head and a body. The head contains a title and the body has a simple div with center-aligned text.

Step 6 - Running the application

Before packing the application as a .air file we will test it to check whether it produces the expected result.
The tool we will use id adl, which allows to run our Air applications without installation.
Let's open a shell and go to the directory which contains our myTest files (both html and xml).
Then type the following command:

	adl myTest.xml

This runs the application with the chrome of the current OS. On a MacOs should look like this.

On Windows XP the application will appear like this:

You might doubt that this application works just with html. Let's test javascript.
We change the myTest.html file as follows.

With respect to the previous version we added a script tag which contains the definition of a simple javascript function, myfunction(),popping up an alert (lines 4-8). We added a button to the body (line 12). The action associated with the button click is the popme() function. Let's save the file and run it, using the same command from the shell, adl myTest.xml

If we click the button we should see something like the following:

Step 7 - Deploying Air application

Once your application is ready for deployment we can create the .air file, which is the distribution package for Adobe Air applications.
This file, which is based on zip compression, contains all the stuff needed to install air applications.
An Air application has to be signed with a certificate. For widely distributed applications it is preferable to obtain a certificate from an authority like thawte.
Our purpose is just testing, so a self signed certificate is enough. The creation of a certificate can be done via the adt command. Open a shell, move to the project folder, and type this command:

	adt -certificate -cn mycertificate 1024-RSA mycertificatefile.p12 mysecretpass

adt -certificate -cn is simply the syntax required by the command. The following table explains the values provided to the command.

If you check the project folder you'll find a new file called mycertificate.p12 which is the self-signed certificate we right created.
The project folder should now contain three files as in the figure below.

Now we have all we need to create our .air file. We have to run a pretty long shell command. Don't panic. I'll explain every single word. First let's see it.

adt -package -storetype pkcs12 -keystore mycertificate.p12 AIRHelloWorld.air AIRHelloWorld.xml AIRHelloWorld.html

As above adt -package is the syntax of the command, storetype indicates the the format of the keystore. This is a pretty technical parameter. To be brief, since we generated a certificate according to the pkcs12 format we have to tell it to the compiler. Next we specify the certificate file, via the -keystore parameter. Finally, we provide the name of the resulting .air file, the xml file containing the application settings and the .html entry point file. When we issue this command we will be asked for the password entered during the creation of the certificate ("mysecretpass") in our case.
We now have a .air file, which is the distribution format of our application. If we double click it the installation process will start.
Installation goes through two simple steps as shown below.

Notice that, since we self signed the certificate, the published Identity of the application if UNKNOWN.

During the second step you can specify where to install the application and whether to start it when the installation is finished.

Conclusion

In this tutorial we have introduced the Adobe Air framework and we have built our first Adobe Air application using Html/Js.
In the next episodes we will see how to build the same application with Flex and Flash CS3.

• Subscribe to the NETTUTS RSS Feed for more daily web development tuts and articles.