Building a desktop application with Ext, AIR, Aptana and Red BullAdobe 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 AptanaWith 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 applicationCoding 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 applicationCan Aptana make this any easier?
Simple TasksI 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.