Flex - ToggleButton Control



The ToggleButton component defines a toggle button. Clicking the button toggles the button between the up and an down states. When you click the button while it is in the up state, it toggles to the down state and so on.

Class declaration

Following is the declaration for spark.components.ToggleButton class:

public class ToggleButton 
   extends ToggleButtonBase

Public methods

S.N.Method & Description



Methods inherited

This class inherits methods from the following classes:

  • 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

Flex ToggleButton Control Example

Let us follow the following steps to check usage of ToggleButton control in a Flex application by creating a test application:

1Create a project with a name HelloWorld under a package com.tutorialspoint.client as explained in the Flex - Create Application chapter.
2Modify HelloWorld.mxml as explained below. Keep rest of the files unchanged.
3Compile and run the application to make sure business logic is working as per the requirements.

Following is the content of the modified mxml file src/com.tutorialspoint/HelloWorld.mxml.

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
   width="100%" height="100%" minWidth="500" minHeight="500"
   <fx:Style source="/com/tutorialspoint/client/Style.css"/>
         import mx.controls.Alert;
         import mx.events.FlexEvent;

         protected function button_clickHandler(event:MouseEvent):void
            Alert.show("Hello World!");				
   <s:BorderContainer width="550" height="400" id="mainContainer" 
      <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:HorizontalLayout  gap="10" verticalAlign="middle" 
            <s:ToggleButton id="clickMeToggleButton" label="Click Me" 
            click="button_clickHandler(event)" />
            <s:ToggleButton id="disabledToggleButton" label="Disabled Button" 
            enabled="false" />					

Once you are ready with all the changes done, let us compile and run the application in normal mode as we did in Flex - Create Application chapter. If everything is fine with your application, this will produce following result: [ Try it online ]

Flex Toggle Button Control