De component ComboBox gebruiken

Gebruikersinteractie met de component ComboBox
Parameters van de component ComboBox
Een toepassing maken met de component ComboBox
- Een ComboBox maken met ActionScript

Met de component ComboBox kan de gebruiker één item in een vervolgkeuzelijst selecteren. Een ComboBox kan statisch of bewerkbaar zijn. In een bewerkbare ComboBox kan de gebruiker rechtstreeks tekst aan de bovenkant van de lijst in het tekstveld invoeren. Als de vervolgkeuzelijst het einde van het document raakt, opent deze naar boven in plaats van naar beneden. De ComboBox is opgebouwd uit drie subcomponenten: de componenten BaseButton, TextInput en List.

In een bewerkbare ComboBox, is alleen de knop het raakgebied en niet het tekstvak. Voor een statische ComboBox vormen de knop en het tekstvak het raakgebied. Het raakgebied reageert door de vervolgkeuzelijst te openen en sluiten.

Wanneer de gebruiker een selectie in de lijst maakt, zowel met de muis als het toetsenbord, wordt het label van de selectie naar het tekstveld aan de bovenkant van de ComboBox gekopieerd.

Gebruikersinteractie met de component ComboBox

U kunt een component ComboBox in elk formulier of toepassing gebruiken waarin een enkele keuze uit een lijst moet worden gemaakt. U kunt bijvoorbeeld een vervolgkeuzelijst van provincies aanbieden in het adresformulier van een klant. Voor meer complexe scenario’s kunt u een bewerkbare ComboBox gebruiken. In een toepassing met een routebeschrijving kunt u bijvoorbeeld een bewerkbare ComboBox gebruiken, zodat de gebruiker het beginpunt en de bestemming kan invoeren. Deze vervolgkeuzelijst zou het laatst ingevoerde adres bevatten.

Als de ComboBox bewerkbaar is (de eigenschap editable is true ) verwijderen de volgende toetsen de focus van het tekstinvoervak en wordt de vorige waarde vastgehouden. De uitzondering hierop vormt de Enter-toets, die eerst de nieuwe waarde toepast wanneer de gebruiker tekst invoert.

Toets	Beschrijving
Shift+Tab	Hiermee wordt de focus naar het vorige item verplaatst. Als er een nieuw item wordt geselecteerd, wordt een gebeurtenis `change` verzonden.
Tab	Hiermee wordt de focus naar het volgende item verplaatst. Als er een nieuw item wordt geselecteerd, wordt een gebeurtenis `change` verzonden.
Pijl-omlaag	Hiermee wordt de selectie een item naar beneden geplaatst.
End	Hiermee wordt de selectie naar de onderkant van de lijst verplaatst.
Escape	Hiermee wordt de vervolgkeuzelijst gesloten en wordt de focus naar ComboBox geretourneerd.
Enter	Hiermee wordt de vervolgkeuzelijst gesloten en wordt de focus naar ComboBox geretourneerd. Wanneer de ComboBox bewerkbaar is en de gebruiker tekst invoert, stelt de Enter-toets de waarde op de ingevoerde tekst in.
Startpagina	Hiermee wordt de selectie naar de bovenkant van de lijst verplaatst.
PageUp	Hiermee wordt de selectie een pagina naar boven verplaatst.
PageDown	Hiermee wordt de selectie een pagina naar beneden verplaatst.

Wanneer u de component ComboBox aan een toepassing toevoegt, kunt u deze toegankelijk maken voor schermlezers door de volgende ActionScript-coderegels toe te voegen:

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

U stelt toegankelijkheid voor een component slechts eenmaal in, ongeacht het aantal componentinstanties dat u gebruikt.

Parameters van de component ComboBox

U kunt de volgende parameters in Eigenschapcontrole of Componentcontrole voor elke instantie CheckBox instellen: dataProvider , editable , prompt en rowCount . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse ComboBox in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor informatie over de mogelijk waarden voor deze parameters. Zie De parameter dataProvider gebruiken voor informatie over het gebruik van de parameter dataProvider.

Een toepassing maken met de component ComboBox

De volgende procedure laat zien hoe u een component ComboBox tijdens het ontwerpen aan een toepassing kunt toevoegen. De ComboBox is bewerkbaar en als u Add in het tekstveld invoert, voegt het voorbeeld een item aan de vervolgkeuzelijst toe.

Maak een nieuw Flash-document (ActionScript 3.0).
Sleep een ComboBox naar het werkgebied en geef deze de instantienaam aCb . Stel op het tabblad Parameters de parameter editable in op true .

Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voer de volgende code in:

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);  
    } 
}

Selecteer Besturing > Film testen.

Een ComboBox maken met ActionScript

In het volgende voorbeeld wordt een ComboBox gemaakt met ActionScript en wordt deze gevuld met een lijst van universiteiten in en rond San Francisco, Californië. Het stelt de eigenschap width van de ComboBox in zodat de volledige vraagtekst kan worden weergegeven en stelt de eigenschap dropdownWidth enigszins breder in om de langste universiteitnaam weer te geven.

Het voorbeeld maakt een lijst van universiteiten in een instantie Array, waarbij de eigenschap label wordt gebruikt om de schoolnamen op te slaan en de eigenschap data om de URL’s van elke school op te slaan. De Array wordt aan de ComboBox toegewezen door zijn eigenschap dataProvider in te stellen.

Wanneer de gebruiker een universiteit uit de lijst selecteert, wordt een gebeurtenis Event. CHANGE geactiveerd en een aanroep naar de functie changeHandler() gemaakt, waardoor de eigenschap data in een URL-aanvraag voor toegang tot de website van een school wordt geladen.

De laatste regel stelt de eigenschap selectedIndex van de instantie ComboBox op -1 in om de vraag opnieuw weer te geven wanneer de lijst wordt gesloten. Zoniet, zou de vraag worden vervangen door de naam van de school die het laatst is geselecteerd.

Maak een nieuw Flash-document (ActionScript 3.0).
Sleep de component ComboBox van het deelvenster Componenten naar het deelvenster Bibliotheek.

Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende ActionScript-code toe:

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; 
}

Selecteer Besturing > Film testen.

U kunt dit voorbeeld in de Flash-ontwerpomgeving implementeren en uitvoeren maar u ontvangt waarschuwingsberichten als u probeert toegang te krijgen tot de websites van de universiteit door op de items in de ComboBox te klikken. Benader de volgende locatie om toegang te krijgen tot de volledig functionele ComboBox op het internet:

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