Thread: Create Rich Internet Apps

With Web 2.0 being the buzz¬word amongst the develop¬ment community, developers
are continuously churning out innovative and more interactive applications for the web as well as the desktop. Browser plug¬ins such as Flash and the recently launched MS Silverlight, have given a plat¬form to web developers for rendering in¬teractive applications over the Web. We have Java or .NET for delivering applica¬tions for desktops but none of these could be used by developers whose skills are restricted to just HTML, JavaScript or Flash.
In March '07,Adobe introduced a tech¬nology called AIR (Adobe Integrated Run¬time) that could be used by web developers to create Rich Internet Applica¬tions (RIA) for the desktop. It is a collection of application resources installed on the computer system that is used to exe¬cute other applications. As AIR is a cross platform runtime, application developers do not have to worry about platform spe¬cific programming. The runtime provides a consistent cross-operating system plat¬form and framework for deploying appli¬cations, eliminating cross-OS testing. Instead of developing applications cater¬ing to a specific operating system, the de¬veloper concentrates on his application programming only. The installed runtime itself has a common application data be¬cause of which the developed applications are lightweight and smaller in size. Adobe AIR, which currently is in public beta ver¬sion 2, was formerly code-named Apollo. Once this AIR runtime is installed, it pro¬vides support for building both HTML and Flash based applications. Adobe AIR presently supports Windows and Mac, but later this year a version for Linux is also expected to be released. With Adobe AIR web de¬velopers can extend their Flash, Flex, HTML, and Ajax¬based applications to the desktop, without having to learn traditional desktop develop¬ment technologies like Java or . NET.
AppsforAIR
Applications that are developed for AIR consist mostly of HTML or Flash SWF files. AIR provides a container for running these files and also provides features such as local file-system access, which would not have been available if these applica¬tions were run from a browser. Webkit, the same engine that powers Safari web¬browser, is used to render HTML docu¬ments used for the application. For launching the application in AIR, a de¬scriptor file is needed, which is an XML file that contains specifications and the file information thatAIR has to read and load onto the AIR container. The applica¬tion that is developed is packaged and dis¬tributed as a single- file installer, known as an AIR file (.air). You'll need to install the AIR runtime environment on a system to run .air files on it.
Getting started
With this month's PCQ Professional CD, you'll find the Adobe AIR runtime and the AIR SDK. First install the runtime using file air_b2_win.exe and then extract the AIR SDK from zip file air_b2_win_sdk.zip. Once you've extracted the SDK on your root drive and named the folder as aicsdk, you need to set the system environment path for the command-line tools in bin folder. Open System properties and through Advanced tab select the Environment variables op¬tion. Under System Variables append ".;<sdk_path>/bin"to the PATH entry. The two tools that are located in sdk's bin directory are ADL andADT.ADL or AIR Debug Launcher is used to test the devel¬oped application and also provides error messages to developers, whereas ADT is a packaging tool, used to package the devel¬oped application and distribute it as an installer file. Once the runtime has been installed and the SDK environment vari¬ables configured, we can start developing our first AIR application.
First AIR application
Through this demo application we shall try to get familiar with the steps needed to start developing rich Internet apps for the AIR runtime environment. We shall use HTML and JavaScript for this demo app. We shall use scripting to access AIR libraries to get access to the file system and also create a new window. From the initial welcome window, we shall shift fo¬cus to a newly created window where the user will be prompted to select a destina¬tion directory. This will be done by using AIR's File I/O library through JavaScript.



For the application, we first need to create a directory where all files for the app will be created and hosted. Let's as¬sume this home directory to be C:/de¬moApp. As discussed already, an XML descriptor file is important for the appli¬cation. So, we'll create that first. For this, open a text editor and add the following code to it. Save the file as 'application.xml.'

This XML file contains the necessary information that is needed by AIR run¬time to execute the application. The appli¬cation tag contains the attribute 'appId', used to give a unique identity to the AIR application. The Name tag gives the appli¬cation a name that is displayed in the title bar of the application. For this demo app, we'll get 'Try Adobe Air' as the app name in the title bar. Lastly, the Tag Content specifies which file is to be opened up by AIR runtime in Web kit browser for HTML files or in Flash for SWF files.
Now, let's create the main.html file.
This will be the welcome page of the ap¬plication and will have a button that will pop-up another child-window containing the file-system access code to select a di¬rectory. Secondly, we also need the di¬rectory and paste that onto the applica¬tion directory, which in our case is C:/demo- App. The following code is for main.html file that will be loaded onto the Webkit browser during the execution by AIR.