Building a desktop application with Ext, AIR, Aptana and Red Bull
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. :)
Hey Jack, looks great. Was poking around the source and wondered if you’d be making the Ext.air or Ext.SqlDB extensions public at any point?
Right now we are thinking they will be distributed in the examples folder for 2.0 (that’s where they are in SVN).
*drool*….. simply amazing….. I like the splitbar with the sleek collapse button…. I remember requesting it a long long time back….. congratulations on the new blog Jack…. and btw, there is an unconference going to happen in New Delhi, India in September…… I am working on a draft, when complete I will put it on the forums
Thanks Manu! I have been meaning to add the “mini” collapse mode (no title) for a while. It finally made 2.0. ;)
Hi Jack, you have amazing gift; thank you for sharing. Question: How do I get Ext 2.0?
Now this is what I call an awesome post!!
Thanks Jack.
Really Amazing, as always Jack…. Just in time for a mention in the presentation for TAE :P
Awesome work Jack! Very inspiring!
checkout my GearsORM(http://www.urielkatz.com/archive/detail/google-gears-orm/) for working with the database like objects
This little app looks pretty cool. EXT rocks, and AIR sounds pretty interesting.
However, just a little bug I encountered while playing with this task application: I can’t type numbers from my laptop keyboard, even with / without shift or caps lock. This is odd.
Amazing work.
Is anyone else having problems with the Google Gears version?
I extracted the .air file to a folder on my desktop, opened tasks.html and I get these error messages (via firebug):
window.runtime has no properties
[Break on this error] air.trace = window.runtime.trace;
AIRAliases.js (line 34)
Ext.data.GearsDB is not a constructor
[Break on this error] return new Ext.data.GearsDB(config);
Hi Jack,
Thanks for sharing this. I noticed that the AIR version and the on line version are hitting different local sqllite databases. Is it possible for them to use the same one, are is there some kind restriction that would prevent this?
Thanks, Gobo
How can I mix this incredible feature and technologies to my xajax architecture? I’ve an robust OOP architecture and I can’t see where can I include this.
Any suggest?
Thanks everyone. I have started using it daily and it seems to be holding up. :)
@joker101 – Remove the AIRAliases.js include.
@Gobo – If you can find the google database on your system, the AIR version could access it if supplied the full path. Some synchronization code would be cool though.
@Guillaume – That is odd. I checked on my laptop and it was ok. I will dig around and see if I can duplicate the problem.
Thanks for sharing this, :)
i cant stop drooling
sweet :o
impressive as always
Very nice Jack…What tool did you used to create the db file?
Ext,AIR and Aptana are awesome! Red Bull is dog crap!
the truth is out there
rodiniz, in the SqlDB class there is a function that will create the needed tables from Ext fields definitions.
Very slick… I was able to get this setup in Aptana, but when I run (either in dev or after exporting the package) I notice it is running in a native windows container. I haven’t had a chance to dissect all of the code, but does anyone have any idea what isn’t configured correctly? (This entire environment is new to me…)
Bill, check your AIR application.xml file. In particular, there are two attributes you are looking for: systemChrome=”none” transparent=”true”.
It’s a very nice App!
In both, functionality, and looks.
Though, there is still one thing that lets AIR down in my opinion…
The way you can just go to the Installation Dir’, and edit the Source files…
Excellent Work!!!
One extra thing and is perfect. How can we add the ability to delete Tasks?
One more time: Congratulations!!!
Ok sorry for that…I just saw u can delete it…
So stupid some times…
Psilos, the delete key works too.
Thanks Jack — of course your suggestion made it work!
Ran into a very interesting oddity with the AIR version. I tried to take a screenshot of my list and the AIR app does not show, everything underneath it does though. I’m betting it has something to do with the way the app is stripping away the normal window chrome.
Hi Jack,
You rock always.. Its nice and simple blog with great look. I always admired with your skills.
Cannot execute Air file. Says Application.xml missing?
Works. Updated to latest AIR.
just what we all need!
If you can develp web based apps… now you can develop desktop bassed apps… good stuff… Ext + Air = Happy Good Times : )
I’ve installed the application, and started to tried it out, I got this error though:
—————————
Simple Tasks: Simple Tasks.exe – Application Error
—————————
The instruction at “0x10140d66″ referenced memory at “0×00000004″. The memory could not be “read”.
Click on OK to terminate the program
—————————
OK
—————————
Is this happening elsewhere? The online application is working perfectly in IE7.
Some help would be appreciated :)
Great project
How to auto update the client code with the server side?
Awe-inspiring
jack,
nice one! never thought this was a possibility until today, awesome news! This will keep me busy for a very long time.
One little tiny bug i found… I accidentally ran the Simple Tasks application overnight ( forgot to turn the pc off ) and when i tried adding a new task, the date was from the day the task was first ran. So if I executed the app, say Sept 10, and its now sept 11, the date picker will box/outline sept 10 instead of sept 11 ;)
other than that I’m having a blast with the application!
Nothing work with lastest AIR and Lastest EXT 2.0.
[... @Gobo - If you can find the google database on your system, the AIR version could access it if supplied the full path. Some synchronization code would be cool though. ...]
Air use “tasks.db” and Google use “tasks.db#database” … localized in FireFox profile.
Work great … thanks Jack
A bug ?? Can’t type the ? character in AIR version (French win with AZERTY keyboard)
I can’t get it to install. It says it requires a version of AIR that is no longer supported. I spent an hour trying to figure out Aptana in OS X to get it to recompile it… It did, but the styles won’t show up. To be honet… I just want to use the app… Could I get a recompiled version for the lastest AIR?
@Philip: You can try to uninstall your Beta 2 version or AIR, install Beta 1, install the application and then install Beta 2 again. And you’ll have both the demo application and the latest version of AIR.
Is excellent idea, wow!! Great project!
Jack – are you planning on updating the app for the latest version of AIR?
Just so you know, if you read through the documentation in the AIR website, you’ll find that air.SQLConnection() event can take 1 argument(or more, not exactly sure on the number myself), this argument, in the source code, is called isSync:Boolean. If set to true, it will run exactly like google gears(when the .execute() command is sent, all other code processing waits for this function to finish), otherwise is it asynchronis, as you stated.
Just a little trick. I’ve got a database class I’ve been working on as of right now for AIR. I’ll put it out on Google Code here shortly.
Thee link to my google page is http://code.google.com/p/calendair/
Hi,
I tried to run this air application but air says this is packed with an older version of the air.
Can you update it?
Hi,
I tried to install this application but air gives an error
Which says:
This application requires a version of Adobe AIR which is no longer supported. Please contact the application author for an updated version.
Can you update it?
Thanks
Hey Jack,
This is an amazing foretaste of the possibilities that will be available to developers with the release of AIR. It’s quite jaw-dropping to see extremely complex frameworks like Ext that are so flexible and robust. Great work.
As some other posts mentioned, the .AIR file available for download here requires an older version of AIR. I have tried recompiling it with Aptana, but I can’t get it working properly. Could you update it please?
Cheers
Hey, i got the same error like Serkan Yersen .
an update to the current AIR version would be great, to get an impression of ext.
thx
kalle
Hello,
Thank you for the great article. Before I read this article, an Application like “Simple Tasks” was a rocket science to me. thank to you, now I have a clue and need to start this from today :)
-Nish
I want learn this stuff (ext-js) but i dont’t know where to start and what requirement do i need to get started.
Please could somebody help me with Tutorials.
Hi Jack,
I think it become critical. Few days ago, AIR Beta 1 expired and Simple Task doesn’t work anymore. Lot of people cannot access their todo’s. What we need is update or post how to to update application.
Thanks
How about an update to the new AIR version? Would be nice as I actually use Simple Tasks :-)
嗯，感觉不错。好。
Is very good!