Developer

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.

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>

Displaying the Feed

Next we need to display the data retrieved. Place a Spry dynamic region within a div, setting it to the rssData XMLDataSet, this is an observer of the Spry data set. Nested within that is a table with the tr tag set to the Spry repeater to iterate over the rows of data retrieved from the RSS feed. Within the row we're outputting two variables from rssData identifying them to Spry with curly braces (sample code two).

Sample code two

<div spry:region="rssData">
  <table width="100%">
    <tr spry:repeat="rssData">
      <td>
        {title}<br />
        {pubDate}
      </td>
    </tr>
  </table>
</div>

Tweak the application size by opening application.xml — look for the rootContent tag and change the width to 620 and the height to 385. Test the code by clicking on the run button (screenshot one); you should see an AIR window that contains a scrolling list. Modify the code by surrounding the existing div with another (sample code three). This new div is going to be used to create a panel to display our list of feeds, we've added a CSS class to it that will manage the panel's appearance. Notice that the tr containing the Spry repeat is now using a built-in Spry class to display the data in alternating row colours.

Sample code three

<div id="feedListingPanel" class="feedsDisplayPanel">
  <div spry:region="rssData">
    <table width="100%">
      <tr spry:repeat="rssData" class="{ds_EvenOddRow}">
        <td>
          {title}<br />
          {pubDate}
        </td>
      </tr>
    </table>
  </div>
</div>

Sample code four is a listing of the CSS to date, notice the size attributes of feedsDisplayPanel are controlling the size of the panel, and that the overflow attribute has been set to auto to allow for vertical scrolling. Styles with the reserved names of even and odd have been added for the alternating row colours.

Sample code four

body {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 12px;
}

.feedsDisplayPanel {
  margin: 0px;
  padding: 3px;
  border-left: solid 1px #CCC;
  border-right: solid 1px #999;
  border-top: solid 1px #999;
  border-bottom: solid 1px #CCC;
  width: 590px;
  height: 180px;
  overflow: auto;
}

.even {
  background-color: #FFAB00;
}

.odd {
  background-color: #CC8900;
}

Next add a second panel to display the description for a selected post (sample code five), this is similar looking to the first panel's code — what's different is that it's nested div is set to be an instance of the Spry detailregion that's been assigned to the rssData XMLDataSet. Its CSS class only differs in height.

Sample code five

<div id="feedDetailPanel" class="feedDetailsPanel">
  <div id="articleDetail" spry:detailregion="rssData">
    {title}<br />
    {description}<br />
    <a href="{link}">[Read full article]</a>
  </div>
</div>

A Spry onclick event to display the description text has been added to the table row displaying the individual feed headlines; this will set the values of the title, description and link variables within feedDetailPanel (sample code six). The onclick event will not cause the cursor normally to change to give the user the right visual cue that they're hovering over something they can click on, the tr tag has been modified in the style sheet to display the appropriate cursor (sample code seven). Further styling has been added to the application to improve its appearance, download the sample application code to view the completed code.

Sample code six

<tr spry:repeat="rssData" onclick="rssData.setCurrentRow('{ds_RowID}');" class="{ds_EvenOddRow}">

Sample code seven

tr { 
  cursor: pointer;
}

Packaging the Application

The last thing to do is to package the application into an AIR file for distribution and installation. With the project selected click the Export AIR button on the toolbar, select the files for your application from the dialog that appears. The gotcha here is that it's very easy to select and package the entire lib directory that the Spry libraries are located in. The reason why you don't want to do that is that more that two megabytes in unnecessarily files is added to the AIR package. You will need to drill down into the directory that the two Spry JavaScript files are located in and only include them.

A better solution, especially if you're going to be packaging the application numerous times, is to create a new directory and copy across the necessary Spry JavaScript files — don't forget to change the paths within your application code.

The resulting AIR package can then be deployed on any machine with the Adobe AIR runtime installed. Remember that this is beta software, evidence of that is how the deployment of Webkit within AIR is evolving. Windows performance of Apollo was pretty ordinary compared to the Mac, this was specifically because that deployment of Webkit has yet to be optimised. We discovered small differences in rendering of the layout between Mac and Windows installations of the sample code that can only be attributed to the Webkit implementations.

Next Steps

Well, that's your first steps in building an Ajax application and packaging it for Adobe AIR. It's not really a thing of great beauty, and I'm sure that those of you adept at CSS could style it to be more glamorous — but consider that the application page delivers an RSS reader in less than 40 lines of code.

At face value there's some quick little things that can be done to finesse the application: the first thing would be to add loader to entertain the user while the RSS feed is being retrieved.

Clicking on the Read full article link will cause the application to load the necessary page, but the sizing is all wrong and there's no way to return to the RSS reader. We'll address that in an article about AIR windowing.

What more could we do to it, especially with what's available from the AIR feature set? In future articles we'll show you how to store data locally using a number of methods including storing in an embedded SQLite database and make the application connection aware so that it can work both off and online.

Editor's Picks

Free Newsletters, In your Inbox