<?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:ApplicationControlBar dock="true">
        <!-- Move the divider 20 pixels to the left for as long as the
             Button control is pressed (autoRepeat=true). -->
        <mx:Button label="x-=20"
                autoRepeat="true"
                buttonDown="hdivbox.moveDivider(0, -20);" />
        <!-- Move the divider 20 pixels to the right for as long as the
             Button control is pressed (autoRepeat=true). -->
        <mx:Button label="x+=20"
                autoRepeat="true"
                buttonDown="hdivbox.moveDivider(0, 20);" />

        <mx:Spacer width="50" />

        <!-- Move the divider to 100 pixels from the left. -->
        <mx:Button label="x=100"
                click="hdivbox.getDividerAt(0).x = 100;" />
        <!-- Move the divider to 420 pixels from the left. -->
        <mx:Button label="x=420"
                click="hdivbox.getDividerAt(0).x = 420;" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hdivbox" width="100%" height="100%">
        <mx:VBox backgroundColor="haloGreen" width="100%" height="100%">
            <!-- children -->
        </mx:VBox>
        <mx:VBox backgroundColor="haloBlue" width="100%" height="100%">
            <!-- children -->
        </mx:VBox>
    </mx:HDividedBox>

</mx:Application>