<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white" viewSourceURL="srcview/index.html">

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