Adobe Flex 3 LinkButton Word Wrap
October 12, 2009 4:03pm by swood |
Flex |
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;
}
}
} |
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