Build Your Own IPhone RSS Reader in 15 Minutes With Flash Builder

In this article we will build a RSS Reader using Xml Data Service in Flash Builder for an iPhone 4 Application (you can change which mobile OS is to be used from the project's properties). To develop this application you should follow the following steps.

Step 1 : First of all create a new Flash mobile application which supports iPhone 4.

Step 2 : Create Tabbed Application add one Tab.

Step 3 : Later design the application according to this.

Step 4 : Add RichEditableText and List controls from the toolbox.

Since RichEditableText wont be seen on Toolbox add it by using code in mxml:

<s:RichEditableText editable="false" id="ret" x="0" y="186" width="321" height="175" clipAndEnableScrolling="true" fontFamily="Georgia" fontSize="8">

The application will look like.

Now we need to connect to an Xml file of our blog. Follow the steps:

First click on Data->Connect to Xml.

Select Xml Service Type.
 

Then choose URL section and give your blog's xml location.

Here as an URL I gave my blog's feedburner link. Because I used Blogengine and it didn't accept my syndication file, I had to burn my blog on Google's FeedBurner which was a life-saver in this situation :)

Later click on "invoke" button to get nodes from your xml file.

Click Finish!

Now click->Window->Data/Services to Bind Data to our List control.
 

Just Drag getData operation over List and then drop it!

A new Dialog Window will appear asking you to choose on details.
 

Our service is called iersoycom as you can remember. The Label field contains the texts that will be displayed in the List control. Because we want to view the Titles of the Blog here.

Click Ok to finish.

Now automatically some code has been added to our project. Update the "list_creationCompleteHandler" function just like that:

protected function list_creationCompleteHandler(event:FlexEvent):void
{

     getDataResult.token = iersoycom.getData("title");
}

Now let's run the project to see if we get RSS titles.

Ok we got them. 

The next that we will be doing is adding another operation to view the Content. Add a Service again (as we did above).

Select the Node description and check "is Array?"; rename the service name to "descs" which we will be using here. Again open up the Data/Services window and drag the last created operation on the RichEditableText.Some codes will be again automatically added.

Update your service.

getDataResult2.token = descs.getData("description");

Now it's time to add a function to reverse List items. I will tell you later why I did this. Before adding the function add these namespaces. 

import mx.events.FlexEvent;
import mx.events.CloseEvent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import flashx.textLayout.conversion.*;
import flashx.textLayout.formats.*
import flashx.textLayout.elements.*

Update list_creationCompleteHandler function.
protected function list_creationCompleteHandler(event:FlexEvent):void
{
       getDataResult.token = iersoycom.getData("title");
       getDataResult2.token = descs.getData("description");
}      

Add a new function that reverses index of list.

private function Changeit(event:IndexChangeEvent):void
{
    var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
    var selItems:Vector.<Object> = event.currentTarget.selectedItems;
    var numItems:Number = selIndices.length;      
   getDataResult2.token = descs.getData("description");                          
    var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
   ret.textFlow=importer.importToFlow(getDataResult2.lastResult[list.selectedIndex]);
}

The first three codeline reverses index numbers. The latest codes are for importing the content from the blog. Normally if you use TextFlow on his own, it will suspect it's a plain content receiving the feed. So we need to add "Html Format converter" to view html markup tags. According to the selectedindex we will bind content information of the feed. Why do we do this? Because when it adds new items in the list the first index is 11 (that's my blog post count). So to apply the the selectedindex method we need to first reverse the list control.

Your mxml file should look like this; check it before running RSSReader.

<?xml version="1.0" encoding="utf-8"?>
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009"
              xmlns:s="library://ns.adobe.com/flex/spark"
              xmlns:iersoycom="services.iersoycom.*"
              xmlns:descs="services.descs.*"
              title="RSS">
       <fx:Declarations>
              <s:CallResponder id="getDataResult"/>
              <iersoycom:Iersoycom id="iersoycom"/>
              <s:CallResponder id="getDataResult2"/>
              <descs:Descs id="descs"/>
              <!-- Place non-visual elements (e.g., services, value objects) here -->
       </fx:Declarations>
       <fx:Script>
              <![CDATA[
                     import mx.events.FlexEvent;

                     import mx.events.CloseEvent;
                     import mx.events.FlexEvent;
                     import spark.events.IndexChangeEvent;
                     import flashx.textLayout.conversion.*
                     import flashx.textLayout.formats.

                     import flashx.textLayout.elements.*                          
                           private function Changeit(event:IndexChangeEvent):void
                           {                                 
                                  var selIndices:Vector.<int> = event.currentTarget.selectedIndices;
                                  var selItems:Vector.<Object> = event.currentTarget.selectedItems;
                                  var numItems:Number = selIndices.length;
                                  getDataResult2.token = descs.getData("description");                       

                                  var importer:ITextImporter = TextConverter.getImporter(TextConverter.TEXT_FIELD_HTML_FORMAT);
                                  ret.textFlow=importer.importToFlow(getDataResult2.lastResult[list.selectedIndex]);
                           }                
                     protected function list_creationCompleteHandler(event:FlexEvent):void
                     {
                          getDataResult.token = iersoycom.getData("title");
                          getDataResult2.token = descs.getData("description");
                     }                               
              ]]>
       </fx:Script>     
       <s:List change="Changeit(event);" id="list" x="0" y="0" width="320" height="155" borderColor="#FF0000" borderVisible="true"
                     creationComplete="list_creationCompleteHandler(event)" fontFamily="Georgia" fontSize="8"
                     labelField="title">
              <s:AsyncListView list="{getDataResult.lastResult}"/>
       </s:List>
       <s:RichEditableText id="ret" x="0" y="163" width="321" height="198" clipAndEnableScrolling="true"
                                         editable="false"
                                         fontFamily="Georgia" fontSize="8"/>             
</s:View>

Runnning it:

Not as good as one in the apps Store but you can think of this application as a starter kit. I hope that its useful for anyone. If you have comments or problems, i'm curiously waiting for it. How many minutes did it take? Share your experience!