Flex - ToggleButtonBar Control



The ToggleButtonBar control provides a horizontal or vertical group of buttons that maintain their selected or deselected state.

Class declaration

Following is the declaration for mx.controls.ToggleButtonBar class:

public class ToggleButtonBar
   extends ButtonBar

Public properties

S.N.Property & Description
1selectedIndex : int
[override] Index of the selected button.
2toggleOnClick : Boolean
Specifies whether the currently selected button can be deselected by the user.

Public methods

S.N.Method & Description

Methods inherited

This class inherits methods from the following classes:

  • mx.controls.ButtonBar

  • mx.controls.NavBar

  • mx.containers.Box

  • mx.core.Container

  • mx.core.UIComponent

  • mx.core.FlexSprite

  • flash.display.Sprite

  • flash.display.DisplayObjectContainer

  • flash.display.InteractiveObject

  • flash.display.DisplayObject

  • flash.events.EventDispatcher

  • Object

Flex ToggleButtonBar Control Example

Let us follow the following steps to check usage of ToggleButtonBar 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.events.ItemClickEvent;
         private function sectionClickHandler(event:ItemClickEvent):void {
            sectionContents.text = "Contents for " + event.label;
      <fx:Array id="sectionList">
         <fx:String>Section 1</fx:String>
         <fx:String>Section 2</fx:String>
         <fx:String>Section 3</fx:String>
         <fx:String>Section 4</fx:String>
         <fx:String>Section 5</fx:String>
   <s:BorderContainer width="630" height="480" id="mainContainer" 
      <s:VGroup width="100%" height="100%" gap="50" 
         horizontalAlign="center" verticalAlign="middle">
         <s:Label id="lblHeader" text="Complex Controls Demonstration" 
            fontSize="40" color="0x777777" styleName="heading"/>
            <s:Panel id="toggleButtonBarPanel" title="Using ToggleButtonBar"
               width="500" height="300" >
                  <s:VerticalLayout  gap="10" verticalAlign="middle"
                     horizontalAlign="center" paddingTop="10"/>	
               <mx:ToggleButtonBar itemClick="sectionClickHandler(event);" 
                  dataProvider="{sectionList}" />
               <s:BorderContainer width="90%" height="70%" 
                  <s:VGroup verticalAlign="middle" 
                     horizontalAlign="center" width="100%" height="100%">
                     <s:Label id="sectionContents"
                        text="Contents for Section 1"/>	

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 ToggleButtonBar Control