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 determine their size using percentage values, using:

MXML:

TextInput width = "100%"

or

ActionScript at runtime:

textinp.percentWidth = 100;

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

Answer 1

The work of the Flex layout is that each component exposes its children to the size specified by the parent. "Children" include ordinary children - getChildren (), numChildren - as well as those components that make up borders, handles, etc., Which are called "chrome" and are part of getRawChildren ().

The Flex framework now performs two loops on all components (which are actually part of the display tree). The first is from the bottom up (first the deepest nested elements) and the call to the measure () method. It should calculate how much space (width / height) the component will take, if it can have as much space as it wants, without restrictions (think: scrollbars) and place it in the measuredWidth and measuredHeight properties. Secondly, it calculates how much space it wants to have as an absolute minimum, placed in the measured MinHeight / measuredMinWidth. To calculate this, the border thickness, chrome and ordinary children are set according to their size using getExplicitOrMeasuredHeight () / Width () and added together. That is why it is deeper.

The second cycle is the actual layout. This starts at the top of the tree, and is called updateDisplayList, with x / y parameters that tell the component what size it actually has. Based on this information, the component will tell its direct children where they should be (relative to their parents), and how important they are - child.move (x, y) and child.setActualSize (w, h)

Thus, it is actually a parent container that takes into account relative sizes. Your component claims to be ideal (minimum size so that everything is displayed) and minimum sizes in measure (), and it has to deal with what it gets in its updateDisplayList (). The parent component accepts the available space that it has, ensures that each component gets the minimum size, and then distributes the rest for all components. At this point, he will look at the percentWidth / Height properties of his children.

So, if you want to place your component in a standard Flex container such as HBox, you do not need to do anything special for the percentage sizes to work.