Loyal Moses

Flex 4 state syntax example usage

Posted on 05 June 2009

Raise your hand if you were as frustrated as I when it came to Flex 3 and state management.

Simple or basic application states were of no real concern, but as states grew and became more and more complicated, managing and manipulating these states became a tedious and even just plain silly task.

Flex 4 (“Gumbo”) brings about a much more advanced and welcome implementation of states.

This isn’t a blog post comparing Flex 3 and Flex 4’s state architectures, but more a simple example of using the new state syntax in Flex 4. Regardless if you had ever used states in Flex 3 or not is really unimportant, this is the new and ‘correct’ way to implement an application state system. IMHO.

Flex 4 states are defined as follows:

[as3]
<s:states>
<s:State name="State1"/>
<s:State name="State2"/>
</s:states>
[/as3]

Using Flex 4 states on a specific button component would be as follows:

[as3]
<s:Button
label="I’m a button"
x.State1="10" y.State1="10"
x.State2="20" y.State2="20"
click.State1="button_clickHandler(event)"
click.State2="other_clickHandler(event)"
/>
[/as3]

Another obviously excellent set of features in the new Flex 4 state system are the “includeIn” and “excludeFrom” attributes:

[as3]
<mx:Label x="100" y="200" text="My Label 1" includeIn="State1, State2"/>
<mx:Label x="100" y="300" text="My Label 2" excludeFrom="State2"/>
[/as3]

Well done guys!

All the meat on states in Flex 4, with comparisons to Flex 3 and Flex 2 can be found here. This is a good read!
http://opensource.adobe.com/wiki/display/flexsdk/Enhanced+States+Syntax

~moses