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.

Tagged as: itemRenderer