Найкраща практика роботи з itemRenderer у Flex

ItemRenderer у флексі дуже потужна штука і переоцінити користь від його використання неможливо.

Щоб навчитися правильно працювати з itemRenderer для початку необхідно зрозуміти принцип його роботи. Однією з основних фішок є те, що флекс не створює надмірної кількості елементів на екрані для відображення елементів, які фізично не видно на екрані. Уявіть, що у вас масив із 100 елементів і для відображення цих елементів ви використовуєте itemRenderer у вигляді поля для зображення та текстового поля під ним. Так ось елементів відображення буде створено стільки, скільки фізично може побачити користувач. При скролюванні контенту itemRenderer буде підставляти ті елементи, які зникають до тієї області, яка з’являється. Тобто зі 100 можливих айтемів елементів відображення буде створено штук 12 (залежить від області видимості). Ось чому щодо властивостей всередині itemRenderer-а необхідно спочатку всі властивості скидати а потім встановлювати нові.

При роботі itemRenderer поганою практикою є виставляти стилі динамічно. Хорошою практикою є створити клас стилів у СSS і змінювати .styleName у елементів відображення. Також поганою практикою є динамічне створення елементів відображення всередині itemRenderer. Якщо це можливо, краще створити елемент відображення ручками, зробити його не видимим, а по необхідності змінити його видимість.

Також для збільшення швидкості відображення i

temRenderer краще використовувати ActionScript замість MXML. itemRenderer написаний на ActionScript прискорює відображення елементів у 2р.

ПОГАНО

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

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

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

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

ПОГАНО
<?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>

ДОБРЕ
package renderers
{
 import mx.controls.listClasses.BaseListData;
 import mx.controls.listClasses.IDropInListItemRenderer;
 import mx.controls.listClasses.IListItemRenderer;
 import mx.core.UIComponent;

 public class EmptyItemRenderer extends UIComponent implements IDropInListItemRenderer, IListItemRenderer
 {
 public function EmptyItemRenderer()
 {
 super();
 }

 private var _listData:BaseListData;

 public function get listData():BaseListData
 {
 return _listData;
 }

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

 private var _data:Object;

 public function get data():Object
 {
 return _data;
 }

 public function set data(value:Object):void
 {
 _data = value;
 }

 }
}