<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/10/02/positioning-controls-in-flex-3-using-constraint-columns/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:ApplicationControlBar dock="true">
		<mx:Form>
			<mx:FormItem label="col1 width:">
				<mx:HSlider id="slider1"
						minimum="50"
						maximum="250"
						value="200"
						liveDragging="true"
						snapInterval="1"
						tickInterval="20"
						dataTipPrecision="0" />
			</mx:FormItem>
			<mx:FormItem label="col2 width:">
				<mx:HSlider id="slider2"
						minimum="50"
						maximum="250"
						value="200"
						liveDragging="true"
						snapInterval="1"
						tickInterval="20"
						dataTipPrecision="0" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:Canvas width="100%">
		<mx:constraintColumns>
			<mx:ConstraintColumn id="col1" width="{slider1.value}" />
			<mx:ConstraintColumn id="col2" width="{slider2.value}" />
		</mx:constraintColumns>

		<mx:Button label="OK" left="col1:0" right="col1:0" />
		<mx:Button label="Cancel" left="col2:0" right="col2:0"/>
	</mx:Canvas>

</mx:Application>

