<?xml version="1.0"?>
<!-- Simple example to demonstrate the Spark CheckBox control -->
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark"
        xmlns:mx="library://ns.adobe.com/flex/mx">

    <fx:Script>
        <![CDATA[
           [Bindable]
           public var totalCost:Number = 4.50;

           // This event handler adds/removes the cost of condiments to/from the total cost.
           private function modifyBurger(evt:MouseEvent):void {
               // Add 0.25 to the total cost for every condiment. Delete 0.25 for
               // every condiment removed.
               if(CheckBox(evt.target).selected) {
                   totalCost += 0.25;
               } else {
                   totalCost -= 0.25;
               }
               // Format the totalCost and then display it in a label.
               totalString.text = usdFormatter.format(totalCost);
             }
        ]]>
    </fx:Script>

    <fx:Declarations>
        <mx:CurrencyFormatter id="usdFormatter" precision="2" currencySymbol="$"
                decimalSeparatorFrom="." decimalSeparatorTo="." useNegativeSign="true"
                useThousandsSeparator="true" alignSymbol="left"/>
    </fx:Declarations>

    <s:Panel title="Spark CheckBox Control Example"
            width="75%" height="75%"
            horizontalCenter="0" verticalCenter="0">
        <s:VGroup left="10" right="10" top="10" bottom="10">
            <s:Label text="Hamburger Base Price: $4.50" />
            <s:Label text="Select condiments for your hamburger (0.25 each):" />
            <s:CheckBox id="lettuceCB" label="Pickles" click="modifyBurger(event);"/>
            <s:CheckBox id="tomatoCB" label="Tomato" click="modifyBurger(event);"/>
            <s:CheckBox id="pickleCB" label="Lettuce" click="modifyBurger(event);"/>
            <s:CheckBox id="mayoCB" label="Mayonnaise" click="modifyBurger(event);"/>

            <mx:Spacer height="20" />
            <s:HGroup>
                <s:Label text="Total Price: " />
                <s:Label id="totalString" text="$4.50"/>
            </s:HGroup>
        </s:VGroup>
    </s:Panel>

</s:Application>