De component List gebruiken

De component List is een schuifbaar vak met een enkelvoudige of meervoudige keuzelijst. Een lijst kan ook afbeeldingen weergeven, inclusief andere componenten. U voegt de items die in de lijst worden weergegeven toe via het dialoogvenster Waarden dat wordt weergegeven wanneer u op de labels of op de parametervelden data klikt. U kunt ook de methoden List.addItem() en List.addItemAt() gebruiken om items aan de lijst toe te voegen.

De component List gebruikt een op nul gebaseerde index, waarbij het item met index nul het bovenste item is dat wordt weergegeven. Wanneer u met de klassemethoden van List items aan de lijst toevoegt, items uit de lijst verwijdert of items vervangt, moet u mogelijk de index van het item in de lijst opgeven.

Gebruikersinteractie met de component List

U kunt een lijst instellen zodat de gebruiker een enkele selectie of meerdere selecties kan maken. Een gebruiker die bijvoorbeeld een e-commercewebsite bezoekt moet kunnen selecteren welk item hij wil kopen. De lijst bevat 30 items. De gebruiker kan door de lijst schuiven en een item kiezen door erop te klikken.

U kunt ook een List ontwerpen die aangepaste filmclips als rijen gebruikt zodat u meer informatie aan de gebruiker kunt tonen. In een e-mailtoepassing kan iedere mailbox bijvoorbeeld een component List zijn en kan elke rij pictogrammen bevatten om de prioriteit en status aan te geven.

De List ontvangt focus wanneer u erop klikt of er met de Tab naartoe gaat en u kunt de volgende toetsen gebruiken om dit te beheren:

Toets

Beschrijving

Alfanumerieke toetsen

Hiermee wordt naar het volgende item gegaan waarvan het eerste teken in zijn label Key.getAscii() is.

Ctrl

Schakelknop die meerdere niet-opeenvolgende selecties en het opheffen van selecties toestaat.

Pijl-omlaag

Hiermee wordt de selectie een item naar beneden verplaatst.

Startpagina

Hiermee wordt de selectie naar de bovenkant van de lijst verplaatst.

PageDown

Hiermee wordt de selectie een pagina naar beneden verplaatst.

PageUp

Hiermee wordt de selectie een pagina naar boven verplaatst.

Shift

Hiermee wordt opeenvolgende selectie toegestaan.

Pijl-omhoog

Hiermee wordt de selectie een item naar boven verplaatst.

Opmerking: De schuifgrootten zijn in pixels en niet in rijen.
Opmerking: De paginagrootte die wordt gebruikt door de toetsen PageUp en PageDown is één minder dan het aantal items dat in het scherm past. Als u bijvoorbeeld een vervolgkeuzelijst met tien regels doorloopt, worden de items 0-9, 9-18, 18-27 enzovoort weergegeven, waarbij per pagina een item wordt overlapt.

Zie de IFocusManager-interface en de klasse FocusManager in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 en Werken met FocusManager voor meer informatie over focusbeheer.

Een live voorvertoning van elke instantie List in het werkgebied geeft direct wijzigingen weer in parameters in Eigenschapcontrole of Componentcontrole tijdens het ontwerpen.

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

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

U stelt toegankelijkheid voor een component slechts eenmaal in, ongeacht het aantal instanties van de component. Raadpleeg Hoofdstuk 18, ‘Toegankelijke inhoud maken’ in Flash gebruiken voor meer informatie.

Parameters van de component List

U kunt in Eigenschapcontrole of Componentcontrole de volgende parameters instellen voor elke instantie van de component List: allowMultipleSelection, , , dataProvider, horizontalLineScrollSize, horizontalPageScrollSize, horizontalScrollPolicy, multipleSelection, verticalLineScrollSize, verticalPageScrollSize en verticalScrollPolicy . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse List 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 met de component List maken

Het volgende voorbeeld laat zien hoe u een component List tijdens het ontwerpen aan een toepassing kunt toevoegen.

Een component List aan een toepassing toevoegen

In dit voorbeeld bestaat List uit labels die automodellen en gegevensvelden met prijzen identificeren.

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een component List van het deelvenster Componenten naar het werkgebied.

  3. Ga als volgt te werk in Eigenschapcontrole:

    • Voer de instantienaam aList in.

    • Wijs de waarde 200 aan W (breedte) toe.

  4. Gebruik het gereedschap Tekst om een tekstveld onder aList te maken en geef het de instantienaam aTf .

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

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

    Deze code gebruikt de methode addItem() om aList met drie items te vullen, en wijst elk de waarde label (die in de lijst wordt weergegeven) en de waarde data toe. Wanneer u een item in de lijst selecteert, roept de gebeurtenislistener de functie showData() aan, die de waarde data voor het geselecteerde item weergeeft.

  6. Selecteer Besturing > Film testen om de toepassing te compileren en uit te voeren.

Een instantie List met een gegevensaanbieder vullen

In dit voorbeeld wordt een lijst van automodellen en de prijzen hiervan gemaakt. Er wordt een gegevensaanbieder gebruikt om de lijst te vullen in plaats van de methode addItem() .

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep een component List van het deelvenster Componenten naar het werkgebied.

  3. Ga als volgt te werk in Eigenschapcontrole:

    • Voer de instantienaam aList in.

    • Wijs de waarde 200 aan W (breedte) toe.

  4. Gebruik het gereedschap Tekst om een tekstveld onder aList te maken en geef het de instantienaam aTf .

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

    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. Selecteer Besturing > Film testen om List met zijn items te zien.

Een component List gebruiken om een instantie MovieClip te beheren

In het volgende voorbeeld wordt een lijst van kleurnamen gemaakt en wanneer u een kleur selecteert, wordt deze op een MovieClip toegepast.

  1. Maak een Flash-document (ActionScript 3.0).

  2. Sleep een component List van het deelvenster Componenten naar het werkgebied en voer de volgende waarden voor deze component in Eigenschapcontrole in:

    • Voer bij de instantienaam aList in .

    • Voer 60 in voor de waarde H.

    • Voer 100 in voor de waarde X.

    • Voer 150 in voor de waarde Y.

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

    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. Selecteer Besturing > Film testen om de toepassing uit te voeren.

  5. Klik op de kleuren in de lijst om ze in een MovieClip weer te geven.

Een componentinstantie List met ActionScript maken

In dit voorbeeld wordt met ActionScript een eenvoudige lijst gemaakt, waarna de lijst wordt gevuld met de methode addItem() .

  1. Maak een nieuw Flash-document (ActionScript 3.0).

  2. Sleep de component List van het deelvenster Componenten naar het deelvenster Bibliotheek.

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

    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. Selecteer Besturing > Film testen om de toepassing uit te voeren.