Archive for August, 2008

Transitions tips and trouble shooting in Flex 3, Take 1

August 22, 2008

Target all the possible nodes in a Transition top node (either a Parallel or a Sequence node) “targets” property.

Specify toState and fromState for the transition.

Specify filter for the transition.

If you want to have granular control as to how individual child components of a container are animated during a transition, add these components one by one using AddChild tags in a state tag. Read more about the approach (as in Type 2).

Tips to avoid flickering in transitions:

Use absolute layout (Canvas or Panel/Application with “absolute” layout) if you want use “overlapping actions” or “drag” in your animation. In a real world animation, a lot times you need to add new components before existing children are completely removed from the container (AddChild before RemoveChild happens in same container). If you are using relative layout for the container, Flex automatically updates layout as soon as any AddChild/AddRemoveChild takes place, which will cause flickering. For data effects, you can keep Flex from updating by using “UnconstrainItemAction“. For other effects, you either backup to linear fashion animation (don’t addChild until after all existing components are removed) or choose absolute layout.

Deferring removal of individual subcomponents towards later and remove them as a whole. (Applicable to Type 2 tags only). Canvas and Panel/Application with “absolute” layout are “absolute” containers; other containers perform “relative” layout, meaning they will redraw themselves on the update cycles, e.g., you are removing a component from them or resize an adjacent container. This sometimes will cause jumps in the transition. To avoid the jumpy moments, you can hide these individual components at the end of their transition process instead of removing them immediately from the Displaylist and wait until all the other subcomponents have finished transitions, then remove all these components as a whole.

Flex 101: AddChild and RemoveChild event order

August 17, 2008

Flex 3 documents in details how the component life cycle happens in terms of the instantiation process. However, it seems it lacks information about how Flex treats AddChild/RemoveChild process. Understanding the process is important for choreographing transitions on a Flex state machine.

Note that”add”/”remove” events are dispatched on calls to “addChild”/”removeChild”/”removeAllChildren”. So an “add” event is fired before the “preinitialize” event for that component.

Type 1. Under a State tag, AddChild tags that include only non-AddChild tags. Flex instantiates the components in the order of the MXML tags, from inside out, top down. Thus the innermost first target component will be the first one to be instantiated and added to the Displaylist (This is because Flex will use the dimensions of the descendants to determine the dimension of the parent component). The top AddChild target will be the last to be added. When the container’s creationPolicy is “none”, it seems that all the components are instantiated (“added” events are fired and the parent container is redrawn to accommodate the newly added descendants. This observation is on the contrary to the Flex documentation) but not drawn. If you exit the state that contains this top AddChild target, Flex simply removes the topmost component from the Displaylist and thus there are no subsequent “add” or “remove” events fired from its children components.

For the transitions of this kind of components, you can only treat them as a whole block (i.e., applying transitions to the top parent containers).

Type 2. Under a State tag, AddChild tags that include other Addchild tags. You use subsequent AddChild nodes following a top AddChild node as their container. Flex instantiates the components strictly by the order of the MXML tags, from top down, regardless of the hierarchy of the nodes. When removing the nodes, Flex follows the reverse order from which it adds these components, that is, the last component being added will be the first one to be removed, etc…; (Understandably, the innermost children will be removed before their parents are removed, also by the reverse order from which they are added, because during the instantiation process their parents are added before they are added — you cannot reattach a component to another container at compile time by MXML tags; you always create the parent containers first and then add components into them.)

Type 3. In the “base” state. In the “base” state, for a container, the top container’s “add” event is dispatched first before Flash Player drills down to reach its individual descendant components, which is different than what happens in Type 1. When exit from the “base” state, Flex simply removes the top container without worries about its descendants, which is the same as Type 1.

The above describes the order Flex dispatches events when no transitions are applied and with all the container’s creationPolicy set to “all/auto” (default).

Of all the 3 types mentioned above, Type 2 gives you the most flexibility in terms of how you can do with transitions. In Type 1 and 3, you can only apply effects on the top container, as opposed to its individual child components. So if you want to have a granular control on how individual child components inside a container component are animated, you can choose Type 2 combined with transitions.

Using transitions tags, Flex choreographs the staging of visual components at runtime. This means that you can dictate when these components appear in the order you want, which can be different than what you specified using AddChild/RemoveChild tags. A couple of test drives show that you have the freedom in the following usages of MXML tags, for any container with multiple descendants that is added by AddChild tag (applicable to Type 2 only):

  • Arbitrary order for AddChild tags (meaning you can have a different order on how transitions happen than the one that you use to create them in the State tags);
  • Arbitrary order for RemoveChild tags;
  • Arbitrary grouping on AddChildAction targets (meaning that you can group the targets in the order which is different than what you use in the State tags);
  • Arbitrary grouping on RemoveChildAction targets.

Flex 101: Embedding fonts for Button/Panel

August 15, 2008

You will need to explicitly set fontWeight=normal in CSS, in addition to respecifying a “font-face” for the embedded font.

<mx:Style>
@font-face
{
src:local(“Arial”);
fontFamily: arialEmbedded;
}
.ebFont
{
fontFamily: arialEmbedded;
fontWeight: normal;
}
</mx:Style>

<mx:Button id=”srchBtn” label=”Search” width=”100%” styleName=”ebFont” click=”currentState=’searching'”/>

Flex 101: Referencing public properites from child components

August 8, 2008

This is actually very obvious thing but I missed it when I first tried to use public properties like “width” in a child component. I was confused about the scope of the “width” property. Am I referring to the child component?…

All the properties that are referred to by a child component is scoped to the top component in which it resides. If the top component also resides in the application instance, the properties being referred to stay scoped to the top component. If the top component is an Application, then the scope is the Application instance. In the following example, “width” property used by Label refers to the width of VBox.


<mx:VBox xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Panel title="try something new">
<Label width="{width-16}'/>
</mx:Panel>
</mx:VBox>

Flex 101: Hand cusor over a UIComponent

August 8, 2008
<mx:Label useHandCursor="true"
          buttonMode="true"
          mouseChildren="false" />

Flex 101: Non-visual components should be in base state

August 8, 2008

You cannot instantiate any non-visual components (such as a NumberFormatter or an HTTPService instance) in a state other than the base state.

Flex 101: Vertical centering text in Flex

August 5, 2008

Solution: Put the Text control inside a VBox control. Then wrap two Spacer instances around the Text control, with one before, one after the Text control. Set percentage height of both Spacers to 100. Like this:

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:VBox verticalAlign="middle" width="300" height="400" backgroundColor="0x000000" borderStyle="solid" borderColor="0x000000" cornerRadius="6">
<mx:Spacer height="100%"/>

<mx:Text text="Motorola's New Mobile Unit CEO Sanjay Jha: 'Too Little, Too Late?' - 12 hours ago
Now that Motorola ( NYSE: MOT) has chosen a CEO for its struggling handset unit, everyone wants to know can Sanjay Jha save the company, ...
Washington Post - 647 related articles ยป" color="0xffffff" width="100%" height="100%" textAlign="center"/>

<mx:Spacer height="100%"/>
</mx:VBox>
</mx:Application>

Just use verticalAlign=”middle”. You would need to care about “verticalScrollPolicy”/”horizontalScrollPolicy” in certain cases though compared to the methods described above.

Flex 101: Round-cornered containers in Flex

August 5, 2008

You will need to set borderStyle=”solid” besides setting cornerRadius. Here