Cephi Systems Software and Contract Services

Desktop Applications with JavaScript and Adobe AIR

Recently we have been covering some basic topics in JavaScript. Aside from creating dynamic content for the web and client-side / browser run applications, another thing you can do with JavaScript is to create desktop applications with Adobe AIR.

Adobe AIR is a cross-platform runtime environment from Adobe Systems for building desktop and mobile applications. AIR applications are executed in a runtime environment conceptually similar to Java’s JRE. In simple terms, this just means your application is run inside another program (the AIR runtime) that manages and runs the application and allows for the application to be run and behave consistently on any system that can run the AIR runtime.

As of 7/5/11 the following operating systems are supported by Adobe AIR:

• Microsoft Windows
• Mac OS X
• Apple iOS
• Android
• BlackBerry Tablet OS

Applications for AIR can be developed with a number of languages including Flash, Flex, ActionScript 3.0, or HTML/CSS/JavaScript/XML (Ajax). Currently, Mobile applications can not be developed via Ajax.

Adobe AIR applications can be built with Adobe’s Dreamweaver, Flash Builder, or Flash CS4. HTML editors and simple text editors can be used as well, in conjunction with Adobe’s free AIR SDK.

We used Dreamwever to build and compile the simple example app used in this tutorial. Dreamweaver is convenient to use in that it acts as a full-featured IDE allowing you to graphically design your user interfaces and test them in a built-in AIR simulator prior to compilation. Dreamweaver CS5 does require that a free AIR extension be downloaded before you can work with AIR however.

Compiling an app into a self-installing application executable file (.air file) is easy and provides for things like the use of digital signatures and linking application icons. To test the app simply use File/Preview in Browser/Preview in Adobe AIR. You compile the file via Site/Create AIR File. There are a few options that need to be set when doing this. The Help file is pretty good at describing what each item is for and there is an Adobe Tutorial link at the end of this article which walks your though the whole process.

If you don’t have Dreamwaver you can pick up the AIR SDK and use this example app in a text editor then compile it from the SDK command line. This approach will however require you to figure out how to do all this. There is a link for doing it this way with Adobe’s SDK tutorial at the end of this article.

Below is a simple app we created with HTML/CSS/JavaScript. It displays some text, has button and text field input fields, a little CSS for presentation, and one lonely JavaScript function.

Another cool thing about Dreamweaver and AIR is that this HTML file will also run just fine in a browser window (we only tested it with Chrome though). AIR allows reading and writing to files as well as working with local SQL databases. Web developers who may not know any Objective-C, C#, or Java can use AIR to make fairly sophisticated desktops apps in the language they are familiar with. Adobe even has an Adobe AIR Marketplace, were you can register as a developer and sell your apps.

Links:
Creating an app with the AIR SDK

Creating an app with Adobe Dreamweaver

Adobe Marketplace