Arbeiten mit der TileList-Komponente

Die TileList-Komponente (gekachelte Liste) ist eine Liste aus Zeilen und Spalten, deren Inhalt von einem Datenprovider bezogen wird. Dabei verweist ein Element ( item ) auf eine Dateneinheit, die in einer Zelle der gekachelten Liste gespeichert ist. Ein Element, das vom Datenprovider stammt, hat in der Regel eine label - und eine source -Eigenschaft. Die Eigenschaft label identifiziert den Inhalt, der in einer Zelle angezeigt werden soll, und source liefert den zugehörigen Wert.

Sie können eine Array-Instanz erstellen oder von einem Server abrufen. Die TileList-Komponente verfügt über Methoden, die als Proxy für ihren Datenprovider dienen, z. B. die Methoden addItem() und removeItem() . Wenn der Liste kein externer Datenprovider zugeordnet wird, erstellen diese Methoden automatisch eine Datenprovider-Instanz, die durch List.dataProvider zur Verfügung gestellt wird.

Benutzerinteraktion mit der TileList-Komponente

Eine gekachelte Liste rendert jede Zelle anhand eines Sprites, das die ICellRenderer-Benutzeroberfläche implementiert. Diesen Renderer können Sie mit der TileList-Eigenschaft cellRenderer angeben. Der Standard-CellRenderer der TileList-Komponente ist „ImageCell“, mit dem ein Bild (Klasse, Bitmap, Instanz oder URL) und eine optionale Beschriftung angezeigt wird. Die Beschriftung ist eine einzelne Zeile, die immer am unteren Rand der Zelle angezeigt wird. In einer gekachelten Liste ist ein Bildlauf nur in einer Richtung möglich.

Wenn eine TileList-Instanz den Fokus hat, können Sie diese auch mithilfe der folgenden Tasten steuern:

Schlüssel

Beschreibung

Nach-oben- oder Nach-unten-Taste

Navigation nach unten oder nach oben innerhalb einer Spalte. Hat die Eigenschaft allowMultipleSelection den Wert true , können Sie diese Tasten zusammen mit der Umschalttaste verwenden, um mehrere Zellen auszuwählen.

Nach-links- oder Nach-rechts-Taste

Navigation nach links oder rechts innerhalb einer Spalte. Hat die Eigenschaft allowMultipleSelection den Wert true , können Sie diese Tasten zusammen mit der Umschalttaste verwenden, um mehrere Zellen auszuwählen.

Startseite

Wählt die erste Zeile in einer gekachelten Liste aus. Wenn der Eigenschaft allowMultipleSelection der Wert true zugewiesen wurde, können Sie durch Gedrückthalten der Umschalttaste und gleichzeitiges Drücken der Taste „Pos1“ alle Zellen von der aktuellen Auswahl bis zur ersten Zelle auswählen.

Ende

Wählt die letzte Zeile in einer gekachelten Liste aus. Wenn der Eigenschaft allowMultipleSelection der Wert true zugewiesen wurde, können Sie durch Gedrückthalten der Umschalttaste und gleichzeitiges Drücken der Taste „Ende“ alle Zellen von der aktuellen Auswahl bis zur letzten Zelle auswählen.

Strg

Wenn der Eigenschaft allowMultipleSelection der Wert true zugewiesen wurde, können Sie mehrere Zellen in beliebiger Reihenfolge auswählen.

Die einer Anwendung hinzugefügten TileList-Komponenten können Sie Bildschirmleseprogrammen anhand der folgenden ActionScript-Codezeilen zugänglich machen: 

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

Diese Anweisung ist unabhängig von der Anzahl der Instanzen nur einmal pro Komponente erforderlich. Weitere Informationen finden Sie im Handbuch Verwenden von Flash im Kapitel 18, „Barrierefreie Inhalte erstellen“.

Parameter der TileList-Komponente

Die folgenden Authoring-Parameter können für jede Instanz der TileList-Komponente im Eigenschaften- oder Komponenten-Inspektor festgelegt werden: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize und verticalScrollPageSize . Jeder dieser Parameter besitzt eine entsprechende ActionScript-Eigenschaft desselben Namens. Informationen über die Verwendung des Parameters „dataProvider“ finden Sie im Abschnitt Verwenden des Parameters „dataProvider“ .

Sie können zusätzliche Optionen für Loaderinstanzen mit den Methoden, Eigenschaften und Ereignissen von ActionScript festlegen. Weitere Informationen finden Sie in der TileList-Klasse im ActionScript 3.0 Referenzhandbuch für Flash Professional .

Erstellen einer Anwendung mit der TileList-Komponente

Dieses Beispiel verwendet Movieclips, um eine gekachelte Liste mit einem Array von Farben zu füllen.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie eine TileList-Komponente auf die Bühne, und geben Sie ihr den Instanznamen aTl .

  3. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein: 

    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. Wählen Sie „Steuerung“ > „Film testen“, um die Anwendung zu testen.

Erstellen einer TileList-Komponenteninstanz mithilfe von ActionScript-Code

In diesem Beispiel wird eine TileList-Instanz dynamisch erstellt und es werden ihr Instanzen der ColorPicker-, ComboBox-, NumericStepper- und CheckBox-Komponenten hinzugefügt. Es wird ein Array erstellt, das Beschriftungen und die Namen der anzuzeigenden Komponenten enthält. Dieses Array ( dp ) wird der TileList-Eigenschaft dataProvider der zugewiesen. Mit den Eigenschaften columnWidth und rowHeight und der Methode setSize() wird das Layout der gekachelten Liste definiert, mit der Methode move() wird sie auf der Bühne positioniert und mit dem Format contentPadding wird der Leerraum zwischen den Rändern der TileList-Instanz und ihrem Inhalt festgelegt. Zudem wird mithilfe der Methode sortItemsOn() der Inhalt nach seinen Beschriftungen sortiert.

  1. Erstellen Sie ein neues Flash-Dokument (ActionScript 3.0).

  2. Ziehen Sie die folgenden Komponenten aus dem Bedienfeld „Komponenten“ in das Bedienfeld „Bibliothek“: „ColorPicker“, „ComboBox“, „NumericStepper“, „CheckBox“ und „TileList“.

  3. Öffnen Sie das Bedienfeld „Aktionen“, wählen Sie in der Hauptzeitleiste Bild 1 aus und geben Sie den folgenden ActionScript-Code ein: 

    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. Wählen Sie „Steuerung“ > „Film testen“, um die Anwendung zu testen.

Rechtliche Hinweise | Online-Datenschutzrichtlinie