Flex - Contrôle des boutons

introduction

Le composant Button est un bouton rectangulaire couramment utilisé. Button utilise généralement des écouteurs d'événements pour effectuer une action lorsque l'utilisateur sélectionne le contrôle. Lorsqu'un utilisateur clique sur un contrôle Button, il distribue un événement click et un événement buttonDown.

Déclaration de classe

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

public class Button 
   extends ButtonBase
      implements IButton

Propriétés publiques

Sr.Non	Propriété et description
1	emphasized : Boolean Reflète le bouton par défaut tel que demandé par le gestionnaire de focus.

Méthodes publiques

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

Méthodes héritées

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

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 du bouton Flex

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle Button 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[
         import mx.controls.Alert;
         import mx.events.FlexEvent;

         protected function button_clickHandler(event:MouseEvent):void {
            Alert.show("Hello World!");				
         }
      ]]>
   </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 = "buttonPanel" title = "Using Button" width = "400" 
            height = "200" includeInLayout = "true" visible = "true">
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:Button id = "clickMeButton" label = "Click Me" 
               click = "button_clickHandler(event)" />
            <s:Button id = "disabledButton" label = "Disabled Button" 
               enabled = "false" />
            <s:Button id = "emphasizedButton" label = "Emphasized Button" 
               emphasized = "true" click = "button_clickHandler(event)" />
         </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