Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Flex clarification needed: width, min(max)Width, explicitWidth, explicitMin(Max)Width, measuredWidth, measuredMinWidth, percentWidth

Is anyone able to shortly explain the meaning of the different Flex size properties in a comprehensible way?

What I have so far:

Actual size

width and height. This is the actual (and final) size of the component. If not set explicitly it will be the size that is calculated by applying all layouting rules and percentage sizes.

Explicit size

explicitWidth and explicitHeight. We need both properties to decide whether the actual size needs to be calculated or can just be copied from these properties.

Measured size

measuredWidth, measuredHeight, measuredMinWidth and measuredMinHeight. The default sizes of a component. The component is supposed to set these sizes in its measure() hook. Default sizes apply only if no explicit size is set (e.g. width or explicitHeight). The min/max measured size is taken into account only in the case of a percentage sizing. The calculated (actual) size cannot be smaller than the measured min size.

Percentage size

percentWidth and percentHeight. Obvious.

Min size

minWidth, minHeight. Returns the min size of the component - either set explicitly or else the default min size set in measure(). Allows to set an explicit min size that overrides the default (measured) min size.

Explicit min size

explicitMinWidth, explicitMinHeight. Same role as the explicit size. If set, these values are to use, else the default (measured) min size.

Max size

maxWidth, maxHeight. Returns the max size of the component - either set explicitly or else the default max size 10000.

Explicit max size

explicitMaxWidth, explicitMaxHeight. Same role as the explicit size or explicit min size. If set, these values are to use in determination of a upper size border, else the default max size 10000.

HOPE, there are even more size properties to be discussed.

like image 407
Kaken Bok Avatar asked Aug 02 '11 16:08

Kaken Bok


2 Answers

Adobe's article is a good reference. The charts at the bottom describe the differences between dimensions and explicit dimensions, as well as max, min, and default dimensions.

There are basically four ways a developer can size a component:

  • Auto: Let Flex pick the size by not specifying dimensions
  • Pixels: Set an exact pixel size, using the height and width properties
  • Percent: Set the size to be a percentage of the parent container
  • Constraint: Create a constraint-based layout (usually done by anchoring the sides or center of a child component to some part of the viewable region of its container)

Unless you are creating a custom Flex component, the height, width, percentHeight, and percentWidth properties are the only attributes needed to configure a component's dimensions.

Gordon Smith of the Flex SDK Team explains it this way:

For historical reasons related to ease-of-use consideration, the "width" property does double duty. As a setter, it sets the explicitWidth. As a getter, it returns the actual width.

In other words, it sounds like height and width manage these lower-level properties for you.

like image 173
Kyle Avatar answered Oct 02 '22 20:10

Kyle


Related link: http://www.developmentarc.com/site/sites/default/files/understanding_the_flex_3_lifecycle_v1.0.pdf

like image 27
Kaken Bok Avatar answered Oct 02 '22 19:10

Kaken Bok