Search

 

May 2009
S M T W T F S
« Apr   Jun »
 12
3456789
10111213141516
17181920212223
24252627282930
31  

Tags

Archives


« | Main | »

Flex 3 vs Flex 4 State Management

By Rich Tretola | May 12, 2009
55,372 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"]

Get Adobe Flash player

[/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"]

Get Adobe Flash player

[/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 »

25 Responses to “Flex 3 vs Flex 4 State Management”

  1. lekant Says:
    May 12th, 2009 at 10:27 am

    I like it !

    Reply to this comment

  2. fabianv Says:
    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

  3. E Brent Nelson Says:
    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

  4. Justin J. Moses Says:
    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:

    Not sure, I know it will change my development habits.

    Reply to this comment

  5. batchass Says:
    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

  6. polyGeek Says:
    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

  7. Jodie O'Rourke Says:
    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

  8. Jamie Says:
    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

  9. Flash Builder 4 is Public | EverythingFlex: Flex & AIR Says:
    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. [...]

  10. John Says:
    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

  11. Edward Mansouri Says:
    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

  12. ActionScriptJobs.com Says:
    August 19th, 2009 at 2:23 pm

    [...] Flex 3 vs Flex 4 State Management [...]

  13. Flex 4 Resources – Samples and Links! « Devgirl’s Weblog Says:
    September 4th, 2009 at 6:22 pm

    [...] Flex 3 versus Flex 4 State Management [...]

  14. MBT shoes store Says:
    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

  15. 外汇交易 Says:
    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

  16. Flex 4 – BookMarks | Flex Certification Says:
    March 24th, 2010 at 3:13 am

    [...] Flex 3 versus Flex 4 State Management [...]

  17. Flex 4 in brief | Flex Certification Says:
    March 26th, 2010 at 3:24 am

    [...] Flex 3 versus Flex 4 State Management [...]

  18. state1 Says:
    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 [...]

  19. Ann-cheap shoes online sale store Mbt sh Says:
    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

  20. Matthew Says:
    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:

    @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

  21. acne clearing Says:
    April 12th, 2010 at 11:22 pm

    flex3 easier to understand, I support this

    Reply to this comment

  22. Designer Handbags Says:
    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

  23. sam Says:
    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

Comments