Använda komponenten List

Komponenten List är en rullningsbar listruta där ett eller flera alternativ kan vara markerade. En lista kan också visa grafik, inklusive andra komponenter. Du lägger till objekten som visas i listan genom att använda dialogrutan Värden, som visas när du klickar på etikett- eller parameterfälten. Du kan också använda metoderna List.addItem() och List.addItemAt() för att lägga till objekt i listan.

List-komponenten använder ett nollbaserat index, där objektet med index 0 är det översta objektet som visas. När du lägger till, tar bort eller byter ut listobjekt med metoderna och egenskaperna för List-klassen kan du behöva ange listobjektets index.

Användarinteraktion med komponenten List

Du kan ställa in en lista så att användarna kan markera ett eller flera alternativ. Till exempel kan en användare som besöker en e-handelsplats behöva markera vilket objekt han vill köpa. Det finns 30 objekt i en lista som användaren kan bläddra igenom, och användaren väljer ett objekt genom att klicka på det.

Du kan också utforma en List som använder anpassade filmklipp som rader, så att du kan visa mer information för användaren. I ett e-postprogram kan till exempel varje brevlåda vara en List-komponent och varje rad kan ha ikoner som anger prioritet och status.

Listan får fokus när du klickar på den eller tabbar till den, och sedan kan du använda följande tangenter för att styra den:

Nyckel

Beskrivning

Alfanumeriska tangenter

Hoppa till nästa objekt som har Key.getAscii() som det första tecknet i etiketten.

Kontroll

Växlingstangent som gör att du kan göra flera markeringar eller avmarkeringar som inte är i följd.

Nedpilen

Markeringen flyttar nedåt ett objekt.

Hem

Markeringen flyttar högst upp i listan.

Page Down

Markeringen flyttar nedåt en sida.

Page Up

Markeringen flyttar uppåt en sida.

Skift

Gör sammanhängande markering möjlig.

Uppilen

Markeringen flyttar uppåt ett objekt.

Obs! Observera att rullningsstorlekar anges i pixlar och inte i rader.
Obs! Sidstorleken som används av tangenterna Page Up och Page Down keys är ett mindre än antalet objekt som får plats i visningen. Om du till exempel bläddrar nedåt genom en listruta med tio rader visas listobjekten 0-9, 9-18, 18-27 och så vidare, med ett överlappande objekt per sida.

Mer information om att kontrollera fokus finns i avsnittet om gränssnittet IFocusManager och i klassen FocusManager i Referenshandbok för ActionScript 3.0 i Adobe Flash Professional och Arbeta med FocusManager .

En direktförhandsvisning av varje List-förekomst på scenen reflekterar ändringar som gjorts på parametrar i egenskapsinspektören eller komponentinspektören vid redigeringen.

När du lägger till List-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.ListAccImpl; 
 
ListAccImpl.enableAccessibility();

Du aktiverar bara en komponents åtkomlighet en gång, oavsett hur många förekomster komponenten har. Mer information finns i kapitel 18, "Skapa åtkomligt innehåll" i Använda Flash .

List-komponentparametrar

Du kan ställa in följande parametrar i egenskapsinspektören eller komponentinspektören för varje förekomst av List-komponenten: allowMultipleSelection , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize och verticalScrollPolicy . 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 avsnittet om klassen List 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 List

I exemplen nedan beskrivs hur du lägger till en List-komponent i ett program när du redigerar.

Lägga till en enkel List-komponent i ett program

Här består List av etiketter som identifierar bilmodeller och datafält som innehåller priser.

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

  2. Dra en List-komponent från komponentpanelen till scenen.

  3. Gör följande i egenskapsinspektören:

    • Ange förekomstnamnet aList .

    • Tilldela värdet 200 till W (bredd).

  4. Använd textverktyget och skapa ett textfält nedanför aList och ge det förekomstnamnet aTf .

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

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

    Den här koden använder metoden addItem() för att fylla i aList med tre objekt, och tilldela varje objekt ett label -värde, som visas i listan, samt ett data -värde. När det markerar ett objekt i listan anropar händelseavlyssnaren funktionen showData() som visar data -värdet för det markerade objektet.

  6. Välj Kontroll > Testa filmen för att kompilera och köra programmet.

Fylla i en List-förekomst med en DataProvider

I det här exemplet skapas en List med bilmodeller och deras pris. Men här används en DataProvider för att fylla i List, i stället för metoden addItem() .

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

  2. Dra en List-komponent från komponentpanelen till scenen.

  3. Gör följande i egenskapsinspektören:

    • Ange förekomstnamnet aList .

    • Tilldela värdet 200 till W (bredd).

  4. Använd textverktyget och skapa ett textfält nedanför aList och ge det förekomstnamnet aTf .

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

    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. Välj Kontroll > Testa filmen för att visa List med dess objekt.

Använda en List-komponent för att styra en MovieClip-förekomst

I följande exempel skapas en List med namn på färger, och när en färg markeras används den på ett MovieClip.

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

  2. Dra List-komponenten från panelen Komponenter till scenen och ge den följande värden i egenskapsinspektören:

    • Ange aList som förekomstnamn.

    • Ange 60 som H-värde.

    • Ange 100 som X-värde.

    • Ange 150 som Y-värde.

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

    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. Välj Kontroll > Testa filmen för att köra programmet.

  5. Klicka på färger i List för att se dem visas i ett MovieClip.

Skapa en förekomst av en List-komponent med ActionScript

I det här exemplet skapas en enkel lista med ActionScript och den fylls med metoden addItem() .

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

  2. Dra List-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.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. Välj Kontroll > Testa filmen för att köra programmet.