Start a hosting plan from $3.92/mo and get a free year on Tuts+ (normally $180)
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
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
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:
- Open the Terminal (/Applications/Utilities/Terminal)
cdto be sure you are in your home folder
- look for a file named
.profile. If it does not exist create it
- Look for a line similar to this:
- add another line like this:
- if the path to the air SDK contains white spaces wrap it with a double quote (e.g. "/my pathtosdk/air")
- Close and reopen the terminal. Or type
On Windows follow these steps:
- Right click on My Computer, choose Properties
- Select the Advanced Tab and then click the Environment Variables button
PATHfrom 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
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
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.
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
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:
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:
We change the
myTest.html file as follows.
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,
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.
|mycertificate||The name of the certificate|
|1024-RSA||The encryption key of the certificate|
|mycertificatefile.p12||The file where the certificate is stored|
|mysecretpass||The password which protects your certificate|
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
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.
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.