Flex - Contrôle RadioButton

introduction

Le contrôle RadioButton permet à l'utilisateur de faire un seul choix dans un ensemble de choix mutuellement exclusifs.

Déclaration de classe

Voici la déclaration pour spark.components.RadioButton classe -

public class RadioButton 
   extends ToggleButtonBase
      implements IFocusManagerGroup

Propriétés publiques

Sr.Non	Propriétés et description
1	enabled : Boolean [override] Le composant RadioButton est activé si le RadioButtonGroup est activé et le RadioButton lui-même est activé.
2	group : RadioButtonGroup Le composant RadioButtonGroup auquel appartient ce RadioButton.
3	groupName : String Spécifie le nom du groupe auquel appartient ce composant RadioButton ou spécifie la valeur de la propriété id d'un composant RadioButtonGroup si ce RadioButton fait partie d'un groupe défini par un composant RadioButtonGroup.
4	value : Object Valeur facultative définie par l'utilisateur associée à un composant RadioButton.

Méthodes publiques

Sr.Non	Méthode et description
1	RadioButton() Constructeur.

Méthodes héritées

Cette classe hérite des méthodes des classes suivantes -

spark.components.supportClasses.ToggleButtonBase
spark.components.supportClasses.ButtonBase
spark.components.supportClasses.SkinnableComponent
mx.core.UIComponent
mx.core.FlexSprite
flash.display.Sprite
flash.display.DisplayObjectContainer
flash.display.InteractiveObject
flash.display.DisplayObject
flash.events.EventDispatcher
Object

Exemple de contrôle Flex RadioButton

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle RadioButton dans une application Flex en créant une application de test -

Étape	La description
1	Créez un projet avec un nom HelloWorld sous un package com.tutorialspoint.client comme expliqué dans le chapitre Flex - Créer une application .
2	Modifiez HelloWorld.mxml comme expliqué ci-dessous. Gardez le reste des fichiers inchangé.
3	Compilez et exécutez l'application pour vous assurer que la logique métier fonctionne conformément aux exigences.

Voici le contenu du fichier mxml modifié src/com.tutorialspoint/HelloWorld.mxml.

<?xml version = "1.0" encoding = "utf-8"?>
<s:Application xmlns:fx = "http://ns.adobe.com/mxml/2009"
   xmlns:s = "library://ns.adobe.com/flex/spark"
   xmlns:mx = "library://ns.adobe.com/flex/mx"
   width = "100%" height = "100%" minWidth = "500" minHeight = "500">
   
   <fx:Style source = "/com/tutorialspoint/client/Style.css" />
   <fx:Script>
      <![CDATA[
         [Bindable]
         private var selectedOption:String = "";
         protected function option_clickHandler(event:MouseEvent):void {
            var radioButton:RadioButton = event.target as RadioButton;
            switch (radioButton.id) {
               case option1.id:
                  selectedOption = option1.label;
                  break;
               case option2.id:
                  selectedOption = option2.label;
                  break;
               case option3.id:
                  selectedOption = option3.label;
                  break;
               case option4.id:
                  selectedOption = option4.label;
                  break;
            }			
         }
      ]]>
   </fx:Script>
   
   <s:BorderContainer width = "550" height = "400" id = "mainContainer" 
      styleName = "container">
      <s:VGroup width = "100%" height = "100%" gap = "50" 
         horizontalAlign = "center" verticalAlign = "middle">
         <s:Label id = "lblHeader" text = "Form Controls Demonstration" 
            fontSize = "40" color = "0x777777" styleName = "heading" />
         
         <s:Panel id = "radioButtonPanel" title = "Using RadioButton" 
            width = "420" height = "200" >
            <s:layout>
               <s:VerticalLayout  gap = "10" verticalAlign = "middle"
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:RadioButton groupName = "options" id = "option1" 
               label = "item #1" width="150" 
               click = "option_clickHandler(event)" />
            <s:RadioButton groupName = "options" id = "option2" 
               label = "item #2" width="150" 
               click = "option_clickHandler(event)" />
            <s:RadioButton groupName = "options" id = "option3" 
               label = "item #3" width="150" 
               click = "option_clickHandler(event)" />
            <s:RadioButton groupName = "options" id = "option4" 
               label = "item #4" width = "150" 
               click = "option_clickHandler(event)" />
            <s:Label id = "selectedOptionLabel" fontWeight = "bold" 
               text = "Item selected: {selectedOption}" width = "150" />
         </s:Panel>
      </s:VGroup>	 
   </s:BorderContainer>	
</s:Application>

Une fois que vous êtes prêt avec tous les changements effectués, laissez-nous compiler et exécuter l'application en mode normal comme nous l'avons fait dans le chapitre Flex - Créer une application . Si tout va bien avec votre application, elle produira le résultat suivant: [ Essayez-le en ligne ]

↰ Previous page