De component TileList gebruiken

De component TileList bestaat uit een lijst met rijen en kolommen die worden gevuld met gegevens die afkomstig zijn van een gegevensaanbieder. Een item verwijst naar een gegevenseenheid die in een cel in de TileList wordt opgeslagen. Een item, afkomstig van de gegevensaanbieder, heeft meestal een eigenschap label en een eigenschap source . De eigenschap label identificeert de inhoud die in een cel moet worden weergegeven en de eigenschap source geeft daarvoor een waarde op.

U kunt een instantie Array maken of ophalen van een server. De component TileList heeft methoden die worden doorgegeven aan de gegevensaanbieder (bijvoorbeeld addItem() en removeItem() ). Wanneer geen externe gegevensaanbieder in de lijst is opgegeven, wordt met deze methoden automatisch een gegevensaanbiederinstantie gemaakt, die via List.dataProvider beschikbaar wordt gemaakt.

Gebruikersinteractie met de component TileList

Met TileList wordt elke cel gerenderd met een Sprite die de interface ICellRenderer implementeert. U kunt deze renderer opgeven met de eigenschap cellRenderer van TileList . De standaard-cellRenderer van de component TileList is ImageCell, die een afbeelding (klasse, bitmap, instantie of URL) en een optioneel label weergeeft. Het label is een enkele regel die altijd met de onderkant van de cel wordt uitgelijnd. U kunt een TileList slechts in een enkele richting schuiven.

Wanneer een instantie TileList focus heeft, kunt u ook de volgende toetsen gebruiken om items binnen de instantie te benaderen:

Toets

Beschrijving

Pijl-omhoog en Pijl-omlaag

Hiermee kunt u in een kolom omhoog en omlaag schuiven. Wanneer de eigenschap allowMultipleSelection op true is ingesteld, kunt u deze toetsen in combinatie met Shift gebruiken om meerdere cellen te selecteren.

Pijl-links en Pijl-rechts

Hiermee kunt u in een rij naar links of rechts schuiven. Wanneer de eigenschap allowMultipleSelection op true is ingesteld, kunt u deze toetsen in combinatie met Shift gebruiken om meerdere cellen te selecteren.

Startpagina

Hiermee wordt de eerste cel in een TileList geselecteerd. Als de eigenschap allowMultipleSelection true is, worden door Shift vast te houden en op Home te drukken alle cellen vanaf de huidige selectie tot en met de eerste cel geselecteerd.

End

Hiermee wordt de laatste cel in een TileList geselecteerd. Als de eigenschap allowMultipleSelection true is, worden door Shift vast te houden en op End te drukken alle cellen vanaf de huidige selectie tot en met de laatste cel geselecteerd.

Ctrl

Wanneer de eigenschap allowMultipleSelection op true is ingesteld, kunt u meerdere cellen selecteren, in willekeurige volgorde.

Wanneer u de component TileList aan een toepassing toevoegt, kunt u deze toegankelijk maken voor schermlezers door de volgende ActionScript-coderegels toe te voegen: 

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

U stelt toegankelijkheid voor een component slechts eenmaal in, ongeacht het aantal instanties van de component. Raadpleeg Hoofdstuk 18, ‘Toegankelijke inhoud maken’ in Flash gebruiken voor meer informatie.

Parameters van de component TileList

U kunt in Eigenschapcontrole of Componentcontrole de volgende ontwerpparameters instellen voor elke instantie van de component TileList: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize en verticalScrollPageSize . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie De parameter dataProvider gebruiken voor informatie over het gebruik van de parameter dataProvider.

U kunt ActionScript-code schrijven om aanvullende opties voor instanties TileList in te stellen met de methoden, eigenschappen en gebeurtenissen ervan. Zie de klasse TileList in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor meer informatie.

Een toepassing maken met de component TileList

In het volgende voorbeeld worden filmclips gebruikt om een TileList te vullen met een array aan kleuren.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een component TileList naar het werkgebied en geef deze de instantienaam aTl .

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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. Selecteer Besturing > Film testen om de toepassing te testen.

Een TileList met ActionScript maken

In dit voorbeeld wordt op een dynamische manier een instantie van TileList gemaakt en worden instanties van de componenten ColorPicker, ComboBox, NumericStepper en CheckBox toegevoegd. Er wordt een Array gemaakt die labels en de namen van de componenten bevat die moeten worden weergegeven en de Array ( dp ) wordt aan de eigenschap dataProvider van de TileList toegewezen. De eigenschappen columnWidth en rowHeight en de methode setSize() worden gebruikt om de TileList op te maken, de methode move() wordt gebruikt om de TileList in het werkgebied te plaatsen, de stijl contentPadding wordt gebruikt om ruimte op te nemen tussen de grenzen van de instantie TileList en de inhoud ervan en de methode sortItemsOn() wordt gebruikt om de inhoud te sorteren op de labels.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de volgende componenten van het deelvenster Componenten naar het deelvenster Bibliotheek: ColorPicker, ComboBox, NumericStepper, CheckBox en TileList.

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe: 

    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. Selecteer Besturing > Film testen om de toepassing te testen.