De component RadioButton gebruiken

Met de component RadioButton kunt u een gebruiker dwingen één keuze te maken uit een reeks mogelijkheden. Deze component moet worden gebruikt in een groep van ten minste twee instanties RadioButton. Er kan slechts een lid van de groep tegelijk worden geselecteerd. Wanneer een keuzerondje in een groep wordt geselecteerd, wordt de huidige selectie van een keuzerondje in de groep opgeheven. U stelt de parameter groupName in om aan te geven tot welke groep een keuzerondje behoort.

Een keuzerondje is een fundamenteel onderdeel van vele formulieren op het web. U kunt keuzerondjes gebruiken wanneer u wilt dat de gebruiker een keuze maakt uit een groep opties. U gebruikt in een formulier bijvoorbeeld keuzerondjes voor de vraag welke creditcard de gebruiker wil gebruiken.

Gebruikersinteractie met de component RadioButton

Een keuzerondje kan worden ingeschakeld of uitgeschakeld. Een uitgeschakeld keuzerondje kan geen muis- of toetsenbordinvoer ontvangen. Wanneer de gebruiker klikt op een groep met componenten RadioButton of deze met Tab selecteert, krijgt alleen het geselecteerde keuzerondje focus. De gebruiker kan de volgende toetsen gebruiken om dit te beheren:

Toets

Beschrijving

Pijl-omhoog/Pijl-links

Hiermee gaat de selectie naar het vorige keuzerondje in  een groep keuzerondjes.

Pijl-omlaag/Pijl-rechts

Hiermee gaat de selectie naar het volgende keuzerondje in een groep keuzerondjes.

Tab

Hiermee wordt de focus van de groep keuzerondjes naar de volgende component verplaatst.

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 RadioButton in het werkgebied geeft direct wijzigingen weer in parameters in Eigenschapcontrole of Componentcontrole tijdens het ontwerpen. De wederzijdse selectie-uitsluiting wordt echter niet in de live voorvertoning weergegeven. Als u de geselecteerde parameter voor twee keuzerondjes in dezelfde groep instelt op true , worden ze allebei als geselecteerd weergegeven ondanks het feit dat bij uitvoering alleen de laatste instantie als geselecteerd wordt weergegeven. Zie Parameters van de component RadioButton voor meer informatie.

Wanneer u de component RadioButton aan een toepassing toevoegt, kunt u deze voor een schermlezer toegankelijk maken door de volgende coderegels toe te voegen: 

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

U stelt toegankelijkheid voor een component slechts eenmaal in, ongeacht het aantal componentinstanties dat u gebruikt. Raadpleeg Hoofdstuk 18, ‘Toegankelijke inhoud maken’ in Flash gebruiken voor meer informatie .

Parameters van de component RadioButton

U kunt in Eigenschapcontrole of Componentcontrole de volgende ontwerpparameters instellen voor elke instantie van RadioButton: groupName, label, LabelPlacement, selected en value . Elk van deze parameters heeft een bijbehorende ActionScript-eigenschap met dezelfde naam. Zie de klasse RadioButton in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor informatie over de mogelijk waarden voor deze parameters.

U kunt ActionScript schrijven om additionele opties voor instanties RadioButton via de methoden, eigenschappen en gebeurtenissen van de klasse RadioButton in te stellen.

Een toepassing met de component RadioButton maken

De volgende procedure laat zien hoe u een component RadioButton tijdens het ontwerpen aan een toepassing kunt toevoegen. In dit voorbeeld worden de RadioButtons gebruikt om een ja/nee-vraag weer te geven. De gegevens van RadioButton worden in een TextArea weergegeven.

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

  2. Sleep twee componenten RadioButton van het deelvenster Componenten naar het werkgebied.

  3. Selecteer het eerste keuzerondje. Geef deze in Eigenschapcontrole de instantienaam yesRb en de groepsnaam rbGroup .

  4. Selecteer het tweede keuzerondje. Geef deze in Eigenschapcontrole de instantienaam noRb en de groepsnaam rbGroup .

  5. Sleep een component TextArea van het deelvenster Componenten naar het werkgebied en geef deze de instantienaam aTa .

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

    yesRb.label = "Yes"; 
yesRb.value = "For"; 
noRb.label = "No"; 
noRb.value = "Against"; 
 
yesRb.move(50, 100); 
noRb.move(100, 100); 
aTa.move(50, 30); 
noRb.addEventListener(MouseEvent.CLICK, clickHandler); 
yesRb.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    aTa.text = event.target.value; 
}

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

Een RadioButton maken met ActionScript

In dit voorbeeld wordt ActionScript gebruikt om drie RadioButtons te maken voor de kleuren rood, blauw en groen en er wordt een grijs vak getekend. De eigenschap value voor elke RadioButton geeft de hexadecimale waarde op voor de kleur die aan de knop is gekoppeld. Wanneer de gebruiker op een van de RadioButtons klikt, roept de functie clickHandler() de drawBox() aan en wordt de kleur van de eigenschap value van de RadioButton doorgegeven om het vak te kleuren.

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

  2. Sleep de component RadioButton 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.RadioButton; 
import fl.controls.RadioButtonGroup; 
 
var redRb:RadioButton = new RadioButton(); 
var blueRb:RadioButton = new RadioButton(); 
var greenRb:RadioButton = new RadioButton(); 
var rbGrp:RadioButtonGroup = new RadioButtonGroup("colorGrp"); 
 
var aBox:MovieClip = new MovieClip(); 
drawBox(aBox, 0xCCCCCC); 
 
addChild(redRb); 
addChild(blueRb); 
addChild(greenRb); 
addChild(aBox); 
 
redRb.label = "Red"; 
redRb.value = 0xFF0000; 
blueRb.label = "Blue"; 
blueRb.value = 0x0000FF; 
greenRb.label = "Green"; 
greenRb.value = 0x00FF00; 
redRb.group = blueRb.group = greenRb.group = rbGrp; 
redRb.move(100, 260); 
blueRb.move(150, 260); 
greenRb.move(200, 260); 
 
rbGrp.addEventListener(MouseEvent.CLICK, clickHandler); 
 
function clickHandler(event:MouseEvent):void { 
    drawBox(aBox, event.target.selection.value); 
} 
 
function drawBox(box:MovieClip,color:uint):void { 
            box.graphics.beginFill(color, 1.0); 
            box.graphics.drawRect(125, 150, 100, 100); 
            box.graphics.endFill();         
}

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

    Zie de klasse RadioButton in de Naslaggids voor ActionScript 3.0 voor Adobe Flash Professional CS5 voor meer informatie.