Wednesday, November 4, 2009

Flex : How to make multi line label in Button


Sometime developing in flex we want to beautify the button label , we want the label able to become multi line. For flex every component is created by XML tag, we can not simply using the '\n' inside the tag.After I have figured around the web page, I got the solution on it, that is example at below

<mx:button id="myButton" label="Submit &#13; Save"/>



we are using the "&#13;" to replace the '\n' in the tag.
--------------------------------------------------------------------------------
Update 2010-Jan-31

I would like to apologize that I had give wrong information to you, the information at above only workable in the dataGrid only. I had found the solution already. Please refer the below one.

I had found that flex 3.0 not able to do the multiline label in the button, the only way is extend the Class button.

below are the example and steps.

1.   1st you go to this site http://blogs.adobe.com/aharui/2007/04/multiline_buttons.html download the source code which are wrote by Alex’s Flex Closet.


Alex’s Flex Closet


2.   You will download 1 file name MultiLineRadioButton.zip contains 3 files inside.
- MultilineRadioButton.as
- multiLineRadioButton.mxml
- NoTruncationUITextField.as

3.   Copy this three files into your new project likes below.

Flex multiline label button


4.   Open the multiLineRadioButton.mxml,  in the Application tag you got this  xmlns:comp="*"  ,this means the Application is include the all files. If you want manage your files properly , you can put your files inside the folder , then the write as xmlns:comp="folderName.*" .


 Flex multiline label button

5. Actually this example source code is only for Radio button only. If you want to use in Button, you need to modify the function and class.

Flex multiline label button

6. Now you open the file MultilineRadioButton.as , then at line 5 change the import mx.controls.RadioButton to mx.controls.Button , and at line 10 also change the extends RadioButton to extends Button class.

Flex multiline label button

7.   Then recompile again the source code , then you will see the button label in multi line.


Flex multiline label button

8. I hope this example can help you.

No comments:

Post a Comment

Your comments is appreciate.