Usare il componente List

Il componente List è un elenco a scorrimento con possibilità di selezione singola o multipla. Un elenco può anche visualizzare immagini, compresi altri componenti. È possibile aggiungere le voci visualizzate nell'elenco tramite la finestra di dialogo Valori che viene visualizzata quando si fa clic sulle etichette o sui campi dei parametri dei dati. Potete anche usare i metodi List.addItem() e List.addItemAt() per aggiungere le voci all'elenco.

Il componente List usa un indice con base zero, in cui la voce con indice 0 è la prima voce visualizzata. Quando si aggiungono, rimuovono o sostituiscono le voci di elenco usando i metodi e le proprietà della classe List, potrebbe essere necessario specificare l'indice della voce di elenco.

Interazione dell'utente con il componente List

È possibile impostare un elenco affinché gli utenti possano eseguire selezioni singole o multiple. Ad esempio, un utente che visita un sito di commercio elettronico deve poter selezionare l'articolo da acquistare. In un elenco sono presenti 30 elementi che l'utente può scorrere e selezionare facendo clic sull'elemento stesso.

Potete anche creare un componente List che usa clip filmato personalizzati come righe, in modo che sia possibile visualizzare più informazioni all'utente. Ad esempio, in un'applicazione di posta elettronica, ogni cassetta postale può essere un componente List e ogni riga può contenere icone che indicano la priorità e lo stato.

Il componente List si attiva quando si fa clic su di esso o si seleziona con il tasto Tab. Una volta attivato, è possibile usare i tasti seguenti per controllarlo:

Chiave

Descrizione

Tasti alfanumerici

Consentono di passare alla voce successiva nella cui etichetta è presente Key.getAscii() come primo carattere.

Ctrl

Tasto di attivazione/disattivazione che consente di effettuare più selezioni e deselezioni non contigue.

Freccia giù

La selezione viene spostata di una voce verso il basso.

Home

La selezione viene spostata all'inizio dell'elenco.

PgGiù

La selezione viene spostata di una pagina verso il basso.

Pagina su

La selezione viene spostata di una pagina verso l'alto.

Maiusc

Consente di eseguire selezioni contigue.

Freccia su

La selezione viene spostata di una voce verso l'alto.

Nota: le dimensioni per lo scorrimento sono espresse in pixel, non in righe.
Nota: {\cf0 I}{\cf2 tasti Pg su e Pg giù scorrono le voci in base al numero delle voci che lo schermo riesce a visualizzare meno una.} Ad esempio, se premete il tasto Pg giù in un elenco a discesa composto da dieci righe, vengono visualizzate le voci 0-9, 9-18, 18-27 e così via, con una voce sovrapposta per pagina.

Per ulteriori informazioni sul controllo dell'attivazione, vedete l'interfaccia IFocusManager e la classe FocusManager nella Guida di riferimento di ActionScript 3.0 per Flash Professional e Operazioni con FocusManager .

Sullo stage, un'anteprima dal vivo di ogni istanza del componente List consente di visualizzare le modifiche apportate ai parametri nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti durante la creazione.

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

import fl.accessibility.ListAccImpl; 
 
ListAccImpl.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 List

I seguenti parametri possono essere impostati per ogni istanza del componente List nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: allowMultipleSelection , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize e verticalScrollPolicy . Ciascuno di questi parametri ha una proprietà ActionScript corrispondente con lo stesso nome. Per informazioni sui valori che potete impostare per questi parametri, vedete la classe List nella Guida di riferimento di ActionScript 3.0 per Flash Professional . Per informazioni sull'uso del parametro dataProvider, vedete Usare il parametro dataProvider .

Creare un'applicazione con il componente List

Gli esempi seguenti indicano come aggiungere un componente List a un'applicazione durante la creazione.

Aggiungere un semplice componente List a un'applicazione

In questo esempio, List è composto da etichette che identificano i modelli di auto e da campi di dati contenenti i prezzi.

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

  2. Trascinare un componente List nello stage dal pannello Componenti.

  3. Nella finestra di ispezione Proprietà, effettuare le operazioni seguenti:

    • Inserite il nome di istanza aList .

    • Assegnate il valore 200 per la larghezza (W).

  4. Usate lo strumento Testo per creare un campo di testo sotto aList e assegnategli il nome di istanza aTf .

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

    import fl.controls.List; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
// Create these items in the Property inspector when data and label 
// parameters are available. 
aList.addItem({label:"1956 Chevy (Cherry Red)", data:35000}); 
aList.addItem({label:"1966 Mustang (Classic)", data:27000}); 
aList.addItem({label:"1976 Volvo (Xcllnt Cond)", data:17000}); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

    Questo codice utilizza il metodo addItem() per compilare l'istanza aList con tre voci, assegnando a ciascuna un valore label , visualizzato nell'elenco, e un valore data . Quando l'utente seleziona una voce nel componente List, il listener di eventi chiama la funzione showData() , che visualizza il valore data per la voce selezionata.

  6. Selezionate Controllo > Prova filmato per compilare ed eseguire l'applicazione.

Compilare un'istanza List con un fornitore di dati

Nell'esempio seguente viene creato un componente List per i modelli di auto e i relativi prezzi. Per compilare List viene invece usato un fornitore di dati, anziché il metodo addItem() .

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

  2. Trascinare un componente List nello stage dal pannello Componenti.

  3. Nella finestra di ispezione Proprietà, effettuare le operazioni seguenti:

    • Inserite il nome di istanza aList .

    • Assegnate il valore 200 per la larghezza (W).

  4. Usate lo strumento Testo per creare un campo di testo sotto aList e assegnategli il nome di istanza aTf .

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

    import fl.controls.List; 
import fl.data.DataProvider; 
import flash.text.TextField; 
 
aTf.type = TextFieldType.DYNAMIC; 
aTf.border = false; 
 
var cars:Array = [ 
{label:"1956 Chevy (Cherry Red)", data:35000}, 
{label:"1966 Mustang (Classic)", data:27000}, 
{label:"1976 Volvo (Xcllnt Cond)", data:17000}, 
]; 
aList.dataProvider = new DataProvider(cars); 
aList.allowMultipleSelection = true; 
 
aList.addEventListener(Event.CHANGE, showData); 
 
function showData(event:Event) { 
    aTf.text = "This car is priced at: $" + event.target.selectedItem.data; 
}

  6. Selezionate Controllo > Prova filmato per visualizzare il componente List con le relative voci.

Usare un componente List per controllare un'istanza di un clip filmato

Nell'esempio seguente viene creato un componente List di nomi di colore e quando l'utente ne seleziona uno, il colore viene applicato a un clip filmato.

  1. Create un documento Flash (ActionScript 3.0).

  2. Trascinate un componente List dal pannello Componenti allo stage e assegnategli i seguenti valori nella finestra di ispezione Proprietà:

    • Inserite aList come nome dell'istanza.

    • Inserite 60 per il valore H.

    • Inserite 100 per il valore X.

    • Inserite 150 per il valore Y.

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

    aList.addItem({label:"Blue", data:0x0000CC}); 
aList.addItem({label:"Green", data:0x00CC00}); 
aList.addItem({label:"Yellow", data:0xFFFF00}); 
aList.addItem({label:"Orange", data:0xFF6600}); 
aList.addItem({label:"Black", data:0x000000}); 
 
var aBox:MovieClip = new MovieClip(); 
addChild(aBox); 
 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event) { 
    drawBox(aBox, event.target.selectedItem.data); 
}; 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(225, 150, 100, 100); 
            box.graphics.endFill();         
}

  4. Selezionate Controllo > Prova filmato per eseguire l'applicazione.

  5. Fate clic sui colori nel componente List per visualizzarli in un clip filmato.

Creare un'istanza del componente List mediante ActionScript

In questo esempio viene creato un elenco usando ActionScript e compilato usando il metodo addItem() .

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

  2. Trascinate il componente List dal pannello Componenti al pannello Libreria del documento corrente.

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

    import fl.controls.List; 
 
var aList:List = new List(); 
aList.addItem({label:"One", data:1}); 
aList.addItem({label:"Two", data:2}); 
aList.addItem({label:"Three", data:3}); 
aList.addItem({label:"Four", data:4}); 
aList.addItem({label:"Five", data:5}); 
aList.setSize(60, 40); 
aList.move(200,200); 
addChild(aList); 
aList.addEventListener(Event.CHANGE, changeHandler); 
function changeHandler(event:Event):void { 
    trace(event.target.selectedItem.data); 
}

  4. Selezionate Controllo > Prova filmato per eseguire l'applicazione.