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.
<?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:
<?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>
how to link maps and list?