<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2008/01/02/changing-the-fill-colors-of-a-buttonbar-control-in-flex/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">

	<mx:Style>
		.allButtons2 {
			/* Creates a gradient from red/orange when button is in the
			   "out" state. */
			fillColors: red, haloOrange;
		}

		.allButtons4 {
			/* Creates a gradient from red/orange when button is in the
			   "out" state. Creates a gradient from green/blue when 
			   button is in the "over" state. */
			fillColors: red, haloOrange, haloGreen, haloBlue;
		}
		
		.allButtonsSolid {
			fillColors: red, red;
		}
		
		.allButtonsSolidOpaque {
			fillAlphas: 1.0, 1.0;
			fillColors: red, red;
		}
	</mx:Style>

	<mx:ViewStack id="viewStack"
			visible="false"
			includeInLayout="false">
		<mx:VBox label="One">
			<mx:Label text="One" />
		</mx:VBox>
		<mx:VBox label="Two">
			<mx:Label text="Two" />
		</mx:VBox>
		<mx:VBox label="Three">
			<mx:Label text="Three" />
		</mx:VBox>
	</mx:ViewStack>

	<mx:Form>
		<mx:FormItem label="2 fill colors defined:">
			<mx:ButtonBar id="buttonBar2"
					buttonStyleName="allButtons2"
					dataProvider="{viewStack}" />
		</mx:FormItem>
		<mx:FormItem label="4 fill colors defined:">
			<mx:ButtonBar id="buttonBar4"
					buttonStyleName="allButtons4"
					dataProvider="{viewStack}" />
		</mx:FormItem>
		<mx:FormItem label="solid fill:">
			<mx:ButtonBar id="buttonBarSolid"
					buttonStyleName="allButtonsSolid"
					dataProvider="{viewStack}" />
		</mx:FormItem>
		<mx:FormItem label="solid opaque fill:">
			<mx:ButtonBar id="buttonBarSolidOpaque"
					buttonStyleName="allButtonsSolidOpaque"
					dataProvider="{viewStack}" />
		</mx:FormItem>
	</mx:Form>

</mx:Application>
