<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*"
    layout="vertical" verticalAlign="middle" horizontalAlign="center" verticalGap="8"
    creationComplete="initData();"
    viewSourceURL="srcview/index.html">

    <mx:Style source="Styles.css"/>

    <mx:Script>
        <![CDATA[

            import mx.collections.ArrayCollection;

            private var dgArray:Array = [
            {account:'Test Account #01', startDate:'02/15/2005', status:'Active', accountBalance:21.55},
            {account:'Test Account #02', startDate:'03/05/2006', status:'Delinquent', accountBalance:-52.29},
            {account:'Test Account #03', startDate:'01/21/2004', status:'Closed', accountBalance:0},
            {account:'Test Account #04', startDate:'12/31/2001', status:'Active', accountBalance:19.95},
            {account:'Test Account #05', startDate:'03/05/2006', status:'Delinquent', accountBalance:-502.34},
            {account:'Test Account #06', startDate:'01/21/2004', status:'Closed', accountBalance:0},
            {account:'Test Account #07', startDate:'12/31/2001', status:'Active', accountBalance:19.95},
            {account:'Test Account #08', startDate:'03/05/2006', status:'Deleted', accountBalance:0},
            {account:'Test Account #09', startDate:'01/21/2004', status:'Closed', accountBalance:0},
            {account:'Test Account #10', startDate:'12/31/2001', status:'Active', accountBalance:319.88},
            {account:'Test Account #11', startDate:'09/01/2002', status:'Delinquent', accountBalance:-87.22}];

            [Bindable] private var dgArrayCollection:ArrayCollection;

            private function initData():void
            {
                dgArrayCollection=new ArrayCollection(dgArray);
            }

            private function startDateLabel(item:Object, column:DataGridColumn):String
            {
                return df.format(item.startDate);
            }

            private function accountBalanceLabel(item:Object, column:DataGridColumn):String
            {
                return cf.format(item.accountBalance);
            }

        ]]>
    </mx:Script>

    <mx:CurrencyFormatter id="cf" precision="2"/>
    <mx:DateFormatter id="df" formatString="MM/DD/YYYY"/>

    <mx:Label text="DataGrid rowColors Component Sample" width="100%"
        color="white" fontSize="14" fontWeight="bold" textAlign="center"/>

    <local:RowColorDataGrid id="dg" dataProvider="{dgArrayCollection}"
        width="500" height="310" borderThickness="2"
        styleName="rowColorsDataGrid">
        <local:columns>
            <mx:Array>
                <mx:DataGridColumn width="160" paddingLeft="6"
                    headerText="Account"
                    dataField="account"/>
                <mx:DataGridColumn width="120" textAlign="center"
                    headerText="Start Date"
                    dataField="startDate"
                    labelFunction="startDateLabel"/>
                <mx:DataGridColumn width="160" paddingLeft="6"
                    headerText="Status"
                    dataField="status"/>
                <mx:DataGridColumn width="80" textAlign="right"
                    headerText="Balance"
                    dataField="accountBalance"
                    labelFunction="accountBalanceLabel"/>
            </mx:Array>
        </local:columns>
    </local:RowColorDataGrid>

    <mx:Label text="(Right Click to View Source)" width="100%"
        color="white" fontSize="11" fontWeight="bold" textAlign="center"/>

</mx:Application>