Home Tutorial Flex Flex-components ButtonBar in Flex

 
 

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

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

</mx:Array>

</mx:ButtonBar>

</mx:VBox>

</mx:Panel>

</mx:Application>

Output:

Advertisement

Related Tags for ButtonBar 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