How to Parse RSS/Atom Feeds using ActionScript 3 / Adobe Flex

Processing RSS/Atom Feeds is one very common use of XML parsing and HTTP/Web technology in Adobe Flex/AIR mobile applications.

Fortunately, ActionScript 3 Programming Language supports E4X, which is XML extensions on top of the programming language itself to make parsing and processing RSS Feeds or Atom documents (which are valid XML documents) very easy.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for parsing RSS/Atom Feeds XML using ActionScript:

<?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"
		overlayControls="false" tabBarVisible="true" title="Home"
		initialize="homeView_initializeHandler(event)">
	<fx:Declarations>
		<fx:XML id="detikRss2" source="samples/detik_rss2.xml"/>
	</fx:Declarations>
	<fx:Script>
		<![CDATA[
			import model.Article;
			
			import mx.collections.ArrayList;
			import mx.events.FlexEvent;
			import mx.utils.StringUtil;
			
			[Bindable] private var articles:ArrayList = new ArrayList([]);
			
			protected function homeView_initializeHandler(event:FlexEvent):void
			{
				var newArticles: Array = [];
				for each (var el:XML in detikRss2..item) {
					var title:String = StringUtil.trim(String(el.title).replace(/\s+/g, " "));
					var body:String = StringUtil.trim(String(el.description).replace(/<.*?>/g, " ").replace(/\s+/g, " "));
					var article:Article = new Article(title, el.body);
					article.summary = new String(body).substr(0, 160);
					article.url = StringUtil.trim(el.link);
					article.imageUrl = StringUtil.trim(el.enclosure.@url);
					trace("Parsed", article);
					newArticles.push(article);
				}
				articles.source = newArticles;
			}
			
		]]>
	</fx:Script>
	<s:Scroller top="0" bottom="0" left="0" right="0">
		<s:DataGroup itemRenderer="renderer.ArticleRenderer" dataProvider="{articles}" width="100%">
			<s:layout>
				<s:VerticalLayout/>
			</s:layout>
		</s:DataGroup>
	</s:Scroller>
</s:View>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).

How to Design Text/Edit Input Boxes Neatly using FormLayout

Designing text input dialogs and data editors should be easy, and Flex 4.5 provides FormLayout exactly for this purpose. Your labels and input/edit components will align nicely and re-layout automatically when the application is resized, when the user rotates the device orientation from portrait to landscape and vice versa.

Make sure to wrap the Group with FormLayout inside the Scroller Spark component, so the form items can use touch scrolling by swiping your finger on the screen. It's also necessary because forms that look great on portrait orientation may need to be scrolled vertically on landscape orientation.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for using FormLayout:

<?xml version="1.0" encoding="utf-8"?>
<!-- Manual posting of article, for development mode -->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark" title="Post an article">
    <s:actionContent>
        <s:Button label="Randomize" click="randomizeBtn_clickHandler(event)"/>
        <s:Button label="Post" click="postBtn_clickHandler(event)"/>
    </s:actionContent>
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <fx:Script>
        <![CDATA[
            import model.Article;
            import model.Persistence;
           
            import mx.binding.utils.BindingUtils;
            //var article:Object = {title: "Computer available", body: "Lenovo is releasing new laptop."};
            [Bindable] private var article:Article = new Article("Computer available", "Lenovo has released Y450 laptop.");
           
            protected function randomizeBtn_clickHandler(event:MouseEvent):void
            {
                var companies:Array = ["Microsoft", "Intel", "Google", "Apple"];
                article.title = companies[Math.floor(Math.random() * companies.length)] + " profits $" + Math.floor(Math.random() * 1000) + " millions";
            }
           
            protected function postBtn_clickHandler(event:MouseEvent):void
            {
                //validateNow();
                Persistence.instance.article.create(article);
            }
           
        ]]>
    </fx:Script>
    <s:Scroller top="0" bottom="0" left="0" right="0">
        <s:Group width="100%">
            <s:layout>
                <s:FormLayout/>
            </s:layout>
            <s:FormItem label="Title" width="100%">
                <s:TextInput text="@{article.title}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Summary" width="100%">
                <s:TextInput text="@{article.summary}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Body" width="100%">
                <s:TextArea text="@{article.body}" width="100%"/>       
            </s:FormItem>
            <s:FormItem label="Published" width="100%">
                <s:TextInput text="@{article.pubDateStr}" width="100%"/>
            </s:FormItem>
            <s:FormItem label="Author" width="100%">
                <s:TextInput text="@{article.author}" width="100%"/>
            </s:FormItem>
            <s:FormItem label="URL" width="100%">
                <s:TextInput text="@{article.url}" width="100%"/>
            </s:FormItem>
        </s:Group>
    </s:Scroller>
</s:View>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).

How to use Create a List with Custom Layout Using DataGroup and itemRenderer (IDataRenderer implementation)

In Adobe Flex 4.5 Mobile Spark Components, the DataGroup with Custom itemRenderer (IDataRenderer implementation) allows you to layout items in a list with additional formatting & styling.

If you wrap the DataGroup inside the Scroller Spark component, the list of items can then be touch scrolled by swiping your finger on the screen.

To develop Adobe AIR applications on Android smartphones easily, I highly recommend Developing Android Applications with Adobe AIR (Adobe Developer Library).

Sample code for the View that contains the DataGroup:

<?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" title="Home" show="view1_showHandler(event)">
    
    <fx:Script>
        <![CDATA[
            import model.Article;
            import model.Persistence;
            
            import mx.collections.ArrayList;
            import mx.events.FlexEvent;
            
            [Bindable] private var articles:ArrayList = new ArrayList;
            protected function manualPostBtn_clickHandler(event:MouseEvent):void
            {
                navigator.pushView(ManualPost);
            }
            
            protected function view1_showHandler(event:FlexEvent):void
            {
                var articles:Array = Persistence.instance.article.findAll();
                this.articles.source = articles;
            }
            
        ]]>
    </fx:Script>
    
    <fx:Declarations>
        <!-- Place non-visual elements (e.g., services, value objects) here -->
    </fx:Declarations>
    <s:Scroller top="0" bottom="0" left="0" right="0">
        <s:DataGroup width="100%" itemRenderer="renderer.ArticleRenderer" dataProvider="{articles}">
            <s:layout>
                <s:VerticalLayout/>
            </s:layout>
        </s:DataGroup>
    </s:Scroller>
    <s:navigationContent>
        <s:Button x="39" y="22" label="Manual" click="manualPostBtn_clickHandler(event)"/>    
    </s:navigationContent>
    
</s:View>

Sample code for the itemRenderer (IDataRenderer implementation):

<?xml version="1.0" encoding="utf-8"?>
<s:Group xmlns:fx="http://ns.adobe.com/mxml/2009" 
                    xmlns:s="library://ns.adobe.com/flex/spark"
                    width="100%" height="120" implements="mx.core.IDataRenderer">
    <fx:Script>
        <![CDATA[
             private var _data:Object;

            [Bindable]
            public function get data():Object
            {
                return _data;
            }

            public function set data(value:Object):void
            {
                _data = value;
            }

        ]]>
    </fx:Script>
    <s:Label x="98" y="10" width="331" text="{data.title}"/>
    <s:Label left="98" right="10" top="36" bottom="36" fontSize="16"
             text="{data.summary}"/>
    <s:Label right="180" bottom="10" styleName="miniLink" text="Like"/>
    <s:Label right="80" bottom="10" styleName="miniLink" text="Comment"/>
    <s:Label right="10" bottom="10" styleName="miniLink" text="Share"/>
    <s:Image x="10" y="10" width="80" height="80" backgroundColor="#ff6666" />
</s:Group>

Learn more about Mobile Flex Development in Developing Android Applications with Adobe AIR (Adobe Developer Library).