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.