De component TileList aanpassen

U kunt een component TileList horizontaal en verticaal aanpassen tijdens het ontwerpen en bij uitvoering. Selecteer tijdens het ontwerpen de component in het werkgebied en gebruik het gereedschap Vrije transformatie of een van de opdrachten Wijzigen > Transformeren. Bij uitvoering kunt u de methode setSize() of de juiste eigenschappen gebruiken, zoals width , height , columnCount , rowCount , scaleX en scaleY . De ScrollBar, die is opgenomen in TileList, wordt geschaald met de keuzelijst.

Stijlen en de component TileList

Met de stijlen van TileList worden waarden voor skins, opvulling en tekstopmaak opgegeven wanneer de component wordt getekend. De stijlen texFormat en disabledTextFormat zijn van toepassing op de stijl van de tekst die in de component wordt weergegeven. Zie Skins gebruiken met de component TileList voor meer informatie over de skinstijlen.

In het volgende voorbeeld wordt de methode setRendererStyle() aangeroepen met de stijl textFormat om het lettertype, het formaat, de kleur en tekstattributen van de labels in te stellen die in een instantie TileList worden weergegeven. Hetzelfde proces is van toepassing op het instellen van de stijl disabledTextFormat die wordt toegepast als de eigenschap enabled is ingesteld op false .

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

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

  3. Voeg de volgende code toe aan het deelvenster Handelingen in frame 1 van de tijdlijn. 

    myTl.setSize(100, 100); 
myTl.addItem({label:"#1"}); 
myTl.addItem({label:"#2"}); 
myTl.addItem({label:"#3"}); 
myTl.addItem({label:"#4"}); 
var tf:TextFormat = new TextFormat(); 
tf.font = "Arial"; 
tf.color = 0x00FF00; 
tf.size = 16; 
tf.italic = true; 
tf.bold = true; 
tf.underline = true; 
tf.align = "center"; 
myTl.setRendererStyle("textFormat", tf);

Skins gebruiken met de component TileList

De component TileList heeft een TileList-skin, een CellRenderer-skin en een ScrollBar-skin. U kunt deze skins bewerken om het uiterlijk van de TileList te wijzigen:

TileList-skins
Opmerking: Het wijzigen van de ScrollBar-skin in één component zorgt dat dit voor alle andere componenten die de ScrollBar gebruiken ook wordt gewijzigd.

De volgende procedure wijzigt de kleur van de CellRenderer-skin Selected_Up van TileList.

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

  2. Sleep de component TileList naar het werkgebied en dubbelklik erop om het deelvenster met skins te openen.

  3. Dubbelklik op de CellRenderer-skin en daarna op de Selected_Up-skin, en klik daarna op de rechthoekige achtergrond.

  4. Selecteer kleur #99FFFF met de kleurkiezer voor de vulkleur in Eigenschapcontrole om deze toe te passen op de Selected_Up-skin.

  5. Klik op de knop Terug links van de bewerkbalk boven in het werkgebied totdat u terug gaat naar de documentbewerkmodus.

  6. Dubbelklik op de tweede kolom van de rij dataProvider in het tabblad Parameters in Eigenschapcontrole om het dialoogvenster Waarden te openen. Voeg items met de volgende labels toe: 1e item, 2e item, 3e item, 4e item.

  7. Selecteer Besturing > Film testen.

  8. Klik op een van de cellen in de TileList om deze te selecteren en beweeg de muis daarna weg van de geselecteerde cel.

    De geselecteerde cel ziet er nu uit zoals op de onderstaande afbeelding.

    TileList-component met aangepaste kleur voor skin Selected_Up
    TileList-component met aangepaste kleur voor skin Selected_Up