Home › Blogs › bricemason's blog ›

Adobe AIR Series - Introduction

Enable the Subscriptions block here!

We're lucky to be web developers. The past few years have provided us with incredible advancements in the tools and technologies we work with. Enhanced user interfaces, asynchronous communication capabilities, data interchange formats, and the explosion of service-based web applications have contributed to not only an added interest in our work, but a rich, clean experience for our audience. These are all great things, but we can have so much more. This post kicks off a series on building applications using the Adobe AIR runtime, a technology that allows you to use your existing web development skills to produce desktop applications.

The Adobe AIR platform allows you to produce desktop applications using your web development skills such as Flex/ActionScript and traditional AJAX. Although still in beta, AIR has already been adopted by some of the more popular IDEs with extensions used to natively build and deploy. Since our goal is to produce AIR applications which incorporate the various AOL APIs, we'll be focusing on the AJAX development method. To start, you'll need two main ingredients:

After you've downloaded the AIR runtime and SDK for your platform, start off by installing the runtime by executing the installer, following the steps to install it to the location you desire. Next, extract the sdk. I've chosen the directory: C:\data\air\sdk\ on my Windows XP client. Your sdk directory should be similar to Figure 1 below.


Figure 1 - AIR SDK Root

Next, create a directory path projects/firstApp at the root of your AIR SDK directory. Here we're creating a projects repository for us to work in as well as configuring the project workspace for our first AIR project named firstApp.

At a minimum, your AIR application will consist of a root file, in this case an HTML file with some basic formatting which will serve as the user interface (see Listing 1). In addition to the index file, we'll need an application descriptor file which is used to describe various configuration options applied to the construction of your AIR application. For the purposes of this first exercise, we'll be using a bare minimum descriptor file as shown in Listing 2. Save both of these files to your <air_sdk_root>/projects/firstApp project directory. 

<html>
<head>
<title>Adobe AIR Series - Introduction</title>
</head>
<body>
   Hello AOL, from AIR!
</body>
</html>
Listing 1 - Root content file 
<?xml version="1.0" encoding="UTF-8"?>
<application appId="local.air" xmlns="http://ns.adobe.com/air/application/1.0.M5" version="0.1">
   <name>Adobe AIR Series - Introduction</name>
      <initialWindow>
         <content>index.html</content>
         <visible>true</visible>
      </initialWindow>
</application>
Listing 2 - Application descriptor file

You can see that the content file is very simple and familiar. The application descriptor file is also self-explanatory. We're simply setting a name for the application, telling AIR where it's content file is (relative to the descriptor file) and ensuring that the window is visible by default. There are of course more options available to you when crafting your descriptor file, check out the links at the end of this post for more information. Now that we have developed our content and described the application, our project directory should look similar to Figure 2 below. 

<air_sdk_root>
   +--- projects
          +--- firstApp
                  +--- index.html
                  +--- application.xml
Listing 3 - firstApp project directory

We've finished the construction of our first Adobe AIR application. The content is developed and we're ready to build for distribution. When building your application for distribution, you will need to perform some sort of certificate signing process. This can be in one of two ways:

  1. Use a certificate authority such as VeriSign. This will provide the assurance to the users of your application of when the application was modified as well as verification of the identity of the source (you).
  2. Self-sign a certificate. This also provides the assurance to users of when the application was modified. However, by not using a trusted third-party, the source is not verified.

Our example application will use the self-signing method. The certificate signing and building of our application is accomplished by using the Adobe Developer Tool (ADT). To create our certificate, open a commandline window and change directories to the bin folder under your AIR SDK root. Execute the command from Listing 3 to generate your certificate. 

adt -certificate -cn firstAppSelfSign 1024-RSA ../firstAppCert.pfx superSecret
Listing 4 - Generating a self-signed certificate

The command from Listing 4 breaks down as follows:

  • adt - Adobe Developer Tool
  • -certificate - Switch signifying a certificate job.
  • -cn firstAppSelfSign - Configuring the common name attached to the certificate
  • 1024-RSA - Key type, may also use 2048-RSA
  • ../firstAppCert.pfx - Path to the resting place of our generated certificate file. In this case, the root of our AIR SDK.
  • superSecret - Password attached to the certificate

Next, execute the command from Listing 5. 

adt -package -certificate ../firstAppCert.pfx -password superSecret 
../projects/firstApp/firstApp.air ../projects/firstApp/application.xml -C ../projects/firstApp index.html
Listing 5 - AIR application build command

The command from Listing 4 uses the same adt tool to produce the file distributable package. Basically, we are packaging and signing our application using the certificate we generated in the prior step. The output file of firstApp.air is specified in the command as well as the location of the descriptor XML file. The -C is used to change directories and include the content file index.html in the package.

Our final step is to execute the AIR file we built and install our application. Navigate to your <air_sdk_root>/projects/firstApp directory and double-click the firstApp.air file. You should see a prompt similar to Figure 2 below.


Figure 2 - AIR application installer

Notice in Figure 2 the warnings associated with the application originating from an unverified publisher. This is normal for a self-signed application, click Install. Accept the defaults as shown in Figure 3 and click Continue.


Figure 3 - Installation preferences

The application loads up and should look similar to Figure 4 below.


Figure 4 - Finished application

This was a very simple introduction to developing Adobe AIR applications. Although we haven't incorporated any AOL services yet, what we've accomplished in this tutorial was important and will carry us through to creating exciting new applications for our users. Check back next week as we extend this example on our way to creating interesting applications with Adobe AIR and the AOL APIs.

Introduction | Layouts, Styles, and Logic | Advanced Features | Truveo Sample Application

Resources

» Submitted by bricemason on November 9, 2007 - 10:55am.