Simple RSS Reader built in AIR for Mobile

This post is more than 2 years old.

Tonight I whipped up a quick port of Mike Chamber's code that demonstrates RSS parsing in ActionScript. I took his code and built a simple native AIR for Mobile application from it. The more I work with Flash Builder "Burrito" and Flex SDK "Hero" (the new AIR framework with mobile support), the more I really appreciate how easy Adobe has made mobile development. I've got a full application here that downloads a RSS feed, displays it nicely, and allows you to read the entry text. While this isn't that special, what impresses me is that steps done to make it easy to create the application. For example, it's trivial to tell the application to move from one screen to another. It's trivial to pass data from one view to another. These are all things that aren't terribly complex in a traditional AIR application - but frankly there is nothing at all wrong with making things even simpler. Let's take a look at the code - and again - credit goes to Mike Chambers for the original.

Let's start off with the first page of the application. This view is responsible for:

  • Getting the RSS from a remote feed, in my case,
  • Turning the RSS string into data. This is done with an open source library called as3syndicationlib
  • Setting the RSS items into a list.
  • Providing a way to click from the list into a detail

Here is that template in full. I'm going to skip over the things covered in Mike's post.

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="" xmlns:s="library://" title="News from {COMPANY}" viewActivate="init()"> <fx:Declarations> <!-- Place non-visual elements (e.g., services, value objects) here --> </fx:Declarations>

import com.adobe.utils.XMLUtil;
import com.adobe.xml.syndication.rss.Item20;
import com.adobe.xml.syndication.rss.RSS20;

import mx.collections.ArrayCollection;
[Bindable] private var COMPANY:String = "AndroidGator";
private var URL:String = "";
private var RSSURL:String = "";

[Bindable] private var rssItems:ArrayCollection;
private var loader:URLLoader;

private function init():void {
	loader = new URLLoader();
	//request pointing to feed
	var request:URLRequest = new URLRequest(RSSURL);
	request.method = URLRequestMethod.GET;
	//listen for when the data loads
	loader.addEventListener(Event.COMPLETE, onDataLoad);
	//listen for error events
	loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError);
	loader.addEventListener(SecurityErrorEvent.SECURITY_ERROR, onSecurityError);
	//load the feed data

//called once the data has loaded from the feed
private function onDataLoad(e:Event):void {
	//get the raw string data from the feed
	var rawRSS:String = URLLoader(;

	//parse it as RSS

private function parseRSS(data:String):void {
	//XMLSyndicationLibrary does not validate that the data contains valid
	//XML, so you need to validate that the data is valid XML.
	//We use the XMLUtil.isValidXML API from the corelib library.
		trace("Feed does not contain valid XML.");
	//create RSS20 instance
	var rss:RSS20 = new RSS20();
	//parse the raw rss data
	//get all of the items within the feed
	var items:Array = rss.items;
	rssItems = new ArrayCollection(items);

private function loadEntry(evt:Event):void {

private function onIOError(e:IOErrorEvent):void {

private function onSecurityError(e:SecurityErrorEvent):void {

	&lt;s:VerticalLayout paddingTop="10" paddingLeft="5" paddingRight="5" gap="20" /&gt;

&lt;s:List id="rssListing" dataProvider="{rssItems}" width="100%" height="100%" click="loadEntry(event)" labelField="title" /&gt;

&lt;s:Button width="100%" label="Visit Website" click="navigateToURL(new URLRequest(URL))" /&gt;


As I said, I won't bother discussing what Mike's post does, but let me point out a few things. I've got 3 variables that define how the application works and is displayed. COMPANY (which should really be SITE) is simply a label for the application. It tells you what site's RSS feed is being used. URL and RSSURL are the main URL and RSS feed URLs respectively. Make note of how we can load the main URL using the navigateToURL function. Nice and simple, right? Now take a look at the loadEntry function, repeated below.

private function loadEntry(evt:Event):void { navigator.pushView(ItemView,{item:rssListing.selectedItem}); }

This is exactly what I was talking about in terms of Adobe going out of it's way to simplify things. The pushView API does exactly what you would imagine - put up a view in front of the user. The second argument is a set of data that is passed into the view. This makes it easy to handle navigation between different views and pass data around. Love it. Here is how it renders.

Now let's look at the rss item viewf.

<?xml version="1.0" encoding="utf-8"?> <s:View xmlns:fx="" xmlns:s="library://" title="" initialize="init()" xmlns:mx="library://">

	&lt;mx:DateFormatter id="myDateFormat" formatString="MMMM D, YYY / L:NN A" /&gt;

@namespace s "library://";
@namespace mx "library://";

#titleValue {
	font-size: 20px;
	font-weight: bold;

import spark.components.supportClasses.MobileTextField;

private function init():void {
	//credit to Brian Rinaldi:
	MobileTextField(bodyText.textDisplay).htmlText = data.item.description;

	dateValue.text = myDateFormat.format(data.item.pubDate);


	&lt;s:Button height="100%" label="Back" click="navigator.popToFirstView()" /&gt;

	&lt;s:VerticalLayout paddingTop="10" paddingLeft="5" paddingRight="5" gap="20" /&gt;

&lt;s:Label width="100%" id="titleValue" text="{data.item.title}"  /&gt;
&lt;s:Label width="100%" id="dateValue" /&gt;

&lt;s:TextArea id="bodyText" width="100%" height="100%"  /&gt;

&lt;s:Button width="100%" label="Click to Read" click="navigateToURL(new URLRequest(" /&gt;


For the most part, this isn't anything special. Note how I make use of data.item.*. This is the RSS item I passed in with my pushView. Also make note of the button that let's me go back. I don't need this. The hardware itself has a back button. But I like having the obvious button there. Lastly, make note of the nice hack I got from Brian Rinaldi. This is - as far as I know - the only way to display HTML in a mobile component. I'm sure it will be corrected later. Here is how one typical RSS item renders in the application.

And that's it. I've included a zip that includes all the source code. The zip also includes an APK file if you want to skip compiling it yourself. I've got an interesting idea for a follow up to this - and if I can stay off of Warcraft enough - I'll get it out tomorrow night.

Download attached file.

Raymond Camden's Picture

About Raymond Camden

Raymond is a developer advocate for HERE Technologies. He focuses on JavaScript, serverless and enterprise cat demos. If you like this article, please consider visiting my Amazon Wishlist or donating via PayPal to show your support. You can even buy me a coffee!

Lafayette, LA

Archived Comments

Comment 1 by Nathanael Brubaker posted on 1/21/2011 at 11:36 AM

Hi Ray -

Do you still have the source code for this? Is it possible to get a copy of it?



Comment 2 by Nathanael Brubaker posted on 1/21/2011 at 11:40 AM

Sorry Ray -

just a little dense and too late for me. I found the file.



Comment 3 by Raymond Camden posted on 1/21/2011 at 5:11 PM

Heh well to be fair, the download link isn't very big.

Comment 4 by chris posted on 5/19/2011 at 10:35 PM

iOS has a Web View component that you can use to display a web page. Is StageWebView the best way to approximate this for a Flex Mobile app? If so, how would you modify your reader example to load the URL into the StageWebView? Also, is there any word on a Flex StageWebView component of sorts?


Comment 5 by Raymond Camden posted on 5/19/2011 at 10:49 PM

Flex Mobile has a StageWebView. Problem solved. :) I played with it for the first time yesterday. Just google a bit - there's a bunch of examples.

Comment 6 by ilovedoom posted on 8/5/2011 at 6:13 PM

i'm having problems with the code. flash builder says that the lines about importing RSS components aren't good. any idea why?

Comment 7 by Raymond Camden posted on 8/5/2011 at 6:16 PM

You need to add the library,as3syndicationlib, to your project.

Comment 8 by ilovedoom posted on 8/5/2011 at 6:43 PM

Thanks! Now works fine.
Really cool and fast developing multiple for every platform and blog.
i updated some lines because with the flex 4.5 there were still bugs with some spark components.
Probably i'll make a post with the final review.

Comment 9 by J posted on 5/7/2012 at 8:21 PM

Hey Brian, not sure if you are still out there or not. I was wondering if you could help me troubleshoot a flex app that I am trying to build.


Comment 10 by Raymond Camden posted on 5/7/2012 at 8:58 PM

Who did you mean? Don't see a Brian in the comments list.

Comment 11 by J posted on 5/7/2012 at 10:27 PM

Wow, I was looking at a co-worker while I was writing the comment. My bad!

Anyways, do you think you may be able to help? I can send you the fxp file.

Comment 12 by Raymond Camden posted on 5/8/2012 at 1:15 AM

Sorry - I haven't used Flex for Mobile in almost a half a year. Been entirely focused on HTML, web standards, and PhoneGap lately.