« 360|Flex Teaser – Using LocalConnection | Main | InsideRIA the Conference! »
Flex 3 vs Flex 4 State Management
| By Rich Tretola | May 12, 2009 | |
| 11,008 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
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
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 | 16 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