The following example shows how you can adjust the horizontal padding between children in a Flex HDividedBox container by setting the horizontalGap style.
Full code after the jump.
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:"
direction="horizontal">
<mx:HSlider id="slider"
minimum="6"
maximum="20"
value="10"
snapInterval="1"
tickInterval="1"
liveDragging="true" />
<mx:Label text="{slider.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:HDividedBox id="dividedBox"
horizontalGap="{slider.value}"
width="100%"
height="100%">
<mx:Box id="box1"
backgroundColor="haloGreen"
width="100%"
height="100%"
minWidth="100" />
<mx:Box id="box2"
backgroundColor="haloBlue"
width="100%"
height="100%"
minWidth="100" />
</mx:HDividedBox>
</mx:Application>
View source is enabled in the following example.
You can also set the horizontalGap style in an external .CSS file or <mx:Style /> block, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Style>
HDividedBox {
horizontalGap: 6;
}
</mx:Style>
<mx:HDividedBox id="dividedBox"
width="100%"
height="100%">
<mx:Box id="box1"
backgroundColor="haloGreen"
width="100%"
height="100%"
minWidth="100" />
<mx:Box id="box2"
backgroundColor="haloBlue"
width="100%"
height="100%"
minWidth="100" />
</mx:HDividedBox>
</mx:Application>
Or, you can set the horizontalGap style using ActionScript, as seen in the following example:
<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_test"
xmlns:mx="http://www.adobe.com/2006/mxml"
layout="vertical"
verticalAlign="middle"
backgroundColor="white">
<mx:Script>
<![CDATA[
import mx.events.SliderEvent;
private function slider_change(evt:SliderEvent):void {
dividedBox.setStyle("horizontalGap", evt.value);
}
]]>
</mx:Script>
<mx:ApplicationControlBar dock="true">
<mx:Form styleName="plain">
<mx:FormItem label="horizontalGap:"
direction="horizontal">
<mx:HSlider id="slider"
minimum="6"
maximum="20"
value="10"
snapInterval="1"
tickInterval="1"
liveDragging="true"
change="slider_change(event);" />
<mx:Label text="{slider.value}" />
</mx:FormItem>
</mx:Form>
</mx:ApplicationControlBar>
<mx:HDividedBox id="dividedBox"
width="100%"
height="100%">
<mx:Box id="box1"
backgroundColor="haloGreen"
width="100%"
height="100%"
minWidth="100" />
<mx:Box id="box2"
backgroundColor="haloBlue"
width="100%"
height="100%"
minWidth="100" />
</mx:HDividedBox>
</mx:Application>
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/09/22/setting-the-padding-between-children-in-a-dividedbox-in-flex/ -->
<mx:Application name="HDividedBox_horizontalGap_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.Box;
import mx.containers.Form;
import mx.containers.FormItem;
import mx.containers.FormItemDirection;
import mx.containers.HDividedBox;
import mx.controls.HSlider;
import mx.controls.Label;
import mx.events.SliderEvent;
private var slider:HSlider;
private var dividedBox:HDividedBox;
private var box1:Box;
private var box2:Box;
private var lbl:Label;
private function init():void {
slider = new HSlider();
slider.minimum = 6;
slider.maximum = 20;
slider.value = 10;
slider.snapInterval = 1;
slider.tickInterval = 1;
slider.liveDragging = true;
slider.addEventListener(SliderEvent.CHANGE, slider_change);
lbl = new Label();
var formItem:FormItem = new FormItem();
formItem.label = "horizontalGap:";
formItem.direction = FormItemDirection.HORIZONTAL;
formItem.addChild(slider);
formItem.addChild(lbl);
var form:Form = new Form();
form.styleName = "plain";
form.addChild(formItem);
var appControlBar:ApplicationControlBar;
appControlBar = new ApplicationControlBar();
appControlBar.dock = true;
appControlBar.addChild(form);
addChildAt(appControlBar, 0);
box1 = new Box();
box1.percentWidth = 100;
box1.percentHeight = 100;
box1.minWidth = 100;
box1.setStyle("backgroundColor", "haloGreen");
box2 = new Box();
box2.percentWidth = 100;
box2.percentHeight = 100;
box2.minWidth = 100;
box2.setStyle("backgroundColor", "haloBlue");
dividedBox = new HDividedBox();
dividedBox.percentWidth = 100;
dividedBox.percentHeight = 100;
dividedBox.addChild(box1);
dividedBox.addChild(box2);
addChild(dividedBox);
}
private function slider_change(evt:SliderEvent):void {
dividedBox.setStyle("horizontalGap", evt.value);
lbl.text = evt.value.toString();
}
]]>
</mx:Script>
</mx:Application>
Any suggestions on how to implement a divided box with 0 padding (gap)?
I’d like to be able to resize the box but it’s very important that the gap is 0px. When set to 0px, the handles disappear making it impossible to resize.
Thanks for the great blog.
Andrew.