How To: Make a Simple RSS Reader with Adobe Flex

Filed under Mashups, PHP, RIA, School by Chad | 12 comments


A little over a year ago, I converted my then dormant domain, Mediadinosaur.com, into a gossip focused news aggregator (previously, it was a media/celeb focused community and blog). It now captures feeds from a number of high profile celebrity rags (Egostastic, TMZ, E!, WWTD, etc) and lets you get your fan fix in one centralized place. I built it in Flex to highlight the ease of use of the Framework and the power that the HTTPService and E4X gives you in getting and parsing XML. I’m using the site as an exercise for my Mashups and RIAs class as an introduction to developing with Flex and a easing into the concept of reading and using XML feeds and services for students that may have never used either of them. So let’s take a look at how this all comes together.

Here is the site today:

In this post, we’ll look at the site and find out what makes it tick. Here’s a quick overview: The interface is simple, it consists of only a ComboBox, a DataGrid, a TextArea, a couple Labels/Text components and a LinkButton. All of these Controls are placed in an assortment of Layout controls to assist with the overall look and feel. I then create a HTTPService and a couple quick AS3 functions to populate the ComboBox and handle feed results. The initial feedlist comes from a list of RSS feeds in a custom written XML file (which I’ll share in this post, as well), this could also come from an online service like a custom Yahoo pipe or an OPML file if you really wanted to get fancy.

After the basic app is functioning, I import one of Scalenine’s beautiful and easy to use skins, and voil?†. A feed reader for local filesystem use is ready. This could be run as a SWF or compiled as an AIR app for desktop use. However, if you want to put it online, you’ll need to use a middleware script to serve as a crossdomain proxy loader (this example is going to use PHP). This is needed to get around Flash player’s security sandbox which prevents you from loading XML files from other domains that lack a crossdomain.xml file.

Let’s examine the basic MXML markup before adding any AS3 or style calls:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" />
	<mx:HTTPService id="mdFeed" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" labelField="name" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

So, in the markup above, we create the visual components mentioned in the paragraph that preceded the source code, and add two HTTPServices, one for the list of all the feeds we are aggregating, and the other for the actual RSS feed data that we will retrieve once the user chooses a feed they want to review.

Here is a glance of the interface in Flex’s IDE:

In order to add the interactivity, we’ll need to supply a list of feeds for the reader to parse, right? Here is the list of sites and the URLs for their RSS feeds in XML:

1
2
3
4
5
6
7
8
9
10
11
12
13

<sites>
	<site name="egotastic.com"	data="http://egotastic.com/feeds/index.xml" />
	<site name="wwtdd.com"	data="http://www.wwtdd.com/?mode=atom" />
	<site name="defamer"	data="http://www.defamer.com/excerpts.xml" />
	<site name="superficial"	data="http://www.thesuperficial.com/index.xml" />
	<site name="idontlikeyouinthatway"	data="http://feeds.feedburner.com/Idontlikeyouinthatwaycom" />
	<site name="people.com"	data="http://www.people.com/people/web/rss" />
	<site name="eonline.com"	data="http://www.eonline.com/everywhere/rss/index.jsp" />
	<site name="tmz.com"	data="http://www.tmz.com/rss.xml" />
	<site name="usweekly.com" data="http://64.90.166.18/atom/feed" />
	<site name="CelebSlam" data="http://www.celebslam.com/feed/" />
	<site name="I Can Haz" data="http://feeds.feedburner.com/ICanHasCheezburger?format=xml" />
</sites>

Now that we have the XML ready, we need to add the MXML to get the feed to the application tag (creationComplete=feedList.send());):

2

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">

Once we have the feedList retreived, we need to do something with it, right? Well, let’s add it to the comboBox, “siteCombo”. Here’s the AS to do it:

[Bindable]
private var sites:ArrayCollection = new ArrayCollection();
 
private function siteListHandler(event:ResultEvent):void{
	sites = event.result.sites.site;
	var siteObj:Object = new Object();
	siteObj.name = "Select"
	siteObj.url = "";
	sites.addItemAt(siteObj,0);
	siteCombo.selectedIndex = 0;
	//trace(event.result);
 }

In that snippet, we created an arrayCollection to store the result. We then add the initial null “Select” option to the comboBox. We also need to add the databinding to the “sites” comboBox, so that it can be populated with the list of sites. Let’s do that now:

8

<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" />

With the sites ComboBox binded (bound?) to the feedList, we need to add the function to handle the change event, so when the user selects a feed, the RSS feed is loaded. Here it is:

public function chooseSiteFeed(url:String, name:String):void{
myURL = url;
mdFeed.send();
}

Now that the mdFeed is triggered, what do we do? Well, it would be a good idea to bind the mdFeed results to the datagrid, right? Then we can see all the posts in the feed:

13

<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">

Now that the datagrid is getting fed with the tasty RSS results, we need to let the user read the description and then click a link to see the full post, right?

19
20
21
22

<mx:TextArea right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" bottom="10" left="10" width="150"/>
	</mx:VBox>

That should work… If not, don’t worry, I’m supplying the full MXML source. But first, let’s make sure we can use this little RSS reader on your site. In order to do this, we need to leverage some serverside scripting in order to load the RSS feed via a proxy script. This will let your SWF file make a call to the script, then script handles the external URL call, returning the result as a local XML file for your flash file. Here is what the PHP looks like:

<?php
	// PHP Proxy
	// Loads a XML from any location. Used with Flash/Flex apps to bypass security restrictions
	// Author: Paulo Fierro
	// January 29, 2006
	// usage: proxy.php?url=http://mysite.com/myxml.xml
 
	$session = curl_init($_GET['url']); 	               // Open the Curl session
	curl_setopt($session, CURLOPT_HEADER, false); 	       // Don't return HTTP headers
	curl_setopt($session, CURLOPT_RETURNTRANSFER, true);   // Do return the contents of the call
	$xml = curl_exec($session); 	                       // Make the call
	header("Content-Type: text/xml"); 	               // Set the content type appropriately
	echo $xml; 	      // Spit out the xml
	curl_close($session); // And close the session
?>

So, make yourself a proxyURL.php file with that content in it and save it. If you go back and modifiy the mdFeed function to use the proxy script, everything should be in order… Here, in totality, is the app:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="feedList.send()" backgroundGradientColors="[#0099CC, #2383ac]">
	<mx:Script>
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		import mx.effects.Resize;
 
		[Bindable]
		private var sites:ArrayCollection = new ArrayCollection();
		[Bindable]
		public var myURL:String; 
 
		private function siteListHandler(event:ResultEvent):void{
			sites = event.result.sites.site;
			var siteObj:Object = new Object();
			siteObj.name = "Select"
			siteObj.url = "";
			sites.addItemAt(siteObj,0);
			siteCombo.selectedIndex = 0;
		 	//trace(event.result);
		 }
 
		 public function chooseSiteFeed(url:String, name:String):void{
		 	myURL = "proxyURL.php?url=" + url;
       		mdFeed.send();
		 }
 
	</mx:Script>
	<mx:Style source="css/OSX.css" />
	<mx:HTTPService id="feedList" url="data/feedURLs.xml" result="siteListHandler(event)"/>
	<mx:HTTPService id="mdFeed" url="{myURL}" showBusyCursor="true" useProxy="false" />
	<mx:VBox width="100%" height="100%">
		<mx:HBox width="90%" height="40">
			<mx:Label text="Choose a Site:"/>
			<mx:ComboBox id="siteCombo" dataProvider="{sites}" labelField="name" change="chooseSiteFeed(ComboBox(event.target).selectedItem.data, ComboBox(event.target).selectedItem.name)" />
		</mx:HBox>
		<mx:Text width="90%" color="#000000"
		       text="Drag the divider up and down to resize the panel."/>
		<mx:VDividedBox height="100%" width="100%">
			<mx:DataGrid id="mdGrid" labelField="Choose a Site" dataProvider="{mdFeed.lastResult.rss.channel.item}" height="60%" width="100%">
			<mx:columns>
				<mx:DataGridColumn headerText="The Dirt" dataField="title" />
				<mx:DataGridColumn headerText="The Date" width="100" dataField="pubDate"/>
			</mx:columns>
			</mx:DataGrid>
			<mx:TextArea htmlText="{mdGrid.selectedItem.description}" right="10" top="234" bottom="50" left="10" width="100%" height="30%"/>
		</mx:VDividedBox>
		<mx:LinkButton label="Read the Full Post" click="navigateToURL(new URLRequest(mdGrid.selectedItem.link));" bottom="10" left="10" width="150"/>
	</mx:VBox>
</mx:Application>

IN the code I also loaded the OSX skin from Scalenine. So there you have it. Pretty easy, really, though I understand I may not have explained it all as well as possible. It’s just easier when you are actually going through things in front of a lab or class. If you have questions on how it all works, feel free to drop me a line. You can download the source, here.

Posted on September 14, 2008


12 comments

  1. Matt Sep 15

    Cool. I am going to do this for sure.

  2. korsun Feb 22

    good code, i think, i’ll use it for my wp blog insted of the standard plug-in

  3. Michael Markowski Mar 17

    Chad, great example and code! I’m putting together a similar RSS feed reader (see web link) but I have a problem. How do I get the page to load one of the feeds into the datagrid when the page first loads? Someone complained that the page “looks blank” when it first loads and so I’m trying to get it to load one of the XML feeds by default. Can you let me know how to do this? Thanks in advance.

  4. Horror Jul 16

    Sweet, I may implement this into one of my sites :)

    thanks

  5. Aaron Aug 18

    Very useful! Thanks for the detailed example.

  6. MultiK Aug 26

    Cool! I’m seek php proxy, thanks for example.

  1. How To: Make A Simple RSS Reader With Adobe Flex « Rich Internet Applications
  2. How To: Build a Simple RSS Reader with JQuery | Visualrinse | Design and Development by Chad Udell
  3. How To: Build a Simple RSS Reader with JQuery | Iona.LABS
  4. leg med nye medier. Eller noget.
  5. Return to RSS « Cluttered Systems News
  6. Un simple RSS Reader con Adobe Flex – ubiraci.me | BLOG |

Leave a reply