Apache Adobe Flex TutorialTutoriaux Adobe Flex & AIR en Français

29oct/086

Flex UIComponent – Les Composants de type Boutons (Button, LinkButton, RadioButton, CheckBox)

Il y a quatre type de boutons basiques: Button, LinkButton, RadioButton et CheckBox. Bien que chaque type se comporte de la même manière, chacun a son utilité.

This movie requires Flash Player 11

Les plus similaires dans leur fonctionnement sont Button et LinkButton. En fait, la vraie différence est purement esthétique: les Button ont des bordures/fonds alors que les LinkButton n'en ont pas. Cependant, vous allez typiquement utiliser ces deux types pour la même utilisation.
Avec Button et LinkButton, le comportement par défaut est de répondre à chaque click de la même manière. Cependant, vous pouvez fixer leur propriété "toggle" à true et dans ce cas, le bouton aura deux état: sélectionné et desélectionné. Le click de l'utilisateur servira à basculer entre ces états.

Les RadioButton sont assez différent dans leur usage. Les RadioButtons sont souvent utilisé en groupes. Ils peuvent être sélectionnés ou desélectionnés, et seul un peut être sélectionné par groupe. Ainsi, vous allez d'abord créer une instance de RadioButtonGroup quand vous utilisez les RadioButton. Ensuite, vous assignez l'ID du groupe à la propriété "groupName" de chaque bouton radio appartenant au groupe, comme ceci:

<mx:RadioButtonGroup id="exampleGroup"/>
<mx:RadioButton groupName="exampleGroup" label="A" value="a"/>
<mx:RadioButton groupName="exampleGroup" label="B" value="b"/>

Les CheckBox sont aussi des boutons. Ils sont assez similaires aux boutons mis en "toggle". Quand un utilisateur clique une CheckBox, il bascule l'état selected du composant.

Articles similaires

Commentaires (6) Trackbacks (0)
  1. Bonjour, déjà merci pour ce site, il est vraiment très bien fait.
    Par contre j'ai un petit problème avec les boutons.
    Voila ma question :

    Quand on crée un bouton, avec un label même dynamiquement si l'on ne précise pas les propriétés height et width on a un bouton avec des dimensions pouvant contenir le label.

    Par contre au moment où on essaye de récupérer par exemple le width, le getter nous retourne 0, j'ai essayé de lire la classe button du framework mais rien trouvé autre qu'une fonction measure que je n'arrive pas à réutiliser.

    Quelqu'un saurez quel est la procédure à faire pour récupérer les dimensions du bouton.

    Merci beaucoup.

  2. Merci :)
    La width est toujours récupérable, il faut cependant attendre que le composant soit bien initialisé. Ainsi, si vous faites <mx:Button id="btn" label="{btn.width}" creationComplete="trace ('width: ' + btn.width);"/>, vous aurez la bonne valeur de width affichée dans la console.

    Fabien

  3. il n'y a donc pas possibilité d'obliger le calcul avant de l'ajouter, si on veut connaitre la taille d'un bouton sans l'afficher on doit donc l'ajouter et le supprimer dès qu'il est initialisé? c'est ce que j'ai fais en tout cas et ça marche mais bon... pas très propre.

    Merci beaucoup Fabien :)

  4. Sam,

    je suis presque certain que l'on peut faire plus propre ; je crois avoir déjà eu ce problème et l'avoir résolu.

    Le principe
    on connait la police utilisée pour le label
    avant de creer le bouton,
    on crée une chaine, contenant le label
    on récupère sa largeur
    on tient aussi compte des paddings left et right
    on peut donc prévoir la largeur du bouton

    d'autre part, pour ces préoccupations de tailles, il est souvent utile de bien distinguer width, percentWidth et explicitWidth

    --- j'ai retrouvé le code (il y a deux paramètres légendes parce que ce sont des boutons différents, mais que j'affiche toujours par paire)

    MXML:
    1. private function configurerLesBoutonsDeReponse( paramLeg1: String, paramLeg2 : String) : void
    2. ()
    3. {
    4. var v_width1    : TextLineMetrics;
    5. var v_width2    : TextLineMetrics;
    6. var v_width : int;
    7. var muette  : String;
    8. //
    9. v_width1 = measureText(paramLeg1);
    10. v_width2 = measureText(paramLeg2);
    11. v_width  = 60 + Math.max(v_width1.width, v_width2.width );
    12.  
    13. // on voit bien que l'on utilise des 'trucs' TextLineMetrics qui ne sont pas des int
    14. // le Math.max est là pour harmoniser les largeurs des deux boutons
    15. // les 60 sont là parce que dans cet exemple je n'ai pas besoin d'être précis. Dans le cas
    16. // contraire, il aurait fallu prendre en compte les paddings
    17. //
    18. // Attn : pour que ce soit probant, il faut avoir fixé la police (nature, size et attributs (bold en particulier) AVANT de faire la mesure

    voilà, c'est tout pour ce soir
    j'espère que depuis le 3 sept le prob est toujours d'actualité

  5. Bonjour

    Merci pour tout ces précieuses informations
    Votre site est bien pratique, claire et bien fait.
    Je suis nouveau dans la compréhension de Flex!
    J’utilise un formulaire pour entrer directement dans un salon de tchat
    Voici le code:

    MXML:
    1. <form action="http://www.mon site/modules.php?name=ChatWebcam" method="post">
    2.     <strong>Votre Pseudo :</strong>
    3.     <input name="user" type="text" value="mon pseudo" />
    4.     <br />
    5.     <strong>Mot de Passe :</strong>
    6.     <input name="pass" type="password" value="mon mot de passe" />
    7.     <br />
    8.     <input type="submit" value="Acc&egrave;der au Tchat" id="submit" class="bouton" name="submit"
    9. />
    10.     <input name="room" type="radio" value="9204" />
    11.     </form>

    A présent voici ma question
    Je réalise un module simple en accordéon j’avance petit à petit à mon rythme
    Mais comment faire pour que mon formulaire soit fonctionnel en mxml?

    MXML:
    1. <?xml version="1.0" encoding="utf-8"?>
    2. <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
    3.     backgroundColor="#FFFFFF"
    4.     backgroundAlpha="0"
    5.     horizontalAlign="left"
    6.     verticalGap="15" horizontalGap="15" borderColor="#0E3110">
    7.    
    8.         <mx:Glow id="glowImage" duration="1000" alphaFrom="1.0" alphaTo="0.3" blurXFrom="0.0" blurXTo="50.0" blurYFrom="0.0" blurYTo="50.0" color="0x184e1a"/> 
    9.     <mx:Glow id="unglowImage" duration="1000" alphaFrom="0.3" alphaTo="1.0" blurXFrom="50.0" blurXTo="0.0" blurYFrom="50.0" blurYTo="0.0" color="0x0e3110"/>   
    10.     <mx:Panel title="Visiteurs" borderColor="#3A9607">
    11.        
    12.         <mx:Accordion id="ac"
    13.             width="150"
    14.             selectedIndex="0"
    15.             historyManagementEnabled="false"
    16.             borderColor="#68994B"
    17.             backgroundColor="#DCF5D6"
    18.             themeColor="#70A650" color="#000000"
    19.             cornerRadius="3" borderStyle="solid"
    20.             borderThickness="1" alpha="1.0" height="255">       
    21.             <mx:VBox label="Webmaster"
    22.                 horizontalAlign="center"
    23.                 verticalAlign="middle"
    24.                 width="300" height="170">
    25.                 <mx:Image id="flex" source="../libs/vatmx.png" mouseDownEffect="{glowImage}" mouseUpEffect="{unglowImage}"/>
    26.                        <mx:Button id="Button1" label="Contactez-moi" width="130" upSkin="@Embed('../libs/assets/btn_up.png')"
    27.                            overSkin="@Embed('../libs/assets/btn_over.png')" downSkin="@Embed('../libs/assets/btn_down.png')"
    28.                            focusSkin="@Embed('../libs/assets/btn_focus.png')" disabledSkin="@Embed('../libs/assets/btn_disabled.png')"
    29.                            color="0x323232" textRollOverColor="0xffffff" textSelectedColor="0xffffff" paddingLeft="20"
    30.                            click="navigateToURL(new URLRequest('http://www.videoaudiotechnologie.fr/Feedback.html/'));"   height="28"/>
    31.             </mx:VBox>
    32.             <mx:VBox label="PragmaMx"
    33.                 height="165">   
    34.         <mx:Button label="PragmaMx France"
    35.                     click="navigateToURL(new URLRequest('http://pragmamx.fr'));" 
    36.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    37.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    38.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    39.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    40.                     textRollOverColor="#45A60A" color="#000000" height="18"/>           
    41.         <mx:Button label="Forum"
    42.                     click="navigateToURL(new URLRequest('http://www.pragmamx.fr/Forum.html'));" 
    43.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    44.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    45.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    46.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    47.                     textRollOverColor="#45A60A" color="#000000" height="18"/>
    48.         <mx:Button label="Messages privés"
    49.                     click="navigateToURL(new URLRequest('http://www.pragmamx.fr/Forum-action-pm.html'));" 
    50.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    51.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    52.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    53.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    54.                     textRollOverColor="#45A60A" color="#000000" height="18"/>   
    55.         <mx:Button label="Articles"
    56.                     click="navigateToURL(new URLRequest('http://www.pragmamx.fr/Stories_Archive.html'));" 
    57.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    58.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    59.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    60.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    61.                     textRollOverColor="#45A60A" color="#000000" height="18"/>                                       
    62.         <mx:Button label="Réglages avancés"
    63.                     click="navigateToURL(new URLRequest('http://www.pragmamx.fr/Content-pid-35.html'));" 
    64.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    65.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    66.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    67.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    68.                     textRollOverColor="#45A60A" color="#000000" height="18"/>   
    69.         <mx:Button label="le site map"
    70.                     click="navigateToURL(new URLRequest('http://www.pragmamx.fr/Content-pid-38.html'));" 
    71.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    72.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    73.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    74.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    75.                     textRollOverColor="#45A60A" color="#000000" height="18"/>   
    76.         <mx:Button label="CHMOD"
    77.                     click="navigateToURL(new URLRequest('http://www.pragmamx.fr/media/images/documentation/installation_fr.html'));" 
    78.                     borderColor="#ffffff" fillAlphas="[0.0, 0.0, 0.0, 0.0]"
    79.                     fillColors="[#FFFFFF, #FFFFFF, #FFFFFF, #FFFFFF]"
    80.                     cornerRadius="0" themeColor="#FFFFFF" alpha="0.0"
    81.                     rollOverEffect="#0e3603" width="100%" textAlign="left"
    82.                     textRollOverColor="#45A60A" color="#000000" height="18"/>   
    83.             </mx:VBox>
    84.         <mx:VBox label="WebcamChat" width="100%" height="100%">
    85.                 <mx:FormItem label="Votre" width="148">
    86.             <mx:TextInput text="pseudo" width="100"/>
    87.         </mx:FormItem>
    88.         <mx:FormItem label="Votre" width="148">
    89.             <mx:TextInput text="mot de passe" width="100"/>
    90.         </mx:FormItem>
    91.         <mx:FormItem direction="horizontal" width="148" paddingLeft="-13">       
    92.             <mx:Button id="validButton" label="Valider" click="navigateToURL(new URLRequest('http://www.mon site.fr/ChatWebcam.html'));" width="65"/>
    93.             <mx:RadioButton groupName="room" label="Accès" value="9204" width="75"/>
    94.         </mx:FormItem>
    95.         </mx:VBox>
    96.             </mx:Accordion>
    97.        
    98.     </mx:Panel>
    99.  
    100. </mx:Application>

    Bien amicalement
    VatMx

  6. Formulaire fonctionnel en MXML ? comment ça ?
    Je pense que tu auras la réponse à ta question en la posant sur un forum flex. (pas très pratique ici)

    Merci

    Fabien


Leave a comment

(required)

Aucun trackbacks pour l'instant