Flex - Binding on width property using percentages in MXML code

Question

Is it possible to set a percentage value for the width property of an UIComponent defined in MXML using data binding?

What I try to achieve is something like this (which doesn't work):

<s:Button width="{buttonWidth}%"/>

I know that using percentage for width or height properties in MXML is kind of a hack in the Flex SDK, since they're supposed to accept numerical values only, but since percentWidth and percentHeight aren't available in MXML, I'm pretty stuck =/

I would really like to avoid using code to do such a simple thing, in order to keep my code as clear and readable as posible.

Anybody got a clue about how to achieve this?

Answer 1

You could extend the Button class (maybe call it a PercentButton, whatever) and give it a bindable property (call it _pctWidth, say), give it a public getter and a public setter, and in your setter you do this:

[Bindable]
private var _pctWidth:Number;

public function set pctWidth(value:Number) : void {
  _pctWidth = value;
  percentWidth = _pctWidth;
  invalidateDisplayList();
}