<?xml version="1.0" encoding="utf-8"?>
<mx:Application 
    xmlns:mx="http://www.adobe.com/2006/mxml"
    xmlns:qg="quoteGrid.*" 
    layout="absolute" 
    backgroundColor="#FFFFFF"
    backgroundGradientColors="[#FFFFFF,#FFFFFF]"
     viewSourceURL="srcview/index.html">
    
    <mx:Style source="styles.css" />
    
    <mx:Script>
        <![CDATA[
            import mx.controls.dataGridClasses.DataGridColumn;
            import model.Quote;
            import model.DataUtil;
            import mx.collections.ArrayCollection;
            [Bindable]
            private var quotes : ArrayCollection = DataUtil.generateData();
            
            private function priceFormat( item : Quote, col : DataGridColumn ) : String
            {
                return priceFormatter.format( item.price );;
            }
            
            private function percentFormat( item : Quote, col : DataGridColumn ) : String
            {
                return percentFormatter.format( item.percentChange ) + "%";
            }
        ]]>
    </mx:Script>
    
    <mx:CurrencyFormatter id="priceFormatter" />
    <mx:NumberFormatter id="percentFormatter" precision="2" />
    
    <qg:QuoteGrid
        id="dataGrid"
        top="0" left="0"
        bottom="30" right="0"
        dataProvider="{ quotes }"
        showHeaders="false"
        selectable="false"
        >
        
        <qg:columns>
            
            <mx:DataGridColumn width="10"
                               headerText="Symbol"
                               dataField="symbol"/>
            <mx:DataGridColumn width="10"
                               headerText="Price"
                               dataField="price"
                               textAlign="right"
                               labelFunction="priceFormat"/>
            <mx:DataGridColumn width="10"
                               headerText="% Change"
                               dataField="percentChange"
                               textAlign="right"
                               labelFunction="percentFormat"/>
            <mx:DataGridColumn width="20"
                               headerText="Chart"
                               dataField="percentChange"
                               itemRenderer="quoteGrid.ChartItemRenderer"/>
            
        </qg:columns>
        
    </qg:QuoteGrid>
    
    <mx:Button 
        left="0"
        bottom="0"
        label="Generate New Data"
        click="quotes = DataUtil.generateData()"/>
    
</mx:Application>