Använda komponenten TileList

Komponenten TileList består av en lista rader och kolumner med data från en DataProvider. Ett objekt refererar till en enhet med data som lagras i en cell i TileList. Ett objekt, som kommer från en DataProvider, har vanligtvis en label -egenskap och en source -egenskap. Egenskapen label identifierar innehållet som ska visas i en cell och source tillhandahåller ett värde för den.

Du kan skapa en Array-förekomst eller hämta en från en server. TileList-komponenten har metoder som företräder dess DataProvider, till exempel metoderna addItem() och removeItem() . Om ingen extern DataProvider finns med i listan skapas en DataProvider-förekomst automatiskt med hjälp av dessa metoder, vilken visas genom List.dataProvider .

Använda komponenten TileList

TileList renderar varje cell som använder en Sprite som implementerar ICellRenderer-gränssnittet. Du kan ange den här renderaren med TileList-egenskapen cellRenderer . TileList-komponentens standard-CellRenderer är ImageCell, som visar en bild (klass, bitmapp, förekomst eller URL) och en valfri etikett. Etiketten består av en enda rad som justeras mot nederkanten av cellen. Du kan bara rulla en TileList i en riktning.

När en TileList-förekomst har fokus kan du också använda följande tangenter för att komma åt objekt i den:

Nyckel

Beskrivning

Uppil och nedpil

Gör att du kan flytta uppåt och nedåt i en kolumn. Om egenskapen allowMultipleSelection är true kan du använda de här tangenterna tillsammans med Skift-tangenten för att markera flera celler.

Högerpil och vänsterpil

Gör så att du kan flytta till vänster eller höger i en rad. Om egenskapen allowMultipleSelection är true kan du använda de här tangenterna tillsammans med Skift-tangenten för att markera flera celler.

Hem

Markerar den första cellen i en TileList. Om egenskapen allowMultipleSelection är true kan du hålla ned Skift-tangenten och trycka på Home-tangenten för att markera alla celler från den aktuella markeringen till den första cellen.

End

Markerar den sista cellen i en TileList. Om egenskapen allowMultipleSelection är true kan du hålla ned Skift-tangenten och trycka på End-tangenten för att markera alla celler från den aktuella markeringen till den sista cellen.

Ctrl

Om egenskapen allowMultipleSelection har värdet true kan du markera flera celler, utan någon särskild ordning.

När du lägger till TileList -komponenten i ett program kan du göra den åtkomlig för en skärmläsare genom att lägga till följande rader med ActionScript-kod: 

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

Du aktiverar bara en komponents åtkomlighet en gång, oavsett hur många förekomster komponenten har. Mer information finns i kapitel 18, "Skapa åtkomligt innehåll" i Använda Flash .

TileList-komponentparametrar

Du kan ställa in följande utvecklingsparametrar i egenskapsinspektören eller komponentinspektören för varje förekomst av TileList-komponenten: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize och verticalScrollPageSize . Var och en av de här parametrarna har en motsvarande ActionScript-egenskap med samma namn. Information om hur du använder parametern dataProvider finns i Använda parametern DataProvider .

Du kan skriva ActionScript för att ange ytterligare alternativ för TileList-förekomster genom att använda dess metoder, egenskaper och händelser. Mer information finns i avsnittet om klassen TileList i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional .

Skapa ett program med komponenten TileList

I det här exemplet används MovieClips för att fylla i en TileList med en array med färger.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra en TileList-komponent till scenen och ge den förekomstnamnet aTl .

  3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen för att testa programmet.

Skapa en TileList-komponent med ActionScript

I det här exemplet skapas en TileList-instans och instanser av komponenterna ColorPicker, ComboBox, NumericStepper och CheckBox läggs till i den. Exemplet skapar en Array som innehåller etiketter och namnen på de komponenter som ska visas, och tilldelar Arrayen ( dp ) till TileList-egenskapen dataProvider . Egenskaperna columnWidth och rowHeight samt metoden setSize() används för att göra en layout för TileList, metoden move() för att placera den på scenen, stilen contentPadding för att lägga in utrymme mellan TileList-förekomstens kantlinjer och dess innehåll, samt metoden sortItemsOn() för att sortera innehållet efter etiketterna.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra följande komponenter från panelen Komponenter till bibliotekspanelen. ColorPicker, ComboBox, NumericStepper, CheckBox och TileList.

  3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen för att testa programmet.