ButtonBar in Flex


 

ButtonBar in Flex

Tutorial ButtonBar in Flex will illustrate various features of ButtonBar, Flex provides ButtonBar controls which is a horizontal or vertical set of related buttons. When any button is selected, a single event called itemClick is dispatched. Example will helps you to learn it more precisely.

Tutorial ButtonBar in Flex will illustrate various features of ButtonBar, Flex provides ButtonBar controls which is a horizontal or vertical set of related buttons. When any button is selected, a single event called itemClick is dispatched. Example will helps you to learn it more precisely.

ButtonBar:

Flex provides ButtonBar controls which is a horizontal or vertical set of related buttons. When any button is selected, a single event called itemClick is dispatched.

The ButtonBar control defines a set of buttons but unlike the ToggleButtonBar, no button holds any particular state. Whenever we click any button it changes it's state to selected mode and after releasing the button, it returns to deselected mode.

We should use dataProvider to set the labels of buttons, use addItem() and removeItem() to manipulate the dataProvider property.

When we click on a button the ButtonBar 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.

Example:

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

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

<mx:Script>

<![CDATA[

import mx.events.ItemClickEvent;

public function onClick(event:ItemClickEvent):void{

if(event.index==0)

txtarea.text="JavaFx";

else if(event.index==1)

txtarea.text="Flex";

else if(event.index==2)

txtarea.text="SilverLight";

else if(event.index==3)

txtarea.text="GWT";

}

]]>

</mx:Script>

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

<mx:VBox>

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

<mx:ButtonBar itemClick="onClick(event);">

<mx:Array>

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

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

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

0

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

</mx:Array>

</mx:ButtonBar>

1

</mx:VBox>

</mx:Panel>

</mx:Application>

2

Output:

Ads