Flex Examples
The following example shows how you can align the text label within a Flex Button control by setting the textAlign style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/05/21/aligning-a-label-in-a-button-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.ItemClickEvent;
private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
button.setStyle("textAlign", evt.item.label);
}
]]>
</mx:Script>
<mx:Array id="arr">
<mx:Object label="left" />
<mx:Object label="center" />
<mx:Object label="right" />
</mx:Array>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="textAlign:">
<mx:ToggleButtonBar id="toggleButtonBar"
dataProvider="{arr}"
selectedIndex="1"
itemClick="toggleButtonBar_itemClick(event);" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:Button id="button"
label="Button"
textAlign="center"
width="200" />
</mx:Application>
View source is enabled in the following example.
You can also set the textAlign style in an external .CSS file, or <mx:Style /> block, as seen in the following snippet:
<mx:Style>
Button {
textAlign: right;
}
</mx:Style>
<mx:Button id="button"
label="Button"
width="200" />
Or, you can set the textAlign style using ActionScript, as seen in the following snippet:
<mx:Script>
<![CDATA[
private function init():void {
button.setStyle("textAlign", "right");
}
]]>
</mx:Script>
<mx:Button id="button"
label="Button"
width="200"
initialize="init();" />
Oops, looks like I’ve blogged this before. For another (and better) example, see “Changing a Button control’s text alignment and label placement”.
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
Hello Peter,
I tried alot to grab your contact email id, but i nowhere found your email id. This is not the place where i can post my query but can you please send me your email id on my given email id?
I do have few queries regarding RSS Feeds of your examples and your permission to publish them.
Thanks,
Kind Regards,
Mayur Patil
Mayur Patil,
You’re free to use the RSS feeds however you want. In fact, the entire blog is released under a Creative Commons License and you’re welcome to use the blog’s content however you want, as long as you do the attribution and share alike thing (see “Creative Commons License” link in footer for details).
Peter
Hello!
i need some help..
what i’v to do..is somethig like this…
for (i=5;i=12;i++)
{
["btn"+string(i)].setStyle(“icon”, this["icon" + iconNum]);
}
}
so in my kode…y had 20 buttons whit the ID’s LIKe but1, but2 but3,…but20
i jus…can’t find the way..to manipulate that propety… tk’s..! :S
NESSLY,
This works for me:
<?xml version="1.0" encoding="utf-8"?> <mx:Application name="Button_dynamic_icon_test" xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical" verticalAlign="middle" backgroundColor="white" initialize="init();"> <mx:Script> <![CDATA[ [Embed("assets/ico1.png")] private var icon1:Class; [Embed("assets/ico2.png")] private var icon2:Class; [Embed("assets/ico3.png")] private var icon3:Class; [Embed("assets/ico4.png")] private var icon4:Class; [Embed("assets/ico5.png")] private var icon5:Class; private function init():void { var idx:uint; var len:uint = 5; for (idx = 1; idx <= 5; idx++) { this["btn" + idx].setStyle("icon", this["icon" + idx]); } } ]]> </mx:Script> <mx:HBox> <mx:Button id="btn1" label="Button 1" /> <mx:Button id="btn2" label="Button 2" /> <mx:Button id="btn3" label="Button 3" /> <mx:Button id="btn4" label="Button 4" /> <mx:Button id="btn5" label="Button 5" /> </mx:HBox> </mx:Application>Peter