Walk on AIR: Create a To-do List in Five Minutes

Finishing Touches

With our to-do application almost ready, we can now add the finishing touches and package it up into an .air file for distribution.

Tweaking Our Application Descriptor File

Here’s our current application.xml:

<?xml version="1.0" encoding="UTF-8"?>  
<application xmlns="http://ns.adobe.com/air/application/1.0">  
   <id>examples.sp.helloworld</id>  
   <filename>hello_World</filename>  
   <initialWindow>  
       <content>index.html</content>  
       <visible>true</visible>  
   </initialWindow>  
</application>

We could start by updating the Hello World data! Next, before we go to production, we should definitely add a version number, so that the runtime on the end user’s machine will be able to recognize updates. We can also add <name> and <description> tags with some useful info.

Also, our to-do list window is designed to be very narrow. We can restrict the width to, say, 200 pixels, via the <width> property node inside <initialWindow>. <height> works for restricting the window height as well; both tags are optional.

The manual page contains thorough documentation on all the available options. Here’s our updated configuration file:

<?xml version="1.0" encoding="UTF-8"?>  
<application xmlns="http://ns.adobe.com/air/application/1.0">  
   <id>examples.sp.todo</id>  
   <filename>TodoList</filename>  
   <version>1</version>  
   <name>SitePoint.com AIR Example: Todo List</name>  
   <description>This application helps you manage your pending tasks.</description>  
   <initialWindow>  
       <content>index.html</content>  
       <visible>true</visible>  
       <width>200</width>  
   </initialWindow>  
</application>

Packaging Our Application for Distribution

Alongside the ADL, the Adobe AIR SDK includes the AIR Developer Tool (ADT) utility to package AIR applications and generate certificates. AIR applications should be digitally signed—users will receive a warning when installing applications not properly signed or are not signed at all.

We’ll need to jump to command line to generate a certificate—so pull up a console window in the same folder as your AIR application and type the following:

adt -certificate -cn SelfSigned 1024-RSA testCert.pfx some_password

Substitute “some_password” with a password of your choice. After a few seconds, ADT should complete its certificate generation process and you should have a new testCert.pfx file in your application directory.

Next, use ADT to package the application into an .air file:

adt -package -storetype pkcs12 -keystore testCert.pfx TodoList.air application.xml index.html

This tells ADT to package your application, using the key file in testCert.pfx. In the line above, we’re instructing the ADT to package our entire application into a file named TodoList.air, and to include the files application.xml and index.html. Any other files you may need to include in your application (such as JavaScript, CSS, or the like) can be added to the end of this command.

As part of this process, you’ll be prompted for the password that we set for your new certificate file. Enter it, wait a moment, and a TodoList.air file should appear in the same directory as your project files.

The only task remaining is to test out your new AIR application! Double-click on the TodoList.air file to launch the AIR installer. The application will take a moment to install, and display the name of our application (as defined in application.xml) during the process. Finally, once the installation is complete, the application will launch. Ta da! Your first real AIR application is complete!

Further Reading

Adobe has prepared some invaluable resources on getting started with AIR. If you’re interested in exploring the area further, head over to their developer center, where they’ve got AIR HTML tutorials, a JavaScript Language Reference for the AIR APIs, and a complete manual on building AIR applications with HTML and AJAX.

You should also get set up with an IDE; Aptana provides great AIR support, and even has a screencast on building applications using Aptana and AIR.

While this is a very simple application, I hope you can see the potential that Adobe AIR brings to the table. The grey area between web applications and desktop applications just got a whole lot greyer; I look forward to seeing what amazing creations you can fill it with!