Desktop RSS with Adobe AIR

Adobe AIR (Adobe Integrated Runtime) is currently in public beta; it allows developers to build dual platform applications for the desktop with existing Web 2.0 technologies including Flash and Ajax (HTML and JavaScript).

We want to show you how easy it is to build your first application for AIR, and then in future articles take you through the process of extending that into a piece of desktop software deployed via AIR.

We've previously discussed Adobe's Spry Ajax framework, evaluating the feature set in an article previously published here on Builder AU in June 2007. We're going to use Spry to provide some of the logic for the Adobe AIR application that we're building.

The plan for the first stage is to build an application that will use the Spry Data Library to import, parse and display an RSS feed. The interface will be divided into two halves with a list of RSS posts retrieved from a feed displayed in the upper half and the details of a selected post displayed in the lower half of the page.

Aptana, Eclipse for Web Developers

With this article we'll also be exploring some of the features of Aptana, an open source IDE for Web developers that's based on Eclipse. Aptana extends Eclipse by adding extra support for HTML, CSS and JavaScript. It's free and available for most operating systems. Aptana bundles a number of Ajax frameworks, making it easier to find the necessary controls needed to build a Web application. It's very up to date and has plug-ins available for the Apple iPhone and Adobe AIR.

Creating the Project

Once you've downloaded and had a play with Aptana you should have discovered that it comes bundled with the libraries for a number of popular Ajax frameworks. You'll need to download both the Aptana plug-in for Adobe AIR and the Adobe AIR SDK to develop and compile Adobe AIR applications; like Aptana both of these are free to download, develop and deploy applications with. Aptana's start page will help you configure it for AIR development. Watch a demo to see how to build a simple Adobe AIR application.

Create a new Adobe AIR project in Aptana by choosing File > New > Project; choose AIR Project from the dialog that appears. Then assign your project an appropriate name and decide where it's to be saved; Aptana wants to assign the project name to the default application page -- it's preferable to rename it to index.html.

Adobe AIR applications require an XML file to set up the application details, named application.xml. The next Aptana dialog asks you for the basic details for your application, which in turn will be used to create application.xml for you. Note that the ID should conform with standard variable naming rules and have no spaces in its value.

Application icons are automatically handled by AIR for the two platforms that it currently supports (Windows and OS X). A number of formats and icon sizes are used by AIR and the current dialog will import the nominated files into the project. Note the variety of sizes: AIR will gracefully fall back if a specific size is not supplied -- 128 x 128 for example. PNG files with alpha transparency give the best results.

The next dialog will offer you the choice to add the libraries for the Ajax frameworks you might use in your project; there are a number of popular frameworks bundled with Aptana including Yahoo, Dojo and Scriptaculous. Feel free to add those that you're interested in, we're using Spry for the application that we're building so that's going in first.

The project will now be created; notice that a directory called lib has been added -- this will contain any of the Ajax libraries that you chose during the steps that you've just completed. Aptana will also place a sample file for each selected library into the project.

Retrieving and Parsing the RSS Feed

For this application we're using the project's default HTML page for the base, plus the necessary CSS and JavaScript files for the application. Import both the xpath and SpryData JavaScript files from the Spry framework so that we can fetch and parse the RSS file that the application is to display. These two are included in the Spry library that you added when creating the project and are located in the path lib/spry/includes/, they are also part of the Spry download available from labs.adobe.com.

Next create an instance of the Spry XMLDataSet; here we've called it rssData. The instantiation requires two parameters, the location of the XML file and an XPath expression that identifies the XML node or nodes that the data is contained within. Finding the node is probably the only tricky bit while building this version of the application, you'll need to be able to view the XML of the RSS file directly; and a word of warning … RSS isn't just RSS, it's also RDF as well -- this means that there's two possible Document Type Definitions (DTD) that you're potentially dealing with here. Sample code one illustrates the code that we've just described. Notice that Aptana has also included a JavaScript file of its own as part of the AIR plug-in.

Sample code one

<script src="AIRAliases.js" type="text/javascript"></script>
<title>Spry RSS Parser</title>
<script type="text/javascript" src="lib/spry/includes/SpryData.js"></script>
<script type="text/javascript" src="lib/spry/includes/xpath.js"></script>
<script type="text/javascript">
<!--
var rssData = new Spry.Data.XMLDataSet("http://builderau.com.au/feeds/rss/index.htm?tag=latest_blogs", "rss/channel/item");
//-->
</script>