Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_getDividerAt_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx < len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="Disable dividers:"
                labelPlacement="left"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hDividedBox"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                width="100%"
                height="100%"
                backgroundColor="haloGreen">
        </mx:HBox>
        <mx:HBox id="hBox2"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
        </mx:HBox>
        <mx:HBox id="hBox3"
                width="100%"
                height="100%"
                backgroundColor="haloOrange">
        </mx:HBox>
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

Due to popular demand, here is the “same” example in a more ActionScript friendly format:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_getDividerAt_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white"
        initialize="init();">

    <mx:Script>
        <![CDATA[
            import mx.containers.ApplicationControlBar;
            import mx.containers.HBox;
            import mx.containers.HDividedBox;
            import mx.controls.ButtonLabelPlacement;
            import mx.controls.CheckBox;

            private var checkBox:CheckBox;
            private var hBox1:HBox;
            private var hBox2:HBox;
            private var hBox3:HBox;
            private var hDividedBox:HDividedBox;

            private function init():void {
                checkBox = new CheckBox();
                checkBox.label = "Disable dividers:";
                checkBox.labelPlacement = ButtonLabelPlacement.LEFT;
                checkBox.addEventListener(Event.CHANGE,
                            checkBox_change);

                var appControlBar:ApplicationControlBar;
                appControlBar = new ApplicationControlBar();
                appControlBar.dock = true;
                appControlBar.addChild(checkBox);
                addChildAt(appControlBar, 0);

                hBox1 = new HBox();
                hBox1.percentWidth = 100;
                hBox1.percentHeight = 100;
                hBox1.setStyle("backgroundColor", "haloGreen");

                hBox2 = new HBox();
                hBox2.percentWidth = 100;
                hBox2.percentHeight = 100;
                hBox2.setStyle("backgroundColor", "haloBlue");

                hBox3 = new HBox();
                hBox3.percentWidth = 100;
                hBox3.percentHeight = 100;
                hBox3.setStyle("backgroundColor", "haloOrange");

                hDividedBox = new HDividedBox();
                hDividedBox.percentWidth = 100;
                hDividedBox.percentHeight = 100;
                hDividedBox.addChild(hBox1);
                hDividedBox.addChild(hBox2);
                hDividedBox.addChild(hBox3);
                addChild(hDividedBox);
            }

            private function checkBox_change(evt:Event):void {
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx < len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
            }
        ]]>
    </mx:Script>

</mx:Application>

If you want to remove the gap between the HDividedBox children after disabling the dividers, you can set the horizontalGap style, as seen in the following example:

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/10/11/disabling-dividers-in-an-hdividedbox-container-in-flex/ -->
<mx:Application name="HDividedBox_getDividerAt_test"
        xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

    <mx:Script>
        <![CDATA[
            private function checkBox_change(evt:Event):void {
                var hGap:Class = hDividedBox.getStyle("dividerSkin");
                var value:Boolean = !checkBox.selected;
                var idx:uint;
                var len:uint = hDividedBox.numDividers;
                for (idx = 0; idx < len; idx++) {
                    hDividedBox.getDividerAt(idx).visible = value;
                }
                if (value) {
                    hDividedBox.setStyle("horizontalGap", hGap.width);
                } else {
                    hDividedBox.setStyle("horizontalGap", 0);
                }
            }
        ]]>
    </mx:Script>

    <mx:ApplicationControlBar dock="true">
        <mx:CheckBox id="checkBox"
                label="Disable dividers:"
                labelPlacement="left"
                change="checkBox_change(event);" />
    </mx:ApplicationControlBar>

    <mx:HDividedBox id="hDividedBox"
            minHeight="100"
            width="100%"
            height="100%">
        <mx:HBox id="hBox1"
                minWidth="20"
                width="100%"
                height="100%"
                backgroundColor="haloGreen">
        </mx:HBox>
        <mx:HBox id="hBox2"
                minWidth="20"
                width="100%"
                height="100%"
                backgroundColor="haloBlue">
        </mx:HBox>
        <mx:HBox id="hBox3"
                minWidth="20"
                width="100%"
                height="100%"
                backgroundColor="haloOrange">
        </mx:HBox>
    </mx:HDividedBox>

</mx:Application>

View source is enabled in the following example.

 

Full code after the jump.

View MXML

<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/09/programmatically-resizing-a-flex-hdividedbox-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
        layout="vertical"
        verticalAlign="middle"
        backgroundColor="white">

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

View source is enabled in the following example.

In the previous example, the moveDivider() method is used to move the divider relative to its current position. So, calling moveDivider(0, 20) moves the first (and only) divider 20 pixels to the right. To move the divider 20 pixels to the right, you’d pass a negative value for the second parameter, like so:

moveDivider(0, -20)

To set the divider to a specific point, you can use the getDividerAt() method and set the divider’s x property (for a horizontal divided box, if you were using a vertical divided box you would set the y property instead). So again in the previous example, you would use the following code to set the first divider to 100 pixels from the left edge:

hdivbox.getDividerAt(0).x = 100;

If you wanted to force the nested VBox containers to have a minimum or maximum width, simply set the minWidth and/or maxWidth properties, as seen in the following snippet:

<mx:VBox backgroundColor="haloGreen"
        width="100%"
        height="100%"
        minWidth="50"
        maxWidth="250">
    <!-- children -->
</mx:VBox>

Now when you resize the HDividedBox container’s divider, the green VBox container will be at least 50 pixels wide and at most 250 pixels wide.