Creating a multilined Button in Adobe Flex

Creating a multilined Button in Adobe Flex

Creating a multilined Button in Adobe Flex

The following code shows you how you can create a multilined button control in Adobe Flex.
This is not standard behaviour of the mx.controls.Button, so that’s were some small tricks come into play!

Because a multilined labelfield is not standard, we have to customize some properties on the textField of the Button. To accomplish this we created a new ActionScript class ‘MultiLinedButton’ which extends from the mx.controls.Button.

Since we created a totally new Button control, we have total control over the component. In this example I’m just styling the button’s textField so that it supports a MultiLined behaviour, but personal variations are possible.

package com.creativegeeks.presentation
{
    import flash.text.TextFieldAutoSize;
   
    import mx.controls.Button;
   
    public class MultiLinedButton extends Button
    {
        public function MultiLinedButton()
        {
            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");
            if (height < this.minHeight) this.height = this.minHeight
        }
    }
}

The last step: integrate the custom made Button component into your Web / Desktop application.

<?xml version="1.0" encoding="utf-8"?>
<s:WindowedApplication xmlns:fx="http://ns.adobe.com/mxml/2009"
                       width="125" height="125"
                       xmlns:s="library://ns.adobe.com/flex/spark"
                       xmlns:mx="library://ns.adobe.com/flex/mx" xmlns:presentation="com.creativegeeks.presentation.*">

    <presentation:MultiLinedButton width="200" label="Button with multiline label" />
   
</s:WindowedApplication>

About the Author

Daan is a Creative-Geek who loves learning and sharing new techniques! Follow him on Twitter to keep up to date with the Creative-Geeks blog and other subjects. Contact him on e-mail : info[at]creative-geeks.com.