Determining which button was pressed in a Flex ButtonBar component

The following example shows how you can determine which button was pressed in a ButtonBar control in Flex by listening for the itemClick event. You can then use the item, index, or label attribute in the ItemClickEvent object to find out which button was clicked.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/09/determining-which-button-was-pressed-in-a-flex-buttonbar-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.buttonBarClasses.ButtonBarButton;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private function buttonBar_itemClick(evt:ItemClickEvent):void {
                var message:String = ObjectUtil.toString(evt.item);
                var title:String = "[" + evt.index + "] " + evt.label;
                Alert.show("item: " + message, title);
            }
        ]]>
    </mx:Script>

    <mx:Array id="arr">
        <mx:Object label="One" data="15" />
        <mx:Object label="Two" data="12" custom="seven" />
        <mx:Object label="Three" data="9" />
        <mx:Object label="Four" custom="eleven" />
        <mx:Object label="Five" name="Peter" />
    </mx:Array>

    <mx:ButtonBar id="buttonBar"
            dataProvider="{arr}"
            itemClick="buttonBar_itemClick(event);" />

</mx:Application>

View source is enabled in the following example.

As you can see, you can use several different properties in the ItemClickEvent to determine which button was pressed:

• The index property is the zero-based index of the navigation item that was clicked.
• The label property is the label of the navigation item that was clicked.
• The item property is the item in the data provider of the navigation item that was clicked.

The following example shows how you can create the previous example using ActionScript:

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/09/determining-which-button-was-pressed-in-a-flex-buttonbar-component/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="top"
        backgroundColor="white"
        creationComplete="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;
            import mx.controls.ButtonBar;
            import mx.controls.buttonBarClasses.ButtonBarButton;
            import mx.events.ItemClickEvent;
            import mx.utils.ObjectUtil;

            private var buttonBar:ButtonBar;
            private var arr:Array;

            private function init():void {
                arr = [];
                arr.push({label:"One", data:15});
                arr.push({label:"Two", data:12, custom:"seven"});
                arr.push({label:"Three", data:9});
                arr.push({label:"Four", custom:"eleven"});
                arr.push({label:"Five", name:"Peter"});

                buttonBar = new ButtonBar();
                buttonBar.dataProvider = arr;
                buttonBar.addEventListener(ItemClickEvent.ITEM_CLICK, buttonBar_itemClick);
                addChild(buttonBar);
            }

            private function buttonBar_itemClick(evt:ItemClickEvent):void {
                var message:String = ObjectUtil.toString(evt.item);
                var title:String = "[" + evt.index + "] " + evt.label;
                Alert.show("item: " + message, title);
            }
        ]]>
    </mx:Script>

</mx:Application>

Tagged as: index, item, itemClick