Over the weekend, I built a simple RDF reader to demonstrate some of the capabilities of Flex 2 for a presentation. I wanted to review what it takes, and post my code for others to enjoy.
I am using a RDF feed provided by the Adobe development center. I choose this feed simply because Adobe has an open cross domain policy, which allows Flex to ingest the feed without any need for a proxy. Learn more about the cross domain policy and it’s security implication here. There is also a site, here, that tracks some of the leading sites that support open cross domain policies – I.E. sites that appreciate Flex & Flash developers 
First, we want to setup several variables. Four of the five will receive their data from the feed itself.
private var rssURL:String = 'http://weblogs.macromedia.com/dev_center/index.rdf' [Bindable] private var feedXML:ArrayCollection; [Bindable] private var headerText:String; [Bindable] private var devHome:String; [Bindable] private var mainDescText:String;
Now that we have 4 variables to store the data that returns in the RDF (xml) feed, it’s time to write a few functions to get that data. First we need to fetch the data from the internet. The
connectToRSS()
function sets up a HTTPService call and adds two listeners. One for a successful result and one for a failed result.
private function connectToRSS():void { var http:HTTPService = new HTTPService(); http.url = rssURL; // listen for result http.addEventListener("result",onGetServiceResult); // listen for fault http.addEventListener("fault",callFails); // initiate the request http.send(); }
That’s was pretty easy, right? Let’s review the onGetServiceResult function. This function accepts a single argument, which is a ResultEvent type. We will be able to access the RDF (xml) nodes via the returning event object. We can also take this opportunity to grab the feeds header name, description and URL and place them into the appropriate predetermined variables. Let’s take a look at it.
private function onGetServiceResult(evt:ResultEvent):void { trace('event: ' + evt.result.RDF + " " + evt); // insert the feed nodes into the ArrayCollection variable feedXML = evt.result.RDF.item; headerText = evt.result.RDF.channel.title; mainDescText = evt.result.RDF.channel.description; devHome = evt.result.RDF.channel.link; }
Now, we need to create a few MXML display components to present the data. We are going to use a standard Panel component, which contains a VBox and TileList. The only *special* component is the custom item renderer used to display each RDF node. Use the itemRenderer attribute on the TileList tag to use the custom component.
<mx:Panel x="10" y="19" width="699" height="426" layout="absolute" title="Flex RSS Reader"> <mx:VBox x="10" y="5" width="659"> <mx:LinkButton fontSize="14" fontWeight="bold" label="{headerText}" paddingLeft="0" textAlign="left" click="gotoDevCenter(devHome)" /> <mx:TextArea htmlText="{mainDescText}" width="100%" editable="false" borderThickness="0" textAlign="left" /> </mx:VBox> <mx:TileList x="10" y="70" width="659" height="296" columnWidth="659" selectable="false" useHandCursor="true" maxColumns="1" borderThickness="0" dataProvider="{feedXML}" columnCount="1" direction="horizontal" itemRenderer="com.gtdotcom.display.feedElementRender" /> </mx:Panel>
There are still a few Actionscript 3 functions we haven’t reviewed, but let’s jump over the feedElementRender for a moment, where all the action happens.
Item renderers extend the repeater class. It’s a great way to create a loop that iterates over your display. The benefit to the TileList and custom item renderer approach is that if you have a list of 1000 items, Flex only renders what is displayed on the screen. This helps manage system resources appropriately. Here’s the code:
<?xml version="1.0" encoding="utf-8"?> <mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml" > <mx:Script> <![CDATA[ private function linkToPage():void { var u:URLRequest = new URLRequest(data.link); navigateToURL(u,"_blank"); } ]]> </mx:Script> <mx:VBox width="100%" height="100%"> <mx:LinkButton label="{data.title}" width="100%" click="linkToPage()" textAlign="left" textDecoration="underline" fontWeight="bold" color="#0000FF" /> <mx:TextArea htmlText="{data.description}" selectable="false" editable="false" width="100%" textAlign="left" borderThickness="0" /> </mx:VBox> </mx:Canvas>
There are just three more functions to review. The first is the initialization function, which is called on creationComplete. All this function does is call the connectToRSS() function. The second to last is the fault event listener function named callFails. This function, like the onGetServiceResult function takes a single event object. The distinction between the two, the former takes a FaultEvent type as opposed to the ResultEvent type that the latter accepts. The final function is the gotoDevCenter function. This function, called on click, merely creates a link to the Adobe Dev Center homepage.
All this code, leads to a nice little RDF reader. Like so:
Flash Content
