Home Tutorial Flex Flex-components ToggleButtonBar in Flex

 
 

Share on Google+Share on Google+
ToggleButtonBar in Flex
Posted on: January 23, 2010 at 12:00 AM
Advertisement
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";

}

}

]]>

</mx:Script>

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

<mx:VBox>

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

</mx:Panel>

</mx:Application>

 

Output:

Advertisement

Related Tags for ToggleButtonBar in Flex:


Follow us on Twitter, or add us on Facebook or Google Plus to keep you updated with the recent trends of Java and other open source platforms.

Posted on: January 23, 2010

Recommend the tutorial

Advertisements Advertisements
 

 

 

DMCA.com