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>

0 thoughts on “Determining which button was pressed in a Flex ButtonBar component

  1. FileReference – A petition for Astro WE NEED YOUR VOTE !

    Hi All! If We Want New Features in Flahs Player we will all need to VOTE!

    I have submited it as a Feature Request. Follow the link and create a accont and vote for it!
    http://bugs.adobe.com/jira/browse/SDK-14245

    By the way we all need to get familiar with this “Adobe Bug System” :)

    Please forward this message.
    Cheers :)