Creating simple Adobe Air App

Submitted by timmillwood on Mon, 08/17/2009 - 08:52

When I started work for Mark Boulton Design a few months back one of my first projects was an Adobe Air app. The client wanted an app for internal use which would post and display data.

I had never written an Adobe Air app before, but as a web developer it’s the obvious choice. Adobe Air apps can be written in three different ways, Javascript, Flex or Flash. I hate flash, don’t know and Flex to thought I would give the Javascript option a go.

Adobe offer a lot of really good documentation on writing Air apps, and an SDK to create the install bundle. The SDK comes in a few different versions, an Eclipse plugin, a Dreamweaver plugin or a command line interface (CLI). I have never got on with Eclipse and don’t have Dreamweaver, so opted for the CLI. Adobe brand the CLI option in the documentation as “the Air SDK”. Don’t be scared of this option, there are only two simple commands which you can copy and paste from later in this post.

Working with the Air SDK

1. Download the Air SDK from: http://www.adobe.com/products/air/tools/ajax/#section-1
2. Copy it into somewhere you can remember. On my Mac I put it in /Applications/airsdk/.

There are two main applications bundled with the SDK, AIR Debug Launcher (ADL) and the AIR Developer Tool (ADT). ADL allows you to quickly launch a test version of your app, you can run this with the command /Applications/airsdk/bin/adl. ADT creates your Air install file using the command /Applications/airsdk/bin/adt.

First application

There are only two files needed to create an application. An XML application descriptor file and a HTML content file.

Creating helloworld.air

1. Create a folder called “helloworld” for your application. I have put this on my desktop.
2. Create a file called application.xml using the following code.

<?xml version="1.0" encoding="utf-8" ?>
<application xmlns="http://ns.adobe.com/air/application/1.5">
    <id>hello.world</id>
    <version>1.0</version>
    <filename>HelloWorld</filename>
    <name>Hello World</name>
    <description>
        A simple example App.
    </description>
    <copyright>Copyright 2009 Tim Millwood</copyright>
    <initialWindow>
        <title>Hello World</title>
        <content>
            index.html
        </content>
        <systemChrome>standard</systemChrome>
        <transparent>false</transparent>
        <visible>true</visible>
        <minimizable>true</minimizable>
        <maximizable>true</maximizable>
        <resizable>true</resizable>
        <width>400</width>
        <height>600</height>
        <minSize>320 240</minSize>
        <maxSize>1280 960</maxSize>
    </initialWindow> 
    <installFolder>HelloWorld</installFolder>
    <programMenuFolder>HelloWorld</programMenuFolder>
    <customUpdateUI>false</customUpdateUI>
    <allowBrowserInvocation>false</allowBrowserInvocation>
</application>

3. Create a file called index.html using the following code.

<html> 
<head> 
    <title>Hello World</title> 
</head> 
<body> 
    <h1>Hello World</h1> 
</body> 
</html>

4. Use the following command in your terminal to launch the application using ADL.
/Applications/airsdk/bin/adl ~/Desktop/helloworld/application.xml

You should now see a running application that displays “Hello World”. As a web developer you will be able to use any of the HTML and Javascript you know and love to create a powerful application. You are free to use any of the Javascript libraries such as jQuery just as you usually would. One thing Air does have though is it’s own libraries. In your SDK folder you’ll find a file called AIRAliases.js, this is the Air library which allows you to do many things you can’t normally do with Javascript. I have used this to make HTTP POST requests, and upload files.

The final thing you will need to do it create your Air install file.
1. Using terminal navigate to your helloworld folder.
cd ~/Desktop/helloworld
2. Create a certificate using the following command.
/Applications/airsdk/bin/adt -certificate -cn SelfSigned 1024-RSA sampleCert.pfx samplePassword
sampleCert.pfx can be replaced with a certificate name if your choice. SamplePassword can be replaced with any password you like.
3. Create your install file using the following command.
/Applications/airsdk/bin/adt -package -storetype pkcs12 -keystore sampleCert.pfx HelloWorld.air application.xml index.html
Notice the order of the file names, certificate name, Air install file name, XML descriptor name, then the HTML content file name. After this you can add the file names of any other files you are using, such as Javascript files, jQuery or Air libraries you are using, icons, images css etc.

The Main documentation I used to get started and to write this post was from http://help.adobe.com/en_US/AIR/1.5/devappshtml/WS5b3ccc516d4fbf351e63e3.... A more complex Air tutorial using HTTP POST request for file uploads is at http://www.sitepoint.com/article/learn-adobe-air-part-3/.

My next blog post will cover working with the Drupal services module to display Drupal nodes and views in your App.