In my endless pursuit to rely more on the flex framework instead of created components from the ground up (call it a outset of flash-itis), I still find cases where I need to refine flex components. For example, Link buttons. How do you add line breaks and word wrapping in a link button? After a bit of searching ... I found this simple solution that I would like to share.
You would essential extend the linkButton class by creating your own custom linkButton. This custom component would override createChildren and measureText methods. In createChildren(), you would enable "textField" to workwrap and allow multiple lines. Then in measureText(), the correct height and width needs to be set by getting line metrics of the "textField".
Note: "textField" is a Text Field property in the base class.
...
override protected function createChildren():void
{
super.createChildren();
if (textField){
textField.wordWrap = true;
textField.multiline = true;
}
}
override public function measureText(s:String):TextLineMetrics
{
textField.text = s;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = textField.textWidth;
lineMetrics.height = textField.textHeight;
return lineMetrics;
}
...
It is important to set the width within your custom tag. For the best results, you should set the height though it is not necessary.
Please let me know if you have a better workaround or any comments on other extensions of Flex components.
You are a champion among men. This was a stupid problem to have and I’m glad you posted a quick solution. Why the heck it doesn’t support the white-space:nowrap css, or some equivalent I have no idea.
Great post. This works perfectly for regular buttons as well. It’s also a good lesson in lineMetrics and measureText() function for people who want to learn about extending the button components. Thanks.
Very useful post! I had to have a word wrap in Linkbar and I used the above solution and worked right the first time! Thanks a lot!
This method doesn’t work as you would expect in datagrids. I have an item renderer that is using a LinkButton and the text just isn’t wrapping as you’d expect.
For example instead of getting
‘how now
brown cow’
I get:
‘how
now
brown
cow’