Ext

Ext JS is an excellent framework for building web applications that have desktop like functionality in a web browser. But what if you could take your JavaScript powered application and run on the desktop like any other native application?

The launch of Adobe AIR (formerly Apollo) has made this not only a reality, but extremely easy. Armed with early access Ext 2.0, Aptana IDE and a 4 pack of Red Bull I set out to build my first AIR application.

Get Aptana

With the new Aptana AIR plugin creating an AIR app was easy, even for a newbie like me. First go to the Aptana site and get Aptana.

1. Go to Window->Preferences and check this setting and do an update to get the latest Ext support.

2. Follow the steps in the “Start Page” to get the AIR environment set up.

3. Click on File->New->Project, select AIR Project and follow the simple directions.

Coding the application

Coding the UI of the AIR application was indentical to coding any other Ext application. Within a short amount of time, I had my user interface set up and started abstracting pieces out to make them reusable. Here are some of the most noteworthy pieces that others building an AIR application with Ext may wish to take a look at.

Ext.air.MainWindow

AIR allows the application developer to remove the system window chrome and use their own. With the help of Kevin Hoyt of Adobe, we were able to replace the standard window chrome with Ext.Window. While some may not like it’s non-native look, I think the result looks great! I took this code and abstracted it out into a reusable class, CSS and images appropriately named Ext.air.MainWindow. The class can be used on any AIR native window, similar to how you would use an Ext.Viewport.

Ext.data.SqlDB and Google Gears support

The other challenge faced was when I wanted to run the same application in a browser. The most logical choice was to use Google Gears for the SQL DB. However, the APIs for AIR and Google Gears are nothing alike. In fact, AIR’s SQLite database API is 100% asynchronous via events while Gears API is all synchronous with results coming immediately on execution. So Ext.data.SqlDB was created to abstract both of these APIs into a single API to access both.

The other part of this database code that is worth talking about is Ext.data.SqlDB.Proxy. The Proxy class is a standard Ext data proxy, which makes using SQLite with Ext data stores painless. You can use them like you would use a store working over Ajax. They work “out of the box” with Grids, ComboBoxes and other components without worrying about whats going on in the background. The proxy also handles persisting any changes to the database automatically. So when you add, edit or remove a task in the task store, it handles data translations, events and callbacks to make sure the changes get persisted into the SQLite database.

Building the application

Can Aptana make this any easier?

Simple Tasks

I started out with low expectations - just making a simple application in AIR using Ext. But in less than a day of actual development time I was able to create a cool personal task list application that I will actually use (good bye 50 open Notepad windows!). Here’s a rundown of some of the things that it does:

• Task sorting and grouping - this was easy using the new Ext 2.0 GridView.
• Runs on the desktop with AIR or online with Google Gears with the only change being swapping out the database adapter JS file.
• Inline editing, adding and deleting of tasks with *automatic* persistence to local storage.
• Basic keyboard support.
• Intuitive and responsive interface.

The AIR application can be downloaded here. The online version which uses Google Gears can be viewed here.

While Adobe Air is still being refined, I have the feeling that this is the start of something great.

More Information

An AIR application is itself just a zip file. If you unpack that zip file, the full source code is available in the file.

Ext 2.0

The sample application referenced in this post uses an early version of Ext 2.0. Ext 2.0 is available to early access subscribers in the Ext SVN under branches/ext2.0 now! Grab your copy on our Download page.

Adobe AIR

The AIR runtime can be downloaded from http://labs.adobe.com/downloads/air.html. The AIR SDK can be downloaded from http://labs.adobe.com/downloads/airsdk.html.

Kevin Hoyt is a platform evangelist with Adobe. His blog is at http://blog.kevinhoyt.org/. He has a podcast interview from a training session in Vegas with Ext JS which you can listen to at http://blog.kevinhoyt.org/interviews/.

Aptana IDE

Aptana IDE is a free, open-source, cross-platform, JavaScript-focused development environment for building Ajax applications. They have great support for building AIR applications and their overall Ext development support is getting better with every release. More information about Aptana can be found on their website, http://aptana.com.

Red Bull

Red Bull is a must for any software development project. Red bull gives you wings to fly in AIR.