Adobe Flex: Word Wrap in Button Label

Question

The standard Flex button does not allow the Label Text to word wrap. I read in the internet that there are some undocumented ways to handle this but I did not get them to work. If somebody could post me a small example would be great!

Answer 1

Essentially you need to set a few protected properties on the Button's TextField control (multiLine and wordWrap), which you can't do without extending the Button class. So if you create a new class that extends Button and sets those properties and does a little work to make things measure out correctly:

package
{
    import flash.text.TextFieldAutoSize;
    import mx.controls.Button;

    public class WrappingButton extends Button
    {


     public function WrappingButton()
     {
      super();
     }

     override protected function createChildren():void
     {
      super.createChildren();

      textField.multiline = true;
      textField.wordWrap = true;
      textField.autoSize = TextFieldAutoSize.CENTER;
     }

     override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
     {
      super.updateDisplayList(unscaledWidth, unscaledHeight);
      textField.y = (this.height - textField.height) >> 1;

      height = textField.height + getStyle("paddingTop") + getStyle("paddingBottom");
     }
    }
}

... you can drop that control into your MXML like so:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" xmlns:local="*">

    <local:WrappingButton label="The quick brown fox jumped over the lazy dog." width="100" paddingTop="10" paddingBottom="10" />

</mx:Application>

Hope it helps! Post back with questions if you have 'em.

Answer 2

thanks for the wonderful component. my question is this, when i apply icons to the button, say a 30x30 icon, the button gets messed up. how do i set it up so the button could accommodate the image.

Answer 3

That was very helpful. Thanks a million.

Answer 4

can you give the complete answer,,,, means how this thing works completely. since i'm new in flex