RSS Feed
Download our iPhone app
Browse DevX
Sign up for e-mail newsletters from DevX


Crash Course in Next-Gen RIA: AIR, Silverlight, and JavaFX : Page 3

Get a hands-on introduction to the newest RIA technologies from Adobe, Microsoft, and Sun by building demo applications using AIR (Flex), Silverlight (CLR), and JavaFX.

AIR Stopwatch
Adobe AIR is a framework that allows developers to create desktop applications using web technologies (namely Flex and DHTML). AIR applications behave like normal desktop applications and have access to some native APIs and a local file system. The AIR framework also handles installation and uninstallation, access control, and automatic updates.

AIR currently is supported on Windows and Mac OS X. Adobe has promised Linux support after the final release.

The stopwatch application requires vector graphics so this example uses Adobe Flex rather than DHTML.

Setting Up the Development Environment
Follow these steps to set up the development environment for Adobe AIR:

  1. Install Adobe AIR beta runtime.
  2. Download Adobe Flex Builder 3 beta. Flex Builder 3 comes with built-in AIR support.

To create a new AIR project, launch Flex Builder and select New->AIR Project from the menu. Enter "stopwatch" as the project name. Click "Next" and then "Finish."

Building the UI from the Original Artwork
You can run the empty project by pressing Ctrl-F11. You should see something like Figure 5. By default AIR applications use system chrome.

Click to enlarge

Figure 5. Empty AIR Application

Start by downloading the accompanying AIR code download and extracting it into the "assets" subfolder within your project folder. Unlike Silverlight, Flex supports a variety of vector formats including SVG so you don't need to perform any conversion. Replace the default code in stopwatch.mxml with the code in Listing 5. The embed function allows you to import a resource and include it at build time.

Press Ctrl-F11 to run the code and make sure that the stopwatch UI shows up correctly. This is what I like about Flex: once you have the artwork, turning it into an application GUI is very easy. Flex Builder features a visual UI editor and many standard UI controls, but certain elements (such as SVG graphics) are not visible in the editor's default mode. (see Figure 6).

Click to enlarge

Figure 6. Flex Visual UI Editor

The stopwatch.mxml file sets the background color to transparent, but you can go even further with the display and make the stopwatch appear without the standard window frame. To do so, open stopwatch-app.xml, find the <rootContent> tag, and change the systemChrome attribute value to none and the transparent attribute value to true. Run the application again to see the effect. Use Alt-F4 to close the application.

Now it's time to add some code.

Implementing the Animation
Use the <mx:Script> tag to add ActionScript code inline to the MXML markup for animation, as shown in Listing 6.

The initApp() function should be called when the application is initialized. The _tick element is a timer event handler and subtractTime is a simplified time intervals math implementation.

Add the creationComplete attribute to the <mx:Application> tag to set up the callback function, which will be called when the application is started:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
width="500" height="350"
creationComplete = "initApp()">

Flex doesn't provide built-in functions for text formatting and time interval manipulations so you have to implement them manually (see Listing 6).

Next, test the application to make sure it's working.

Adding the Interactivity
It would be nice to make the gadget "draggable" and make it close when a user double-clicks the Clear button. By default the <mx:Image> element doesn't handle double clicks, so first you should add a doubleClickEnabled attribute to the image (representing the Clear button) and set its value to true. Then you add the event handlers:

private function onClearDbl(evt:MouseEvent):void
private function onMouseDown(evt:MouseEvent):void

The close() method terminates the application, and startMove() adds support for dragging the interface.

Next, you assign the event handlers within the appInit() function:


The addEventListener() method is used to assign an event handler. The same event can have multiple handlers.

Now the user can drag the application around the screen with a mouse and close it by double clicking the Clear button. To complete the application, add two more MOUSE_DOWN handlers for the Start/Stop and Clear buttons, respectively:

private function onStartStop(evt:MouseEvent):void
    _is_running = !_is_running;
    if (_is_running)
        _startTime = subtractTime(new Date(), _stopTime);
        _stopTime = subtractTime(new Date(), _startTime);
private function onClear(evt:MouseEvent):void
    _startTime = new Date();
    _stopTime = subtractTime(_startTime, _startTime);

Test the application again to make sure everything is working correctly. You might want to remove _tickTimer.start() from the initApp() function to prevent the stopwatch from starting the count automatically.

The first step in deploying an AIR application is to export a project as an AIR Package. Use the menu Export… command and then select Adobe AIR-> Adobe AIR Package. Click "Next" and "Finish". This will create a stopwatch.air package, which is basically just a zipped folder containing the compiled application (stopwatch.swf) and the AIR configuration file (stopwatch-app.xml). Double-clicking the file will activate the AIR runtime, which will install the application. You can configure different properties of the application including name, publisher, and application icons by editing stopwatch-app.xml.

While you can deploy the .air package as is, Adobe offers an even better solution with its application badges. A badge is a small Flash clip embedded into the web page, which checks for the presence of an AIR runtime and if necessary downloads and installs it simultaneously with the installation of your application.

To use the badge, take badge.swf from the AIR SDK, embed it into the web page, and pass it several parameters including application name, .air package URL, framework version, and optional thumbnail image location. Adobe's AIR samples gallery has multiple examples, and this page features a stopwatch demo deployed with a badge.

Web Technologies for Desktop Development
Adobe AIR brings web technologies to desktop development very efficiently. Building rich and cross-platform user interfaces has always been a difficult task and it looks like Adobe finally nailed it. Thanks to Flex support for the SVG format, it was extremely easy to put together a UI for the example application—and the built-in support for transparent windows is amazing.

The most complex issue of any new platform is the chicken-and-egg paradox of whether platform adoption precedes runtime adoption or vice versa. AIR addresses this issue with its badge-driven deployment. This process, whether the user has the AIR runtime or not, is as good a solution as you can expect.

On the downside, ActionScript is not nearly as powerful as .NET or Java. However, as it gets more popular, it should improve.

Close Icon
Thanks for your registration, follow us on our social networks to keep up-to-date