GWT in AIR

You may recall a demo I linked to a few months ago in a past article. It is a Google Web Toolkit (GWT) based application - which means it is completely HTML, JavaScript, and CSS based on the front-end - for managing configurations on a CoovaAP device. Using JSON and RPC style callbacks, the application fetches the router configuration and the user interface screens to edit it. It can then push a new configurations to the same small light-weight CGI application, in this case, written in C. The only real bummer about using GWT is that, although very good, it doesn’t necessarily support all browsers (Konqueror, from what I hear) - and the generated application files, even when compressed, can be a bit large for the smallest of devices (about 400K).

I figured the solution to those problems would be to use Adobe Apollo - now named AIR for Adobe Integrated Runtime. AIR is a framework that allows you to build desktop applications using web technologies. I thought it should be easy enough to use with GWT. And it was! With a few modifications to the GWT code to detect if it is using AIR and to allow configuring of the RPC host, the demo is now available as a desktop application!

Of course, you have to install AIR first. This is required on any desktop running the application. For developers, there is also the AIR SDK which is needed to create an AIR package. AIR only runs on Windows and Mac - hopefully they will eventually support Linux! Setting up the AIR SDK, at least on a Mac, was simple. Just unpack the SDK into any directory and put the bin directory in your path (in your Terminal window, use export PATH=$PATH:/path/to/AIRSDK/bin added to your ~/.profile).

To begin, I started with an example. I then proceeded to setup the icons - [img_assist|nid=329|title=|desc=|link=none|align=right|width=32|height=32]very important - It has to look good! :) I created the suggested 4 (128px, 48px, 32px, and 16px square) to replace the Adobe defaults. Next, created the application.xml file following their example.

 <?xml version="1.0" encoding="UTF-8"?>
 <application appId="com.coova.CoovaAP" version="0.0" 
    xmlns="http://ns.adobe.com/air/application/1.0.M4">
        <name>CoovaAP</name>
        <installFolder>Adobe/AIR/CoovaAP</installFolder>
        <description>CoovaAP Router Administration</description>
        <rootContent systemChrome="standard" transparent="false" 
                      visible="true" width="800" height="600">
                www/com.coova.ewt.Home/AIR.html
        </rootContent>
        <icon>
                <image16x16>icons/i16.png</image16x16>
                <image32x32>icons/i32.png</image32x32>
                <image48x48>icons/i48.png</image48x48>
                <image128x128>icons/i128.png</image128x128>
        </icon>
 </application>

Easy enough. But, now I did have to make some modifications to my GWT application. It was designed to only access the server it was loaded from for RPC calls (required by browsers for security reasons). However, with AIR, you do not have these browser limitations. To enable the application to access and configure any device, I adding a GWT login DialogBox - a pop-up asking for the hostname, port, etc - and the following bit of native code to check if it is running in AIR:

 public static native boolean onAIR() /*-{
     return ($wnd.air != null);
 }-*/;

It does a simple check to see if it has the air object in the JavaScript window. The air object is defined in AIR.html - which is just a copy of my standard Home.html for the application. But, this one includes the AIRAliases.js file contained in the Adobe examples (and added to my GWT application’s public source directory). It, among other things, does the following:

In AIRAliases.js:

 var air; if (!air) air = {};

In AIR.html:

 <script src="AIRAliases.js" />

Based on the result of the native method in the GWT code, the pop-up dialog prompts for a RPC hostname and port, as shown below configured to use the demo router (username and password not used in demo).

[img_assist

nid=323

title=

desc=

link=none

align=center

width=466

height=326]

Other than the new pop-up dialog and the check for AIR, I had to make no other modifications to my GWT application. After rebuilding my GWT application, with www/com.coova.ewt.Home being the output directory in my case, I built the final CoovaAP.air file using the SDK and the command:

adt -package CoovaAP.air application.xml www icons

This produces a completely self-contained desktop version of the GWT web application to work with any remote device, which now only requires the RPC back-end (the CGI) instead of a complete user interface.