11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

1/10

Advertise Here

Google AdWords

Google.cl/AdWords

Contáctese con personas interesadas en sus productos. ¡Empiece ahora!

Introduction to Adobe Air

Cesare Rocchi

on Oct 2nd 2008 with

76 Comments

View post on Tuts+ Beta

Tuts+ Beta is an optimized, mobile-friendly and easy-to-read version of the Tuts+ network.

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.

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

2/10

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:

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

3/10

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

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

4/10

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.

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

5/10

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.

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

6/10

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.

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

7/10

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:

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

8/10

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.

Parameter Value

Explanation

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

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.

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

9/10

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

11/09/13

Introduction to Adobe Air | Nettuts+

net.tutsplus.com/tutorials/tools-and-tips/introduction-to-adobe-air/

10/10

Subscribe to the

NETTUTS RSS Feed

for more daily web development tuts and articles.

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.

Google AdWords

Google.cl/AdWords

Contáctese con personas interesadas

en sus productos. ¡Empiece ahora!

Tags:

adobeadobe air

By

Cesare Rocchi

Cesare Rocchi is a UI researcher, currently pursuing his PhD in Human Computer Interaction. He began working in
Flash, on applications for mobile devices. His focus has recently been revolving around the user experience of rich
internet applications, particularly on tabletop devices, with extensive direction towards user centered design. Most
recently, Cesare started his own burgeoning company, consulting on user experience and social media design and
development,

Studio Magnolia

.

Note: Want to add some source code? Type <pre><code> before it and </code></pre> after it.

Find out more

Like

21 people like this.

Sign Up

to see what your friends like.