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.