Korzystanie ze składnika TileList

Składnik TileList składa się z listy utworzonej z wierszy i kolumn dostarczanych z danymi przez dostawcę danych. Element określa jednostkę danych, jaka jest przechowywana w komórce składnika TileList. Element, którego źródłem jest dostawca danych, zwykle zawiera właściwość label i source . Właściwość label identyfikuje treść wyświetlaną w komórce, a właściwość source udostępnia jej wartość.

Istnieje możliwość utworzenia instancji Array lub pobrania jej z serwera. Składnik TileList zawiera metody, które są odpowiednikami metod dostawcy danych składnika, np. metody addItem() i removeItem() . Jeśli lista nie zawiera żadnego zewnętrznego dostawcy danych, te metody tworzą automatycznie instancję dostawcy danych, który jest dostępny za pośrednictwem List.dataProvider .

Posługiwanie się składnikiem TileList

Składnik TileList renderuje każdą komórkę za pomocą ikonki, która implementuje interfejs ICellRenderer. Moduł renderowania można określić za pomocą właściwości cellRenderer składnika TileList. Domyślny moduł CellRenderer składnika TileList to obiekt ImageCell, który wyświetla obraz (klasę, mapę bitową, instancję lub adres URL), a także opcjonalną etykietę. Etykieta zawiera pojedynczy wiersz, który jest zawsze przypisywany do dołu komórki. Składnik TileList można przewijać tylko w jednym kierunku.

Po aktywowaniu instancji TileList dostęp do elementów można uzyskiwać za pomocą następujących klawiszy:

Klucz

Opis

Strzałka w górę i strzałka w dół

Umożliwia przechodzenie w górę i w dół w kolumnie. Jeśli właściwość allowMultipleSelection ma wartość true , te klawisze mogą być używane wraz z klawiszem Shift w celu zaznaczania wielu komórek.

Strzałka w lewo i strzałka w prawo

Umożliwia przechodzenie w lewo i w prawo w wierszu. Jeśli właściwość allowMultipleSelection ma wartość true , te klawisze mogą być używane wraz z klawiszem Shift w celu zaznaczania wielu komórek.

Home

Zaznacza pierwszą komórkę składnika TileList. Jeśli właściwość allowMultipleSelection ma wartość true , przytrzymanie klawisza Shift i naciśnięcie klawisza Home spowoduje zaznaczenie wszystkich komórek od aktualnie zaznaczonej do pierwszej.

End

Zaznacza ostatnią komórkę składnika TileList. Jeśli właściwość allowMultipleSelection ma wartość true , przytrzymanie klawisza Shift i naciśnięcie klawisza End spowoduje zaznaczenie wszystkich komórek od aktualnie zaznaczonej do ostatniej.

Ctrl

Jeśli właściwość allowMultipleSelection ma wartość true , możliwe jest zaznaczanie wielu komórek bez określonej kolejności.

Po dodaniu składnika TileList do aplikacji można go udostępnić dla czytnika ekranu, dodając do kodu ActionScript następujące wiersze: 

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

Ułatwienia dostępu włącza się dla danego składnika tylko raz, niezależnie od liczby instancji składnika. Więcej informacji zawiera rozdział 18, “Tworzenie treści dostępnych dla użytkowników niepełnosprawnych”, w podręczniku Korzystanie z programu Flash .

Parametry składnika TileList

Dla każdej instancji składnika TileList można w Inspektorze właściwości lub w Inspektorze składników ustawić następujące parametry tworzenia treści: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize i verticalScrollPageSize . Każdy z parametrów posiada odpowiadającą mu właściwość ActionScript o tej samej nazwie. Informacje o używaniu parametru dataProvider zawiera sekcja Korzystanie z parametru dataProvider .

W kodzie ActionScript możliwe jest ustawienie dodatkowych opcji dla składnika TileList z wykorzystaniem jego metod, właściwości i zdarzeń. Więcej informacji zawiera opis klasy TileList w Skorowidzu języka ActionScript 3.0 dla programu Flash Professional .

Tworzenie aplikacji ze składnikiem TileList

W tym przykładzie wykorzystano obiekty MovieClip w celu wypełnienia składnika TileList tablicą kolorów farb.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij składnik TileList na stół montażowy i nadaj instancji nazwę aTl .

  3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod 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();         
}

  4. Wybierz polecenia Sterowanie > Testuj film, aby przetestować aplikację.

Tworzenie instancji składnika TileList przy użyciu kodu ActionScript

Ten przykład dynamicznie tworzy instancję klasy TileList i dodaje do niej instancje składników ColorPicker, ComboBox, NumericStepper i CheckBox. W przykładzie utworzono tablicę, która zawiera etykiety i wyświetlane nazwy składnika, a ponadto przypisano tablicę ( dp ) do właściwości dataProvider składnika TileList. W przykładzie wykorzystano właściwości columnWidth i rowHeight oraz metodę setSize() w celu określenia układu składnika TileList; metodę move() w celu ustawienia składnika na stole montażowym; styl contentPadding w celu umieszczania spacji między krawędziami a treścią instancji TileList oraz metodę sortItemsOn() w celu sortowania treści według etykiet.

  1. Utwórz nowy dokument Flash (ActionScript 3.0).

  2. Przeciągnij następujące składniki z panelu Składniki do panelu Biblioteka: ColorPicker, ComboBox, NumericStepper, CheckBox i TileList.

  3. Otwórz panel Operacje, zaznacz klatkę nr 1 na głównej osi czasu i wprowadź następujący kod 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);

  4. Wybierz polecenia Sterowanie > Testuj film, aby przetestować aplikację.