Webdevelopment Blog

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.

Hers is an exmplete 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 Demo

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>

  
<?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>

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";
}

}
}

package
{
import mx.containers.HBox;
import mx.controls.Image;
import mx.controls.Label;  

public class CountryRow extends HBox
{
private var _image:Image;
private var _label:Label;

public function CountryRow()
{
//TODO: implement function
super();
}
override protected function createChildren():void
{
_image=new Image();
addChild(_image);
_label=new Label();
addChild(_label);
}
override protected function commitProperties():void
{
super.commitProperties();
_image.source="assets/icons/" + data.@code + ".png";
_label.text="" + data;

}

}
}

One Response to “Using itemrenderer in flex”

1. mrudula deshpande says:

   July 23, 2009 at 12:59 am

   Hi..
   I don’t know whether am posting at a right place or not but Can anybody tell me is it possible to customize HorizontalList to display compressed JPEG file or custom image file format?

   thanks,
   mrudula