Subscribe to RSS
get email updates
home | about | pixDif AIR app | video tutorials
polyGeek.com

Register for 360Flex in DC using the ad below and you will automatically be entered in a drawing for a free ticket. Read more.
place your ad here

Web Premium





The new Flex 4 states syntax: more than meets the eye

March 17th, 2010 . by polygeek

If you have played around with the new Flex 4 states then you know just how easy it is to change the visual appearance of a component. But the <states> syntax also works on events. So now we can do something like this:

<s:states>
	<s:State name="disarry" />
	<s:State name="confusion" />
	<s:State name="mind" />
</s:states>

<s:Button
	click.disarry="onClick_disarry()"
	click.confusion="onClick( 'confusion' )"
	click.mind="onClick( 'whatever' )"/>

Of course you could just call to the same event handler and run a switch on the currentState. That would do the same but this approach seems a little cleaner.

You can also change things like the skinClass of a component on a state change. Actually, I can’t think of anything that doesn’t apply to the new states syntax. It’s just going to take some time getting used to and thinking about how this will affect our code organization. I’m pretty sure this will help keep simplify things and make for cleaner and more easily maintained code.

And yes, I could totally see myself making <states> that have the names above. I give things weird names. I’m pretty sure that when a developer goes to hell their punishment is to maintain my  code. :)

If something here has proved valuable to you then feel free to drop a couple of bucks in the tip-jar.

Post to Twitter Post to Delicious Post to Facebook Post to Reddit Post to StumbleUpon


similar posts

2 Responses to “The new Flex 4 states syntax: more than meets the eye”


comment number 1 by: Steven Shongrunden

You can also use states in one document to easily change the currentState in another document, for example in this sample application:

<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"

xmlns:s="library://ns.adobe.com/flex/spark"

xmlns:local="*">

<fx:Declarations>

<fx:Component className="CustomComponent">

<s:Group>

<s:states>

<s:State name="stateA" />

<s:State name="stateB" />

</s:states>

<s:Label text="{currentState}" />

</s:Group>

</fx:Component>

</fx:Declarations>

<s:states>

<s:State name="state1" />

<s:State name="state2" />

</s:states>

<s:controlBarContent>

<s:Button label="change application state" click="currentState=currentState=='state1'?'state2':'state1'" />

</s:controlBarContent>

<local:CustomComponent currentState.state1="stateA" currentState.state2="stateB" />

</s:Application>

(Assuming that code comes through, ok)

This can come in handy and wasn't very obvious to me at first so thought I would pass it along.

comment number 2 by: polygeek

@Steven: That is pretty slick. Thanks for sharing. I’ll keep this in mind.

   Welcome back (Change)

Leave a Reply

comment feed RSS   subscribe to this comment thread

Recent Posts

   



polyGeek.com

© Copyright 2008 polyGeek.com / Dan Florio, All Rights Reserved Except Where Explicitly Stated
Web Developement Blogs - Blog Catalog Blog Directory
M2 Websites
Local Directory for Los Angeles, CA

Better Tag Cloud