<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/12/setting-the-border-thickness-in-a-flex-panel-container/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Style>
		.nakedButton {
			skin: ClassReference(null);
		}
	</mx:Style>

	<mx:ApplicationControlBar dock="true">
		<mx:Form styleName="plain">
			<mx:FormItem label="borderThicknessLeft:"
					direction="horizontal">
				<mx:HSlider id="sliderLeft"
						minimum="0"
						maximum="50"
						value="10"
						snapInterval="1"
						tickInterval="10"
						liveDragging="true" />
				<mx:Label text="{sliderLeft.value}" />
			</mx:FormItem>
			<mx:FormItem label="borderThicknessRight:"
					direction="horizontal">
				<mx:HSlider id="sliderRight"
						minimum="0"
						maximum="50"
						value="10"
						snapInterval="1"
						tickInterval="10"
						liveDragging="true" />
				<mx:Label text="{sliderRight.value}" />
			</mx:FormItem>
			<mx:FormItem label="borderThicknessTop:"
					direction="horizontal">
				<mx:HSlider id="sliderTop"
						minimum="0"
						maximum="50"
						value="0"
						snapInterval="1"
						tickInterval="10"
						liveDragging="true" />
				<mx:Label text="{sliderTop.value}" />
			</mx:FormItem>
			<mx:FormItem label="borderThicknessBottom:"
					direction="horizontal">
				<mx:HSlider id="sliderBottom"
						minimum="0"
						maximum="50"
						value="10"
						snapInterval="1"
						tickInterval="10"
						liveDragging="true" />
				<mx:Label text="{sliderBottom.value}" />
			</mx:FormItem>
		</mx:Form>
	</mx:ApplicationControlBar>

	<mx:Panel id="panel"
			title="The quick brown fox jumped over the lazy dog."
			borderThicknessLeft="{sliderLeft.value}"
			borderThicknessRight="{sliderRight.value}"
			borderThicknessTop="{sliderTop.value}"
			borderThicknessBottom="{sliderBottom.value}"
			layout="absolute"
			width="100%" height="100%">

		<mx:Label text="Hello world" x="-100" />

		<mx:Button label="borderThicknessLeft"
				labelPlacement="right"
				icon="@Embed('assets/arrow_left.png')"
				styleName="nakedButton"
				left="0"
				verticalCenter="0"
				toolTip="{sliderLeft.value}"
				errorString="{sliderLeft.value}" />

		<mx:Button label="borderThicknessRight"
				labelPlacement="left"
				icon="@Embed('assets/arrow_right.png')"
				styleName="nakedButton"
				right="0"
				verticalCenter="0" />

		<mx:Button label="borderThicknessTop"
				labelPlacement="bottom"
				icon="@Embed('assets/arrow_up.png')"
				styleName="nakedButton"
				top="0"
				horizontalCenter="0" />

		<mx:Button label="borderThicknessBottom"
				labelPlacement="top"
				icon="@Embed('assets/arrow_down.png')"
				styleName="nakedButton"
				bottom="0"
				horizontalCenter="0" />

	</mx:Panel>

</mx:Application>