Flex 101: Absolute positioning in Flex 3

There are several things that you’d like to think about if you want to use absolute positioning in Flex.

If I miss anything obvious here, please let me know. Thanks.

1. Canvas and Application/Panel with layout=”absolute” are the three Containers that allow “absolute” layout. Other components or Application/Panel with layout not setting to “absolute” will “dynamically” layout children. That means they may resize to accommodate the change of size of the existing child components or because of the newly added child components. This may cause flickering in transitions. The easiest way that I found out to avoid this kind of flickering is to use Canvas and absolute layout. However, Canvas is only good for layout one child component; it would be little more convenient to use an HBox to layout multiple child components in a linear fashion, which, as mentioned above, would cause choppy animation in some cases (e. g., after you removed one descendant component, HBox will redraw iteself and shrink to accommodate the new space).

One workaround to achieve a smooth transition effect is

  • For AddChild nodes: Add all the children and set their alpha values to zero in a Parallel node before the choreography;
  • For RemoveChid nodes: To set the component alpha value to zero and wait until the effects on all the other descendants finishes before removing them in one pass.

2. All the containers except Accordion and ViewStack have “autoLayout” properties. If false, measurement and layout are done only once, when children are added to or removed from the container.

3. All the UIComponents have “includeInLayout” properties. If false, the object is positioned by its parent container as per its layout rules, but it is ignored for the purpose of computing the position of the next child. The behavior of this property is different than the “float” property in HTML CSS.

4. To do the absolute positioning for a specific component, set “includeInLayout” to false and position it in the “creationComplete” event handler, like this:

<mx:Button label="floating around" id="fBtn" x="10" y="120" alpha="1.0" fillAlphas="[1.0, 1.0, 1.0, 1.0]" creationComplete="fBtn.x=0; fBtn.y=0;" includeInLayout="false"/>

Note that x=”10″ y=”120″ will be ignored by Flex in favor of “creationComplete” handler.


Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )


Connecting to %s

%d bloggers like this: