2010年9月7日 星期二

使用自訂ItemRenderer

在Flex上使用如TileList的Component,如果不想使用預設的ItemRenderer
要自訂ItemRenderer,以下三個步驟
一.在Component上指定要使用的ItemRenderer完整路徑
 <mx:TileList id="tileList" .....            
      itemRenderer="com.ozzysun.flex.xxx.MyItemRenderer">  
二.設定資料來源
example:
var _array:Array = new Array();
    for each(var node:XML in e.target.xml.elements()){
        if (node.name().localName == "image") {
            var obj:Object = new Object();
            obj.title = node.attribute('title');
            obj.thumb = node.attribute('thumb');            
            _array.push(new ObjectProxy(obj))                        
        }
    }
    var _fileArray:ArrayCollection = new ArrayCollection(_array);
    tileList.dataProvider = _fileArray;

每筆資料可以用一般物件儲存,但在儲存後需用ObjectProxy
包裝後再丟到陣列
dataProvider使用的資料type為ArrayCollection,
所以需透過new ArrayCollection(_array)
取得所要的格式

三.ItemRenderer設計
example:
 <?xml version="1.0" encoding="utf-8"?>  
      <mx:Image source="{data.thumb}" xmlns:mx="http://www.adobe.com/2006/mxml" />       
itemrenderer本身會有一個data property
這data property即對應到dataProvider所傳進來的資料

沒有留言: