Feathers Example ItemRendererについて

このサンプルはFeathersのサイト
「Creating custom item renderers for the Feathers List control(リンク先へ)　」
を参考にしています。
FeathersExampleのソースコード(リンク先へ)

アイテムレンダラクラスでは、ListクラスからdataProviderで設定した配列の情報を
元に1件毎に表示するリストアイテムのレイアウトを行う事ができます。
アイテムレンダラーはapache Flex(旧Adobe Flex)でも採用しています。

BasicItemRenderer.as

  override protected function initialize():void
  {
   if(!this.itemBG)
   {
    this.itemBG = new Quad(1,1,Math.floor(Math.random() * 0xffffff));
    this.addChild(this.itemBG);
   }

   if(!this.itemLabel)
   {
    this.itemLabel = new Label();
    this.addChild(this.itemLabel);
   }
  }

アイテム内のBGとラベルの初期化をします

BasicItemRenderer.as

  protected function layout():void
  {
   this.itemBG.width = this.actualWidth;
   this.itemBG.height = this.actualHeight;

   this.itemLabel.width = this.actualWidth;
   this.itemLabel.height = this.actualHeight;
   this.itemLabel.y = (this.actualHeight / 2) - (this.itemLabel.y / 2);
  }

アイテム内のBGとラベルの大きさ、配置を設定します

BasicItemRenderer.as

  protected function commitData():void
  {
   if(this._data)
   {
    this.itemLabel.text = this._data.text.toString();
   } else {
    this.itemLabel.text = "";
   }
  }

アイテム内のラベルの表示情報を設定します

Feathers Example Listについて

このサンプルはFeathersのサイト
「How to use the Feathers List component(リンク先へ)　」
を参考にしています。
FeathersExampleのソースコード(リンク先へ)

FeathersExampleを実行すると以下の画面になります

Listの表示と設定の流れ
ボタンサンプルからListサンプルへ表示を切り替える為に
exampleIndexの値を変更します。
FeathersExample.as

  private function loaderInfo_completeHandler(event:Event):void
  {
   var exampleIndex:int;
   Starling.handleLostContext = true;
   Starling.multitouchEnabled = true;

   exampleIndex = 1;

ListExample.as

   this.removeEventListener(Event.ADDED_TO_STAGE, addedToStageHandler);

   this.theme = new MetalWorksMobileTheme(this.stage);

   var list:List = new List();
   list.width = this.stage.stageWidth;
   list.height = this.stage.stageHeight;
   this.addChild(list);

   var listData:Object;
   var listTable:Array = [];
   for(var i:int=0;i<1000;i++)
   {
    listData = { text : i.toString()+":"+"アイテム" };
    listTable.push(listData);
   }
   var groceryList:ListCollection = new ListCollection(listTable);
   list.dataProvider = groceryList;
   list.itemRendererProperties.labelField = "text";
   list.itemRendererType = BasicItemRenderer;

テーマの設定

インスタンスの作成

レイアウト、大きさの設定

画面に対してaddChildを行う

リストに表示する1件単位のリストデータを作成

ListCollectionの作成

dataProviderの設定

labelFieldプロパティの設定

アイテムレンダラの設定