Usare il componente ComboBox

Un componente ComboBox consente all'utente di effettuare una sola selezione da un elenco discesa e può essere statico o modificabile. Un componente ComboBox modificabile consente all'utente di inserire il testo direttamente in un campo di testo presente all'inizio dell'elenco. Se l'elenco a discesa tocca il lato inferiore del documento, viene aperto verso l'alto anziché verso il basso. Il componente ComboBox è costituito da tre sottocomponenti: BaseButton, TextInput e List.

In un componente ComboBox modificabile, solo il pulsante è l'area attiva e non la casella di testo. In un componente ComboBox statico, sia il pulsante che la casella di testo costituiscono l'area attiva. L'area attiva risponde aprendo o chiudendo l'elenco a discesa.

Quando l'utente effettua una selezione nell'elenco, con il mouse o tramite la tastiera, l'etichetta della selezione viene copiata nel campo di testo presente nella parte superiore del componente ComboBox.

Interazione dell'utente con il componente ComboBox

Un componente ComboBox può essere utilizzato in qualsiasi form o applicazione che richiede una singola scelta da un elenco. Ad esempio, è possibile fornire all'utente un elenco a discesa di paesi in un form di indirizzi. Un componente ComboBox modificabile può essere utile per scenari più complessi. Ad esempio, in un'applicazione che fornisce itinerari stradali, potete usare un componente ComboBox modificabile per consentire all'utente di inserire i dati relativi agli indirizzi di partenza e di arrivo. In questo caso l'elenco a discesa conterrebbe gli indirizzi immessi in precedenza dall'utente.

Se il componente ComboBox è modificabile, ovvero la proprietà editable è true , i tasti elencati di seguito consentono di disattivare la casella di testo di input e lasciare il valore precedente. La sola eccezione è il tasto Invio, che applica il nuovo valore se l'utente ha immesso un testo.

Chiave

Descrizione

Maiusc + Tab

Attiva l'elemento precedente. Se selezionate una nuova voce, viene inviato un evento change .

Tab

Attiva la voce successiva. Se selezionate una nuova voce, viene inviato un evento change .

Freccia giù

Sposta la selezione di una voce verso il basso.

Fine

Sposta la selezione alla fine dell'elenco.

Escape

Chiude l'elenco a discesa e riattiva il componente ComboBox.

Digitare

Chiude l'elenco a discesa e riattiva il componente ComboBox. Se il componente ComboBox è modificabile e l'utente immette un testo, premendo Invio viene impostato il valore corrispondente al testo immesso.

Home

Sposta la selezione all'inizio dell'elenco.

Pagina su

Sposta la selezione di una pagina verso l'alto.

PgGiù

Sposta la selezione di una pagina verso il basso.

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

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

Attivare l'accessibilità per il componente una sola volta, indipendentemente dal numero di istanze del componente.

Parametri del componente ComboBox

Per ogni istanza ComboBox potete impostare i seguenti parametri nella finestra di ispezione Proprietà o nella finestra di ispezione dei componenti: dataProvider , editable , prompt e rowCount . 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 ComboBox 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 ComboBox

Nella procedura seguente viene descritto come aggiungere un componente ComboBox a un'applicazione durante la creazione. Il componente ComboBox è modificabile e se digitate Add nel campo di testo, in questo esempio viene aggiunta una voce all'elenco a discesa.

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

  2. Trascinate un componente ComboBox nello stage e assegnategli il nome di istanza aCb . Nella scheda Parametri, impostate il parametro editable su true .

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

    import fl.data.DataProvider; 
import fl.events.ComponentEvent; 
 
var items:Array = [ 
{label:"screen1", data:"screenData1"}, 
{label:"screen2", data:"screenData2"}, 
{label:"screen3", data:"screenData3"}, 
{label:"screen4", data:"screenData4"}, 
{label:"screen5", data:"screenData5"}, 
]; 
aCb.dataProvider = new DataProvider(items); 
     
aCb.addEventListener(ComponentEvent.ENTER, onAddItem); 
 
function onAddItem(event:ComponentEvent):void { 
    var newRow:int = 0; 
    if (event.target.text == "Add") { 
        newRow = event.target.length + 1; 
            event.target.addItemAt({label:"screen" + newRow, data:"screenData" + newRow},  
            event.target.length);  
    } 
}

  4. Selezionare Controllo > Prova filmato.

Creare un componente ComboBox mediante ActionScript

Nell'esempio seguente viene creato un componente ComboBox mediante ActionScript, che viene compilato con un elenco di università nell'area di San Francisco in California. La proprietà width di ComboBox viene impostata in modo che si adatti alla larghezza del testo di richiesta, mentre la proprietà dropdownWidth viene impostata su una larghezza leggermente superiore per adattarla al nome di università più lungo.

Nell'esempio viene creato un elenco di università in un'istanza Array, usando la proprietà label per memorizzare i nomi degli istituti e la proprietà data per memorizzare l'URL del sito Web di ogni istituto. L'istanza Array viene assegnata al componente ComboBox mediante l'impostazione della relativa proprietà dataProvider .

Quando un utente seleziona un'università dall'elenco, attiva un evento Event. CHANGE e una chiamata alla funzione changeHandler() , che carica la proprietà data in una richiesta URL per l'accesso al sito Web della scuola

L'ultima riga imposta la proprietà selectedIndex dell'istanza ComboBox su -1 in modo che la richiesta venga visualizzata di nuovo alla chiusura dell'elenco. In caso contrario, la richiesta verrebbe sostituita dal nome dell'istituto selezionato.

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

  2. Trascinate il componente ComboBox dal pannello Componenti al pannello Libreria.

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

    import fl.controls.ComboBox; 
import fl.data.DataProvider; 
import flash.net.navigateToURL; 
 
var sfUniversities:Array = new Array( 
    {label:"University of California, Berkeley",  
                data:"http://www.berkeley.edu/"}, 
    {label:"University of San Francisco",  
                data:"http://www.usfca.edu/"}, 
    {label:"San Francisco State University",  
                data:"http://www.sfsu.edu/"}, 
    {label:"California State University, East Bay",  
                data:"http://www.csuhayward.edu/"}, 
    {label:"Stanford University", data:"http://www.stanford.edu/"}, 
    {label:"University of Santa Clara", data:"http://www.scu.edu/"}, 
    {label:"San Jose State University", data:"http://www.sjsu.edu/"} 
); 
 
var aCb:ComboBox = new ComboBox(); 
aCb.dropdownWidth = 210; 
aCb.width = 200;  
aCb.move(150, 50); 
aCb.prompt = "San Francisco Area Universities"; 
aCb.dataProvider = new DataProvider(sfUniversities); 
aCb.addEventListener(Event.CHANGE, changeHandler); 
 
addChild(aCb); 
 
function changeHandler(event:Event):void { 
    var request:URLRequest = new URLRequest(); 
    request.url = ComboBox(event.target).selectedItem.data; 
    navigateToURL(request); 
    aCb.selectedIndex = -1; 
}

  4. Selezionare Controllo > Prova filmato.

Potete implementare ed eseguire questo esempio nell'ambiente di creazione Flash, tuttavia se tentate di accedere ai siti Web delle università facendo clic sulle voci presenti nel componente ComboBox, verranno visualizzati dei messaggi di avviso. Per accedere al componente ComboBox completamente funzionale su Internet, visitate il collegamento riportato di seguito:

http://www.helpexamples.com/peter/bayAreaColleges/bayAreaColleges.html