<?xml version="1.0" encoding="utf-8"?>
<!--
@LICENSE@
-->
<!--

ProgressBarExample02.mxml

@PROJECT_BLOCK@

-->
<!---
* A sample of the com.teotigraphix.ui.components.ProgressBar.
* 
* @title ProgressBar Sample 2
* @tip Use <code>setProgressSecondary()</code> to update the current value of progress.
* @tip Use the <code>PROGRESS</code> and <code>COMPLETE</code> events to monitor
* progress status.
* @tip Use the <code>primaryColors</code>, <code>primaryAlphas</code>, <code>secondaryColors</code>
* and <code>secondaryAlphas</code> styles to differentiate the primary and secondary progress
* bars.
* @tip Use the <code>cornerRadius</code> style to round the ProgressBar's corners.
* @source
* @mobile
* @image assets/examples/common/ProgressBarExample02_160.png 
* <strong>160DPI</strong>
* @image assets/examples/common/ProgressBarExample02_240.png 
* <strong>240DPI</strong>
* @image assets/examples/common/ProgressBarExample02_320.png 
* <strong>320DPI</strong> - Notice the border and width scale with the DPI change.
* @front
-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
        xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:tg="http://tg.teotigraphix.com/flex4"
        title="ProgressBar Sample 2">

    <fx:Script>
        <![CDATA[
            import com.teotigraphix.ui.components.supportClasses.ProgressBarDirection;
            import com.teotigraphix.ui.events.ProgressBarEvent;
            
            /**
             * Uses setProgress() to update the ProgressBar.
             */
            protected function idProgress_clickHandler(event:MouseEvent):void
            {
                var value:Number = isNaN(idProgressBar.value) ? 0 : idProgressBar.value;
                idProgressBar.setProgress(value + 10, 100);
            }
            
            /**
             * Uses setProgressSecondary() to update the ProgressBar.
             */
            protected function idProgressSecondary_clickHandler(event:MouseEvent):void
            {
                var value:Number = isNaN(idProgressBar.secondaryValue) ? 0 : idProgressBar.secondaryValue;
                idProgressBar.setProgressSecondary(value + 10, 100);
            }
            
            /**
             * Updates the secondary progress status.
             */
            protected function idProgressBar_progressHandler(event:ProgressBarEvent):void
            {
                var label:Label = event.type == ProgressBarEvent.PROGRESS ? idStatusPrimary : idStatusSecondary;
                label.text = event.progress + "% Complete [" + event.type + "]";
            }
            
            /**
             * Marks the secondary progress status complete.
             */
            protected function idProgressBar_completeHandler(event:ProgressBarEvent):void
            {
                var label:Label = event.type == ProgressBarEvent.COMPLETE ? idStatusPrimary : idStatusSecondary;
                label.text = "Complete [" + event.type + "]";
            }
            
            /**
             * Resets the progress status to 0.
             */
            protected function idReset_clickHandler(event:MouseEvent):void
            {
                idProgressBar.setProgress(0, 0);
                idProgressBar.setProgressSecondary(0, 0);
            }
            
            protected function idCornerRadius_changeHandler(event:Event):void
            {
                idProgressBar.setStyle("cornerRadius", idCornerRadius.value);
            }
            
        ]]>
    </fx:Script>
    
    <s:layout>
        <s:VerticalLayout paddingTop="25" horizontalAlign="center"/>
    </s:layout>
    
    <!--- Change the progress value. -->
    <s:Button id="idProgress" 
              label="Set progress by 10" 
              click="idProgress_clickHandler(event)"/>
    
    <!--- Change the progress secondary value. -->
    <s:Button id="idProgressSecondary" 
              label="Set secondary progress by 10" 
              click="idProgressSecondary_clickHandler(event)"/>
    
    <!--- The ProgressBar. -->
    <tg:ProgressBar id="idProgressBar" 
                    chromeColor="#F0F0F0"
                    cornerRadius="0"
                    primaryAlphas="[0.5, 0.4]"
                    secondaryColors="[#FFCC00, #FF0000]"
                    progress="idProgressBar_progressHandler(event)"
                    complete="idProgressBar_completeHandler(event)"
                    progressSecondary="idProgressBar_progressHandler(event)"
                    completeSecondary="idProgressBar_completeHandler(event)"
                    height="25"/>
    
    <!--- Primary status text. -->
    <s:Label id="idStatusPrimary"
             text="Waiting"/>
    
    <!--- Secondary status text. -->
    <s:Label id="idStatusSecondary"
             text="Waiting"/>
    
    <!--- Resets the ProgressBar's value to 0. -->
    <s:Button id="idReset"
              label="Reset"
              click="idReset_clickHandler(event)"/>
    
    <s:Label text="Set cornerRadius"/>
    
    <!--- Change the cornerRadius style. -->
    <s:HSlider id="idCornerRadius"
               minimum="0" maximum="10"
               change="idCornerRadius_changeHandler(event)"/>
    
</s:View>