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

The ItemRenederer should not set the values of the UI components inside the set data.  The data should be written in the commitProperties method like so:

override protected function commitProperties():void
{
        super.commitProperties();
zip.text = _data.zip;
city.text = _data.city;
temp.text = _data.temp + 'F';
img.source = _data.imgsource;

 Otherwise you will get null exceptions if you try to enable drag and drop.

This example isn't included in the downloadable zip project file.  To create it:

  1. copy the application mxml code above into an MXML Application called WeatherForm.mxml
  2. create a folder in the root directory of your project and call it 'components'
  3. right-click the components folder and select 'New > MXML Component'
    1. filename: HBoxWeatherDisplay
    2. based on: HBox
    3. width: 400
    4. height: 100
  4. click 'Finish'
  5. copy 'HBoxWeatherDisplay ItemRenderer' code from example above and replace the default code in the newly created HBoxWeatherDisplay.mxml component in your project
  6. Apply Marco Ortiz's fix in the comment box above to the WeatherForm.mxml application
  7. Run your application!

An interesting aside, though:  The drop-in example (middle box) displays the image using the Image control's default height and width not the real image's actual height and width until the image is loaded into cache and then refreshed.  Also, an error occurs if supplying an incorrect zip code (you'll need to add a ZipCodeValidator):

            public function resultHandler(event:ResultEvent):void {
                myResult = XML(event.result);
                weatherObject = new Object();
                if (myResult.channel.title == "Yahoo! Weather - Error") [
                 weatherObject.imgsource = "http://arc.help.yahoo.com/error.gif";
                 weatherObject.temp = myResult.channel.item.description + "  ";
                }
                else [
                 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);
            }   

. . . 

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

    <mx:ZipCodeValidator source="[zip}" property="text"
        trigger="[getWeather}" triggerEvent="click" valid="requestWeather()" />

Note: replace [ with { because this site flags it as an 'unknown macro'

Posted by nnnhh lloool at Jul 29, 2008 10:57Updated by nnnhh lloool

Here's an example of "Inline Item Renderer" that's mentioned at the top of this guide but never shown in the example:

 <mx:Text text="3. Image (Inline)" />

 <mx:List dataProvider="[listContents}" width="400" height="100">
  <mx:itemRenderer>
   <mx:Component>
    <mx:Image source="[data.imgsource}" />
   </mx:Component>
  </mx:itemRenderer>
 </mx:List>

Note: replace [ with { because this site flags it as an 'unknown macro'

There is an error in the regular expression it should be:

var pattern:RegExp = /img src="(.+?)"/

The example above includes a space after "(.+?)" and before /

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