Usare il componente TileList

Il componente TileList è un elenco costituito da righe e colonne in cui vengono inseriti dati mediante un fornitore di dati. Una voce è un'unità di dati memorizzata in una cella del componente TileList. Una voce viene generata nel fornitore di dati e dispone di una proprietà label e di una proprietà source . La proprietà label identifica il contenuto da visualizzare in una cella, mentre la proprietà source fornisce un valore.

Potete creare un'istanza Array o recuperarne una da un server. Al componente TileList sono associati metodi che vengono inviati tramite proxy al relativo fornitore di dati, ad esempio, i metodi addItem() e removeItem() . Se all'elenco non vengono associati dei fornitori di dati esterni, questi metodi creano automaticamente un'istanza di fornitore di dati che viene elaborata con List.dataProvider .

Interazione dell'utente con il componente TileList

Un componente TileList esegue il rendering di ogni riga mediante uno Sprite che implementa l'interfaccia ICellRenderer. Potete specificare il renderer mediante la proprietà cellRenderer di TileList. L'oggetto CellRenderer predefinito del componente TileList è ImageCell, che visualizza un'immagine (classe, bitmap, istanza o URL) e un'etichetta facoltativa. L'etichetta è costituita da una sola riga di testo che viene sempre allineata nella parte inferiore della cella. Potete scorrere un componente TileList in una sola direzione.

Quando un'istanza del componente TileList è attiva, potete anche usare i tasti seguenti per accedere alle voci in esso contenute:

Chiave

Descrizione

Freccia su e Freccia giù

Consentono di spostarsi verso l'alto o verso il basso in una colonna. Se la proprietà allowMultipleSelection è impostata su true , potete usare questi tasti in combinazione con il tasto Maiusc per selezionare più celle.

Freccia sinistra e Freccia destra

Consentono di spostarsi a sinistra o a destra in una riga. Se la proprietà allowMultipleSelection è impostata su true , potete usare questi tasti in combinazione con il tasto Maiusc per selezionare più celle.

Home

Seleziona la prima cella nel componente TileList. Se la proprietà allowMultipleSelection è impostata su true , potete selezionare tutte le celle della selezione corrente, fino alla prima cella, tenendo premuto Maiusc e premendo il tasto Home.

Fine

Seleziona l'ultima cella nel componente TileList. Se la proprietà allowMultipleSelection è impostata su true , potete selezionare tutte le celle della selezione corrente, fino all'ultima cella, tenendo premuto Maiusc e premendo il tasto Fine.

Ctrl

Se la proprietà allowMultipleSelection è impostata su true , potete selezionare più celle, senza un ordine specifico.

Quando aggiungete il componente TitleList a un'applicazione, potete renderlo accessibile a uno screen reader aggiungendo le seguenti righe di codice ActionScript: 

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

Attivare l'accessibilità per il componente una sola volta, indipendentemente dal numero di istanze del componente. Per ulteriori informazioni, vedete il Capitolo 18, “Creazione di contenuto accessibile”, nella guida Uso di Flash .

Parametri del componente TileList

I seguenti parametri di creazione possono essere impostati per ogni istanza del componente TileList nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: allowMultipleSelection , columnCount , columnWidth , dataProvider , direction , horizontalScrollLineSize , horizontalScrollPageSize , labels , rowCount , rowHeight , ScrollPolicy, verticalScrollLineSize e verticalScrollPageSize . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sull'uso del parametro dataProvider, vedete Usare il parametro dataProvider .

Potete creare codice ActionScript per impostare opzioni aggiuntive per le istanze TileList usandone le proprietà, i metodi e gli eventi. Per ulteriori informazioni, vedete la classe TileList nella Guida di riferimento di ActionScript 3.0 per Flash Professional .

Creare un'applicazione con il componente TileList

In questo esempio viene usato un clip filmato per compilare un componente TileList con un array di colori.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate nello stage un componente TileList e assegnategli il nome di istanza aTl .

  3. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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. Selezionate Controllo > Prova filmato per provare l'applicazione.

Creare un componente TileList mediante ActionScript

Nell'esempio viene creata dinamicamente un'istanza TileList e vi vengono aggiunte istanze dei componenti ColorPicker, ComboBox, NumericStepper e CheckBox. Viene creato un array contenente le etichette e i nomi del componente per visualizzare e assegnare l'array ( dp ) alla proprietà dataProvider di TileList. Vengono usate le proprietà columnWidth e rowHeight e il metodo setSize() per il layout di TileList, il metodo move() per posizionare il componente sullo stage e lo stile contentPadding per inserire dello spazio tra i bordi dell'istanza TileList e il relativo contenuto e il metodo sortItemsOn() per ordinare il contenuto in base alle etichette.

  1. Create un nuovo documento Flash (ActionScript 3.0).

  2. Trascinate i seguenti componenti dal pannello Componenti al pannello Libreria: ColorPicker, ComboBox, NumericStepper, CheckBox e TileList.

  3. Aprite il pannello Azioni, selezionate il fotogramma 1 nella linea temporale principale, quindi immettete il codice ActionScript seguente: 

    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. Selezionate Controllo > Prova filmato per provare l'applicazione.