Creating view states in a Flex application

The following example shows how you can create different view states in a Flex application by using the <mx:states /> and <mx:State /> tags.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/05/creating-view-states-in-a-flex-application/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:states>
        <mx:State name="login">
            <mx:AddChild>
                <mx:Form id="loginForm">
                    <mx:FormHeading label="Login" />
                    <mx:FormItem label="Username:">
                        <mx:TextInput id="log_username" />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <mx:TextInput id="log_password"
                                displayAsPassword="true" />
                    </mx:FormItem>
                    <mx:FormItem>
                        <mx:Button label="Login" />
                    </mx:FormItem>
                </mx:Form>
            </mx:AddChild>
        </mx:State>
        <mx:State name="register">
            <mx:AddChild>
                <mx:Form id="registerForm">
                    <mx:FormHeading label="Register" />
                    <mx:FormItem label="Username:">
                        <mx:TextInput id="reg_username" />
                    </mx:FormItem>
                    <mx:FormItem label="Password:">
                        <mx:TextInput id="reg_password1"
                                displayAsPassword="true" />
                    </mx:FormItem>
                    <mx:FormItem label="Confirm password:">
                        <mx:TextInput id="reg_password2"
                                displayAsPassword="true" />
                    </mx:FormItem>
                    <mx:FormItem>
                        <mx:Button label="Register" />
                    </mx:FormItem>
                </mx:Form>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:transitions>
        <mx:Transition id="loginTransition"
                fromState="*"
                toState="login">
            <mx:WipeDown target="{loginForm}"/>
        </mx:Transition>
        <mx:Transition id="registerTransition"
                fromState="*"
                toState="register">
            <mx:WipeDown target="{registerForm}"/>
        </mx:Transition>
    </mx:transitions>

    <mx:Script>
        <![CDATA[
            import mx.events.ItemClickEvent;

            private function toggleButtonBar_itemClick(evt:ItemClickEvent):void {
                currentState = evt.item.data;
            }
        ]]>
    </mx:Script>

    <mx:Array id="dp">
        <mx:Object data="" label="Default state" />
        <mx:Object data="login" label="Login" />
        <mx:Object data="register" label="Register" />
    </mx:Array>

    <mx:ApplicationControlBar dock="true">
        <mx:ToggleButtonBar id="toggleButtonBar"
                dataProvider="{dp}"
                itemClick="toggleButtonBar_itemClick(event);" />
    </mx:ApplicationControlBar>

</mx:Application>

View source is enabled in the following example.

20 thoughts on “Creating view states in a Flex application

  1. Hello,

    Is it possible to Change the states with the Combo Selection?

    Thanks a lot
    PSamanth

  2. Is it possible to Change the states with the Combo Selection? so that I can show Different type of chart using same values

  3. Prashanth Samanth,

    I don’t think I understand the question. Are you asking whether it is possible to use a ComboBox instead of a ToggleButtonBar in the previous example?
    If so, yes.

    Peter

  4. I tried this out with Flex 3, and I am getting the following message:
    Type was not found or was not a compile-time constant: states.[Generated code (use -keep to save): Path: states-generated.as, Line:654, Column: 14]

    Any suggestions?

  5. I have the same error in Flex3:
    Type was not found or was not a compile-time constant: states… :(

  6. De Angela Duff / tyu,

    Which version of the Flex 3 SDK are you using? I tried in the SDK that shipped with Flex Builder 3 (3.0.0.477) and the code above worked.

    Peter

  7. Hello – Is there any reason why the mx:script CDATA block is not at the top of the code? Does it matter – apart from making it easier to find?
    P.s. The code runs fine for me in Flex Builder 3.

  8. Hello again,
    I am trying to load a gallery component – with images driven by xml – into one of the states, but Flash Player does not like it… Is it wrong to load something so complex inside a state?

  9. I’m having the same problem using States with Flex 3

    Error: Type was not found or was not a compile-time constant: states. [Generated code (use -keep to save): Path: states-generated.as, Line: 327, Column: 14]

    Using Flex SDK 3.2

  10. I’d like to return to the question Prashanth Samanth had about having a ComboBox to change states within an application. (I didn’t see an entry on this with a search of your site.)

    How would this be done? It doesn’t appear to be as easy as with a LinkButton. I’m shaky with eventListeners if they are needed!

  11. Hi, very interesting your example, and I like to ask’u if exists some example, about a complete applz? Well, I’m like to learn, how can develop a little application with flex.

  12. Hallo,

    i use Flex Builder 3, i’ve problems at make a continuous state change, i’d like to have a state change without being dependent on event, like button click.

    How can i make it?

    Many Thanks.
    Gabriele

  13. hi,

    i understand how states and transitions work, but I just cannot apply them to a whole component. it just does not work n the component, which is in a separate MXML file.

    &ltmx:transitions&gt
    &ltmx:Transition fromState=”*” toState=”*”&gt
    &ltmx:Resize duration=”400″/&gt
    &lt/mx:Transition&gt
    &lt/mx:transitions&gt

    &ltmx:states&gt
    &ltmx:State name=”sInitial”&gt
    &ltmx:RemoveChild target=”{project}”/&gt
    &lt/mx:State&gt
    &lt/mx:states&gt
    &lt:states /&gt

    &ltpf:Project id=”project” /&gt

  14. Hi,

    try to use states in a derivated application class. Flex shows the following error:
    “Could not resolve to a component implementation.”

    How I can use states in this case?

    For your help in advance thanks!

    Klaus

  15. Hello ,

    I hav a datagrid(A) in that there are two feilds (x,y)whhich has click optiona. On click of x feild – x feild related datagrid will be visible below the datagrid A, now if i click the y feild of the datagrid A then the Y related data grid should come above the x related datagrid Vice Versa . Please help me with a solutiion

  16. I am New to the Flex. i need to change one form to another first one contain login name & password and 2nd one contain just email to send password. the change must be clicking linkbutton “forgot password?”……….any on help me plz

  17. i developed the design….but dont getting view state…now i am pasting design code bellow:

    viewStates.mxml:

    ……

  18. Hallo Peter

    I can use the new Wipe effect only in transitions from one state to another state, but I cannot use it in a ViewStack, as I used with WipeLeft .
    Can you tell me please how should it be done?
    Thanks in advanced.

Comments are closed.