| | {section} |
| | {column:width=80%} |
| | |
| | h2. 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 |
| | {column} |
| | {column} |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/DataGrid} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Lists} |
| | {rate:title=User rating|theme=dynamic|key=focal|display=default} |
| | {adbe-pod} |
| | h6. Learn more |
| | * {adbe-popup:http://blog.paranoidferret.com/index.php/2007/09/19/flex-using-item-renderers/}Flex - Using Item Renderers{adbe-popup} |
| | * {adbe-popup:http://ricoonflex.wordpress.com/2007/04/19/creating-a-custom-menu-using-item-renderers/}Creating a Custom Menu Using Item Renderers{adbe-popup} |
| | * {adbe-popup:http://livedocs.adobe.com/flex/3/html/cellrenderer_1.html}LiveDocs{adbe-popup} |
| | {adbe-pod} |
| | {column} |
| | {section} |
| | {code} |
| | <?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> |
| | {code} |
| | |
| | h2. HBoxWeatherDisplay ItemRenderer |
| | |
| | {code} |
| | <?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> |
| | {code} |
| | |
| | h2. Rendered Application |
| | |
| | | {test-flash:600|700|TileListExample3.swf}TileListExample3{test-flash} |
| | | {test-flash:700|600|TileListExample3.swf}TileListExample3{test-flash} |
| | |
| | |
| | {adbe-prev:http://learn.adobe.com/wiki/display/Flex/DataGrid} |
| | {adbe-next:http://learn.adobe.com/wiki/display/Flex/Lists} |
