by January 3, 2008 0 comments



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.

Direct Hit!

Applies To: Web developers
USP: Develop RIAs for the
desktop
Primary Link: http://labs.adobe .com/downloads/air.html
Keywords: Adobe AIR
On CD: \labs\Adobe AIR

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 “.;<sdk_path>/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.’

<?xml version="1.0" encoding="UTF-8"?>
<application xmlns="http://ns.adobe.com/air/application/1.0.M5" appId="FirstApp"
version="1.0">
<name>Try Adobe AIR</name>
<title>Demo App for PCQuest</title>
<description>To get familiar with Adobe AIR.</description>
<initialWindow>
<content>main.html</content>
<visible>true</visible>
</initialWindow>
</application>

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

<html>
<head>
<title>Main Window</title>
<script type="text/javascript" src="AIRAliases.js">
</script>
<script>
function doLoad( )
{
document.getElementById( "btnOpenNew" ).
addEventListener( "click", doNewWindow );
}
function doNewWindow( )
{
var elem = window.open( "select.html", null, "width = 300, height = 250");
}
</script>
</head>
<body onload="doLoad()">
<h1>First Adobe AIR app. </h1><br>
<input id="btnOpenNew" type="button" value="Open New Window" />
</body>
</html>

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.

No Comments so far

Jump into a conversation

No Comments Yet!

You can be the one to start a conversation.

<