R – Flex custom button component

actionscript-3apache-flexmxml

I want my custom button to look like the button sample below.
More specifically, I want the width of the button to be determined by the width of the largest word in the label (i.e. width of "Elongated" in my example). The label must wrap, not truncate.
And I want only one pixel between the top edge of the icon and my button's top edge.
I have tried lots of things but to no avail so far. I have reduced the horizontalGap and verticalGap to zero and padding to zero. But still nothing. Please help.

Here's what I have right now:

<mx:Button  top="0" cornerRadius="2" paddingLeft="0" paddingRight="0" leading="0" letterSpacing="0" paddingTop="0" paddingBottom="0" verticalGap="0" horizontalGap="0" textAlign="center" labelPlacement="bottom" icon="{MyIcon}" height="60" width="75" label="Elongated Label" fontSize="10" />

alt text

Best Answer

That's not at all simple.

You will need to create your own button,

public class Mybutton extends Button {...}

override createChildren and set the word wrap of the IUITextField used for the label to true.

override measure and use your own line metrics to determine the width that the button should be. If you get the measure right, the button will lay itself out properly.

Related Topic