Building a desktop application with Ext, AIR, Aptana and Red Bull
June 29, 2007 by Jack Slocum
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. 
Bill…
You weave a web of lies! Lies I say….
March 22nd, 2008
3:32 pm
Hi Jack, I have read this entry with interest, a very good entry indeed, opens new possibilities for me, I have been using Ext JS for a while now, just long enough to be comfortable with it. there is just one thing I just cat seem to get right, I want to use the Ext.air.MainWindow class in Air. could you please post a tutorial on how to do that
March 25th, 2008
1:12 am
Eric…
I think God approves of you….
March 30th, 2008
12:00 pm
Cracks House…
I can not agree with you in 100% regarding some thoughts, but you got good point of view…
April 1st, 2008
5:43 am
Make Your Own Web Site » Make Your Own Web Site…
If you do any kind of Internet search (using any search engine) and search for the phrase ” make money online “, you’ll pull up a huge list of blogs, advertising agencies and other kinds of websites. What most of them have in common is that they par…
April 4th, 2008
5:30 am
[…] home Friday from a Tulsa bus depot.http://www.joplinglobe.com/local/local_story_096002351.htmlBuild A Desktop Application With Ext, AIR, Aptana & Red BullExt JS is an excellent framework for building web applications that have desktop like functionality […]
April 5th, 2008
7:10 am
Dear Jack,
I know you are an expert. Dear i need only one example of binding data to extjs from C# asp.net framework and performing validation and then resaving data to database.
i am new to Extjs but i know i will handle that if you help me.
Thanks in advance
April 18th, 2008
12:59 am
16 a fastsizeextender…
Infos about the FastSize Extender…
April 21st, 2008
3:13 pm
cash advance…
Cash advance easy way to get payday loan
Uk mortgages
Uk mortgage
Uk home mortgages
Small business loan
Secured credit cards
Second mortgage
Reverse mortgage
Refinance
Quickest cash advance
Personal loan
Payday loans
Payday loan
Payday loa…
April 23rd, 2008
7:07 am
[…] […]
April 29th, 2008
7:21 am
[…] take your JavaScript powered application and run on the desktop like any other native application?http://jackslocum.com/blog/2007/06/29/ext-air-and-red-bull/Running of the Bulls - Wikipedia, the free encyclopediaThe running of the bulls in Basque, entzierro […]
April 30th, 2008
12:30 pm
My Trusted Cracks…
I can not agree with you in 100% regarding some thoughts, but you got good point of view…
May 1st, 2008
3:46 am
Some interesting and unusual comments on this thread, if not at all relevant.
I take my hat off to you for giving this a go…and only 4 cans of RedBull
May 13th, 2008
5:08 pm
Resell Rights…
In closing, I’ m about to delete a couple comments from my blog, something I never thought I’ d have to do. To avoid a repeat performance (and repeat deletes), I’ m going to make an effort not to talk about my opinion on the Jooma Extension licen…
May 14th, 2008
7:03 pm
Web Catalog…
aspd
asredas
assfilled
…
May 15th, 2008
9:32 pm
flurl…
zfs solaris dtrace kunasirirat peerapong
zone de couverture tnt
zuzazu
…
May 16th, 2008
5:09 am
still not
May 16th, 2008
8:23 am
php…
used
used cars sales
used sailboats
…
May 16th, 2008
12:31 pm
uss new york…
talumpati jose
talumpati ni jose rizal
talumpati ni rizal
…
May 16th, 2008
8:12 pm
motorcycle accessories…
samantha 38g
sample letter of sympathy
sample resumes
…
May 17th, 2008
11:13 am
cheap the fastsize extender canada…
FastSize Extender Discount Code…
May 17th, 2008
3:36 pm
[…] rizal. talumpati ni rizal ?? uss new york May 16th, 2008 8:12 pm. Leave a Reply. Name required …http://jackslocum.com/blog/2007/06/29/ext-air-and-red-bull/The Project Gutenberg eBook of Buhay at mga Ginawa ni Dr. Jose Rizal …… of Buhay at Mga Ginawa […]
May 18th, 2008
3:11 am
Buy Gold - Scrap Gold Prices - Legitimate Part-Time Business - Make Money FAST…
To prevent automated Bots from commentspamming, please enter the string you see in the image below in the appropriate input box. Your comment will only be submitted if the strings match. Please ensure that your browser supports and accepts cookies, or …
May 19th, 2008
7:40 pm
Hey Jack
Just wanted to point out that there is a major bug in Simple Tasks application. When you double click on a task you have Air pop up another window. If you do this a couple times, you will see the memory climb 6-10MB. I have noticed that the memory is not released back to the OS. This is not directly your fault. Its Airs fault, but should not be over looked. I suggest that maybe a popup window in the same Air window using EXT JS windows. I have looked in to Ext, phenomenal work, I’m still trying to get my head wrapped around it for one of my projects.
Keep up the good work!
June 1st, 2008
4:02 pm
[…] take your javascript powered application and run on the desktop like any other native application?http://jackslocum.com/blog/2007/06/29/ext-air-and-red-bull/Wingo Bay - Web Application Programmer - DHTML, AJAX, JavaScript …Web site design and remodeling, […]
June 4th, 2008
10:22 pm
[…] เขาก็ได้เขียนบอกเล่า วิธีการสร้างแอพริเคชัน โดยใช้ Ext JS, Adobe … มาแล้ว […]
June 12th, 2008
8:28 am
soma…
soma music…
June 30th, 2008
4:37 am
soma…
soma info…
June 30th, 2008
5:29 am
ephedrine …
…
July 2nd, 2008
5:29 am
business income opportunity xango…
The technicality behind its working is really simple. Lets assume a user signs up for an OpenID and he is logged in to that OpenID service provider. The user then goes to blogger. com to write a post on his/ her blog. The user will not need to enter th…
July 3rd, 2008
6:29 pm