使用 TileList 組件

與 TileList 組件的使用者互動
TileList 組件參數
建立具有 TileList 組件的應用程式
- 使用 ActionScript 建立 TileList 組件

此 TileList 組件是由欄與列組成的清單，其中包含資料提供者所提供的資料。儲存在 TileList 儲存格中的資料單位稱為一個「項目」。一般而言，項目 (源自資料提供者) 具有 label 屬性和 source 屬性。 label 屬性識別儲存格所要顯示的內容，而 source 則是為項目提供值。

您可以建立 Array 實體，或是從伺服器擷取該實體。TileList 組件具有一組可代理資料提供者執行操作的方法，例如 addItem() 和 removeItem() 方法。如果清單並未由外部資料提供者提供資料，這些方法會自動建立一個資料提供者實體 (透過 List.dataProvider 顯露)。

與 TileList 組件的使用者互動

TileList 將會使用實作 ICellRenderer 介面的 Sprite 來呈現每一個儲存格。您可以使用 TileList cellRenderer 屬性，指定這個輸出器。TileList 組件的預設 CellRenderer 是 ImageCell (顯示的影像來自類別、點陣圖、實體或 URL) 和一個選擇性的標籤。該標籤會以單行形式固定對齊儲存格底端。您只能朝著單一方向捲動 TileList。

當 TileList 實體成為焦點時，您也可以使用下列按鍵控制其中的項目：

按鍵	說明
向上鍵和向下鍵	允許您在一欄內向上及向下移動。如果 `allowMultipleSelection` 屬性為 `true` ，您便可以搭配 Shift 鍵來使用這些按鍵，以選取多個儲存格。
向左鍵和向右鍵	允許您在一列中向左或向右移動。如果 `allowMultipleSelection` 屬性為 `true` ，您便可以搭配 Shift 鍵來使用這些按鍵，以選取多個儲存格。
首頁	選取 TileList 中的第一個儲存格。如果 `allowMultipleSelection` 屬性為 `true` ，按住 Shift 鍵再按 Home 鍵將會選取介於目前選取範圍到第一個儲存格之間的所有儲存格。
End	選取 TileList 中的最後一個儲存格。如果 `allowMultipleSelection` 屬性為 `true` ，按住 Shift 鍵再按 End 鍵將會選取介於目前選取範圍到最後一個儲存格之間的所有儲存格。
Ctrl	如果 `allowMultipleSelection` 屬性為 `true` ，您便可以不依特定順序選取多個儲存格。

將 TileList 組件加入應用程式時，您可以加入下列 ActionScript 程式碼，讓螢幕朗讀程式能夠存取此組件：

import fl.accessibility.TileListAccImpl; 
 
TileListAccImpl.enableAccessibility();

不論組件有多少個實體，您只需要啟用組件的輔助功能一次。如需詳細資訊，請參閱「使用 Flash」中的第 18 章「建立輔助功能內容」。

TileList 組件參數

您可以在「屬性」檢測器或「組件檢測器」中，為每個 TileList 組件實體設定下列編寫參數： allowMultipleSelection 、 columnCount 、 columnWidth 、 dataProvider 、 direction 、 horizontalScrollLineSize 、 horizontalScrollPageSize 、 labels 、 rowCount 、 rowHeight 、 ScrollPolicy、verticalScrollLineSize 和 verticalScrollPageSize 。這些參數都具有相對應的 ActionScript 同名屬性。如需有關 dataProvider 參數用法的詳細資訊，請參閱使用 dataProvider 參數。

您可以撰寫 ActionScript，使用 TileList 實體的屬性、方法和事件，以設定 TileList 實體的其它選項。如需詳細資訊，請參閱適用於 Adobe Flash Platform 的 ActionScript 3.0 參考中的 TileList 類別。

建立具有 TileList 組件的應用程式

此範例使用 MovieClip 繪製顏色的陣列，來為 TileList 進行填色。

建立新的 Flash (ActionScript 3.0) 文件。
將 TileList 組件拖曳到「舞台」，並且賦予實體名稱 aTl 。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列 ActionScript 程式碼：

import fl.data.DataProvider; 
import flash.display.DisplayObject; 
 
var aBoxes:Array = new Array(); 
var i:uint = 0; 
var colors:Array = new Array(0x00000, 0xFF0000, 0x0000CC, 0x00CC00, 0xFFFF00); 
var colorNames:Array = new Array("Midnight", "Cranberry", "Sky", "Forest", "July"); 
var dp:DataProvider = new DataProvider(); 
for(i=0; i < colors.length; i++) { 
    aBoxes[i] = new MovieClip(); 
    drawBox(aBoxes[i], colors[i]);    // draw box w next color in array 
    dp.addItem( {label:colorNames[i], source:aBoxes[i]} ); 
} 
aTl.dataProvider = dp; 
aTl.columnWidth = 110; 
aTl.rowHeight = 130; 
aTl.setSize(280,150); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(0, 0, 100, 100); 
            box.graphics.endFill();         
}

選取「控制 > 測試影片」，測試應用程式。

使用 ActionScript 建立 TileList 組件

此範例會以動態方式建立 TileList 實體，並將 ColorPicker、ComboBox、NumericStepper 以及 CheckBox 組件的實體加入其中。接著建立 Array 以包含所要顯示之各組件的標籤及名稱，並將該 Array ( dp ) 指定給 TileList 的 dataProvider 屬性。範例中使用 columnWidth 和 rowHeight 屬性以及 setSize() 方法來配置 TileList、使用 move() 方法將 TileList 放置於「舞台」、使用 contentPadding 樣式在 TileList 實體的邊界與內容之間騰出空間，並且使用 sortItemsOn() 方法依照 TileList 的標籤排序內容。

建立新的 Flash (ActionScript 3.0) 文件。
將下列組件從「組件」面板拖曳到「元件庫」面板：ColorPicker、ComboBox、NumericStepper、CheckBox 和 TileList。

開啟「動作」面板，選取主要「時間軸」中的「影格 1」，然後輸入下列 ActionScript 程式碼：

import fl.controls.CheckBox; 
import fl.controls.ColorPicker; 
import fl.controls.ComboBox; 
import fl.controls.NumericStepper; 
import fl.controls.TileList; 
import fl.data.DataProvider; 
 
var aCp:ColorPicker = new ColorPicker(); 
var aCb:ComboBox = new ComboBox(); 
var aNs:NumericStepper = new NumericStepper(); 
var aCh:CheckBox = new CheckBox(); 
var aTl:TileList = new TileList(); 
 
var dp:Array = [ 
{label:"ColorPicker", source:aCp}, 
{label:"ComboBox", source:aCb}, 
{label:"NumericStepper", source:aNs}, 
{label:"CheckBox", source:aCh}, 
]; 
aTl.dataProvider = new DataProvider(dp); 
aTl.columnWidth = 110; 
aTl.rowHeight = 100; 
aTl.setSize(280,130); 
aTl.move(150, 150); 
aTl.setStyle("contentPadding", 5); 
aTl.sortItemsOn("label"); 
addChild(aTl);

選取「控制 > 測試影片」，測試應用程式。