Just a quick example I threw together last night which loads the Kuler RSS feed and displays some items in a DataGrid along with their rating and theme image (using the Flex Image control as a custom item renderer).

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/22/parsing-the-kuler-rss-feed-using-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        creationComplete="tempXML.send(httpServiceParams)">

    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;

            private var kulerNS:Namespace = new Namespace("http://kulerserv/services/rss/kulerRSS");

            private function themeTitle_labelFunc(item:XML, column:DataGridColumn):String {
                return item.kulerNS::themeItem.kulerNS::themeTitle;
            }

            private function themeRating_labelFunc(item:XML, column:DataGridColumn):String {
                return item.kulerNS::themeItem.kulerNS::themeRating;
            }

            private function themeImage_labelFunc(item:XML, column:DataGridColumn):String {
                return item.kulerNS::themeItem.kulerNS::themeImage;
            }
        ]]>
    </mx:Script>

    <mx:Object id="httpServiceParams"
            listtype="rating"
            readerType="public" />

    <mx:HTTPService id="tempXML"
            url="http://kuler.adobe.com/kuler/API/rss/get.cfm"
            resultFormat="e4x" />

    <mx:XMLListCollection id="itemXMLListColl"
            source="{tempXML.lastResult.channel.item}" />

    <mx:VDividedBox width="100%" height="100%" >
        <mx:DataGrid id="dataGrid"
                width="100%"
                dataProvider="{itemXMLListColl}">
            <mx:columns>
                <mx:DataGridColumn headerText="Title:"
                        labelFunction="themeTitle_labelFunc">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:Label />
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>

                <mx:DataGridColumn headerText="Rating:"
                        textAlign="center"
                        labelFunction="themeRating_labelFunc" />

                <mx:DataGridColumn headerText="Image:"
                        textAlign="center"
                        labelFunction="themeImage_labelFunc"
                        itemRenderer="mx.controls.Image" />
            </mx:columns>
        </mx:DataGrid>

        <mx:TextArea text="{tempXML.lastResult}"
                width="100%"
                height="100%" />
    </mx:VDividedBox>

</mx:Application>

View source is enabled in the following example.

 
Tagged with:
 
About The Author

Peter deHaan

Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.

6 Responses to Parsing the Kuler RSS feed using Flex

  1. Charly says:

    Hi,

    would it be possible to use: kulerNS::themeItem.kulerNS::themeImage directly i.e. in the “Image”-DataGridColumn, to get the String value?

    If yes…which property should be used for?
    I think it would be the “data”-Attribute of the DataGridColumn..right?

    Best regards
    Charly

  2. terry kernan says:

    I noticed that when i came across this example today that the values used in the datagrid were empty, but rows are being copied from the xml feed to the datagrid, indicating that you’re able to walk through the xml file, but the content seems to be missing, any ideas?

  3. peterd says:

    terry kernan,

    Interesting, this was working earlier, but I’m seeing this problem intermittently now.
    It looks like my namespace may have changed. Try updating the Namespace declaration to the following:

    private var kulerNS:Namespace = new Namespace("http://kuler.adobe.com/kuler/API/rss/");
    

    Peter

  4. She says:

    Hi,
    I want to use this XML insted of kuler. I am able to display the whole feed but Images and Titles are not showing in the boxes. ANy idea?

    http://movielibrary.lynda.com/courses/actionscript/Site/Blog/rss.xml

  5. Nathan says:

    When I tried this example I was given a url to apply for a key and I recieved one. My question would be were should I add this key to my code? Thank You.

  6. Richard says:

    Wow. Nothing…

Leave a Reply

Your email address will not be published.

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre lang="" line="" escaped="">

Anti-Spam Protection by WP-SpamFree