Joan has posted 1 posts at DZone. View Full User Profile

A Comparison of Flex 3 and Flex 4 beta

06.19.2009
| 33008 views |
  • submit to reddit
Changes in states syntax

Flex 4 beta has promoted the states functionality to a full MXML language feature. As a result, you will likely find states to be much more flexible and direct. The new states syntax is more inline, allowing state-specific changes to be specified in context. Here are the key differences in the Flex 4 beta syntax:

  • Only states are defined within the states array.
  • In the new states syntax, you cannot use AddChild and RemoveChild. Instead, you define a component's role in a particular state on the component itself using the includeIn and excludeFrom attributes.

In the following Flex 3 example, states are used to include a Button and remove a TextInput only when the currentState of the document is submitState. This approach can get very verbose with more complex states.

<mx:states>
<mx:State name="submitState" basedOn="">
<mx:AddChild relativeTo="{loginForm}" >
<mx:Button label="submit" bottom="10" right="10"/>
</mx:AddChild>
<mx:RemoveChild target="{firstTextInput}"/>
</mx:State>
</mx:states>

<mx:TextInput id="firstTextInput" />
<mx:Canvas id="loginForm" />

Here is the simpler Flex 4 beta code using includeIn and excludeFrom.

<s:states>
<s:State name="submitState" />
</s:states>
<s:TextInput id="firstTextInput" excludeFrom="submitState" />
<s:Group id="loginForm" >
<s:Button label="submit" bottom="10" right="10" includeIn="submitState"/>
</s:Group>
  • SetProperty, SetStyle, and SetEventHandler have been replaced by a new dot syntax, which allows you to qualify MXML attribute values with a specific state identifier.

In the following Flex 3 example, the code defines a property, style, and event for a Button in submitState.

<mx:states>
<mx:State name="submitState" basedOn="">
<mx:SetProperty target="{submitButton}" name="label" value="submit" />
<mx:SetStyle target="{submitButton}" name="textDecoration" value="underline"/>
<mx:SetEventHandler target="{submitButton}" name="click" handler="trace('done');"/>
</mx:State>
<mx:State name="clearState" basedOn="">
<mx:SetProperty target="{submitButton}" name="label" value="clear" />
<mx:SetEventHandler target="{submitButton}" name="click" handler="emptyDocument()" />
</mx:State>
</mx:states>

<mx:Button id="submitButton" />

In Flex 4 beta, the code looks like this:

<s:states>
<s:State name="submitState" />
<s:State name="clearState" />
</s:states>

<s:Button label.submitState="submit" textDecoration.submitState="underline"
click.submitState="trace('done')" click.clearState="emptyDocument()"
label.clearState="clear" textDecoration.clearState="none"/>
  • A component can no longer be in an undefined or null state. By default, the first declared state is the initial state of a component.
    The new syntax is available when a document uses the MXML 2009 language namespace. You cannot mix the legacy syntax and the new states syntax. The old syntax is available only in the MXML 2006 namespace.

Additionally, each component now supports a set of states defined in its skin class, which makes it simpler to apply visual changes depending on the state of a component. For example, if you look at the skin for the Spark Button, you will find the following states defined:

<s:states>
<s:State name="up" />
<s:State name="over" />
<s:State name="down" />
<s:State name="disabled" />
</s:states>

The ButtonSkin class defines what happens visually to a Spark Button in each one of these states.

This is only a brief introduction to the new Flex 4 beta states syntax. Visit the Enhanced States Syntax Spec to find more details.

References
Published at DZone with permission of its author, Joan Lafferty. (source)

(Note: Opinions expressed in this article and its replies are the opinions of their respective authors and not those of DZone, Inc.)

Tags: