Utilisation du composant RadioButton

Le composant RadioButton permet d’obliger un utilisateur à choisir un seul élément parmi plusieurs possibilités. Ce composant doit être utilisé dans un groupe comprenant au moins deux occurrences de RadioButton. Seul un membre peut être sélectionné au sein du groupe. La sélection d’un bouton radio dans un groupe désélectionne le bouton qui y était sélectionné jusqu’alors. Vous définissez le paramètre groupName pour indiquer le groupe auquel appartient un bouton radio.

Un composant RadioButton est un élément fondamental de nombreuses applications de formulaire sur le Web. Vous pouvez utiliser les boutons radio partout où vous souhaitez qu’un utilisateur opte pour un choix dans un groupe d’options. Par exemple, utilisez des boutons radio dans un formulaire pour demander quelle carte bancaire un utilisateur souhaite utiliser.

Interaction de l’utilisateur avec le composant RadioButton

Un bouton radio peut être activé ou désactivé. En état désactivé, le bouton radio ne réagit pas aux commandes de la souris ou du clavier. Lorsque l’utilisateur clique ou appuie sur la touche de tabulation pour ouvrir un groupe de composant RadioButton, seul le bouton radio sélectionné reçoit le focus. L’utilisateur peut ensuite utiliser les touches suivantes pour le contrôler :

Touche

Description

Flèche vers le haut/Flèche vers la gauche

La sélection se déplace vers le bouton radio précédent dans le groupe de boutons radio.

Flèche vers le bas/Flèche vers la droite

La sélection se déplace vers le bouton radio suivant dans le groupe de boutons radio.

Tab

Déplace le focus du groupe de boutons radio vers le composant suivant.

Pour plus d’informations sur le contrôle du focus, voir l’interface IFocusManager et la classe FocusManager dans le Guide de référence d’ActionScript 3.0 pour Flash Professional et Utilisation de FocusManager .

Un aperçu en direct de chaque occurrence de RadioButton sur la scène reflète les modifications effectuées sur les paramètres dans l’Inspecteur des propriétés ou des composants lors de la programmation. Cependant, l’exclusion mutuelle de la sélection ne s’affiche pas dans l’aperçu en direct. Si vous définissez le paramètre sélectionné sur true pour deux boutons radio dans le même groupe, ils apparaissent tous deux comme étant sélectionnés même si seule la dernière occurrence créée apparaît comme étant sélectionnée lors de l’exécution. Pour plus d’informations, voir la section Paramètres du composant RadioButton .

Lorsque vous ajoutez un composant RadioButton à une application, vous pouvez le rendre accessible à un lecteur d’écran en ajoutant les lignes de code suivantes : 

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

Quel que soit le nombre d’occurrences du composant, l’activation de son accessibilité ne se fait qu’une fois. Pour plus d’informations, voir le Chapitre 18, « Création de contenu accessible » du guide Utilisation de Flash .

Paramètres du composant RadioButton

Dans l’Inspecteur des propriétés ou l’Inspecteur des composants, vous pouvez définir les paramètres de création suivants pour chaque occurrence du composant RadioButton : groupName, label, LabelPlacement, selected et value . A chacun de ces paramètres correspond une propriété ActionScript du même nom. Pour plus d’informations sur les valeurs gérées de ces paramètres, voir la classe RadioButton dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

ActionScript vous permet de définir des options supplémentaires pour les occurrences de RadioButton à l’aide des méthodes, propriétés et événements de la classe RadioButton.

Création d’une application avec le composant RadioButton

La procédure suivante explique comment ajouter des composants RadioButton à une application lors de la programmation. Dans cet exemple, les composants RadioButtons servent à présenter une question à laquelle on ne peut répondre que par oui ou non. Les données provenant du composant RadioButton sont affichées dans un composant TextArea.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser deux composants RadioButton du panneau Composants jusqu’à la scène.

  3. Sélectionnez le premier bouton radio. Dans l’Inspecteur des composants, attribuez-lui le nom d’occurrence yesRb et le nom de groupe rbGroup.

  4. Créez le second bouton radio. Dans l’Inspecteur des composants, attribuez-lui le nom d’occurrence noRb et le nom de groupe rbGroup.

  5. Faites glisser un composant TextArea du panneau Composants vers la scène et nommez l’occurrence aTa .

  6. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    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. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

Création d’un composant RadioButton à l’aide d’ActionScript

Cet exemple utilise ActionScript pour créer trois composants RadioButton pour les couleurs rouge, bleu et vert, et trace un cadre gris. La propriété value pour chaque RadioButton définit la valeur hexadécimale de la couleur associée au bouton. Lorsque l’utilisateur clique sur l’un des composants RadioButton, la fonction clickHandler() appelle drawBox() et transmet la couleur provenant de la propriété value du composant RadioButton afin de colorer le cadre.

  1. Créez un document de fichier Flash (ActionScript 3.0).

  2. Faites glisser le composant RadioButton vers le panneau Bibliothèque.

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code ActionScript suivant : 

    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. Sélectionnez Contrôle > Tester l’animation pour exécuter l’application.

    Pour plus d’informations, voir la classe RadioButton dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .