Forums Développement Multimédia

Les formations Mediabox
Les formations Mediabox

Le contrôle RadioButton

Compatible Flex 3. Cliquer pour en savoir plus sur les compatibilités.Compatible ActionScript 3. Cliquer pour en savoir plus sur les compatibilités.Par tannoy (Antony Chauviré), le 15 mars 2010

Cet article est une traduction de l'aide Adobe Flex.

Adobe a donné son accord concernant la traduction de la documentation.

Introduction

Le contrôle RadioButton est un choix unique parmi un ensemble de choix exclusifs. Un groupe de RadioButton est composé de deux ou plusieurs contrôles RadioButton avec le même nom de groupe. Seulement un membre du groupe peut être sélectionné à la fois. La sélection d'un membre non sélectionné du groupe annule la sélection du contrôle RadioButton déjà sélectionné du groupe.

A propos du contrôle RadioButton

L'exemple suivant montre un groupe de RadioButton avec 3 contrôles RadioButton:

Le code utilisé pour cet exemple est disponible ci-dessous.

Création d'un contrôle RadioButton

Vous définissez un contrôle RadioButtin en MXML en utilisant la balise <mx:RadioButton>, comme le montre l'exemple ci-dessous. Spécifiez une valeur à la propriété id si vous souhaitez utiliser votre contrôle ailleurs dans une balise MXML ou dans un bloc ActionScript.

<?xml version="1.0"?>
<!-- controls\button\RBSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress"
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard"
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa"
        label="Visa" 
        width="150"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Pour chaque contrôle RadioButton du groupe, vous pouvez définir de façon optionnelle un écouteur d'événement pour l'événement de bouton click. Quand un utilisateur sélectionne un contrôle RadioButton, Flex appelle l'écouteur d'événement associé au bouton pour l'événement click, comme le montre le code suivant:

<?xml version="1.0"?>
<!-- controls\button\RBEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
import flash.events.Event;
 
            private function handleAmEx(event:Event):void {
                // Handle event.
                myTA.text="Got Amex";
            }
 
            private function handleMC(event:Event):void {
                // Handle event.
                myTA.text="Got MasterCard";
            }
 
            private function handleVisa(event:Event):void {
                // Handle event.
                myTA.text="Got Visa";
            }
]]>
    </mx:Script>
 
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress"
        label="American Express" 
        width="150" 
        click="handleAmEx(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard"
        label="MasterCard" 
        width="150" 
        click="handleMC(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa"
        label="Visa" 
        width="150" 
        click="handleVisa(event);"/>
 
    <mx:TextArea id="myTA"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Interaction utilisateur du contrôle RadioButton

Si un contrôle RadioButton est actif, quand l'utilisateur déplace le pointeur de souris au dessus d'un contrôle RadioButton non sélectionné , le bouton affiche son apparence “dessus”. Quand un utilisateur clique sur un contrôle RadioButton non sélectionné, le focus de saisie se déplace sur le contrôle et le bouton affiche son apparence “appuyé”. Quand le bouton de souris est relâché, le bouton affiche son apparence “sélectionné”. Le précédent contrôle RadioButton sélectionné du groupe retourne à son apparence “normal”.

Si l'utilisateur déplace le pointeur de souris en dehors du contrôle RadioButton tout en maintenant appuyé le bouton, le contrôle retourne à son état normal et conserve le focus.

Si un contrôle RadioButton est désactivé, le contrôle RadioButton et le groupe de RadioButton affichent l'apparence “désactivée”, indépendamment de l'interaction utilisateur. Dans l'état désactivé, toutes las action de souris ou de clavier sont ignorées.

Les contrôles RadioButton et RadioButtonGroup ont les fonctionnalités de navigation clavier suivantes:

Touche Description
Contrôle et les flèches du clavier Déplace le focus sur les boutons sont pour autant les sélectionner
Barre d'espace Sélectionne un bouton

Création d'un groupe en utilisant la balise <mx:RadioButtonGroup>

L'exemple précédent crée un groupe de RadioButton en utilisant la propriété groupName de chaque contrôle RadioButton. Vous pouvez aussi créer un groupe de RadioButton en utilisant le contrôle RadioButtonGroup, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\button\RBGroupSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
  import mx.events.ItemClickEvent;
 
            private function handleCard(event:ItemClickEvent):void {
                //Handle event.
            }
]]>
    </mx:Script>
 
    <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress" 
        value="AmEx" 
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard" 
        value="MC" 
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa" 
        value="Visa" 
        label="Visa" 
        width="150"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Dans cet exemple, vous utilisez la propriété id de la balise <mx:RadioButtonGroup> pour définir le nom du groupe et l'écouteur d'événement unique pour l'événement itemClick de tous les boutons du groupe. La propriété id est requise quand vous utilisez la balise <mx:RadioButtonGroup>. L'écouteur de l'événement itemClick du groupe détermine quel bouton est sélectionné, comme le montre l'exemple suivant:

<?xml version="1.0"?>
<!-- controls\button\RBGroupEvent.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">
 
    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.events.ItemClickEvent;
 
            private function handleCard(event:ItemClickEvent):void {
                if (event.currentTarget.selectedValue == "AmEx") {
                    Alert.show("You selected American Express."); 
                } else if (event.currentTarget.selectedValue == "MC") {
                        Alert.show("You selected MasterCard.");
                } else {
                    Alert.show("You selected Visa.");
                } 
            }
 ]]>
    </mx:Script>
 
    <mx:RadioButtonGroup id="cardtype" itemClick="handleCard(event);"/>
    <mx:RadioButton groupName="cardtype" 
        id="americanExpress" 
        value="AmEx" 
        label="American Express" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="masterCard" 
        value="MC" 
        label="MasterCard" 
        width="150"/>
    <mx:RadioButton groupName="cardtype" 
        id="visa" 
        value="Visa" 
        label="Visa" 
        width="150"/>
</mx:Application>

Le fichier SWF de l'exemple ci-dessus est affiché ci-dessous :

L"extension Adobe Flash Plugin est nécessaire pour afficher ce contenu.

Ce texte est affiché dans la fenêtre d'alerte lorsque vous sélectionnez le bouton American Express:

Dans l'écouteur d'événement de l'événement itemClick, la propriété selectedValue du contrôle RadioButtonGroup est définie sur la valeur de la propriété value du contrôle RadioButton sélectionné. Si vous n'avez pas défini la propriété value, Flex définit la propriété selectedValue sur la valeur de la propriété label.

Vous pouvez toujours définir un écouteur d'événement click pour chacun des boutons, même si vous en définissez un pour le groupe.