The Morphic Group

Flex Link Buttons: Adding line breaks/wordwrap functionality

July 23, 2008 – 4:05 pm by Dennis

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.