Utilisation du composant CheckBox

Un composant CheckBox est une case qui peut être activée ou désactivée. Lorsqu’elle est activée, une coche apparaît à l’intérieur. Vous pouvez ajouter une étiquette de texte à un composant CheckBox et la placer à gauche, à droite, au-dessus ou en dessous de celui-ci.

Vous pouvez utiliser des composants CheckBox là où vous voulez réunir un jeu de valeurs true ou false qui ne s’excluent pas réciproquement. Par exemple, une application qui recueille des informations sur le type de voiture que vous voulez acheter pourrait utiliser des composants CheckBox pour vous permettre de sélectionner des caractéristiques du véhicule.

Interaction de l’utilisateur avec le composant CheckBox

Vous pouvez activer ou désactiver un composant CheckBox dans une application. Lorsqu’un composant CheckBox est activé et qu’un utilisateur clique sur son entrée ou sur son étiquette, le composant CheckBox reçoit le focus d’entrée et son état enfoncé apparaît à l’écran. Si un utilisateur place le pointeur à l’extérieur du cadre de sélection d’un composant CheckBox ou de son étiquette en appuyant sur le bouton de la souris, l’aspect du composant revient à son état d’origine et conserve le focus d’entrée. L’état d’un composant CheckBox ne change pas tant que le bouton de la souris n’est pas relâché sur le composant. Par ailleurs, le composant CheckBox possède deux états désactivés, Sélectionné et Désélectionné, qui emploient respectivement selectedDisabledSkin et disabledSkin et ne permettent aucune interaction avec la souris ou le clavier.

Lorsqu’un composant CheckBox est désactivé, il affiche un aspect désactivé, quelle que soit l’interaction de l’utilisateur. Lorsqu’il est désactivé, le composant CheckBox ne reçoit aucune information provenant du clavier ou de la souris.

Une occurrence de CheckBox reçoit le focus si un utilisateur clique sur son entrée ou utilise la touche de tabulation pour l’atteindre. Lorsqu’une occurrence du composant CheckBox a le focus, les touches suivantes permettent de la contrôler :

Touche

Description

Maj+Tab

Déplace le focus vers l’élément précédent.

Espace

Sélectionne ou désélectionne le composant et déclenche l’événement change .

Tab

Déplace le focus vers l’élément suivant.

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

L’aperçu en direct de chaque occurrence de CheckBox reflète les modifications apportées aux paramètres dans l’Inspecteur des propriétés ou l’Inspecteur des composants pendant la programmation.

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

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

Quel que soit le nombre d’occurrences du composant, l’activation de son accessibilité ne se fait qu’une fois.

Paramètres du composant CheckBox

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 CheckBox : label , labelPlacement et selected . 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 CheckBox dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

Création d’une application à l’aide du composant CheckBox

La procédure suivante explique comment ajouter un composant CheckBox à une application pendant la programmation, en prenant comme exemple un extrait de formulaire de demande de crédit. Le formulaire demande si le demandeur est propriétaire et prévoit une case à cocher pour que l’utilisateur puisse répondre « oui ». S’il le fait, le formulaire affiche deux boutons radio permettant à l’utilisateur d’indiquer la valeur relative de son logement.

Création d’une application à l’aide du composant CheckBox

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

  2. Faites glisser un composant CheckBox du panneau Composants jusqu’à la scène.

  3. Dans l’Inspecteur des propriétés, procédez comme suit :

    • Entrez le nom d’occurrence homeCh .

    • Tapez 140 pour la valeur W (largeur).

    • Entrez « Etes-vous propriétaire ? » pour le paramètre d’étiquette.

  4. Faites glisser deux composants RadioButton du panneau Composants vers la scène et placez-les à droite sous le composant CheckBox. Entrez les valeurs suivantes les concernant dans l’Inspecteur des propriétés :

    • Nommez les occurrences underRb et overRb .

    • Tapez 120 pour le paramètre W (largeur) des deux composants RadioButton.

    • Entrez Inférieur à 500 000 € ? pour le paramètre d’étiquette de underRb .

    • Entrez Supérieur à 500 000 € ? pour le paramètre d’étiquette de overRb .

    • Entrez valueGrp pour le paramètre groupName des deux composants RadioButton.

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

    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;     
}

    Ce code crée un gestionnaire pour l’événement CLICK qui active les boutons radio underRb et overRb si le composant CheckBox homeCh est sélectionné, et les désactive si homeCh n’est pas sélectionné. Pour plus d’informations, voir la classe MouseEvent dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

  6. Choisissez Contrôle > Tester l’animation.

L’exemple suivant copie l’application précédente, mais crée les composants CheckBox et RadioButton à l’aide de code ActionScript.

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

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

  2. Faites glisser les composants CheckBox et RadioButton du panneau Composants vers le panneau Bibliothèque du document en cours. Si le panneau Bibliothèque n’est pas déjà ouvert, appuyez sur Ctrl+L ou choisissez Fenêtre > Bibliothèque pour l’ouvrir.

    Les composants sont ainsi disponibles pour votre application, mais ne sont pas placés sur la scène.

  3. Ouvrez le panneau Actions, sélectionnez l’image 1 dans le scénario principal et entrez le code suivant pour créer et positionner les occurrences de composant : 

    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?";

    Ce code utilise les constructeurs CheckBox() et RadioButton() pour créer les composants et la méthode addChild() pour les placer sur la scène. Il emploie la méthode move() pour positionner les composants sur la scène.

  4. Ajoutez maintenant le code ActionScript suivant pour créer un écouteur d’événements et une fonction de gestionnaire d’événements : 

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

    Ce code crée un gestionnaire pour l’événement CLICK qui active les boutons radio underRb et overRb si le composant CheckBox homeCh est sélectionné, et les désactive si homeCh n’est pas sélectionné. Pour plus d’informations, voir la classe MouseEvent dans le Guide de référence d’ActionScript 3.0 pour Flash Professional .

  5. Choisissez Contrôle > Tester l’animation.