Web Development

Adobe AIR brings the Web to the desktop

Adobe Integrated Runtime (AIR) is a cross-operating system runtime that allows developers to leverage existing Web development skills to build and deploy rich Web applications to the desktop.

One of the points of my article about the qooxdoo JavaScript library was the concept of building Web applications with a rich user interface that mimics desktop applications. This is good if you want to mimic the look and feel of a desktop application within a Web page. On the flip side is bringing the Web to the desktop - that is, leveraging Web development skills on the desktop. The Adobe Labs has released the Adobe Integrated Runtime (AIR), which provides this functionality.

Adobe describes AIR as a cross-operating system runtime that allows developers to leverage existing Web development skills to build and deploy rich Web applications to the desktop. It provides support for Flash, Flex, HTML, JavaScript, and AJAX.

Getting it

To get started with AIR development, you must install the AIR runtime on your computer. Once it is installed, you may download sample applications to see AIR in action and possibly take a peek under the covers at its code.

There are two downloads relevant to AIR development:

  • Runtime provides the runtime environment for running AIR applications. Downloads are available for both Windows and Macintosh operating systems.
  • Software Development Kit (SDK) provides everything necessary to build AIR applications. This includes templates, Adobe AIR APIs, and debugger and developer tools. The SDK is available for both Windows and Macintosh platforms. The command line debugger and developer tools require a Java installation (JRE or JDK version 1.4.2 or newer).

Additional downloads are available that allow you to build AIR applications within specific Web development tools:

  • Adobe Flex Builder 3: Includes support for building Flex applications on Adobe AIR from within Flex Builder.
  • Adobe Flex SDK: Allows you to build AIR applications via Flex.
  • Adobe AIR Extension for Dreamweaver CS3: Adds support for building AIR applications within Dreamweaver CS3.
  • Adobe AIR Extension for Flash CS3 Professional: Allows you to build AIR applications with Flash CS3 Professional.

In addition, a plug-in is available for the Aptana IDE. Once the runtime is installed, you can easily install and run AIR applications, and the SDK allows you to build AIR applications.

AIR HTML application basics

This article focuses on using standard Web technologies HTML and JavaScript to build an AIR application. AIR uses WebKit to parse, layout, and render HTML and JavaScript content. The AIR API provides host classes and objects for providing desktop applications functionality like reading and writing files and managing windows. In addition, an HTML-based AIR application has the Flash API available to it.

An important distinction of HTML-based AIR applications is that the use of the AIR API is optional. That is, you may choose to use only standard HTML and JavaScript to build an application and run it via the AIR runtime. The runtime includes an HTML renderer and JavaScript interpreter in addition to other features.

There are at least two files in every HTML-based AIR application. The first is an application descriptor file that specifies the application metadata via XML. The second file is a top-level HTML page. Also, AIR provides a JavaScript file (AIRAliases.js) that provides aliases for AIR API classes. More robust applications will include more files like Web pages and JavaScript code.

The AIR SDK includes plenty of sample code for getting a feel for the platform. The following sample code is included in the documentation to get you going with a first, simple application (the ever present Hello World demo).

The following descriptor file provides the details of the application. It references the AIR namespace and assigns a name to the application (Hello World!). The initalWindow element defines application startup behavior as an HTML file (Hello.html) is loaded.

<?xml version="1.0" encoding="UTF-8"?>

<application xmlns="http://ns.adobe.com/air/application/1.0.M5"

appId="sample.HelloWorld" version="0.1">

<name>Hello World</name>

<initialWindow>

<content>Hello.html</content>

<visible>true</visible>

</initialWindow>

</application>

The HTML file (Hello.html) defines the user interface displayed when the application is launched via the AIR runtime. First, the JavaScript aliases file is included to make it easier to work with AIR classes. Next, the JavaScript appLoad function defines what happens when the application loads (function called by onLoad event of page).

The JavaScript function loads data from a simple text file via AJAX and places the text from the file in the HTML element with the ID called replace.

<html><head>

<title>Hello World</title>

<script src="AIRAliases.js" mce_src="AIRAliases.js" type="text/javascript"></script>

<script type="text/javascript">

function appLoad(){

xmlhttp = new XMLHttpRequest();

xmlhttp.open("GET", "request.txt",true);

xmlhttp.onreadystatechange=function() {

if (xmlhttp.readyState==4) {

document.getElementById('replace').innerHTML = xmlhttp.responseText;

} }

xmlhttp.send(null)

</script>

</head>

<body onLoad="appLoad();">

<h1>AIR</h1>

<div id="replace">

<p>Placeholder</p>

</div>

</body>

</html>

Once the application is developed, the AIR command line tools can be used to package and distribute it. The AIR Developer Tool (ADT) creates installation packages, but it requires a digital certificate.

A simple approach

The AIR platform offers a great approach to building desktop applications. I love the fact that it allows me to use existing skills like HTML and JavaScript.

The AIR API offers additional functionality for building client interfaces. The API is JavaScript, so it is easily used within your application. While the qooxdoo approach is the exact opposite, I find the AIR model much more intuitive and easy-to-use. Everything necessary to get started with AIR is freely available online.

Leverage existing skills

A key point of AIR is the ability to port Web development skills to desktop development. Also, using Web technologies like HTML and Flash deliver a familiar interface to users, and developers do not have to spend time learning a new technology such as Microsoft .NET for thick client development. Another strong point is the cross-platform support that is not readily available in other development platforms. If you are interested in desktop applications, take a look at AIR.

The Web browser has evolved into the de facto standard application interface these days, but client applications are still necessary. Have you been faced with developing applications for the desktop? Have you taken a look at AIR? Let me know by posting to the article discussion.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.

---------------------------------------------------------------------------------------

Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!

About

Tony Patton has worn many hats over his 15+ years in the IT industry while witnessing many technologies come and go. He currently focuses on .NET and Web Development while trying to grasp the many facets of supporting such technologies in a productio...

6 comments
jp-mattenet
jp-mattenet

I'm not a good at reading this long licenses.. But it's not clear for me that we can develop and distribute the applications without a license :-( any idea?

garcia
garcia

I just wanted to clarify this. If you actually do this for a leaving, being aware of the distinction is important. I think AIR is great but if you want to start doing real projects for real clients be aware that you have to budget for software problems and possible changes in the API.

onefocus99
onefocus99

they don't stay long in Beta mode. They have a lot of programmers and connections. I would watch this closely as this could be the way of the future. Others even though they might be good don't have world coverage with a name and they fade away.

djbeall@yahoo.com
djbeall@yahoo.com

I have been developing desktop widgets (Yahoo) and gadgets (Google, MS Vista) which use AJAX and run on free environments and they are very cool and surprisingly powerful. You can even do light OOP-like code in JavaScript by placing sub functions inside a parent function using the this.function() syntax. The flash integration is nice, but the best thing will be the DTKs and libraries people will put together for this that will make developing much quicker. I don't know how this will pass the widget market already established by Yahoo and Google, but if Adobe can do it and provide more robust programming then this could be a big homerun not only for them but for all of us web application developers.

JerryDFarrell
JerryDFarrell

This will be interesting since Sun is doing the same thing with JavaFX and Web Start. It will be interesting to see if Adobe will include support for JavaFX or exclude it. Also how will the free tools like NetBeans and Eclipse compete as they add support for JavaFX.

TechExec2
TechExec2

. It would be pretty foolish to develop applications on a pre-GA beta release platform without planning for some unplanned issues. This is normal stuff with a beta platform. Adobe AIR is in its second beta release. Adobe is pretty good about this kind of thing. It is in Adobe's best interest to carefully look out for the interests of their customers. Adobe is not like Microsoft who has us all by the short hairs, and arrogantly reminds us of that with every careless and stupid thing they do. There is nothing wrong with Microsoft improving the platform. The problem is, Microsoft always does it in such a way that customers reminded that their applications will break less often with these platform changes if they buy them from Microsoft instead of ISV "partners". This is no accident. Microsoft directly competes with its own partners a lot more often than any other platform vendor (pretty much every single time). Hooking up with a "partner" that constantly bad mouths you behind your back, makes you look bad, and tries to kill you is plain stupid. Adobe is a much much better partner in this regard.

Editor's Picks