De component Button gebruiken

De component Button is een rechthoekige knop waarvan de grootte kan worden gewijzigd en waarop de gebruiker met de muisaanwijzer of de spatiebalk kan klikken om een actie in de toepassing te starten. U kunt een aangepast pictogram aan een Button toevoegen. U kunt ook het gedrag van een Button wijzigen van een drukknop in een schakelknop. Een schakelknop blijft ingedrukt wanneer hierop wordt geklikt en keert terug naar de toestand Omhoog wanneer er nogmaals op wordt geklikt.

Een Button is een fundamenteel onderdeel van vele formulieren en webtoepassingen. U kunt deze knoppen gebruiken wanneer u wilt dat de gebruiker een gebeurtenis start. De meeste formulieren hebben bijvoorbeeld een knop Verzenden. U kunt ook knoppen Vorige en Volgende aan een presentatie toevoegen.

Gebruikersinteractie met het component Button

U kunt een Button in een toepassing in- of uitschakelen. In de uitgeschakelde toestand ontvangt de component geen muis- of toetsenbordinvoer. Een ingeschakelde Button ontvangt focus wanneer u erop klikt of er met Tab naartoe gaat. Wanneer een instantie Button focus heeft, kunt u de volgende toetsen gebruiken om de instantie te beheren:

Toets

Beschrijving

Shift+Tab

Hiermee wordt de focus naar het vorige object verplaatst.

Spatiebalk

Hiermee drukt u op de knop of laat u deze los en activeert u de gebeurtenis click .

Tab

Hiermee wordt de focus naar het volgende object verplaatst.

Enter/Return

Hiermee wordt de focus naar het volgende object verplaatst als de knop als de standaard Button van FocusManager is ingesteld.

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 Button geeft direct wijzigingen weer in parameters in Eigenschapcontrole of Componentcontrole tijdens het ontwerpen.

Opmerking: Als een pictogram groter dan de knop is, strekt het pictogram zich buiten de grenzen van de knop uit.

Als u een knop als de standaarddrukknop in een toepassing wilt aanwijzen (de knop die de gebeurtenis click ontvangt wanneer de gebruiker op Enter drukt), stelt u FocusManager.defaultButton in. De volgende code stelt bijvoorbeeld de standaardknop in op een knopinstantie met de naam submitButton . 

FocusManager.defaultButton = submitButton;

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

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

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

Parameters van de component Button

U kunt in Eigenschapcontrole instellen (Venster > Eigenschappen > Eigenschappen) of in Componentcontrole (Venster > Componentcontrole) de volgende ontwerpparameters voor elke instantie van de component Button: emphasized , label , labelPlacement , selected en toggle . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Wanneer u een waarde toewijst aan deze parameters, stelt u de initiële status in van de eigenschap in de toepassing. Bij het instellen van de eigenschap in ActionScript wordt de ingestelde waarde in de parameter genegeerd. Zie de klasse Button in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor informatie over de mogelijk waarden voor deze parameters.

Een toepassing maken met de component Button

De volgende procedure laat zien hoe u een component Button tijdens het ontwerpen aan een toepassing kunt toevoegen. In dit voorbeeld wordt met de klasse Button de status van de component ColorPicker gewijzigd wanneer u erop klikt.

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

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

    • Voer de instantienaam aButton in.

    • Voer Show in voor de parameter label.

  3. Voeg een ColorPicker aan het werkgebied toe en geef deze de instantienaam aCp .

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

    aCp.visible = false; 
 
aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
     
    switch(event.currentTarget.label) { 
        case "Show": 
            aCp.visible = true; 
            aButton.label = "Disable"; 
            break; 
        case "Disable": 
            aCp.enabled = false; 
            aButton.label = "Enable"; 
            break; 
        case "Enable": 
            aCp.enabled = true; 
            aButton.label = "Hide"; 
            break; 
        case "Hide": 
            aCp.visible = false; 
            aButton.label = "Show"; 
            break; 
    } 
}

    De tweede coderegel registreert de functie clickHandler() als de gebeurtenishandlerfunctie voor de gebeurtenis. MouseEvent.CLICK De gebeurtenis treedt op wanneer de gebruiker op de Button klikt, waardoor de functie clickHandler() afhankelijk van de waarde van de Button een van de volgende handelingen uitvoert:

    • Met Show wordt de ColorPicker zichtbaar gemaakt en wordt het label van de Button in Disable gewijzigd.

    • Met Disable wordt de ColorPicker uitgeschakeld en wordt het label van de Button in Enable gewijzigd.

    • Met Enable wordt de ColorPicker ingeschakeld en wordt het label van de Button in Hide gewijzigd.

    • Met Hide wordt de ColorPicker onzichtbaar gemaakt en wordt het label van de Button in Show gewijzigd.

  5. Selecteer Besturing > Film testen om de toepassing uit te voeren.

Een toepassing maken met de component Button

In de volgende procedure wordt een schakelknop gemaakt via ActionScript en wordt het gebeurtenistype in het deelvenster Uitvoer weergegeven wanneer u op de Button klikt. In het voorbeeld wordt een instantie van Button gemaakt door de constructor van de klasse aan te roepen en wordt deze aan het werkgebied·toegevoegd·door·de·methode· addChild() aan te roepen.

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

  2. Sleep een component Button van het deelvenster Componenten naar het deelvenster Bibliotheek van het huidige document.

    Hiermee voegt u de component aan de bibliotheek toe, maar de component wordt hierdoor niet zichtbaar in de toepassing.

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voer de volgende code in om een instantie Button te maken: 

    import fl.controls.Button; 
 
var aButton:Button = new Button(); 
addChild(aButton); 
aButton.label = "Click me"; 
aButton.toggle =true;  
aButton.move(50, 50);

    De methode move() plaatst de knop op locatie 50 (x-coördinaat), 50 (y-coördinaat) in het werkgebied.

  4. Voeg nu de volgende ActionScript-code toe om een gebeurtenislistener en een gebeurtenishandlerfunctie te maken: 

    aButton.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    trace("Event type: " + event.type); 
}

  5. Selecteer Besturing > Film testen.

    Wanneer u op de knop klikt, wordt het bericht ‘Event type: click’ in het deelvenster Uitvoer weergegeven.