The following example shows how you can programmatically resize an HDividedBox container in Flex using the moveDivider() and getDividerAt() methods.
Full code after the jump.
<?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.
Best flex blog ever
How to do the same with states/transitions? Is there any property to animate?
can we use transition in this….
I mean a smooth effect?
rconceiver,
Try something like this:
<mx:Resize id="resizeEffect" /> ... <mx:VBox backgroundColor="haloGreen" resizeEffect="{resizeEffect}" width="100%" height="100%">Seems to work OK for dragging, but it is a bit quirky if you hold down the “+20″ or “-20″ buttons (if that sort of thing matters to you).
Peter
Hhmm, there also seems to be a
liveDraggingproperty on the HDividedBox which works well for dragging, but seems to have conflicts with theresizeEffecttrick/hack.Peter
Thanks Peterd,
With Resize problem is solved..
Is there any way to control make the drag snap-to an interval? I want to do something like the slider where I set up, say, 50px intervals that the divider can move to. The example you provide on the button…
moveDivider(0, -20)
…is exactly the kind of effect I am looking for. Only I would like this to happen onDrag instead of onButtonClick. I’ve played around with the Divider Events but haven’t gotten very far.
Any idea? Many tahnks in advance!
-Ted
Sorry for the poor wording…
>> “Is there any way to control make the drag snap-to an interval?”
This should say — Is there any way to make the Divider snap-to an interval onDividerDrag?
:-)
I am running into an issue with programmatically setting the divider positions of an HDividerBox that has had children dynamically added to it. If you take the example above and add this method as a handler to
creationCompleteon the application you will see the issue:import mx.controls.Label; import mx.containers.VBox; private function init():void { var newChild:VBox = new VBox(); newChild.percentHeight = 100; newChild.percentWidth = 100; var label:Label = new Label(); label.text = "HELLO"; newChild.addChild( label ); hdivbox.addChild( newChild ); hdivbox.getDividerAt(0).x = 50; hdivbox.getDividerAt(1).x = 400; }What you end up with is that the first divider get’s positioned correctly, but the second divider does not. If I don’t set the dividers at all, they are all layed out with equal sizes. The issue seems to be due to the fact that the container needs to finish updating due to the addition of the new child before we can move the second divider.
I tried working around it by adding a listener that does the repositioning on the divider after the UPDATE_COMPLETE event on the dividedbox and then removes itself, but it doesn’t work consistently for multiple children.
I am wondering if you have run into this issue before and come up with any solutions?
Kelly Davis,
Try changing your code to something like this:
private function init():void { var newChild:VBox = new VBox(); newChild.percentHeight = 100; newChild.percentWidth = 100; newChild.setStyle("backgroundColor", "red"); var label:Label = new Label(); label.text = "HELLO"; newChild.addChild( label ); hdivbox.addChild( newChild ); callLater(resizer); } private function resizer():void { hdivbox.getDividerAt(0).x = 50; hdivbox.getDividerAt(1).x = 400; }Peter
Thanks for your reply. Using callLater doesn’t seem to do it either. The middle container gets squished by the right and left containers.
Interestingly, I added the resizer call to a button click. The first time I click the button and trigger resizer() I get the same behavior. If I click it again, then it works. So it looks like after adding the new child to the HDividedBox puts the container into a state that causes getDividerAt().x = ? to not work correctly.
I think I resolved this issue (sort of). I was overlooking the simple fact that if you want to set the initial state of the dividers, all you have to do is set the widths or heights of the child containers to what you need them to be, instead of calling the moveDivider() method.
Hi,
I was wondering is there a way to change the width/height of the DividedBox’s Divider? The Divider is approx. 10 pixels thick and I’d like to make it thinner but it seems there is no style for that, except dividerThickness which only applies to the line when the user drags the Divider. Changing the skin doesn’t change anything either.
@sascha/hdrs
Take a look at the “dividerAffordance” style of the DividedBox class (http://livedocs.adobe.com/flex/3/langref/mx/containers/DividedBox.html).
Actually, “dividerThickness”.