De component CheckBox gebruiken

Een CheckBox is een vierkant vakje dat kan worden in- of uitgeschakeld. Wanneer het is geselecteerd, wordt een vinkje in het vakje weergegeven. U kunt een tekstlabel aan een CheckBox toevoegen en deze links, rechts, boven of onder de CheckBox plaatsen.

U kunt meerdere componenten CheckBox gebruiken om een set met waarden true of false te verzamelen die elkaar niet uitsluiten. Een toepassing die bijvoorbeeld informatie verzamelt over de auto die u wilt kopen, maakt waarschijnlijk gebruik van componenten CheckBox zodat u bepaalde kenmerken kunt selecteren.

Gebruikersinteractie met CheckBox

U kunt een CheckBox in een toepassing in- of uitschakelen. Als een CheckBox is ingeschakeld en de gebruiker hierop of op het label klikt, ontvangt de CheckBox invoerfocus en geeft deze het geklikte uiterlijk weer. Als de gebruiker de aanwijzer verplaatst tot buiten het selectiegebied van een CheckBox of het label terwijl de muisknop wordt ingedrukt, keert het uiterlijk van de component terug naar de oorspronkelijke toestand en behoudt deze invoerfocus. De toestand van een CheckBox wordt pas gewijzigd wanneer de muis boven de component wordt losgelaten. Bovendien heeft de CheckBox twee uitgeschakelde toestanden, geselecteerd en niet geselecteerd, die respectievelijk gebruikmaken van selectedDisabledSkin en disabledSkin , die geen muis- of toetsenbordinteractie toestaan.

Wanneer een CheckBox is uitgeschakeld, geeft deze het uitgeschakelde uiterlijk weer, ongeacht gebruikersinteractie. In de uitgeschakelde toestand ontvangt een CheckBox geen muis- of toetsenbordinvoer.

Een instantie CheckBox ontvangt focus wanneer de gebruiker erop klikt of er met Tab naartoe gaat. Wanneer een instantie CheckBox focus heeft, kunt u de volgende toetsen gebruiken om de instantie te beheren:

Toets

Beschrijving

Shift+Tab

Hiermee wordt de focus naar het vorige element verplaatst.

Spatiebalk

Hiermee selecteert u de component of heft u de selectie ervan op en activeert u de gebeurtenis change .

Tab

Hiermee wordt de focus naar het volgende element verplaatst.

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

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

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

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

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

Parameters van de component CheckBox

U kunt in Eigenschapcontrole of Componentcontrole de volgende ontwerpparameters instellen voor elke instantie van de component CheckBox: label , labelPlacement en selected . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse Checkbox 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 CheckBox

De volgende procedure laat aan de hand van een fragment uit een aanvraagformulier voor een lening zien hoe u een component CheckBox tijdens het ontwerpen aan een toepassing kunt toevoegen. Het formulier bevat de vraag of de aanvrager huiseigenaar is en biedt een CheckBox waarmee de gebruiker ‘ja’ kan antwoorden. Zo ja, geeft het formulier twee keuzerondjes weer waarmee voor de gebruiker de relatieve waarde van het huis kan aangeven.

Een toepassing maken met de component CheckBox

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

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

  3. Ga als volgt te werk in Eigenschapcontrole:

    • Voer bij de instantienaam homeCh in.

    • Voer 140 in voor de waarde width (W).

    • Voer bij de parameter label Huiseigenaar? in.

  4. Sleep twee instanties van de component RadioButton van het deelvenster Componenten naar de werkruimte en zet ze onder en rechts van de CheckBox neer. Voer in Eigenschapcontrole de volgende waarden voor ze in:

    • Voer bij de instantienamen underRb en overRb in.

    • Voer 120 in voor de parameter W (breedte) van beide RadioButtons.

    • Voer Minder dan € 500.000? in voor de parameter label van underRb .

    • Voer Meer dan € 500.000? in voor de parameter label van overRb .

    • Voer valueGrp in voor de parameter groupName van beide RadioButtons.

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

    homeCh.addEventListener(MouseEvent.CLICK, clickHandler); 
underRb.enabled = false; 
overRb.enabled = false; 
 
function clickHandler(event:MouseEvent):void { 
    underRb.enabled = event.target.selected; 
    overRb.enabled = event.target.selected;     
}

    Met deze code maakt u een gebeurtenishandler voor een gebeurtenis CLICK die de RadioButtons underRb en overRb inschakelt wanneer de CheckBox homeCh is geselecteerd en deze uitschakelt wanneer homeCh niet is geselecteerd. Zie de klasse MouseEvent in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor meer informatie.

  6. Selecteer Besturing > Film testen.

Het volgende voorbeeld dupliceert de voorafgaande toepassing maar maakt de CheckBox en RadioButtons met ActionScript.

Een CheckBox maken met ActionScript

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

  2. Sleep de component CheckBox en de component RadioButton van het deelvenster Componenten naar het deelvenster Bibliotheek van het huidige document. Als het deelvenster Bibliotheek niet is geopend, drukt u op Ctrl+L of selecteert u Venster > Bibliotheek om het deelvenster Bibliotheek te openen.

    Op deze manier zijn de componenten voor de toepassing beschikbaar maar worden ze niet in het werkgebied geplaatst.

  3. Open het deelvenster Handelingen, selecteer frame 1 van de hoofdtijdlijn en voeg de volgende code toe om componentinstanties te maken en plaatsen: 

    import fl.controls.CheckBox; 
import fl.controls.RadioButton; 
 
var homeCh:CheckBox = new CheckBox(); 
var underRb:RadioButton = new RadioButton(); 
var overRb:RadioButton = new RadioButton(); 
addChild(homeCh); 
addChild(underRb); 
addChild(overRb); 
underRb.groupName = "valueGrp"; 
overRb.groupName = "valueGrp"; 
homeCh.move(200, 100); 
homeCh.width = 120; 
homeCh.label = "Own your home?"; 
underRb.move(220, 130); 
underRb.enabled = false; 
underRb.width = 120; 
underRb.label = "Under $500,000?"; 
overRb.move(220, 150); 
overRb.enabled = false; 
overRb.width = 120; 
overRb.label = "Over $500,000?";

    Deze code gebruikt de constructors CheckBox() en RadioButton() om de componenten te maken en de methode addChild() om deze in het werkgebied te plaatsen. De methode move() wordt gebruikt om de componenten op de gewenste locatie in het werkgebied te plaatsen.

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

    homeCh.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    underRb.enabled = event.target.selected; 
    overRb.enabled = event.target.selected;     
}

    Met deze code maakt u een gebeurtenishandler voor een gebeurtenis CLICK die de keuzerondjes underRb en overRb inschakelt wanneer de CheckBox homeCh is geselecteerd en deze uitschakelt wanneer homeCh niet is geselecteerd. Zie de klasse MouseEvent in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor meer informatie.

  5. Selecteer Besturing > Film testen.