JavaScript Developers

February 25, 2008

Adobe AIR Tutorial for HTML / JavaScript Developers

I spent a some time this weekend preparing for the Adobe AIR & Flex 3 Launch Event at my ColdFusion user group. One thing I wanted to show people was how to build a simple Adobe AIR Desktop Application using HTML & JavaScript.

I found the AIR Platform to be both powerful, and very easy to develop with. You really just have to spend a few minutes to see how easy it is!

I mean no disrespect to Flash, and Flex but the single most appealing capability of Adobe AIR is that you can build desktop applications in JavaScript and HTML. Two languages that nearly everyone reading this blog has undoubtedly used, and is probably quite good at already.

Adobe AIR also has an embedded database SQLite, which is an SQL92 & ACID compliant database engine with support for storing databases of up to 1TB. You can use this embedded database in your AIR Apps, and send SQL queries to it using JavaScript!

The learning curve for building an Air Application if you already know JavaScript and HTML is quite small. Run through this quick tutorial and you will be unstoppable!

Step 1 - Install Adobe AIR & the Adobe AIR SDK

If you haven't done so already, head over to Adobe to download and install the Adobe AIR Runtime, and the Adobe AIR SDK.

When you install the Adobe AIR SDK, you will want to add it's bin/ directory to your environment path.

Step 2 - Create Some Directories

Next we need to create some directories for our code, create the following directories:

/appname/
/appname/source/
/appname/source/icons/
/appname/build/

Step 3 - Create an Application Descriptor

Your application descriptor is an XML file that sets some properties for your application.

Let's call this file application.xml and place it in /appname/source/

<application xmlns="http://ns.adobe.com/air/application/1.0">
  <id>com.example.appname </id>
  <version>1.0 </version>
  <filename>AppName </filename>
  <initialWindow>
    <content>index.html </content>
    <visible>true </visible>
    <width>600</width>
    <height>600</height>
  </initialWindow>
  <icon>
    <image16x16>icons/appname-16.png</image16x16>
    <image32x32>icons/appname-32.png</image32x32>
    <image48x48>icons/appname-48.png</image48x48>
    <image128x128>icons/appname-128.png</image128x128>
  </icon>
</application>

It should be pretty obvious what to put for all the values, the icon values will be used as your application icon, you can omit these if you don't really want to create the PNG's, but it's kind of cool to see your own icons.

There are a lot more optional tags you can add, check out the templates/descriptor-template.xml file in the Air SDK.

Step 4 - Create your Application

The next step can be as detailed as you like, but really all you need to do is create an index.html file.

<html>
<head>
  <title>My Window Title</title>
</head>
<body>
  <h1>Hello World</h1>
</body>
</html>

If you want to add CSS, JavaScript, or images, you can create subfolders in your /appname/source/ folder for those assets, and use them just like you would in a normal web application.

Step 5 - Test your Application

You are probably getting pretty anxious to test your new Adobe AIR application, to do that it's pretty simple.

Open up a command prompt, or shell and navigate to /appname/source/ then run the following command:

adl application.xml

If all goes well your application should launch. There is a good chance however that you ignored my suggestion to add the airsdk/bin directory to your system environment path, in which case you got something like adl not found. If that is the case then simply append the full path to your SDK bin to the command, for example:

c:\air\bin\adl application.xml

Step 6 - Package Your Application

Once you have tested your application, or are ready to show your friends, or just want see how your icon looks in the Dock you are ready to packing your Air Application.

This step will be a bit cumbersome the first time because all Adobe Air application code must be digitally signed. Code signing, is a bit like using SSL, you get a certificate from a trusted source, and then people will know who wrote the application. This is important because the Adobe AIR platform allows you to access local files, and do all sorts of things that could really screw things up.

Chances are you really just want to show your new application to a few people, and not the entire world. If that's the case then you can easily create a self signed certificate. It is important that the Certificate is not placed in your source directory, so let's place it in the root of our application: /appname/

adt -certificate -cn SelfSign -ou Dev -o "Example" -c US 2048-RSA cert.pfx password

Now once we have a code signing certificate we can create an Air application Package. Change directories back into source and run:

adt -package -storetype pkcs12 -keystore ../cert.pfx ../build/AirTest.air application.xml .

You should now have an AppName.air file that you can send to your friends, or simply run it on your own computer.

References

Permalink | Add Comment |

add to del.icio.us | Tags: adobe, air, html, javascript, ajax

Related Entries

Geolocation API for Adobe AIR? - October 8, 2008
Ext CFC - December 12, 2007
GoogleBot Runs AJAX? - December 6, 2006
Howto Build Server Side AJAX Suggestions with script.aculo.us - December 6, 2006
Uploading Files Like GMail Attachments - October 6, 2006

11 people found this page useful, what do you think?

Trackbacks

Trackback Address: 667/7F9216591967F2294CABE187534330E4

101 Adobe AIR Resources to Add to Your Toolbelt of Awesomeness Jason Bartholme's Blog

Comments

On 02/25/2008 at 5:12:26 PM MST rob wrote:

Straight and to the point. Thank you much, this was just was I was looking for.

On 02/26/2008 at 10:17:04 AM MST Pete Freitag wrote:

You're Welcome Rob.

On 02/26/2008 at 11:10:55 AM MST WrongWay wrote:

Step 7. realize AIR is not being release for linux, regardless of adobe promises to support cross platform computing.

On 02/26/2008 at 11:58:28 AM MST Pete Freitag wrote:

@WrongWay What leads you to think AIR won't be released on linux? They are currently accepting beta tests for AIR on linux, email: helptesterairlinux@adobe.com

See http://www.beedigital.net/blog/?p=1863 for more info.

On 03/16/2008 at 7:43:08 PM MST Jason Salas wrote:

hi pete,

outstanding example! thanks much. i had a little bit of a snag when trying to replicate it, as the ADT tool was saying the paths to the PNGs was "unsupported format".

however, i got it to run eventually by commenting out the ICON node in application.xml and running the command-line tools.

baby steps. i'll figure it out. :-)

On 03/29/2008 at 2:35:56 AM MST George wrote:

Great tutorial - just what is needed! Simplicity above all, unfortunately adobe sites are not that simple most of the times.

I have followed all the steps, my application launches successfully. I have also issued a temp certificate as per your instructions, but when I try to package I get a message "could not load keystore file (password may be incorrect)". I guess the password is the one that is set in the certificate generation step, right? Still this doesn't work ...

any advice?

thanks!

On 04/02/2008 at 2:42:00 AM MST ramamoorthy wrote:

hi i want to know how to config and use ajax in eclipse environment

On 04/02/2008 at 3:34:38 PM MST Robert Nasiadek wrote:

Thanks for the tutorial. I've just successfully created a simple application under Ubuntu and it seems that Adobe does a good job moving towards Linux. I hope they'll keep it up.

On 05/07/2008 at 6:03:07 AM MDT naed wrote:

Hi,

Do you have any example to use database with html, in air.?

On 06/29/2008 at 9:52:35 PM MDT Marsza wrote:

me too !!

On 08/28/2008 at 3:39:24 AM MDT alex wrote:

I also have this...

On 10/06/2008 at 7:12:07 PM MDT ad wrote:

Just a quick comment. In case you encounter the error message "application descriptor not found", make sure your current working directory is that of the application when you issue the adl (c:\...path\adl) command.