Parsing the Kuler RSS feed using Flex

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.

6 thoughts on “Parsing the Kuler RSS feed using Flex

  1. 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. 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. 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. 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.

Comments are closed.