Disabling dividers in an HDividedBox container in Flex

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.

11 thoughts on “Disabling dividers in an HDividedBox container in Flex

  1. Hi,

    Is it possible to change only one of the dividers settings? I would like to have one with a determined gap size and the other with a different one, but I can only change this parameter in the dividedbox, any help?

  2. What if we wanted to make each hbox collapsable when clicked on to lets say 20px. The last hbox can not be collapsed because the HDividedBox wont resize automaticaly. That would be a good demo to show.

  3. Thank you so much Peter, this is exactly what I was looking for. You and your site are always so helpful for my flex needs. Thank you!

  4. This is great but I wish there was an easier way. It would be great if the HDividedBox simply had a boolean toggle to show/hide all the resize bars.

  5. Thank you very much !! but i got one little stupid question :(

    in you example you always make a checkbox but i want it to implement without offcourse the checkbox; What do i have to do in the code so it will run with the option of the checkbox

    What do we have to change in de script ?? Thank you for the help !!

  6. I would actually recommend using styles to hide the HDividedBox divider. You can do so by setting the divider-affordance and the divider-thickness. You can also adjust the gap between the divided children by setting the horizontal-gap style. Much more extensible than looping over the dividers with getDivider yourself.

    You can do this globally for all HDividedBoxs with a style like this:

    HDividedBox
    {
        horizontal-gap: 3;
        divider-affordance: 1;
        divider-thickness: 1;
    }
    

    Or just a subset by setting a style name like so:

    HDividedBox.mainViewHDividedBox
    {
        horizontal-gap: 3;
        divider-affordance: 1;
        divider-thickness: 1;
    }
    

    our HDividedBox would just need to have it’s stylename property set to mainViewHDividedBox like:

  7. Thank you so much Peter, this is exactly what I was looking for. Your site are always helpful for my flex needs. Thank you!

Comments are closed.