Flex Examples
The following example shows how you can set the button label placement on a Flex RadioButton control by setting the labelPlacement property in MXML or ActionScript.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/setting-the-button-label-placement-on-a-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButton_labelPlacement_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.ButtonLabelPlacement;
private const arr:Array = [ButtonLabelPlacement.LEFT,
ButtonLabelPlacement.RIGHT,
ButtonLabelPlacement.TOP,
ButtonLabelPlacement.BOTTOM];
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="labelPlacement:">
<mx:ComboBox id="comboBox"
dataProvider="{arr}"
selectedIndex="1" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:RadioButton id="radioButton"
label="RadioButton"
labelPlacement="{comboBox.selectedItem}" />
</mx:Application>
View source is enabled in the following example.
You can also set the labelPlacement property using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/08/18/setting-the-button-label-placement-on-a-radiobutton-control-in-flex/ -->
<mx:Application name="RadioButton_labelPlacement_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.controls.ButtonLabelPlacement;
import mx.events.ListEvent;
private const arr:Array = [ButtonLabelPlacement.LEFT,
ButtonLabelPlacement.RIGHT,
ButtonLabelPlacement.TOP,
ButtonLabelPlacement.BOTTOM];
private function comboBox_change(evt:ListEvent):void {
var value:String = comboBox.selectedItem.toString();
radioButton.labelPlacement = value;
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="labelPlacement:">
<mx:ComboBox id="comboBox"
dataProvider="{arr}"
selectedIndex="1"
change="comboBox_change(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:RadioButton id="radioButton"
label="RadioButton" />
</mx:Application>
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
Simple, but very useful in some cases ..
congratulations blog.flexexamples.com.
Att.. Lucas Zerma
These examples are a little weak, the label placement is the same for all controls. This post implies it is somehow different.
You should have more complex examples. I think most people know how to set properties on controls.
How would you position the label 2 or 3 pixels from top of the control? What is the best way to vertically center the text to the radio button? By default the text seems to be top aligned with the button. This is undesirable in many cases.
You can use the leading property of the radio button. This will change the position of label vertically. From there, you can manage the leading Position.
Normally, leading=0 will align the label vertically.