<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" width="500" height="375" backgroundGradientAlphas="[1.0, 1.0]" backgroundGradientColors="[#FFA800, #FFD200]" 
    xmlns:controls="com.tsclausing.controls.*" 
    xmlns:formatters="com.tsclausing.formatters.*" 
    viewSourceURL="srcview/index.html">
    
    
    <!--
        Formatters
    -->
    <mx:CurrencyFormatter id="currencyFormatter"
        useThousandsSeparator="true"
        currencySymbol="$"
        precision="2"/>
    
    <formatters:DateFormatterUTC id="dateFormatterUTC"
        formatString="MMMM D, YYYY JJ:NN (EEEE)"/>
    
    
    <!--
        View
    -->
    <mx:Panel title="FormattedStepper extends NumericStepper" 
        x="10" y="10" width="480" height="355" 
        layout="absolute" 
        borderStyle="solid" 
        borderColor="#777777" 
        borderThickness="2">
        
        <!--
            With no formatter
        -->
        <mx:Label text="No formatter (default)"
            x="10" y="45"/>
        <controls:FormattedStepper x="166" y="43" width="100"/>
        
        <!--
            with currency formatter
        -->
        <mx:Label text="CurrencyFormatter"
            x="10" y="73"/>
        <controls:FormattedStepper x="166" y="71" width="100"
            maximum="10000" 
            value="1000"
            stepSize="0.01"
            formatter="{currencyFormatter}"/>
        <mx:Text x="166" y="101" 
            text="&lt;mx:CurrencyFormatter id=&quot;cf&quot; ... /&gt;&#xd;&lt;controls:FormattedStepper formatter=&quot;\{cf\}&quot; ... /&gt;" 
            width="300" height="36"/>
        
        <!--
            With custom UTC date formatter located in com.tsclausing.formatters package
        -->
        <mx:Label text="DateFormatterUTC"
            x="10" y="147"/>
        <controls:FormattedStepper id="dateStepper"
            x="166" y="145" width="300"
            value="{new Date().time}"
            formatter="{dateFormatterUTC}"
            maximum="1000000000000000000000000"
            stepSize="{60000*60}"/>
            <!-- ^ one hour ^-->
        <mx:Text x="166" y="175" 
            text="^ Or create a custom formatter extending the Formatter class.  It's that simple." 
            width="300" height="36"/>
        

        <!--
            As item renderer and/or editor using the reusable component below
        -->
        <mx:Label text="Item renderer / editor"
            x="10" y="222"/>
        <mx:DataGrid id="dg"
            editable="true"
            dataProvider="{dataAC}"
            x="166" y="219" height="122" width="300">
            <mx:columns>
                <mx:DataGridColumn headerText="Product Name" 
                    width="200" dataField="label" editable="false"/>
                <!--
                    When using the component as an editor, set the 
                    editorDataField equal to the target value - this value
                    will replace the current value in the dataField
                -->
                <mx:DataGridColumn headerText="Price"
                    dataField="price"
                    editorDataField="newValue"
                    itemRenderer="{formattedCurrencyStepperRendererEditor}"
                    rendererIsEditor="true"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:Label x="10" y="244" text="Price value ="/>
        <mx:List x="95" y="241" height="100" width="63" rowHeight="25" dataProvider="{dataAC}" labelField="price" selectable="false"></mx:List>
    </mx:Panel>
    
    
    <!--
        Component that can be used as an item renderer or editor 
        in list based controls.
    -->
    <mx:Component id="formattedCurrencyStepperRendererEditor">
        <mx:Canvas>
            <mx:Script>
                <![CDATA[
                    import com.tsclausing.controls.FormattedStepper;
                    /**
                     * Expose the value:
                     */
                    public function set newValue (value:Number):void {
                        stepper.value = value;
                    }
                    public function get newValue ():Number {
                        return stepper.value;
                    }
                ]]>
            </mx:Script>
            <mx:CurrencyFormatter id="currencyFormatter"
                useThousandsSeparator="true"
                currencySymbol="$"
                precision="2"/>
            <controls:FormattedStepper id="stepper"
                width="100%"
                maximum="100" 
                value="{Number(data.price)}"
                stepSize="0.01"
                formatter="{currencyFormatter}"/>
        </mx:Canvas>
    </mx:Component>
    
    
    <!-- 
        Data provider for DataGrid
    -->
    <mx:ArrayCollection id="dataAC">
        <mx:Object label="Product 1" price="10.34"/>
        <mx:Object label="Product 2" price="33.50"/>
        <mx:Object label="Product 3" price="2.99"/>
    </mx:ArrayCollection>
    
</mx:Application>