ToggleButton in Adobe Flex:

Flex provides ToggleButtonBar , which is a set of related buttons in either horizontal or vertical direction . When any button is selected, a single event called itemClick is dispatched.

ToggleButtonBar  control defines a set of button that maintain a particular state, selected or deselected. In a group of buttons only one button could be in selected mode. The selected button stays in selected mode until any other button is selected.

In ToggleButtonBar selectedIndex property defines which button has to be selected at first, by default 0th button is selected. To deselect every button set the vlaue of selectedIndex to -1.

When we click on a button the ToggleButtonBar controls dispatch an itemClick event and pass an  object of type ItemClickEvent to the event listener. Further this listener helps us to access the properties of the event object to determine the index of the selected button.

Flex Togglebutoonbar Example:

<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">

<mx:Script>

import mx.events.ItemClickEvent;

private var itemIndex:int=-1;

public function onClick(event:ItemClickEvent):void{

if(itemIndex==event.index)

txtarea.text="";

else{

if(itemIndex==0)

txtarea.text="JavaFx";

else if(itemIndex==1)

txtarea.text="Flex";

else if(itemIndex==2)

txtarea.text="SilverLight";

else if(itemIndex==3)

txtarea.text="GWT";

<mx:Panel title="Button Control Bar">

<mx:TextArea id="txtarea" width="100%"/>

<mx:ToggleButtonBar horizontalGap="5" toggleOnClick="true" itemClick="onClick(event);">

<mx:Array>

<mx:String>Sun</mx:String>

<mx:String>Adobe</mx:String>

<mx:String>MicroSoft</mx:String>

<mx:String>Google</mx:String>

</mx:Array>

</mx:ToggleButtonBar>

</mx:VBox>

Output:

Related Tags for ToggleButtonBar in Flex: