<?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>