<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/08/setting-horizontal-and-vertical-gaps-between-buttons-in-a-flex-buttonbar-control/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="horizontal"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Array id="arr">
		<mx:Object label="The" />
		<mx:Object label="quick" />
		<mx:Object label="brown" />
		<mx:Object label="fox" />
	</mx:Array>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="horizontalGap:" direction="horizontal">
				<mx:HSlider id="slider"
						minimum="-2"
						maximum="10"
						value="0"
						liveDragging="true"
						snapInterval="1"
						tickInterval="1" />
				<mx:Label text="{slider.value}" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:ButtonBar id="buttonBar"
			dataProvider="{arr}"
			horizontalGap="{slider.value}"
			direction="horizontal" />

</mx:Application>

