October 12, 2009 4:03pm by Steve | 
I recently ran across an issue that required a Flex LinkButton control to wrap its contents due to design constraints. If it didn’t wrap, it the LinkButton would blow the design once the page rendered.
If you ever happen to need a LinkButton with word wrap, here is a tiny component that should serve you well.
This is how you use it. First, in your MXML file, define a namespace for your custom components:
1 2 3 4 | < ?xml version="1.0" encoding="utf-8"?> <mx :Panel width="20%" height="100%" xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:utils="comp.utils.*" |
Then call the custom component later on in that file where you need it:
1 | <utils :multiLineLinkButton id="yourLinkID" width="100%" label="Your Wrapping LinkButton" styleName="whiteText" buttonDown="navigateToURL(new URLRequest('YOUR URL'),'_self');"/> |
Then copy the code below into a text file named “multiLineLinkButton.as” and place it into the “comp\utils” directory of your file structure.
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 | package comp.utils { import mx.controls.LinkButton; import flash.text.TextLineMetrics; public class multiLineLinkButton extends LinkButton { 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; } } } |
Tags: 
Category: 
I tried using this component but the textField.textWidth isn’t grabbing the proper width for me. The text is bunched up in a 100px wide textField. Any ideas?
I got the same issue as Gee
same problem here
Hey guys,
I know this is quiet a while after your posts, but I was just trying to solve this problem for the first time. His tutorial is a great starting point, but I was annoyed by the fact the text wasn’t left aligned, and because of the 100px with you are complaining about.
All I had to do to fix this was to set the lineMetrics.width = width. In this case width is a reference to the LinkButton itself. So make sure you set the button wide enough when you add it to your application. I just set the button width to 100% for my purposes.
override public function measureText(text:String):TextLineMetrics
{
textField.text = text;
var lineMetrics:TextLineMetrics = textField.getLineMetrics(0);
lineMetrics.width = width;
lineMetrics.height = textField.textHeight;
return lineMetrics;
}
Cheers bud, just what I was after.