Desktop RSS Reader with Air & Flex

The following tutorial will teach you how to create a desktop RSS reader by using Air in Flex.

Download Source

Here is a preview of what we are going to achieve.

Screenshot

1. In flex, create a new Air project named AirRSSReader, leave the name of the main MXML as it is and set its layout to vertical.

2. Open the mxml application file. Set its size to 700×450.
Add an HTTPService component that we will use to load the RSS feed. Give it an id of “RSSFeed” and set its url property to the url of the RSS feed that you want to display.
In our case, we choose the Yahoo Technology feed : http://rss.news.yahoo.com/rss/tech. We found the url at http://news.yahoo.com/rss
Set the showBusyCursor property to true to display a busy cursor while the service is executing.
For the result Event we call a resultHandler function that we will create next.

<mx:HTTPService id="RSSFeed" url="http://rss.news.yahoo.com/rss/tech" 
		result="resultHandler(event)"/>

3. In the creationComplete event handler for the WindowedApplication container, invoke the service by calling the send() method.

<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]"
	width="700" height="450
        creationComplete="RSSFeed.send();" >

4. Open a Script tag to write actionscript code.
In the resultHandler function, we want to retrieve the items from the RSS feed.
To do so, first declare a Bindable ArrayCollection variable that will be used to store the datas.

<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var datas:ArrayCollection;
			
			private function resultHandler(event:ResultEvent):void{

			}
			
		]]>
</mx:Script>

You need to have in mind the structure of an rss file to retrieve the items. The stucture of the RSS looks like this :

<?xml version="1.0" encoding="iso-8859-1" ?>
<rss version="2.0" xmlns:media="http://search.yahoo.com/mrss/" xmlns:ynews="http://news.yahoo.com/rss/">
<channel>
	<title>Yahoo! News: Technology News</title>
	<copyright>Copyright (c) 2009 Yahoo! Inc. All rights reserved.</copyright>
	<link>http://news.yahoo.com/i/738</link>
	<category>technology</category>
	<description>Technology News</description>
	<language>en-us</language> 
	<lastBuildDate>Thu, 16 Jul 2009 14:02:39 GMT</lastBuildDate>
	
	<ttl>5</ttl> 
	<image>
		<title>Yahoo! News</title>
		<width>142</width>
		<height>18</height>
		<link>http://news.yahoo.com/i/738</link>
		<url>http://l.yimg.com/a/i/us/nws/th/main_142b.gif</url>
	</image>
	
	<item>
		<title>Twitter hacked by old technique &#151; again 
		    (AP)
		</title>
 		<link>http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/2009
0716/ap_on_hi_te/us_tec_twitter_hacked</link>
 		<guid isPermaLink="false">ap/20090716/us_tec_twitter_hacked</guid>
		<source>AP</source>
		<category>technology</category>
		<pubDate>Thu, 16 Jul 2009 00:30:01 GMT</pubDate>
		<description>AP - Breaking into someone's e-mail can be child's play for a determined hacker, as Twitter Inc. employees have learned the hard way again.</description>
	</item>
	<item>
		<title>Nokia posts 66 pct fall in Q2 profits, shares drop 
		    (AP)
		</title>
		 <link>http://us.rd.yahoo.com/dailynews/rss/tech/*http://news.yahoo.com/s/ap/2009
0716/ap_on_hi_te/eu_finland_earns_nokia</link>
		 <guid isPermaLink="false">ap/20090716/eu_finland_earns_nokia</guid>
		<source>AP</source>
		<category>technology</category>
		<pubDate>Thu, 16 Jul 2009 13:44:38 GMT</pubDate>
		<description>AP - The world's top cell phone maker, Nokia Corp., on Thursday said second-quarter earnings fell 66 percent as the global recession sapped demand. The company scrapped its target to gain market share this year and its stock sagged.</description>
	</item>
  
  ...
  
</channel>
</rss>

What interest us are the item element.
Knowing the structure, we can now write the resultHandler function :

private function resultHandler(event:ResultEvent):void{
	datas = event.result.rss.channel.item;
}

5. So far, the RSS datas are stored in the datas variable. To display them, add a Datagrid component and set its id to “news”.
Bind its dataProvider to the datas variables.

<mx:DataGrid id="news" dataProvider="{datas}" 
        width="650" height="200">
</mx:DataGrid>

At this point, if you try to run the application you should obtain something like this :

Screenshot

All works fine, except that we don’t want to display all of theses datas in the datagrid.

6. Within the datagrid, to display only the title and the publication date of each item, we add 2 DatagridColumn component inside a tag.
For the first DatagridColumn, set its headerText property to “Title”. Set its dataField to title.
For the second DatagridColumn, set its headerText property to ” Publication Date”. Set its dataField to pubDate.
(Important : the values that we’ve set for the dataField of each DatagridColumn must match with the element name in the RSS structure)

<mx:DataGrid id="news" 
		dataProvider="{datas}" width="650" height="200">
		<mx:columns>
			<mx:DataGridColumn dataField="title" headerText="Title" width="400"/>
			<mx:DataGridColumn dataField="pubDate" headerText="Publication Date"/>
		</mx:columns>
</mx:DataGrid>

7. Now if you run the application, you should see this :

Screenshot

8. Next we want to show more stuff when the user clicks on an item of the datagrid.
We will display the description of the article selected in the Datagrid and a Button that create a link to the full article.

9. Beneath the Datagrid component, add a TextArea Component. To display the description, we bind its htmlText property with the description of the selectedItem of the datagrid.

<mx:TextArea htmlText="{news.selectedItem.description}" 
		height="121" width="420" />

10. Then add a Button component with a label of “Read Full Story”.
For the click event, we call the navigateToURL function with the link of the selectItem as parameter that we enclose in an URLRequest object.
Also it might have a problem if the user clicks the button but has not yet selected an article within the datagrid. Indeed the news.selectedItem.link parameter would be null and this will cause an error. To avoid that, we set the enabled property to {news.selectedItem!=null}. If news.selectedItem!=null, the button is enabled else it is disabled.

<mx:Button label="Read Full Story" 
		click="navigateToURL(new URLRequest(news.selectedItem.link));" 
		enabled="{news.selectedItem!=null}"/>

11. Finally, we add a Style tag to add some CSS to make the application more pretty.

12. Here’s the final code , run the application to test it.

<<?xml version="1.0" encoding="utf-8"?>
<mx:WindowedApplication xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"
	backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#000000, #000000]"
	creationComplete="RSSFeed.send();" width="700" height="450" viewSourceURL="srcview/index.html">
		<mx:Style>
		DataGrid {
		   alternatingItemColors: #cccccc, #eff1f2;
		   rollOverColor: #999999;
		   textRollOverColor: #ffffff;
		   selectionColor: #666666;
		   color: #000000;
		   textSelectedColor: #ffffff;
		}
				
		Button {
		   color: #ffffff;
		   themeColor: #333333;
		}
	</mx:Style>
	
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.ResultEvent;
			import mx.collections.ArrayCollection;
			
			[Bindable]
			private var datas:ArrayCollection;
			
			private function resultHandler(event:ResultEvent):void{
				datas = event.result.rss.channel.item;
			}
			
		]]>
	</mx:Script>
	
	<mx:HTTPService id="RSSFeed" url="http://rss.news.yahoo.com/rss/tech" 
		showBusyCursor="true"
		result="resultHandler(event)"/>
	<mx:DataGrid id="news" 
		dataProvider="{datas}" width="650" height="200">
		<mx:columns>
			<mx:DataGridColumn dataField="title" headerText="Title" width="400"/>
			<mx:DataGridColumn dataField="pubDate" headerText="Publication Date"/>
		</mx:columns>
	</mx:DataGrid>
	<mx:TextArea htmlText="{news.selectedItem.description}" 
		height="150" width="420"/>
	<mx:Button label="Read Full Story" 
		click="navigateToURL(new URLRequest(news.selectedItem.link));" 
		enabled="{news.selectedItem!=null}"/>
</mx:WindowedApplication>

19 thoughts on “Desktop RSS Reader with Air & Flex

  1. Pingback: Getting Started with Adobe AIR - desktop widgets! | RIA Development with Adobe Flex and Flash

  2. DT

    Hi.
    Great & very useful src code, was able to integrate it into my existing AIR app very easily & bring it up fully working FIRST time.

    Question:
    Currently when u click on ‘Read Full Story’ it opens up a browser for reading the story. I was wondering what it would take to show the content of ‘Full Story’ within an AIR app window (rather than opening a new browser window). It is OK if the embedded links within the story content end up not being click able, … All i care 4is be able to show the content of the story within an App’s window not a browser.

    Thx again 4 sharing your code.

    Look fwd 2 hearing from u.
    DT

  3. DT

    Hello Again (It is DT again).
    I figured out the answer to my own question (see previous posting).
    What I end up doing was to change the code such that when u click on a news item description, instead of diaplying theSummary u will get the full story being displayed (in what used to be the TextArea) .
    Thx again 4 sharring yr code.
    Best,
    DT

  4. Pingback: adobe-air-rss-reader | عالم التقنية

  5. Pingback: قراءة الخلاصات RSS - سوريا-تيك نيوز…

  6. Pingback: قارئ خلاصات RSS بواسطة Adobe Air - موقع أيوة سوفت

  7. Adam

    Thanks for the article it really helped me out!

    Like DT i was just wondering if you could maybe tell me how i could go about displaying the full story, not just the description, within a textarea perhaps???

    Thanks
    Adam

  8. lenna

    what happen if the description of the entry is a list of images? including img src tag but surrounded by gt and lt (escaped)… seems i cant render them inside the textarea

  9. ren

    Hi this article helped me a lot.

    Can you tell me how to use image in my feed reader. I ma struggling a lot with that
    thanks in advance

  10. Flex Developer

    This application is good. But is there any way, we can integrate a browser control inside flex application so that instead of opening new browser, user stays inside application.

  11. Rishabh

    hi…thnks a lot for d code….quite explanatory post…definitely helping a lot to many…gr8 work.Thnks.

  12. Pingback: Flex 4 and the Web « Flash for the masses – AS, JSFL, XUL, etc.

  13. Ryan Ouyang

    i just want to know what you would do, if you add a site without defined a cross-domain?
    for example not only yahoo.com, user can input any rss url to load.

  14. Pingback: Desktop RSS Reader with Air & Flex « GuarniBlog

Leave a Reply

Your email address will not be published. Required fields are marked *