Detecting when the label changes on a Button control in Flex

The following example shows how you can detect when a Flex Button control’s label changes using the labelChanged event.

Full code after the jump.

The labelChanged event isn’t publicly documented and it isn’t likely that you’ll ever need to use it directly. Also note that the Button class has a private Boolean labelChanged property, so you need to create the labelChanged event handler in ActionScript instead of MXML.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function init():void {
                button.addEventListener("labelChanged", button_labelChanged);
            }

            private function button_labelChanged(evt:Event):void {
                Alert.show(evt.toString());
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:Button label="One" click="button.label = 'One';" />
        <mx:Button label="Two" click="button.label = 'Two';" />
    </mx:ApplicationControlBar>

    <mx:Button id="button" label="Button" />

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/25/detecting-when-the-label-changes-on-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.controls.Alert;
            import mx.controls.Button;

            private var button:Button;

            private function init():void {
                var btnOne:Button = new Button();
                btnOne.label = "One";
                btnOne.addEventListener(MouseEvent.CLICK, setBtnLabel);

                var btnTwo:Button = new Button();
                btnTwo.label = "Two";
                btnTwo.addEventListener(MouseEvent.CLICK, setBtnLabel);

                var appControlBar:ApplicationControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(btnOne);
                appControlBar.addChild(btnTwo);
                Application.application.addChildAt(appControlBar, 0);

                button = new Button();
                button.label = "Button";
                button.addEventListener("labelChanged", button_labelChanged);
                addChild(button);
            }

            private function setBtnLabel(evt:MouseEvent):void {
                button.label = Button(evt.currentTarget).label;
            }

            private function button_labelChanged(evt:Event):void {
                Alert.show(evt.toString());
            }
        ]]>
    </mx:Script>

</mx:Application>