« 360|Flex Teaser – Using LocalConnection | Main | InsideRIA the Conference! »
Flex 3 vs Flex 4 State Management
| By Rich Tretola | May 12, 2009 | |
| 40,269 views |
Here is a very simple example of how State management has changed between Flex 3 and Flex 4. Other than the default skin, both of these applications are identical in their resulting swfs. However, how they are coded is much different. Take a look at the code and samples below (Note: Click on the buttons!).
Flex 3 States Example
[kml_flashembed fversion="10.0.0" movie="http://www.everythingflex.com/flex3/Flex3States/Index.swf" targetclass="flashmovie" publishmethod="static" width="400" height="300"]
[/kml_flashembed]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 | <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="400" height="300"> <mx:states> <mx:State name="State2"> <mx:SetProperty target="{button1}" name="label" value="Big"/> <mx:SetProperty target="{button1}" name="width" value="200"/> <mx:SetProperty target="{button1}" name="height" value="200"/> <mx:SetEventHandler target="{button1}" name="click" handler="currentState=''"/> <mx:AddChild relativeTo="{vbox1}" position="lastChild"> <mx:Label text="State 2 Only" width="100%" textAlign="center"/> </mx:AddChild> </mx:State> </mx:states> <mx:VBox verticalCenter="0" horizontalCenter="0" id="vbox1"> <mx:Button label="Small" click="currentState='State2'" id="button1"/> </mx:VBox> </mx:Application> |
Flex 4 States Example
[kml_flashembed fversion="10.0.0" movie="http://www.everythingflex.com/flex4/Flex4States/Index.swf" targetclass="flashmovie" publishmethod="static" width="400" height="300"]
[/kml_flashembed]
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 | <?xml version="1.0" encoding="utf-8"?> <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark" xmlns:mx="library://ns.adobe.com/flex/halo" width="400" height="300"> <s:states> <s:State name="State1"/> <s:State name="State2"/> </s:states> <mx:VBox verticalCenter="0" horizontalCenter="0" > <s:Button label.State1="Small" width.State2="200" height.State2="200" label.State2="BIG" click.State1="currentState='State2'" click.State2="currentState='State1'"/> <mx:Label includeIn="State2" width="100%" text="State 2 Only" textAlign="center"/> </mx:VBox> </s:Application> |
Flex 3 handles the changes to my buttons properties through a series of mx:SetProperty tags as well as a mx:SetEventHandler tag within the mx:states declaration.
While Flex 4 uses a simpler dot notation style declaration within the original Button component. This is certainly easier for developers working outside of the design view within Flex Builder.
Also, notice how the mx:Label that only exists within State2 in each application is handled. Within the Flex 3 application, this is accomplished with the mx:AddChild tag within the mx:states declaration, while in the Flex 4 application it is as simple as having a comma seperated list of states to include the component in within the Labels includeIn property.
These changes are not something that an end user would ever know or care about however as developers these types of refactoring changes to the tools and SDK are much appreciated.
Thanks Adobe!
Topics: Flex, Flex 3 (Moxie), Flex 4 | 25 Comments »
May 12th, 2009 at 10:27 am
I like it !
Reply to this comment
May 12th, 2009 at 11:04 am
Yeah, this is def an improvement from the old way of doing states. It just feels more natural.
I’m curious about transitions though, they seem to be still in the same kind of style as the old states.. or am I mistaken?
Nice article
Reply to this comment
May 12th, 2009 at 1:34 pm
This is going to be SO much better. I dislike states because of how they are currently implemented. I will definitely appreciated them more in the future!
Reply to this comment
May 12th, 2009 at 8:15 pm
Nice overview Rich.
I wonder if this new take on states will convince developers who traditionally use viewstacks within their MVC frameworks to switch…
justin
Reply to this comment
Rich Tretola Reply:
May 12th, 2009 at 8:58 pm
Not sure, I know it will change my development habits.
Reply to this comment
May 13th, 2009 at 1:23 am
that’s good!
Is there a way to use flex4 to create an air app ?
Just a switch of the sdk in Flex Builder?
Thanks
Reply to this comment
May 13th, 2009 at 2:35 am
I’m very excited. I haven’t used states in a Flex app in I don’t know how long – years. This just makes since.
Go Flex-team go!
Reply to this comment
May 13th, 2009 at 5:11 am
It was great to see a demo of this by Andrew Shorten at the Midlands FPUG, but I don’t think will change the way I built Flex apps.
Reply to this comment
May 14th, 2009 at 2:01 pm
Oooo, I like this a lot!! The Flex3 and under method is extremely hard to read, looking at the code.
Reply to this comment
June 1st, 2009 at 9:22 am
[...] Flash Builder 4 also comes with the new Flex 4 SDK. Check out how State management has changed in Flex 4. [...]
June 29th, 2009 at 1:27 pm
Here i found another good article explaining use of states for creating a website using states in flex .would like to share
here is link :
http://askmeflash.com/tutorial_m.php?p=tutorial&tid=0
Reply to this comment
July 28th, 2009 at 9:20 am
Yeah this is a nice improvement overall however I have an app I am migrating for Flex 4 now that has 39 different individual states defined with so I think it will take me a bit of time to get excited about this!
Reply to this comment
August 19th, 2009 at 2:23 pm
[...] Flex 3 vs Flex 4 State Management [...]
September 4th, 2009 at 6:22 pm
[...] Flex 3 versus Flex 4 State Management [...]
December 30th, 2009 at 8:52 pm
Mbt shoes are so amazing. You will have a brand new walk experience when putting on Mbt m walk, Mbt Chapa and the like
Reply to this comment
February 2nd, 2010 at 6:08 am
Mbt shoes are so amazing. You will have a brand new walk experience when putting on Mbt m walk, Mbt Chapa and the like
Reply to this comment
March 24th, 2010 at 3:13 am
[...] Flex 3 versus Flex 4 State Management [...]
March 26th, 2010 at 3:24 am
[...] Flex 3 versus Flex 4 State Management [...]
April 2nd, 2010 at 5:29 am
[...] Mail (will not be published) (required) …Gridshore Things I do with flex as a java programmer Flex 3 vs Flex 4 State Management | EverythingFlex: Flex & AIRThe Muslim Brotherhood of Jordan and Jama'at-i-Islam of …The Largest Muslim Brotherhood's Scope on [...]
April 7th, 2010 at 11:20 am
good job,guy,it’s kind of u share this post with us which give useful information to us.God Job!I do hope u can publish more posts later.buy the way ,if you wanna buy cheap brand shoes online,you may visit our shoes store,i am sure you will find what u like.
Reply to this comment
April 8th, 2010 at 3:26 pm
Wow, really?! People actually think this is an improvement?!
Why would it be an improvement for components to have code specific to their host container?? This implementation violates basic software design practices and obfuscates what properties/components change when the state is changed.
Not only that but the components that set properties for a given state (e.g. visible.State1=”true”) will have problems if the component doesn’t dictate the behavior for other states as well…i.e. components will disappear, have their text reset, etc. when they specify properties for one state but do not have a setting for other states. This isn’t just breaking behavior from Flex3 — it’s bad behavior.
Reply to this comment
Danny Reply:
June 10th, 2010 at 2:25 pm
@Matthew,
Even as a purist, I don’t think I agree. Containers need to have conrol over the visibility, position and other properties of their contained components.
Either you do this by handling an event of some kind that triggers a handler that changes these properties, or you have this Flex 4 state syntax which is doing the same thing in a more distributed fashion….each property is invisibly bound to a state change event and the property gets updated.
It may be a little more difficult to trace and group property changes relative to an event, but I would argue the new syntax is a much more intuitive way to match a state to a view (or other non visual property).
You can always choose to use it only for visual view states if you fear the traceability challenges but for the example cases I’ve seen, it creates much more intuitive code. One problem I am having is using the syntax with actionscript – don’t think it works there – but I have a couple of uses where it is very helpful and I don’t see the risks you point out.
Reply to this comment
April 12th, 2010 at 11:22 pm
flex3 easier to understand, I support this
Reply to this comment
July 1st, 2010 at 4:06 am
resolve the an issue in flex 4 where m trying to use states in my module and its giving an error
Reply to this comment
February 22nd, 2011 at 5:30 pm
But… how do you set the current state and how to change it? Such a crucial detail and I can’t seem to find it…
Reply to this comment