Log In  
  Getting Started  
----------------------------------------

Resources

 

Item Renderers

Each list-based control has a default item renderer. There are three types of custom item renderers

  • Drop-in - Specify a control as the value for item renderer
  • Inline - For complete control over item rendering. Use <mx:Component> tag
  • Component - Custom components written in MXML or ActionScript used as Item renderer
previous page next page

User rating?

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    backgroundColor="#FFFFFF"
    backgroundAlpha="0"
    horizontalAlign="left"
    verticalGap="15" horizontalGap="15">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.rpc.events.ResultEvent;

            [Bindable]
            private var myResult:XML;

            [Bindable]
            private var weatherObject:Object;

            [Bindable]
            private var listContents:ArrayCollection;

            private namespace yweather = "http://xml.weather.yahoo.com/ns/rss/1.0";
            use namespace yweather;

            public function requestWeather():void {
                weatherService.cancel();
                var params:Object = new Object();
                params.p = zip.text;
                weatherService.send(params);
            }

            public function resultHandler(event:ResultEvent):void {
                myResult = XML(event.result);
                weatherObject = new Object();
                weatherObject.zip = zip.text;
                weatherObject.city = myResult.channel.yweather::location.@city;
                weatherObject.temp = myResult.channel.item.yweather::condition.@temp;
                weatherObject.imgsource = parseImageUrl(myResult.channel.item.description);

                var a:Array = new Array(weatherObject);
                listContents = new ArrayCollection(a);
            }

            private function parseImageUrl(fromHtml:XMLList):String {
                var pattern:RegExp = /img src="(.+?)" /;
                var results:Array = pattern.exec(fromHtml);
                var imageURL:String = results[1]; // backreference 1 from pattern
                return imageURL;
            }
        ]]>
    </mx:Script>

    <mx:HTTPService
        id="weatherService"
        url="http://weather.yahooapis.com/forecastrss"
        resultFormat="e4x"
        result="resultHandler(event)" />

    <mx:Text text="1. Basic Form + HTTPService Retrieval" />

    <mx:Form width="400">
        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zip" />
            <mx:Button label="Get Weather"
            	click="requestWeather()" />
        </mx:FormItem>
    </mx:Form>

    <mx:Text text="Raw RSS Feed" />

    <mx:TextArea id="resultFld"
    	text="{myResult}"
    	width="400" height="152" />

    <mx:Text text="1. List w/ Image Item Renderer (Drop-In)" />

    <mx:List dataProvider="{listContents}"
        labelField="imgsource"
        width="400" height="100"
        itemRenderer="mx.controls.Image" />

    <mx:Text text="2. List w/ HBoxWeatherDisplay itemRenderer" />

    <mx:List dataProvider="{listContents}"
    	labelField="zip"
    	width="400" height="100"
    	itemRenderer="components.HBoxWeatherDisplay" />

</mx:Application>

HBoxWeatherDisplay ItemRenderer

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" width="400" height="100"
    xmlns:me="components.*" >
    <mx:Script>
        <![CDATA[
            private var _data:Object;

            override public function set data(value:Object):void {
                _data = value;
                if (data != null) {
                    zip.text = _data.zip;
                    city.text = _data.city;
                    temp.text = _data.temp + 'F';
                    img.source = _data.imgsource;
                }
            }

            override public function get data():Object {
                return _data;
            }

        ]]>
    </mx:Script>

    <mx:Image id="img" />
    <mx:VBox height="100%">
        <mx:Text id="zip" />
        <mx:Text id="city" />
        <mx:Text id="temp" />
    </mx:VBox>
</mx:HBox>

Rendered Application

previous page next page
Added by Annette Kunovic , last edited by matthew horn on Apr 22, 2008  (view change)
Labels: 
(None)

Powered by Atlassian Confluence 2.7.1, the Enterprise Wiki. Bug/feature request - Atlassian news - Contact administrators