Flex Examples

The following example shows how you can disable the dividers in a Flex HDividedBox container by using the numDividers property, getDividerAt() method, and setting the visible property.

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.