The Best Practices With itemRenderer in Flex Development

ItemRenderer is a very powerful staff and it’s impossible to overestimate the advantage of its usage. To learn work properly with itemRenderer you need to understand the concept of its work.

One of the main issues is that it doesn’t create any redundant elements on the screen to display those elements that are not seen.

Imagine you have an array of 100 elements and to display them you use itemRenderer as an image field and text field under it. So there would be created as many display elements as the user can see. While content scrolling itemRenderer will put those elements that disappear into the showing area. Thus out of 100 possible displaying items there would be created about 12 items (depending on the visible zone). That’s why when defining properties inside itemRenderer it’s important to reset all of them and then setup the new ones.

It’s considered a bad practice to setup styles dynamically. A good good practice is to create CSS styles class and to change .styleName in displayed tems.

Also it’s considered as a bad practice to create dynamically elements within itemRenderer. If it’s possible it’s better to make an element with your hands, setup it as hidden and change its visibility when necessary.

To increase itemRenderer displaying speed it’s better to use ActionScript instead of MXML. itemRenderer written in ActionScript perform displaying 2 times faster.

BAD

override public function set
data(value:Object):void {
 if (value != null){
 this.setStyle("borderColor", "red");
 this.setStyle("color", "red");
 }
}

GOOD

override public function set data(value:Object):void {
 if (value != null){
 this.styleName="metaLinkButton";
 } else{
 this.styleName="default";
 }
}


BAD

override public function set
data(value:Object):void {
 if (value != null){
 if(value.isButton){
 myButton.visible = true;
 }
 }
}

GOOD

override public function set
data(value:Object):void {
 if (value != null){
 if(value.isButton){
 myButton.visible = true;
 }else{
 myButton.visible = false;
 }
 }
}

BAD

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
 implements="mx.controls.listClasses.IDropInListItemRenderer"
 horizontalScrollPolicy="off" verticalScrollPolicy="off">
 <mx:Label text="{listData.label}"/>
<mx:Script>
<![CDATA[
 import mx.controls.listClasses.BaseListData;

 private var _listData:BaseListData;

 [Bindable(event="dataChange")]
 public function get listData():BaseListData
 {
 return _listData;
 }

 public function set listData(value:BaseListData):void
 {
 _listData = value;
 }

]]>
</mx:Script>
</mx:HBox>

GOOD

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
 implements="mx.controls.listClasses.IDropInListItemRenderer"
 horizontalScrollPolicy="off" verticalScrollPolicy="off">
 <mx:Label text="{listData.label}"/>
<mx:Script>
<![CDATA[
 import mx.controls.listClasses.BaseListData;

 private var _listData:BaseListData;

 [Bindable(event="dataChange")]
 public function get listData():BaseListData
 {
 return _listData;
 }

 public function set listData(value:BaseListData):void
 {
 _listData = value;
 }

]]>
</mx:Script>
</mx:HBox>