ToggleButtonBar in Flex


 

ToggleButtonBar in Flex

Tutorial ToggleButtonBar in Flex will illustrate various features of ToggleButtonBar, 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. Example will helps you to learn it more precisely.

Tutorial ToggleButtonBar in Flex will illustrate various features of ToggleButtonBar, 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. Example will helps you to learn it more precisely.

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:

<?xml version="1.0" encoding="utf-8"?>

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

<mx:Script>

<![CDATA[

import mx.events.ItemClickEvent;

private var itemIndex:int=-1;

public function onClick(event:ItemClickEvent):void{

if(itemIndex==event.index)

{

txtarea.text="";

itemIndex=-1;

}

else{

itemIndex=event.index;

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";

}

}

0

]]>

</mx:Script>

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

1

<mx:VBox>

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

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

2

<mx:Array>

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

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

3

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

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

</mx:Array>

4

</mx:ToggleButtonBar>

</mx:VBox>

</mx:Panel>

5

</mx:Application>

 

Output:

6

Ads