<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml" 
    layout="absolute" 
    backgroundColor="#FFFFFF"
    backgroundGradientColors="[#FFFFFF,#FFFFFF]"
    creationComplete="handleCreationComplete()"
     viewSourceURL="srcview/index.html">
    
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            
            [Bindable]
            public var someData:ArrayCollection = new ArrayCollection();
            
            public function handleCreationComplete():void
            {
                for( var i:int = 0; i < 5; i++ )
                {
                    var o:MyObject = new MyObject();
                    o.date = new Date();
                    o.someNumber = i * 160;
                    o.someStatus = 'SOLD';
                    o.someString = 'Description of something';
                    someData.addItem( o );
                }
            }
        ]]>
    </mx:Script>
    
    <mx:VBox
        width="50%"
        height="50%"
        >
        <mx:Label text="Styled Datagrid Headers with degrafa, hover over the column header words" />
        <mx:DataGrid
            dataProvider="{ someData }"
            width="100%"
            height="100%"
            selectable="false"
            resizableColumns="false"
            verticalGridLines="false"
            dropShadowEnabled="false"
            headerBackgroundSkin="skins.TransparentSkin"
            borderStyle="none" 
            verticalGridLineColor="#FFFFFF"
            rollOverColor="#FFFFFF"
            selectionColor="#FFFFFF"
            headerSeparatorSkin="skins.TransparentSkin"
            draggableColumns="false"
            >
            <mx:columns>
                <mx:DataGridColumn
                    headerText="DATE"
                    dataField="date"
                    headerRenderer="view.renderers.DataGridHeaderRenderer"
                    />
                <mx:DataGridColumn
                    headerText="SOME NUMBER"
                    dataField="someNumber"
                    headerRenderer="view.renderers.DataGridHeaderRenderer"
                    />
                <mx:DataGridColumn
                    headerText="SOME STRING"
                    dataField="someString"
                    headerRenderer="view.renderers.DataGridHeaderRenderer"
                    />
                <mx:DataGridColumn
                    headerText="SOME STATUS"
                    dataField="someStatus"
                    headerRenderer="view.renderers.DataGridHeaderRenderer"
                    />
            </mx:columns>
        </mx:DataGrid>
        <mx:Label text="Default Datagrid" />
        <mx:DataGrid
            dataProvider="{ someData }"
            width="100%"
            height="100%"
            selectable="false"
            resizableColumns="false"
            verticalGridLines="false"
            dropShadowEnabled="false"
            >
            <mx:columns>
                <mx:DataGridColumn
                    headerText="DATE"
                    dataField="date"
                    />
                <mx:DataGridColumn
                    headerText="SOME NUMBER"
                    dataField="someNumber"
                    />
                <mx:DataGridColumn
                    headerText="SOME STRING"
                    dataField="someString"
                    />
                <mx:DataGridColumn
                    headerText="SOME STATUS"
                    dataField="someStatus"
                    />
            </mx:columns>
        </mx:DataGrid>
    </mx:VBox>
    
</mx:Application>