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

Licensed to the Apache Software Foundation (ASF) under one or more
contributor license agreements.  See the NOTICE file distributed with
this work for additional information regarding copyright ownership.
The ASF licenses this file to You under the Apache License, Version 2.0
(the "License"); you may not use this file except in compliance with
the License.  You may obtain a copy of the License at

http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.

-->
<s:View xmlns:fx="http://ns.adobe.com/mxml/2009" 
		xmlns:s="library://ns.adobe.com/flex/spark" 
		title="CheckBox">
	
	<fx:Script>
		<![CDATA[
			
			protected function checkboxHandler(event:Event):void
			{
				label.text = event.target.label + " toggled: " + event.target.selected as String;
			}
			
			protected function buttonHandler(event:MouseEvent):void
			{
				if(currentState == "DemoState")
				{
					currentState = "InfoState";				
				}
				else if(currentState == "InfoState")
				{
					currentState = "DemoState";
				}
			}
		]]>
	</fx:Script>	
	<s:states>
		<s:State name="DemoState"/>
		<s:State name="InfoState"/>
	</s:states>	
	<fx:Declarations>
		<s:MultiDPIBitmapSource id="aboutIcon" 
								source160dpi="@Embed('assets/icons/160/about.png')" 
								source240dpi="@Embed('assets/icons/240/about.png')" 
								source320dpi="@Embed('assets/icons/320/about.png')" 
								source480dpi="@Embed('assets/icons/480/about.png')"/>
		<s:MultiDPIBitmapSource id="demoIcon" 
								source160dpi="@Embed('assets/icons/160/dock.png')" 
								source240dpi="@Embed('assets/icons/240/dock.png')" 
								source320dpi="@Embed('assets/icons/320/dock.png')" 
								source480dpi="@Embed('assets/icons/480/dock.png')"/>
	</fx:Declarations>	
	<s:VGroup includeIn="DemoState" horizontalAlign="center" width="100%" height="100%" verticalAlign="middle">
		<s:CheckBox change="checkboxHandler(event)" label="CheckBox 1" />
		<s:CheckBox change="checkboxHandler(event)" label="CheckBox 2" />
		<s:CheckBox change="checkboxHandler(event)" label="CheckBox 3" />
		<s:Spacer height="10"/>
		<s:Label id="label" horizontalCenter="0" bottom="20" textAlign="center"/>
	</s:VGroup>	
	<s:TextArea includeIn="InfoState" selectable="false" left="10" right="10" top="10" bottom="10" editable="false" 
				text="The CheckBox component consists of an optional label and a small box that can contain a check mark or not.
				&#xd; &#xd;When a user clicks a CheckBox component or its associated text, the CheckBox component sets its selected property to true for checked, and to false for unchecked.		
				&#xd; &#xd;To use this component in a list-based component, such as a List or DataGrid, create an item renderer. For information about creating an item renderer, see Custom Spark item renderers."/>
	<s:actionContent>
		<s:Button click="buttonHandler(event)" icon.DemoState="{aboutIcon}" icon.InfoState="{demoIcon}"/>
	</s:actionContent>	
</s:View>