| advertisement |
Most websites publish feeds of its content. Using feeds allows one to have a central place to receive all updates from web sites of their interest. By pulling such content into a desktop client, they get desktop notifications and can archive the feed contents if they want, and control how they consume the content. We’ll explore how to create our own feed reader here.
We will write this application for Adobe AIR, not the Flash Player for the web. Adobe AIR includes the WebKit engine – the same engine that powers Google Chrome and Apple’s Safari – so we can have an entire browser in our application. Including the browser component is simple – add a tag in our MXML code, and controlling it from your code is quite simple as well. We will make use of this feature displaying the feed content in a rich format. Since the WebKit engine isn’t included in Flash Player, converting this application for use in a browser will not be a simple task, and will not be powerful enough.
First of all we will create the UI layout for the application, and then we will add the code to make the application actually load the feed, display it and change the displayed article with changes in the list selection. Finally we will extend the application just a bit to give the user the option to view either the article summary / extract or the entire article at the original location.
Part1: The UI
The UI of the application is quite simple. We have a text input box where the user can input the feed location, right next to which, is a button labeled “Load” for loading the feed into the application.
Below that is a List. The list will display the titles of all the items in the feed. Clicking on any item in the feed will display the extract in the area below.
Let us break down the UI. First we have a Text Input component placed in a horizontal layout with the “Load” button:
<s: HGroup width=”100 %”>
<s: Text Input id=”feedUrl” width=”100 %”/>
<s: Button id=”loadFeed” label=”Load”/>
</s: HGroup>
Notice that we have used the short form HGroup instead of creating a Group and setting its layout to Horizontal - Layout.
This composite of the Text Input for the feed URL and the “Load” button is then vertically aligned with the List and the WebKit Component. To do this we can set the layout of the entire application to Vertical Layout, and add the list and WebKit component both in the root of the application. The WebKit component can be included by using the HTML component.
Your final code should look something like the following:
<? xml version=”1.0” encoding=”utf-8”?>
<s: WindowedApplication
xmlns: fx=http://ns.adobe.com/mxml/2009
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
width=”800” height=”600”>
<s: layout>
<s: VerticalLayout/>
</s: layout>
<s: HGroup width=”100 %”>
<s: TextInput id=”feedUrl” width=”100 %”/>
<s: Button id=”loadFeed” label=”Load”/>
</s: HGroup>
<s: List id=”feedItems” width=”100 %” height=”100 %”/>
<mx: HTML id=”article” width=”100 %” height=”100 %”/>
</s: WindowedApplication>
Part2: The functionality
Now we need to add some event handlers for the UI elements. We need to have the application start loading the URL when we click the “Load” button, so let’s start there. Add a click handler for the “Load” button, as follows:
protected function loadFeed_clickHandler (event: MouseEvent):
void
{
var ul: URLLoader =
new URLLoader ();
ul.addEventListener
(Event.COMPLETE, onFeed Loaded);
Ul.load (new URLRequest (feedUrl.text));
}
This function is doing the following:
1. var ul: URLLoader = new URLLoader();
This created an URLLoader, which will load the contents of our feed
2. ul.addEventListener (Event.COMPLETE, onFeedLoaded);
This adding an event handler to our URLLoader which will be called when the “COMPLETE” event occurs. This event occurs when it has completed loading the whatever URL is an assigned to it.
3. ul.load(new URLRequest (feedUrl.text));
This line of code tells the URlLoader to actually start loading the URL we specify. We provide the URL to the URLLoader in the form of a URLRequest object which is assigned the URL of the feed the user entered in the text box (feedURL.text).
We will also create an object to store the data retrieved from the feed. Let us call it feedData. This will be an XMLList-Collection object which can directly be used by our list later on.
[Bindable]
private var
feedData: XMLListCollection;
We are adding a metadata tag “Bindable” to this variable; this will tell Flex to generate code that will automatically update any components bound to this variable is changed so will the list displaying the data, with no effort on our part!
Now for the onFeedLoaded function that will be called when the feed is done loading:
private function onFeedLoaded(event: Event): void
{
var rssFeed: XML = XML ((event. target as URLLoader).data);
feedData = new
XMLListCollection (rssFeed.channel.item);
}
In this function:
1. var rssFeed: XML = XML ((event.target as URLLoader).data);
The event.target element is the URLLoader object with which we loaded the feed. We are casting this as URLLoader and accessing its data property, which has the raw feed data. This data is being cast as an XML abject and stored in the rssFeed XML variable.
2. feedData = new
XMLListCollection (rssFeed.channel.item);
Our bindable feedData variable is now being assigned a list of all the items in the RSS feed. The structure of the RSS has a root RSS element that includes one channel element with all our articles as item elements within. rssFeed.channel.item is thus a list of all the items in the RSS feed, and this is being wrapped into XMLListCollection.
We need to add a change handler to the List that will update the HTML component with article extract from the selected item in the list. The code for that is as follows:
protected function
feedItems_changeHandler (event : IndexChangeEvent) : void
{
article.htmlText = feedItems.selectedItem.description;
}
That’s it! All we are doing is telling the WebKit engine added to the application using the HTML tag to use the content from the description property of the feed element selected in the feedItems list.
To tie everything in place, we need to add labelField=”title” and dataProvider=”{feedData}” to our list. The labelField attribute specifies that the “title” tag in the item element is what is to be displayed in the list. The data Provider attribute binds the feedData variable as the data source of the list.
Here is what your final code should look like:
<?xml version=”1.0” encoding=”utf-8”?>
<s: WindowedApplication
xmlns:fx=http://ns.adobe.com/mxml/2009
xmlns:s=”library://ns.adobe.com/flex/spark”
xmlns:mx=”library://ns.adobe.com/flex/mx”
width=”800” height=”600”>
<s: layout>
<s: VerticalLayout/>
</s: layout>
<fx: Script>
<! [CDATA [
Import mx.collections.XMLListCollection;
Import spark.events.IndexChangeEvent;
[Bindable]
private var
feedData: XMLListCollection;
protected function loadFeed_clickHandler (event: MouseEvent):
void {
var ul: URLLoader = new
URLLoader();
ul.addEventListner (Event.COMPLETE, onFeedLoader);
ul.load (new URLRequest (feedUrl.text));
}
private function
onFeedLoaded (event: Event): void {
var rssFeed: XML = XML ((event.target as URLLoader).data);
feedData = new
XMLListCollection (rssFeed.channel.item);
}
protected function feedItems_changeHandler (event: IndexChangeEvent) : void {
article.htmlText = feedItems.selectedItem.description;
}
]]>
</fx: Script>
<s: HGroup width=”100 %”>
<s: TextInput id=”feedUrl” width=”100 %”/>
<s: Button id=”loadFeed” label=”Load” click=”loadFeed_clickHandler (event)”/>
</s: HGroup>
<s: List id=”feedItems”
dataProvider=”{feedData}”
labelField=”title”
width=”100 %” height=”100 %”
change=”feedItems_changeHandler (event)”/>
<mx: HTML id=”article” width=”100 %” height=”100 %”/>
</s: WindowedApplication>
After this if you run the application, you will see a fully functional RSS reader which will display content from any RSS compliant feed.