Använda komponenten ComboBox

Med ComboBox-komponenten kan användaren göra ett enda val i en listruta. En ComboBox kan vara statisk eller redigerbar. Med en redigerbar ComboBox kan användaren ange text direkt i textfältet högst upp i listan. Om listrutan når ända ned till dokumentets nederkant öppnas den uppåt i stället för nedåt. En ComboBox består av tre underkomponenter: komponenterna BaseButton, TextInput och List.

I en redigerbar ComboBox består träffområdet enbart av – inte av textrutan. För en statisk ComboBox består träffområdet av både knappen och textrutan. Träffområdet svarar genom att öppna eller stänga listrutan.

När användaren markerar något i listan, med musen eller via tangentbordet, kopieras markeringens etikett till textfältet högst upp ComboBoxen.

Använda ComboBox-komponenten

Du kan använda ComboBox-komponenter i formulär och program där användaren behöver göra ett enda val i en lista. Du kan till exempel skapa en listruta för länder i ett formulär för kundadresser. En redigerbar ComboBox används för mer komplexa scenarier. I ett program som ger köranvisningar kan du till exempel använda en redigerbar ComboBox där användaren kan ange den ursprungliga adressen och destinationsadressen. Listrutan innehåller de adresser som användaren har angett tidigare.

Om ComboBoxen är redigerbar, det vill säga att egenskapen editable är true , tar följande tangenter bort fokus från textinmatningsrutan och låter det föregående värdet stå kvar. Undantaget är Enter-tangenten, som använder det nya värdet först om användaren anger text.

Nyckel

Beskrivning

Skift + tabbtangent

Flyttar fokus till föregående objekt. Om ett nytt objekt markeras, skickas en ny change -händelse.

Tabb

Flyttar fokus till nästa objekt. Om ett nytt objekt markeras, skickas en ny change -händelse.

Nedpilen

Flyttar markeringen ett objekt nedåt.

End

Flyttar markeringen längst ned i listan.

Escape

Stänger listrutan och returnerar fokus till ComboBox.

Enter

Stänger listrutan och returnerar fokus till ComboBox. När ComboBox är redigerbar och användaren anger text, gör Retur att värdet får den angivna texten.

Hem

Flyttar markeringen högst upp i listan.

Page Up

Flyttar markeringen en sida uppåt.

Page Down

Flyttar markeringen en sida nedåt.

När du lägger till ComboBox-komponenten i ett program kan du göra den åtkomlig för en skärmläsare genom att lägga till följande rader med ActionScript-kod: 

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

Du aktiverar bara en komponents åtkomlighet en gång, oavsett hur många förekomster du har av komponenten.

ComboBox-komponentparametrar

Du kan ställa in följande utvecklingsparametrar i egenskapsinspektören eller komponentinspektören för varje förekomst av ComboBox-komponenten: dataProvider , editable , prompt och rowCount . Var och en av de här parametrarna har en motsvarande ActionScript-egenskap med samma namn. Information om möjliga värden på de här parametrarna finns i ComboBox-klassen i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional . Information om hur du använder parametern dataProvider finns i Använda parametern DataProvider .

Skapa ett program med komponenten ComboBox

I proceduren nedan beskrivs hur du lägger till en ComboBox-komponent i ett program när du redigerar. ComboBox är redigerbar, och om du skriver Lägg till i textfältet lägger exemplet till ett objekt i listrutan.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra en ComboBox till scenen och ge den förekomstnamnet aCb . På fliken Parametrar ger du parametern editable värdet true .

  3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande kod: 

    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. Välj Kontroll > Testa filmen.

Skapa en ComboBox med ActionScript

Följande exempel skapar en ComboBox med ActionScript och fyller i den med en lista med universitet i San Francisco, Kalifornien. Egenskapen width för ComboBoxen ställs in så att den passar prompttextens bredd och egenskapen dropdownWidth ställs in så att den är lite bredare, för att få plats med det längsta universitetsnamnet.

Listan med universitet skapas i en Array-förekomst, där egenskapen label används för att lagra universitetsnamnen och egenskapen data för att lagra URL:er till universitetens webbplatser. Arrayen tilldelas ComboBox genom att dess dataProvider -egenskap ställs in.

När en användare väljer ett universitet från listan aktiveras en Event. CHANGE -händelse och ett anrop till funktionen changeHandler() , som läser in egenskapen data i en URL-begäran för att komma åt universitetets webbplats.

Observera att den sista raden ställer in ComboBox-förekomstens selectedIndex -egenskap till –1 för att prompten ska visas igen när listan stängs. Annars skulle prompten bytas ut mot namnet på universitetet som markerades.

  1. Skapa ett nytt Flash-dokument (ActionScript 3.0).

  2. Dra ComboBox-komponenten från panelen Komponenter till bibliotekspanelen.

  3. Öppna åtgärdspanelen, markera bildruta 1 i huvudtidslinjen och ange följande ActionScript-kod: 

    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. Välj Kontroll > Testa filmen.

Du kan implementera och köra det här exemplet i Flash-utvecklingsmiljön, men du får varningsmeddelanden om du försöker komma åt universitetens webbplatser genom att klicka på objekt i ComboBoxen. Om du vill komma åt den fungerande ComboBoxen på Internet går du till följande webbplats:

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