使用 CellRenderer

格式化儲存格
定義自訂 CellRenderer 類別
CellRenderer 屬性
將 CellRenderer 套用至 DataGrid 物件的欄
定義可編輯儲存格的 CellRenderer
使用影像、SWF 檔或影片片段做為 CellRenderer

CellRenderer 是屬於 List 架構的組件類別 (例如 List、DataGrid、TileList 和 ComboBox)，它是用來操作和顯示各列中的自訂儲存格內容。自訂儲存格可以包含文字、預先建置的組件 (例如 CheckBox) 或是您可以建立的任何顯示物件類別。如果要使用自訂 CellRenderer 顯示資料，您可以擴充 CellRenderer 類別或實作 ICellRenderer 介面來建立您自己的自訂 CellRenderer 類別。

List、DataGrid、TileList 和 ComboBox 類別是 SelectableList 類別的子類別。SelectableList 類別包括 cellRenderer 樣式。這個樣式會定義組件用來顯示儲存格的顯示物件。

您可以呼叫 List 物件的 setRendererStyle() 方法，調整 CellRenderer 所使用的樣式格式 (請參閱格式化儲存格 )。或者，您也可以定義自訂類別做為 CellRenderer 使用 (請參閱定義自訂 CellRenderer 類別 )。

格式化儲存格

CellRenderer 類別包括一些樣式，可以讓您控制儲存格的格式。

下列樣式可以讓您定義不同狀態下儲存格所使用的外觀元素 (停用、往下、重疊和往上)：

disabledSkin 和 selectedDisabledSkin
downSkin 和 selectedDownSkin
overSkin 和 selectedOverSkin
upSkin 和 selectedUpSkin

下列樣式會套用至文字格式：
disabledTextFormat
textFormat
textPadding

您可以呼叫 List 物件的 setRendererStyle() 方法或 CellRenderer 物件的 setStyle() 方法來設定這些樣式。您可以呼叫 List 物件的 getRendererStyle() 方法或 CellRenderer 物件的 getStyle() 方法來取得這些樣式。您也可以透過 List 物件的 rendererStyles 屬性或 CellRenderer 物件的 getStyleDefinition() 方法，存取用來定義所有輸出器樣式的物件 (做為物件的具名屬性)。

您可以呼叫 clearRendererStyle() 方法，將樣式重新設定成它的預設值。

如果要取得或設定清單中列的高度，請使用 List 物件的 rowHeight 屬性。

定義自訂 CellRenderer 類別

建立可以擴充 CellRenderer 類別的類別來定義自訂 CellRenderer

例如，下列程式碼會包括兩個類別。ListSample 類別會將 List 組件實體化，並使用另一個 CustomRenderer 類別來定義 List 組件所使用的儲存格輸出器。CustomRenderer 類別會擴充 CellRenderer 類別。

選取「檔案 > 新增」。
在顯示的「新增文件」對話方塊中選取「Flash 檔案 (ActionScript 3.0)」，然後按一下「確定」按鈕。
選取「視窗 > 組件」，顯示「組件」面板。
在「組件」面板中，將 List 組件拖曳到「舞台」上。
如果 Flash 沒有顯示「屬性」檢測器，請選取「視窗 > 屬性 > 屬性」。
選取 List 組件，然後設定「屬性」檢測器中的屬性：
- 實體名稱：myList
- 寬 (寬度)：200
- 高 (高度)：300
- X：20
- Y：20
選取「時間軸」中「圖層 1」的「影格 1」，然後選取「視窗 > 動作」。

在「動作」面板中輸入下列 Script：

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({label:"Burger -- $5.95"}); 
myList.addItem({label:"Fries -- $1.95"});

選取「檔案 > 儲存」。輸入檔案的名稱，然後按一下「確定」按鈕。
選取「檔案 > 新增」。
在顯示的「新增文件」對話方塊中選取「ActionScript 檔案」，然後按一下「確定」按鈕。

在 Script 視窗中，輸入下列程式碼以定義 CustomCellRenderer 類別：

package { 
    import fl.controls.listClasses.CellRenderer; 
    import flash.text.TextFormat; 
    import flash.filters.BevelFilter; 
    public class CustomCellRenderer extends CellRenderer { 
        public function CustomCellRenderer() { 
            var format:TextFormat = new TextFormat("Verdana", 12); 
            setStyle("textFormat", format); 
            this.filters = [new BevelFilter()]; 
        } 
    } 
}

選取「檔案 > 儲存」。將檔案命名為 CustomCellRenderer.as，將它放入與 FLA 檔相同的目錄，然後按一下「確定」按鈕。
選取「控制 > 測試影片」。

使用會實作 ICellRenderer 介面的類別來定義自訂 CellRenderer

您也可以使用會繼承 DisplayObject 類別和實作 ICellRenderer 介面的任何類別來定義 CellRenderer。例如，下列程式碼會定義兩個類別。ListSample2 類別會將 List 物件加入到顯示清單，並將它的 CellRenderer 定義成可以使用 CustomRenderer 類別。CustomRenderer 類別會擴充 CheckBox 類別 (可擴充 DisplayObject 類別) 並實作 ICellRenderer 介面。請注意，CustomRenderer 類別會定義 data 和 listData 屬性的 getter 和 setter 方法，而這些屬性和方法已經在 ICellRenderer 介面中定義過。在 ICellRenderer 介面中定義的其它屬性和方法 ( selected 屬性和 setSize() 方法) 也已經在 CheckBox 類別中定義過：

選取「檔案 > 新增」。
在顯示的「新增文件」對話方塊中選取「Flash 檔案 (ActionScript 3.0)」，然後按一下「確定」按鈕。
選取「視窗 > 組件」，顯示「組件」面板。
在「組件」面板中，將 List 組件拖曳到「舞台」上。
如果 Flash 沒有顯示「屬性」檢測器，請選取「視窗 > 屬性 > 屬性」。
選取 List 組件，然後設定「屬性」檢測器中的屬性：
- 實體名稱：myList
- 寬 (寬度)：100
- 高 (高度)：300
- X：20
- Y：20
選取「時間軸」中「圖層 1」的「影格 1」，然後選取「視窗 > 動作」。

在「動作」面板中輸入下列 Script：

myList.setStyle("cellRenderer", CustomCellRenderer); 
myList.addItem({name:"Burger", price:"$5.95"}); 
myList.addItem({name:"Fries", price:"$1.95"});

選取「檔案 > 儲存」。輸入檔案的名稱，然後按一下「確定」按鈕。
選取「檔案 > 新增」。
在顯示的「新增文件」對話方塊中選取「ActionScript 檔案」，然後按一下「確定」按鈕。

在 Script 視窗中，輸入下列程式碼以定義 CustomCellRenderer 類別：

package 
{ 
    import fl.controls.CheckBox; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    public class CustomCellRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomCellRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

選取「檔案 > 儲存」。將檔案命名為 CustomCellRenderer.as，將它放入與 FLA 檔相同的目錄，然後按一下「確定」按鈕。
選取「控制 > 測試影片」。

使用元件來定義 CellRenderer

您也可以使用元件庫中的元件來定義 CellRenderer。您必須將元件匯出給 ActionScript 使用，且元件庫元件的類別名稱必須有一個會實作 ICellRenderer 介面或擴充 CellRenderer 類別 (或是它的其中一個子類別) 的關聯類別檔案。

下列範例會使用元件庫元件來定義自訂 CellRenderer。

選取「檔案 > 新增」。
在顯示的「新增文件」對話方塊中選取「Flash 檔案 (ActionScript 3.0)」，然後按一下「確定」按鈕。
選取「視窗 > 組件」，顯示「組件」面板。
在「組件」面板中，將 List 組件拖曳到「舞台」上。
如果 Flash 沒有顯示「屬性」檢測器，請選取「視窗 > 屬性 > 屬性」。
選取 List 組件，然後設定「屬性」檢測器中的屬性：
- 實體名稱：myList
- 寬 (寬度)：100
- 高 (高度)：400
- X：20
- Y：20
按一下「參數」面板，然後按兩下 dataProvider 列的第二欄。
在顯示的「值」對話方塊中，按兩次加號按鈕以加入兩個資料元素 (標籤已設定為 label0 和 label1)，然後按一下「確定」按鈕。
使用「文字」工具，在「舞台」上繪製一個文字欄位。
選取該文字欄位，然後設定「屬性」檢測器中的屬性：
- 文字類型：動態文字
- 實體名稱：textField
- 寬 (寬度)：100
- 字體大小：24
- X：0
- Y：0
選取文字欄位，然後選取「修改 > 轉換成元件」。
在「轉換成元件」對話方塊中進行下列設定，然後按一下「確定」。
- 名稱：MyCellRenderer
- 類型：影片片段
- 匯出給 ActionScript 使用：選取
- 匯出在第一個影格：選取
- 類別：MyCellRenderer
- 基底類別：flash.display.MovieClip
  
  如果 Flash 顯示「ActionScript 類別警告」，請按一下警告方塊中的「確定」按鈕。
刪除「舞台」上新影片片段元件的實體。
選取「時間軸」中「圖層 1」的「影格 1」，然後選取「視窗 > 動作」。

在「動作」面板中輸入下列 Script：

myList.setStyle("cellRenderer", MyCellRenderer);

選取「檔案 > 儲存」。輸入檔案的名稱，然後按一下「確定」按鈕。
選取「檔案 > 新增」。
在顯示的「新增文件」對話方塊中選取「ActionScript 檔案」，然後按一下「確定」按鈕。

在 Script 視窗中，輸入下列程式碼以定義 MyCellRenderer 類別：

package { 
    import flash.display.MovieClip; 
    import flash.filters.GlowFilter; 
    import flash.text.TextField; 
    import fl.controls.listClasses.ICellRenderer; 
    import fl.controls.listClasses.ListData; 
    import flash.utils.setInterval; 
    public class MyCellRenderer extends MovieClip implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        private var _selected:Boolean; 
        private var glowFilter:GlowFilter; 
        public function MyCellRenderer() { 
            glowFilter = new GlowFilter(0xFFFF00); 
            setInterval(toggleFilter, 200); 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            textField.text = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _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{ 
        } 
        private function toggleFilter():void { 
            if (textField.filters.length == 0) { 
                textField.filters = [glowFilter]; 
            } else { 
                textField.filters = []; 
            } 
        } 
    } 
}

選取「檔案 > 儲存」。將檔案命名為 MyCellRenderer.as，將它放入與 FLA 檔相同的目錄，然後按一下「確定」按鈕。
選取「控制 > 測試影片」。

CellRenderer 屬性

data 屬性是一個物件，它包含了所有為 CellRenderer 設定的屬性。例如，下列類別會定義可以擴充 Checkbox 類別的自訂 CellRenderer；請注意 data 屬性的 setter 函數會將 data.label 的值傳遞給繼承自 CheckBox 類別的 label 屬性：

    public class CustomRenderer extends CheckBox implements ICellRenderer { 
        private var _listData:ListData; 
        private var _data:Object; 
        public function CustomRenderer() { 
        } 
        public function set data(d:Object):void { 
            _data = d; 
            label = d.label; 
        } 
        public function get data():Object { 
            return _data; 
        } 
        public function set listData(ld:ListData):void { 
            _listData = ld; 
        } 
        public function get listData():ListData { 
            return _listData; 
        } 
    } 
}

selected 屬性定義清單中是否已經選取了儲存格。

將 CellRenderer 套用至 DataGrid 物件的欄

DataGrid 物件可以擁有多個欄，您也可以為每一欄指定不同的儲存格輸出器。DataGrid 的每一欄都是由 DataGridColumn 物件表示，DataGridColumn 類別也具有 cellRenderer 屬性，您可以定義每一欄的 CellRenderer。

定義可編輯儲存格的 CellRenderer

DataGridCellEditor 類別會定義用於 DataGrid 物件中可編輯儲存格的輸出器。當 DataGrid 物件的 editable 屬性設定為 true 且使用者按一下要編輯的儲存格後，它就會成為儲存格的輸出器。如果要定義可編輯儲存格的 CellRenderer，請在 DataGrid 物件的 columns 陣列中設定每個元素的 itemEditor 屬性。

使用影像、SWF 檔或影片片段做為 CellRenderer

ImageCell 類別是 CellRenderer 的子類別，它可以定義物件在儲存格的主要內容是影像、SWF 檔或影片片段時用於顯示儲存格。ImageCell 類別包括下列可以定義儲存格外觀的樣式：

imagePadding —用來分隔儲存格邊緣與影像邊緣的邊框間距，以像素為單位
selectedSkin —用來表示已選取狀態的外觀元素
textOverlayAlpha —重疊在儲存格標籤之後的不透明部分
textPadding —用來分隔儲存格邊緣與文字邊緣的邊框間距，以像素為單位

ImageCell 類別是 TileList 類別預設的 CellRenderer。