With Web 2.0 being the buzzword amongst the development community, developers

are continuously churning out innovative and more interactive applications for

the web as well as the desktop. Browser plug-ins such as Flash and the recently

launched MS Silverlight, have given a platform to web developers for rendering

interactive applications over the Web. We have Java or .NET for delivering

applications for desktops but none of these could be used by developers whose

skills are restricted to just HTML, JavaScript or Flash.

In March '07, Adobe introduced a technology called AIR (Adobe Integrated

Runtime) that could be used by web developers to create Rich Internet

Applications (RIA) for the desktop. It is a collection of application resources

installed on the computer system that is used to execute other applications. As

AIR is a cross platform runtime, application developers do not have to worry

about platform specific programming. The runtime provides a consistent

cross-operating system platform and framework for deploying applications,

eliminating cross-OS testing. Instead of developing applications catering to a

specific operating system, the developer concentrates on his application

programming only. The installed runtime itself has a common application data

because of which the developed applications are lightweight and smaller in size.

Adobe AIR, which currently is in public beta version 2, was formerly code-named

Apollo. Once this AIR runtime is installed, it provides support for building

both HTML and Flash based applications. Adobe AIR presently supports Windows and

Mac, but later this year a version for Linux is also expected to be released.

With Adobe AIR web developers can extend their Flash, Flex, HTML, and Ajax-based

applications to the desktop, without having to learn traditional desktop

development technologies like Java or .NET.

Apps for AIR



Applications that are developed for AIR consist mostly of HTML or Flash SWF

files. AIR provides a container for running these files and also provides

features such as local file-system access, which would not have been available

if these applications were run from a browser. Webkit, the same engine that

powers Safari web-browser, is used to render HTML documents used for the

application. For launching the application in AIR, a descriptor file is needed,

which is an XML file that contains specifications and the file information that

AIR has to read and load onto the AIR container. The application that is

developed is packaged and distributed as a single-file installer, known as an

AIR file (.air). You'll need to install the AIR runtime environment on a system

to run .air files on it.

Getting started



With this month's PCQ Professional CD, you'll find the Adobe AIR runtime and

the AIR SDK. First install the runtime using file air_b2_win.exe and then

extract the AIR SDK from zip file air_b2_win_sdk.zip. Once you've extracted the

SDK on your root drive and named the folder as air_sdk, you need to set the

system environment path for the command-line tools in bin folder. Open System

properties and through Advanced tab select the Environment variables option.

Under System Variables append “.;/bin” to the PATH entry. The two

tools that are located in sdk's bin directory are ADL and ADT. ADL or AIR Debug

Launcher is used to test the developed application and also provides error

messages to developers, whereas ADT is a packaging tool, used to package the

developed application and distribute it as an installer file. Once the runtime

has been installed and the SDK environment variables configured, we can start

developing our first AIR application.

Add AIR SDK directory to the PATH entry in system variables to execute AIR's command line tools from anywhere

First AIR application



Through this demo application we shall try to get familiar with the steps

needed to start developing rich Internet apps for the AIR runtime environment.

We shall use HTML and JavaScript for this demo app. We shall use scripting to

access AIR libraries to get access to the file system and also create a new

window. From the initial welcome window, we shall shift focus to a newly created

window where the user will be prompted to select a destination directory. This

will be done by using AIR's File I/O library through JavaScript.

For the application, we first need to create a directory where all files for

the app will be created and hosted. Let's assume this home directory to be C:/demoApp.

As discussed already, an XML descriptor file is important for the application.

So, we'll create that first. For this, open a text editor and add the following

code to it. Save the file as 'application.xml.'

version="1.0">


Try Adobe AIR





To get familiar with Adobe AIR.





main.html


true

This XML file contains the necessary information that is needed by AIR

runtime to execute the application. The application tag contains the attribute 'appId',

used to give a unique identity to the AIR application. The Name tag gives the

application a name that is displayed in the title bar of the application. For

this demo app, we'll get 'Try Adobe Air' as the app name in the title bar.

Lastly, the Tag Content specifies which file is to be opened up by AIR runtime

in Webkit browser for HTML files or in Flash for SWF files.

Now, let's create the main.html file. This will be the welcome page of the

application and will have a button that will pop-up another child-window

containing the file-system access code to select a directory. Secondly, we also

need the AIRAliases.js file. This file gives access to the Adobe AIR APIs. Copy

this file from framework folder under the AIR_SDK directory and paste that onto

the application directory, which in our case is C:/demo- App. The following code

is for main.html file that will be loaded onto the Webkit browser during the

execution by AIR.

In the application's installer, the title and description are picked from the application.xml file of the demoApp application

First Adobe AIR app.

In the above code, the window.open attribute in the script tag will initiate

a new window to pop-up. In this child window, we intend to prompt the user to

select a directory and the selected directory path will be printed on screen.

For any real app this code can then be upgraded to upload a file from the user's
system or to save a file stream to a given destination on a user's system. The
window.open attribute triggers a file called select.html to open up in a new
window. This select.html file will use an AIR API for accessing the user's
file-system. This API is air.File.DocumentDirectory. This is the reason we place

AIRAliases.js file within the application directory so that the files could have

access to the APIs. The following code for the script opens up a Directory

browser. The complete code can be found in the demoApp directory in the

PCQ_Professional CD.

After installing demoApp.air, the application will function as shown. In the background, the ADT command line can be seen that is used to package the installer

function doLoad( )



{


file = air.File.documentsDirectory;


file.addEventListener( air.Event.SELECT, doSelect );


document.getElementById( "btnSelect" ).


addEventListener( "click", doBrowse);


}

To check that the application code is functioning, we shall use ADL command.

For this, go to the application root directory in the system's console window

and by entering 'adl application.xml' we can test launch the application. If

there are any errors, they will get reported on the console. After testing we

can proceed with packaging the application using ADT



command.

Packaging with ADT



ADT is a command tool to package and create installers for AIR based
applications. It requires Java runtime, as it is primarily built using Java. All

AIR installation files must be signed; in fact, we can generate a self-signed

certificate using ADT for our application. Creating a certificate for the

application means that the file has not been tampered since it was created. Also

ADT creates a hash-key for the application due to which no two apps can have

same keys. Using the following command on the console, we should be able to

create self-signed certificate for our



demoApp application. And the last attribute is the password that is set for the
certificate.

adt —certificate —cn SelfSigned 1024-RSA demoCert.pfx

passDemo

To package and distribute the application, we have to use the adt -package

command. Here we specify the name of the installer file; in our case it is

demoApp.air. We also specify all the files that were in the application folder

so they can be added to the installer along with the XML descriptor file.

adt -package -certificate demoCert.pfx —password

passDemo demoApp.air application.xml AIRAliases.js main.html select.html

The above command will result in a demoApp.air installer file being created

in the application root directory. We can distribute this installer to be used

on any system that has AIR runtime installed on it. This installer file creates

the Startup Programs menu, desktop shortcut and copies the relevant files onto a

specified destination.

Conclusion



Adobe AIR has opened up an avenue for web developers to create applications and
also to package those applications on their own without the use of the

development tools such as Java or .NET. This allows web developers to not just

restrict their imagination to browser based apps but to foray into desktop

applications without having to learn any new programming skills. With SQLite

embedded database, file system access functionality, clipboard access, etc a web

developer can create apps meant to do a multitude of functions, not possible

with browser based apps.