List物件客製CellRenderer與設定背景顏色

在使用List或DataGrid物件，如果需要自行設計CellRenderer，例如加入圖片，底圖或使用多文字框，以下是自訂CellRender操作流程

一.自訂 CellRenderer Class
自訂CellRenderer必須繼承Sprite或MovieClip且實作ICellRenderer介面
因此一個自訂的CellRenderer Class基本上一定具備以下結構

public class ItemRenderer extends Sprite implements ICellRenderer{
    private var _listData:ListData; 
    private var _data:Object; 
    private var _selected:Boolean; 
    public function ItemRenderer() {}
    public function set data(d:Object):void { 
    }
    public function get data():Object { 
        return _data; 
    } 
    public function set listData(ld:ListData):void { 
        trace("ListData=" + ld.label);
        _listData = ld; 
    } 
    public function get listData():ListData { 
        return _listData; 
    } 
    public function set selected(s:Boolean):void { 
        _selected = s;             
    } 
    public function get selected():Boolean { 
        return _selected; 
    } 
    public function setSize(width:Number, height:Number):void { } 
    public function setStyle(style:String, value:Object):void { } 
    public function setMouseState(state:String):void{ } 

}

雖然自訂的CellRenderer可以直接繼承自系統的CellRenderer，但最好還是實作ICellRenderer介面，可以有比較大的彈性應用

二.在Flash IDE上產生Instance
在Flash IDE上，依照需要設計產生CellRender所要對應的Symbol
並在Library內設定該Symble的Linkage

Class:完整的CellRenderer Class名稱
base Class:flash.display.MovieClip

三.List利用setStyle指定cellRenderer Class
當已經設計好CellRenderer Class並在fla上產生好Symbol
執行

list.setStyle("cellRenderer", ItemRendererClass);
(ItemRendererClass是自訂的Renderer Class)

即可讓list使用你自訂的CellRenderer

四.List加入資料
將要提供給cellRenderer用的資料以物件芳式包裝好，再以addItem()加入，這樣CellRenderer內的 set data(obj:Object)即會收到所傳入的物件
例

var obj=new Object();
obj.id=xxx;
obj.thumb=xxx;...
list.addItem(obj)

五.CellRenderer內各Method說明

1.data
當list以addItem將資料加入後，會自動執行set data()

在list上
list.addItem(_itemObj);    
在renderer上會觸發
public function set data(d:Object):void { 
    //--d即是addItem所帶的_itemObj
    //--利用d帶進來的資料，顯示在你要顯示的文字框或圖片--
}        

2.listdata
當list.addItem(_itemObj);也同時會觸發renderer內的這個listData method
set listData(ld:ListData)內的ld為一個ListData物件,包含了這個renderer在List內的相關資訊
例如ld.index即是這個render在list內所在位置的index值

3.selected
當render的選取狀態有變化時會觸發這個method，也就是說當使用者在list上click item
如果這個item被選取時，selected(s:Boolean)
s會得到true，若在非選取狀態，則為false
在這裡可利用s值，改變render顯示的樣式，顯示物件選取狀態

4.setSize
只要是在list上做關於size改變的設定，例如
list.setSize()或設定list.rowHeight，都會把在list上設定的大小值
傳給render的setSize()，你可以在這method內依照傳進來的值
調整render內物件的大小
5.setStyle
可用來設定CellRender的顯示樣式，若不想做任何處理，保持空的即可
但一定要保留這method在Class內

6.setMouseState
可用來設定CellRender的滑鼠狀態，若不想做任何處理，保持空的即可
但一定要保留這method在Class內

六.設定List的背景色
List本身並無backgroundColor的選項可供改變List的底色，使用serStyle("backgroundColor")也是無效，若要改變底色需要設定的是"skin"的style，並傳入一個你要當作背景的物件當作傳入值
例

var bg:Sprite = new Sprite();
bg.graphics.beginFill(0xff0000,0.5);
bg.graphics.drawRect(0, 0, 10, 10);
bg.graphics.endFill();
list.setStyle("skin", bg);

註:skin style預設是List_Skin這Class