Detecting when the label placement changes on a Button control in Flex

In an earlier example, “Positioning an icon within a button using the Button.labelPlacement property”, we saw how you can set a Flex Button control’s label placement using the labelPlacement property.

The following example shows how you can detect when the labelPlacement property has changed using the labelPlacementChanged event.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/06/26/detecting-when-the-label-placement-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;
            import mx.events.ListEvent;

            [Bindable]
            [Embed("assets/fx_appicon-tn.gif")]
            private var flex_icon:Class;

            private function init():void {
                btn.addEventListener("labelPlacementChanged", btn_labelPlacementChanged);
            }

            private function comboBox_change(evt:ListEvent):void {
                var obj:Object = ComboBox(evt.currentTarget).selectedItem;
                btn.labelPlacement = obj.label;
            }

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

    <mx:ApplicationControlBar dock="true">
        <mx:Form styleName="plain">
            <mx:FormItem label="labelPlacement:">
                <mx:ComboBox id="comboBox"
                        change="comboBox_change(event);">
                    <mx:dataProvider>
                        <mx:Array>
                            <mx:Object label="left" />
                            <mx:Object label="right" />
                            <mx:Object label="top" />
                            <mx:Object label="bottom" />
                        </mx:Array>
                    </mx:dataProvider>
                </mx:ComboBox>
            </mx:FormItem>
        </mx:Form>
    </mx:ApplicationControlBar>

    <mx:Button id="btn"
            label="Button"
            icon="{flex_icon}"
            width="200"
            height="100" />

</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/26/detecting-when-the-label-placement-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.containers.Form;
            import mx.containers.FormItem;
            import mx.controls.Alert;
            import mx.controls.Button;
            import mx.controls.ComboBox;
            import mx.events.ListEvent;

            [Bindable]
            [Embed("assets/flex_logo.jpg")]
            private var flex_icon:Class;

            private var btn:Button;
            private var comboBox:ComboBox;

            private function init():void {
                var arr:Array = [];
                arr.push({label:"left"});
                arr.push({label:"right"});
                arr.push({label:"top"});
                arr.push({label:"bottom"});

                comboBox = new ComboBox();
                comboBox.dataProvider = arr;
                comboBox.selectedIndex = 1;
                comboBox.addEventListener(ListEvent.CHANGE, comboBox_change);

                var formItem:FormItem = new FormItem();
                formItem.label = "labelPlacement:";
                formItem.addChild(comboBox);

                var form:Form = new Form();
                form.styleName = "plain";
                form.addChild(formItem);

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

                btn = new Button();
                btn.label = "Button";
                btn.width = 200;
                btn.height = 100;
                btn.setStyle("icon", flex_icon);
                btn.addEventListener("labelPlacementChanged", btn_labelPlacementChanged);
                addChild(btn);
            }

            private function comboBox_change(evt:ListEvent):void {
                var obj:Object = ComboBox(evt.currentTarget).selectedItem;
                btn.labelPlacement = obj.label;
            }

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

</mx:Application>