Toggling a Flex container’s visibility using states

In a previous post, “Toggling a Flex container’s visibility”, we looked at toggling a VBox container’s visibility by setting both the visible property and includeInLayout property. While the approach felt a little crude, we can build the same thing using the much more powerful view states. What are view states and how do we use them? Well, if you’re new to states, this should clear everything up: “Adobe – Flex Quick Start Basics: Creating States”.

Now, with that out of the way, lets look at some code and a basic example.

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/24/toggling-a-flex-containers-visibility-using-states/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:transitions>
        <mx:Transition fromState="*" toState="*">
            <mx:Parallel targets="{[vbox2]}">
                <mx:WipeDown />
                <mx:Fade />
            </mx:Parallel>
        </mx:Transition>
    </mx:transitions>

    <mx:states>
        <mx:State name="expanded">
            <mx:AddChild relativeTo="{vbox1}" position="after">
                <mx:VBox id="vbox2"
                        width="120"
                        height="100%"
                        backgroundColor="haloGreen">
                    <mx:Label text="VBox 2" />
                </mx:VBox>
            </mx:AddChild>
        </mx:State>
    </mx:states>

    <mx:Style>
        VBox {
            paddingLeft: 10;
            paddingRight: 10;
            paddingTop: 10;
            paddingBottom: 10;
        }
    </mx:Style>

    <mx:Script>
        <![CDATA[
            import mx.effects.easing.*;

            [Bindable]
            [Embed(source="assets/help.png")]
            private var helpIcon:Class;

            private function toggleExpanded():void {
                switch (currentState) {
                    case "expanded":
                        currentState = "";
                        break;
                    default:
                        currentState = "expanded";
                        break;
                }
            }
        ]]>
    </mx:Script>

    <mx:HBox width="100%" height="100%">
        <mx:VBox id="vbox1"
                width="120"
                height="100%"
                backgroundColor="haloOrange">
            <mx:Label text="VBox 1" />
            <mx:Button label="Help"
                       icon="{helpIcon}"
                    click="toggleExpanded()" />
        </mx:VBox>

        <mx:VBox id="vbox3"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
            <mx:Label text="VBox 3" />
        </mx:VBox>
    </mx:HBox>

</mx:Application>

View source is enabled in the following example.

11 thoughts on “Toggling a Flex container’s visibility using states

  1. Hey Peter, I just wanted to give you some kudos. This is one of the most high quality, fresh, and content rich Flex blogs out there! Actually I’d give it the #1 rating.

    Thanks!

  2. This should be the most usefull blog for flex developers after adobe’s flex website.You were added to favourites. Thanks and waiting for more :)

  3. Exactly that i’m looking for. Thank for this example. Is it possible in a new example to add a VBox 4 witch appear between the VBox 2 and VBox 3 when you click on a new button put in the VBox 2. Thanks

  4. Started working with Flex. got stuck in the beginning itself..

    What I want is When you click on “Application Admin” Tab I want to show the “_tool_admin_que” State. And when I am in “_tool_admin_que” ( that is “Application Admin” tab) state and click on “Login” tab, I want to show “_login” state.

    How do I do it? Any help please? click event does not work on canvas. want to make the header work like a URL link.

  5. Great article, helped me a lot. I am stuck with a very odd problem though:

    Inside a component, I got a VBox that removes all its childs when you click (anwhere) on the VBox and adds some other childs. It basically removes some text and adds a button. When you click on that button which is located inside the state, it should switch back to the base state, but that does not work. It fires the event, but it does not jump into the base state via currentState=''. When the button is outside of the state, it works.

    Any help? Drives me mad… here is an extract of the code:

    <mx:State name="changeContent">
      <mx:RemoveChild target="{child1}"/>
      <mx:RemoveChild target="{child2}"/>
      ...
      <mx:AddChild relativeTo="{myVBox}">
        <mx:Button id="changeAgain" label="close" click="currentState='';" />
        ...
      </mx:AddChild>
      <mx:SetEventHandler target="{myVBox}" name="click" handler="{null}" />
      <mx:SetEventHandler target="{changeAgain}" name="click" handler="currentState='';" />
    </mxState>
    
    ...
    ...
    
    <mx:VBox id="myVBox" click="currentState='changeContent'" > ...</VBox>
    
    1. use the tag initially mentioning as .After that continue with ur original program as u have proceeded earlier.its work definitely.k

  6. @Jules:

    Have you tried using currentState=null? I know that’s supposed to be the Base State.

Comments are closed.