Adobe AIR brings web technologies to the desktop through the integration of the Webkit rendering engine in a Flash-style desktop-based runtime. AIR applications running on HTML, CSS and Javascript can interact with the local file system, manipulate local SQL databases and even use AJAX on any domain.
In this tutorial, I'll show you how to set up an Adobe AIR development environment, and build a simple RSS feed reader for your existing website.
Setting Up
The AIR runtime for HTML applications is exposed through a set of Javascript interfaces. While it's quite easy to dive in and start experimenting with the runtime, I recommend you read Jonathon Snook's introductory AIR tutorial, Christmas is in the AIR, before attempting this tutorial.
To build the sample application, we'll use Aptana Studio, which will also download the AIR SDK -- follow the instructions on aptana.com to install. Aptana's AIR plug-in provides easy shortcuts for testing applications and powerful tools for packaging and deployment. Besides Aptana, all you need to work through this tutorial is strong experience with web development and RSS feeds.
Creating the project
Launch Aptana and select File > New > Project. Double click on "Adobe AIR Project", and give your project a name:
Hit Next, then hit Next twice to accept the Application XML defaults. The Import JavaScript Library form appears -- select jQuery in the list, as we'll be using it for this project. Hit "Finish" and we're ready to go.
You'll notice Aptana has created a number of files in your project already. In particular, some HTML files and associated JS code are included that demonstrate the basic features of AIR, and they are a great way to explore both the runtime and the Aptana IDE. You can safely delete AIRLocalizer.js, AIRMenuBuilder.js, AIRSourceViewer.js, both jquery_sample files, LocalFile.txt and sample.css.
Creating an application skeleton
Open up air-rss.html, select the entire contents of the file and replace it with the following:
<html>
<head>
<title>Builder AU: RSS Feeds</title>
<style type="text/css">
body { padding: 0px; }
p.feed_title { font-weight: bolder; }
p.feed_item { border: 1px solid #ddd; padding: 2px; }
.feed_item span { font-weight: bold; }
</style>
<script type="text/javascript" src="AIRIntrospector.js"></script>
<script type="text/javascript" src="AIRAliases.js"></script>
<script type="text/javascript" src="lib/jquery/jquery.pack.js"></script>
<script type="text/javascript">
</script>
</head>
<body>
<p><button onclick="connectDB()">Update Feeds</button></p>
<ul id="feedlist"></ul>
<p><button id="btndload" style="display:none" onclick="downloadFeeds()">Download Feeds</button></p>
</body>
</html>
We reference three Javascript files: two AIR helpers, and a copy of jQuery. (If this is not included in your project, download it from here.) The Introspector, is something of a Firebug for AIR's webkit browser -- a JS console, DOM inspector and a few other handy utilities; hit F12 inside a running AIR application to open it. The second helper simply provides aliases for the runtime functions -- the APIs are exposed through window.runtime.flash.media (and similar), and this file aliases all the common APIs to an air object.
Do you need help with Web Technologies? 
1
Faisal Basra - 24/10/08
This is excellent step-by-step tutorial, for learning Adobe AIR based application. Thanks.
» Report offensive content