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

RatingBarExample01.mxml

@PROJECT_BLOCK@

-->
<!---
* A sample of the RatingBar component.
* 
* @title RatingBar Example 1
* @tip Use the snapInterval to lock rating divisions.
* @tip Use media quiries to set different iconWidth and iconHeight for DPIs.
* @tip Use the numItems property to set the amount of visible ratings.
* @source
* @front
* @mobile
* @image assets/examples/toolkit1/RatingBarExample01_160.png 
* @author Michael Schmalle
* @copyright Teoti Graphix, LLC
-->
<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="RatingBarExampl01" >
    
    <fx:Script>
        <![CDATA[
            protected function button1_clickHandler(event:MouseEvent):void
            {
                idRatingBar.setProgress(70, idRatingBar.maximum);
            }
            
            protected function idSnapInterval_changeHandler(event:Event):void
            {
                idRatingBar.snapInterval = (idSnapInterval.selected) ? 2 : 0;
            }
            
        ]]>
    </fx:Script>
    
    <fx:Style>
        @namespace s "library://ns.adobe.com/flex/spark";
        @namespace tg "http://tg.teotigraphix.com/flex4";
        
        @media (application-dpi:160) {
            .ratingStyles {
                iconWidth:40;
                iconHeight:40;
            }
        }
        
        @media (application-dpi:240) {
            .ratingStyles {
                iconWidth:60;
                iconHeight:60;
            }
        }
        
        @media (application-dpi:320) {
            .ratingStyles {
                iconWidth:80;
                iconHeight:80;
            }
        }
        
    </fx:Style>
    
    <s:layout>
        <s:VerticalLayout paddingTop="25" horizontalAlign="center"/>
    </s:layout>
    
    <tg:RatingBar id="idRatingBar"
                  numItems="10"
                  snapInterval="0.1"
                  chromeColor="#FFFFFF"
                  styleName="ratingStyles"
                  rating="4"/>
    
    <s:Label text="{idRatingBar.rating} rating"/>
    
    <s:Button label="Set rating 7" 
              click="button1_clickHandler(event)"/>
    
    <s:CheckBox id="idSnapInterval" 
                label="Snap interval 2" 
                change="idSnapInterval_changeHandler(event)"/>
    
    <tg:RatingBar id="idRatingBar2" foregroundIconColor="#66EF14"
                  chromeColor="#FF0000" rating="45"
                  numItems="5"  snapInterval="0"/>
    
</s:View>