Flex Examples

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.