Toggling a Flex container’s visibility using states

by Peter deHaan on August 24, 2007

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.

Tagged as: currentState, state, transitions

{ 8 comments… read them below or add one }

Charly August 24, 2007 at 9:11 am

Me, too ;-)

Flex Bookmarks August 25, 2007 at 1:44 am

This is great for starters, we have added your blog.

victor August 28, 2007 at 4:26 am

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 :)

pierre August 30, 2007 at 8:39 am

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

Sunny January 2, 2008 at 4:09 pm

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.

Jules August 20, 2008 at 8:24 am

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>

Anonymous September 29, 2009 at 11:25 pm: use the tag initially mentioning as .After that continue with ur original program as u have proceeded earlier.its work definitely.k

Reply

Ivan May 7, 2009 at 6:20 pm