Лучшая практика работы с itemRenderer во Flex

16 июля 2010

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

 }
}

Ваш e-mail не будет опубликован. Обязательные поля помечены *