Flex - Custom Component - Percentage Width/Height

Question

I am trying to create a Custom Flex Component using the Flex Component framework:

http://www.adobe.com/livedocs/flex/3/html/help.html?content=ascomponents_advanced_3.html.

All good components allow you to define their dimensions using percentage values using:

MXML:

TextInput width="100%"

or

Actionscript at runtime:

textinp.percentWidth = 100;

My question is how do you implement percentage width/height in the measure() method of your custom component? More specifically, these percentages are converted to pixels values at some stage, how is this done?

Answer 1

The way Flex layouting works is by letting each component lay out its children to a size specified by the parent. "Children" does include the usual children - getChildren(), numChildren - and also those components which makes up borders, handles, etc., which are called "chrome" and are part of getRawChildren().

The Flex framework now does two loops over all components (which are actually part of the display tree). The first is bottom up (deepest nested elements first) and call the measure() method. It should calculate how much space (width/height) the component would take if it can has as much space as it wants, no limits (think: scrollbars) and put it into the measuredWidth and measuredHeight properties. Secondly, it calculates how much space it wants to have as an absolute minimum, put into measuredMinHeight / measuredMinWidth. To calculate this, border thickness, chrome and regular children are asked about their sizes using getExplicitOrMeasuredHeight()/Width(), and added together. That's why it's depth-first.

The second loop is to do the actual layouting. This starts at the top of the tree, and updateDisplayList is called, with x/y parameters telling the component how much size it actually does have. Based on this information the component will tell its direct children where they should be (relative to their parents) and how big they should be - child.move(x,y) and child.setActualSize(w,h)

So it's actually the parent container who takes relative sizes into account. Your component states it's ideal (minimum size so that everything can be displayed) and minimum sizes in measure() and has to deal with whatever it gets in its updateDisplayList(). The parent component takes the available space it has, makes sure that each component gets it's minimum size and will then distribute the rest to all components. In this phase, it will look at the percentWidth/Height properties of its children.

So if you want to put your component in a standard Flex container like HBox, you don't need to do anything special for percentage sizes to work.