I'm Gaurav Jassal. My specialty lies in the crafting highly interactive experiences for the web and other digital media. Ideas are my bread n butter. I mold and shape them into living breathing interactive experiences and captivate.
Recently i was doing reading on using itemRenderer in Flex. I found it interesting and very very useful for application development. All Flex list components are derived from the ListBase class, and include the following controls: DataGrid, HorizontalList, List, Menu, TileList, and Tree.
A list control gets its data from a data provider, which is a collection of objects. For example, a Tree control reads data from a data provider to define the structure of the tree and any associated data that is assigned to each tree node.You can think of the data provider as the model, and the Flex components as the view of the model. By separating the model from the view, you can change one without changing the other.
Each list control has a default mechanism for controlling the display of data, or view, and lets you override that default. To override the default view, you create a custom item renderer. the Flex list controls display the data they are given as simple text. But Flex is capable of much more, and the list controls provide a way to customize their content using itemRenderers.
Here is an example of using item itemrenderer in a Combobox. The default view of the combobox displays only text. In this example we will have combobox with a country list and using itemrenderer we will also display an country flag in it.
There are two ways of using itemremderers. First you can use it with pure MXML tags and Secondly you write a complete object oriented code to create a custom component.
View in New Window
Main.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
creationComplete="init()"
xmlns:gx="*"
width="390"
horizontalAlign="left" height="299">
<mx:Style source="assets/skins/vistaremix/vistaremix.css"/>
<mx:Script>
<![CDATA[
import mx.rpc.events.ResultEvent;
import mx.rpc.events.FaultEvent;
import mx.controls.Alert;
[Bindable]
private var countryList:XML;
private var customCombo:CountryList;
private function init():void
{
countryService.send();
}
// Result handler - gets called after RSS is loaded.
private function countryResultHandler(event:ResultEvent):void
{
countryList = event.result as XML;
}
// Fault handler - displays the error.
private function countryFaultHandler(event:FaultEvent):void
{
//Alert.show(event.fault.message, "Could not load photo feed");
country.text="Error : loading xml file";
}
]]>
</mx:Script>
<mx:HTTPService
id="countryService"
url="assets/xml/countries.xml"
resultFormat="e4x"
result="countryResultHandler(event);"
fault="countryFaultHandler(event);"
/>
<mx:Label text="Itemrenderer Example" fontSize="18" color="#940F2E" fontFamily="Georgia"/>
<mx:Label text="Custom Combobox using MXML tags "
fontSize="12"
fontFamily="Arial"
fontWeight="normal"/>
<mx:ComboBox dataProvider="{countryList.country}"
itemRenderer="CountryList"
id="country"/>
<mx:Label text="Custom Combobox with Actionscript"
fontSize="12"
fontFamily="Arial"
fontWeight="normal"/>
<gx:CountryComboBox/>
</mx:Application>
CountryList.mxml
<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Image source="assets/icons/{data.@code}.png"/>
<mx:Label text="{data}"/>
</mx:HBox>
Custom Combobox Class
package
{
import mx.controls.ComboBox;
import mx.core.ClassFactory;
import mx.rpc.events.FaultEvent;
import mx.rpc.events.ResultEvent;
import mx.rpc.http.HTTPService;
public class CountryComboBox extends ComboBox
{
[Bindable]
private var countryList:XML;
private var customCombo:CountryList;
private var countryService:HTTPService;
public function CountryComboBox()
{
super();
init();
}
private function init():void
{
// load the external xml file
countryService=new HTTPService();
countryService.url="assets/xml/countries.xml";
// Setting the resultFormat to e4x
countryService.resultFormat="e4x";
// declaring thevent listeners for the HTTPService object
countryService.addEventListener(FaultEvent.FAULT,countryFaultHandler);
countryService.addEventListener(ResultEvent.RESULT,countryResultHandler);
// Call send method to load the XML data.
countryService.send();
}
private function countryResultHandler(event:ResultEvent):void
{
// once the xml data is loaded add it to the XML object
countryList = event.result as XML;
/* because the itemrenderer require an object reference of an IFactory class.
* you can pass object of a ClassFactory type.
*/
this.itemRenderer=new ClassFactory(CountryRow);
this.dataProvider=countryList.country;
}
// Fault handler - displays the error.
private function countryFaultHandler(event:FaultEvent):void
{
//Alert.show(event.fault.message, "Could not load photo feed");
this.text="Error : loading xml file";
}
}
}
