Toggling a Flex container’s visibility

The following example shows a pretty crude method for toggling a container’s visibility and removing it from the Flex application layout. Mind you, this probably isn’t the preferred/recommended method of doing this (I imagine using states would be a lot nicer/cleaner) but hey, I’ll have to save that method up for another entry.

Full code after the jump.

View MXML

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

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

    <mx:Script>
        <![CDATA[
            [Bindable]
            [Embed(source="assets/help.png")]
            private var helpIcon:Class;
        ]]>
    </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="vbox2.visible = !vbox2.visible" />
        </mx:VBox>

        <mx:VBox id="vbox2"
                width="120"
                height="100%"
                backgroundColor="haloGreen"
                creationComplete="vbox2.visible = false"
                includeInLayout="{vbox2.visible}">
            <mx:Label text="VBox 2" />
        </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.

For an example of using states to toggle containers, see “Toggling a Flex container’s visibility using states”.

Tagged as: includeInLayout, visible