If you have read my previous post AIR Notifier, it describes a simple technique to display new window in AIR. While it is very easy to create new window using the technique described in above article, it certainly not the right choice for creating new windows. Applications which may want to have a centralised control over popup creation, customization of popup windows – will soon find it difficult to implement it. Well offcourse, the post just describes a technique for displaying new window, I thought of encapsulating the functionality and developing a convenient library API.

Well I have started working on same and soon will be releasing the library as opensource. Meanwhile, here is the list of features planned for libary.

Simple to code and requires minimum one line of code to create window.

Options to customize appearance.
  - Display close, minimize, maximize, resizable
  - Use standard or transparent interface.

Option to specify location of window.
  - Set location of window after creation

Unique id reference to manage window behavior.
  - Activate/Deactivate focus of window.
  - Dynamically minimize, close, maximize window.

Option to close all open windows.

Auto exit of all open windows on main application exit.

Watch this space for release of library.

Finally I am releasing version 1 of the libray and you can download it here. To see it actually working, you can download AIR source file by clicking here. (Note that the example just contain source files, you must create new AIR project and copy source & library files. To download source code of the library click here.)

Building applications with AIR is real fun and what could be more interesting when you install it on desktop and see it running. In last few months, I have seen many applications built using Adobe AIR. Nice, soft look and feel, great functionality, quite handy are some of the words I will use to describe those applications.

Well how can I keep myself from building one on this buzzing technology and so I started one. I found that building application in Flex and AIR is not so different (apart from configuration and few more added AIR API’s). The journey was so far good but when I started looking for creating a notifier that can have a pleasant look and feel and with some flashy effects, I really struggled to find options.

It wasn’t that bad, I found quite a few good reference sites but unfortunately none of them met my expectations. But when I saw twhirl with its awesome notification display, my fingers started googling again to find how can I get something like the one I can see now on my desktop.

Overall I liked the appearance of twhirl and the way stuffs are managed into it. The most interesting part was twhirl notifier. It pops up when you receive a message and it goes like whosshhh. After crawling through various sites and reading many source codes, I found an interesting project on Google Code – Bamboo notifier. Getting deeper into the source code, helped me to understand how Bamboo displays notification and hurrayy thats what I was looking for. No additional SWC, everything built using Adobe AIR APIs.

I used similar concept and on top of that using Flex Effects, I finally achieved what I was looking for.

Well not to stretch any more, here is the code snippet that might help you to built your own notifier.
There are two files,
1. One that is used as popup. (Notification.mxml)
2. Used to display popup. (Client.mxml)

Notification.mxml

Client.mxml

For your reference, I am attaching Flex project with this post. Click here to download.

Hope this will help you to kickstart building your own Notifier.
So keep airing and notifying

 WELCOME – RICH INTERNET

 Background
Over past few years web has become an important element of day to day life. Advertising a product or fastest mode of exchanging information or building social communities etc are the few examples we all know which couldn’t have been possible without web. While the importance of web has increased over the years, so the supporting technology has undergone various evaluations. Industry has always come up with new innovations to make experience of using web more appealing. The early days of Internet was using just HTML, Scripting languages and Images to present the information, the past few years has brought many new concepts like Animations, AJAX etc. What next, web got its new version Web 2.0 and has changed the definition for what web is used for. More and more sites are built today to ease the process of accessing information and making it more presentable.

Evolving web
The term AJAX has brought revolution in the way Websites are built and has almost made websites feel like Desktop Applications. More and more websites are developed using AJAX + <Any Server Side Language> to access information without flickering pages. While AJAX fans are growing day by day, it has one major downside – JavaScript. AJAX cannot stand without JavaScript and hence the heavy reliance on JavaScript can sometime lead to complete failure of an application. Some of the reasons could be

1. JavaScript API differ from Browser to Browser (Though most of the browsers adhere to standards like ECMA, the APIs included in Standards are either insufficient or not present.)
2. JavaScript can be turned off in Browser. (leading to complete failure of application if such circumstance is not handled properly)

But to the rescue of Web Developers, above listed problems are addressed by most of the leading JavaScript frameworks. Frameworks like JQuery, Dojo, Mootools, ExtJs etc not only frees developer from common JavaScript pitfalls but also provide Rich Controls out of the box.
After invention of AJAX, a need was felt to have access to information without need to stay connected to internet. Users felt the need of installing web application in local system rather than accessing it online every time they need to get some information. Well to address this concern the biggies came with various solutions like Google Gears, Adobe AIR, Yahoo Browser Plus. (Oh yes, Microsoft Silverlight too provide offline web application access – the support is recently announced on 18th Mar 2009 in Silverlight beta version 3.0)
The purpose of this article is to give sneak preview Adobe AIR and its features. We will look at how it can be installed and also develop basic application to get acquainted with its APIs.

ADOBE AIR – BABY STEPS
Before starting with sample applications lets see what we need to ride on AIR
Prerequisites

1. Download Adobe AIR SDK from http://www.adobe.com/go/getairsdk
2. Download Adobe AIR runtime from http://www.adobe.com/go/getair
3. Any Text Editor to write sample application. (I like EditPlus)

Install runtime by double clicking on AdobeAIRInstaller.exe and follow the steps of wizard. AIR SDK is a zip file and doesn’t have installer. Just extract zip file to desired location.
Once SDK zip file is extracted, configure the bin folder of SDK in PATH environment variable of your system.

System Path

You can get this dialog box by accessing MY Computer > Properties > Advanced > Environment Variables > Locate PATH variable and click Edit button. (In above screenshot Flex SDK path is displayed, which has nothing to do with Adobe AIR.)

That’s all for to get started with Sample Application. (You can even use Adobe Flex Builder 3 which has built-in Adobe AIR support. There is difference between Flex builder and Flex SDK. Flex SDK provides core libraries to build Flex application, while Flex Builder is an IDE to ease the development by providing GUI for building Flex applications.)

Sample Application
Open your favourite Text editor and create following XML file.

    com.adobe.demo.MyFirstAirApp
    AIR application
    1.0
    First App
    First AIR Application

    

        index.html
        standard
false
        true
        400
        200
    

This file defines configuration details for your application.

Save above file with name as application-config.xml. (You can name it anything.)
Let’s start creating sample application. Create an HTML file in your favourite editor, with below given details.

Enter your name:




 

Did you notice, there is nothing special apart from plain HTML and Javascript. (I am using unobtrusive JavaScript so that my HTML is not messed up with event handlers.)
Save above file as index.html

To run this application you have to ways

1. Create an installable version of above file. Then install the application and run it like any other desktop application.
2. In development phase since your application undergoes many changes it’s always useful to somehow test application without first installing it. This would save lot of your time before you will actually mark it as final product ready to deploy. AIR SDK bin directory contains a file “adl”, which just helps you to do the same.

Open command prompt and locate the directory where you have saved both the files. Remember both the files must be in same directory.

E:\air_practice\greet>adl application-config.xml

Enter command as shown in above.

You must get following window.

AIR application

If you have configured Environment variable you must see above screen without any errors. This is not an ordinary browser page wherein you can right click and get source of application. The page source is protected and user cannot view it by any means.

Enter your name and click “Greet Me!” button. You must get alert window with Greeting message.

BEHIND THE SCENE
Adobe AIR uses WebKit – an open source implementation for HTML engine (Used within most popular browsers – Safari etc). In AIR, applications can be developed using combination of

• HTML
• JavaScript
• Flash

Also if client machine has Acrobat version 8 or higher, AIR application can leverage all the features of Acrobat reader.
With AIR, Adobe is taking one more step towards building Desktop based application using traditional/modern web technologies. Unlike traditional web application, there is one major difference between browser and desktop based application. Applications running under browser are constrained by the sandbox under which they are executed and hence cannot utilise all the features (e.g. Access to User File System).
Desktop based applications have full access to AIR api’s and such application do not require live connectivity to the server from which they are downloaded. Users can use the application, fee the information to application and it will be later uploaded to actual server when user decides to go online. AIR also provides API to connect to database to embedded SQLite database.

CONCLUSION
AIR applications are more suitable where user want to have access to information without need to stay connected to internet. AIR is not meant for the applications that require real time data to be fetched and displayed to user (e.g. stock ticker, weather information etc). While AIR has been almost more than year old, recent release of Silverlight may be a tough competitor for AIR.
Applications developed with AIR are considered as fat clients due to the runtime requirements to run the applications. AIR applications cannot be run through browser and require special runtime environment to be installed on client machine. Since AIR is a new technology, it’s hard to bet on the number of AIR runtime installations across the world.

REFERENCES
Following links will help you to ride on Adobe AIR.

1. http://onair.adobe.com/files/AIRforJSDevPocketGuide.pdf
2. http://onair.adobe.com

SHOWCASE
Following list contains location of various sites which demonstrate applications developed with Adobe AIR

1. http://www.adobe.com/products/air/showcase/
2. http://refreshingapps.com/
3. http://www.scalenine.com/showcase/