Flex - Contrôle ToggleButton

introduction

Le composant ToggleButton définit un bouton bascule. Cliquer sur le bouton fait basculer le bouton entre les états haut et bas. Lorsque vous cliquez sur le bouton alors qu'il est à l'état haut, il bascule vers l'état bas et ainsi de suite.

Déclaration de classe

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

public class ToggleButton 
   extends ToggleButtonBase

Méthodes publiques

Sr.Non Méthode et description
1

ToggleButton()

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.component.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 ToggleButton

Suivons les étapes suivantes pour vérifier l'utilisation du contrôle ToggleButton 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 = "toggleButtonPanel" title = "Using ToggleButton" 
            width = "420" height = "200">		
            <s:layout>
               <s:HorizontalLayout  gap = "10" verticalAlign = "middle" 
                  horizontalAlign = "center" />	
            </s:layout>
            
            <s:ToggleButton id = "clickMeToggleButton" label = "Click Me" 
               click = "button_clickHandler(event)" />
            <s:ToggleButton id = "disabledToggleButton" label = "Disabled Button" 
               enabled = "false" />					
         </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 ]