AIR for the mind

These days its a steep learning curve of me. I have been fiddling around with Adobe AIR for some time now and I'll say every second of it has been great. Manish has been insisting that I document the things I have done. But I find it better to do than to document. Of course in that case what you know is bottled and not useful to others. I'll try to jot down the stuff (though very little) that I understand after 3 weeks of AIR.

The reason why I looked at Adobe AIR was for Workstreamr. The first thing that I found was documentation provided by Adobe. These livedocs were extremely helpful. I installed the runtime environment from Adobe and then the sdk. Before looking at the sdk I saw an Eclipse based IDE called Flex Builder provided by Adobe. I downloaded this and started my work on this.

There are 3 ways you could make an Adobe AIR app. Using HTML/Javascript, Flex or Flash. I was always interested in Actionscript and thats why I tried out Flex Developer. Here it is required that you write xml file which will be converted into Actionscripts (swf files at last) and will be run by AIR. The xml file creation for this was greatly simplified by Flex builder but I had to learn some Actionscript within a short frame of time. I fiddled wit hthis for some time after which I decided to go and check out the HTML/Javascript based approach. Aptana was used here as it had a great support for building AIR apps.

It took me less time to get used to all the nifty stuff that AIR had provided to make the HTML based approach work. The base is just an Html file which includes a main Javascript file called AIRAliases. It contains all the aliases that you need to access the Runtime Environment. The AIRIntrospector Javascript file is another thing that is required for debugging purposes. When the app is running press F11 and you will see the Introspector pop up.

Now comes the UI based stuff. I loved what Snitter, Twhirl, Spaz and Pownce had done with their AIR applications. The shadows and stuff. In Flex this was easy. Just create a shadow object and give that to the main window. For the Html part this was done making use of a semi transparent image ( dot fading out ) being repeated through out a div with a large border. I had done most of my work using the prototype and scriptaculous libraries, so I chose them as the main Javascript libraries for the AIR app too. The other options include EXT, Jquery, Spry, MochiKit etc.

The documentation for the various methods that AIR has was taken as a reference. Some of the stuff like Effect queuing did not work for me using Scriptaculous. I am also told that JQuery is the most used library for the HTML based development. I'll probably shift to JQuery once I get a feel of it. [:)] .

The notifications is another thing that I was trying to do. Those small notifications that come up on the right bottom of your screen when ever someone messages you. It took me sometime to find out that this 'purr' was indeed an Actionscript that is included with the main Html file in snitter as well as Spaz. I decompiled this swf file ( sorry but I had to) and looked inside the code, managed to find the notifier, the notifier queue and the actual 'purr'. The color theme must be changed, so Ill have to hack the whole code (I think).

The Javascript that is made has been done with Object Orientation in mind. The Html / Javascript and CSS are decoupled. Another aspect I like about doing this in Html is that a single change of CSS changed the UI completely. Talk of decoupled UI and Functionality.

Still working on this and hope it will end good. I would like to thank all these apps made in Adobe AIR which I took as reference (both the Html ones and the Swf ones I managed to hack).