Archive for July, 2008

Creating custom events in Flex component

July 22, 2008

Simple sample code

Flex 101: Absolute positioning in Flex 3

July 14, 2008

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.