<?xml version="1.0" encoding="utf-8"?>
<!-- http://blog.flexexamples.com/2007/08/28/styling-the-flex-datagrid-control-using-a-custom-separator-skins/ -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
		layout="vertical"
		verticalAlign="middle"
		backgroundColor="white" viewSourceURL="srcview/index.html">
		
	<mx:Script>
		<![CDATA[
			[Bindable]
			[Embed(source="./assets/redbluebar.gif")]
			private var RedBlueBar:Class;

			[Bindable]
			[Embed(source="./assets/greencircle.png")]
			private var GreenCircle:Class;
		]]>
	</mx:Script>
	
	<mx:Style>
		.centered {
			fontWeight: bold;
			textAlign: center;
		}
	</mx:Style>
	
	<mx:Array id="arr">
		<mx:Object country="USA"
				gold="35" 
				silver="39" 
				bronze="29" />
		<mx:Object country="China" 
				gold="32" 
				silver="17" 
				bronze="14" />
		<mx:Object country="Russia" 
				gold="27" 
				silver="27" 
				bronze="38" />
	</mx:Array>

	<mx:ApplicationControlBar dock="true">
		<mx:CheckBox id="hGridLines"
				label="horizontalGridLines"
				selected="true" />

		<mx:Spacer width="50" />

		<mx:CheckBox id="vGridLines"
				label="verticalGridLines"
				selected="true" />
	</mx:ApplicationControlBar>

	<mx:DataGrid id="dataGrid"
			dataProvider="{arr}"
			headerStyleName="centered"
			headerSeparatorSkin="{GreenCircle}"
			horizontalSeparatorSkin="{RedBlueBar}"
			horizontalGridLines="{hGridLines.selected}"
			verticalSeparatorSkin="{RedBlueBar}"
			verticalGridLines="{vGridLines.selected}">
		<mx:columns>
			<mx:DataGridColumn dataField="country"
					headerText="Country:" 
					textAlign="left" />
			<mx:DataGridColumn dataField="gold" 
					headerText="Gold:" 
					textAlign="right" />
			<mx:DataGridColumn dataField="silver" 
					headerText="Silver:" 
					textAlign="right" />
			<mx:DataGridColumn dataField="bronze" 
					headerText="Bronze:" 
					textAlign="right" />
		</mx:columns>
	</mx:DataGrid>
	
</mx:Application>