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.
<?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:
<?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:
<?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.
Peter deHaan
Peter deHaan currently works for Adobe on the Flex SDK QA team. While not working on Flex, Flash, and ColdFusion applications, Peter enjoys making up bios and writing in 3rd person. Peter's rarely updated blog can be found at blogs.adobe.com/pdehaan/, actionscriptexamples.com, airexamples.com, and coldfusionexamples.com.
Share
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?
Luis Ramos,
Sorry, I don’t believe it is possible to set separate horizontal gap widths in an HDividedBox or HBox container.
You could try filing an enhancement request at http://bugs.adobe.com/flex/
Peter
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.
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!
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.
Thanks for this example, i was looking for this problem.
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 !!
without the option of the checkbox offcourse excuse me .
Its very nice example which exactly suits my requirement. Thanks
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:
Thank you so much Peter, this is exactly what I was looking for. Your site are always helpful for my flex needs. Thank you!