<?xml version="1.0" encoding="utf-8"?>
<s:Module xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:toggleSwitchDesktop="ardisia.components.toggleSwitchDesktop.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import spark.effects.easing.Bounce;
import spark.effects.easing.Elastic;
import spark.effects.easing.Linear;
import spark.effects.easing.Power;
import spark.effects.easing.Sine;
import ardisia.components.toggleSwitchDesktop.themes.spark.skins.ToggleSwitchDesktopSkin;
import components.toggleSwitchDesktop.ToggleSwitchSquareSkin;
public function creationComplete():void
{
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
width="100%" height="100%"
westRegionTitle="ToggleSwitchDesktop Description"
description="ToggleSwitch component designed for desktop use. Extends the Flex ToggleButton class and is fully skinnable."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Label On:">
<s:TextInput id="labelSelectedSelect"
width="100"
text="ON"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Selected label string can be set without custom skinning."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Label Off:">
<s:TextInput id="labelNotSelectedSelect"
width="100"
text="OFF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Not-selected label string can be set without custom skinning."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Layout"/>
<s:FormItem label="Use Measured:">
<s:CheckBox id="measuredSelect"
selected="true"
change="if(measuredSelect.selected){toggleSwitch.width=toggleSwitch.height=NaN}else{toggleSwitch.width=widthSelect.value;toggleSwitch.height=heightSelect.value}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="ToggleSwitchDesktop can measure itself."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!measuredSelect.selected}"
label="Width:">
<s:HSlider id="widthSelect"
width="100"
minimum="50" maximum="500" value="100"
change="toggleSwitch.width=widthSelect.value;"/>
</s:FormItem>
<s:FormItem enabled="{!measuredSelect.selected}"
label="Height:">
<s:HSlider id="heightSelect"
width="100"
minimum="20" maximum="100" value="30"
change="toggleSwitch.height=heightSelect.value;"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Skins"/>
<s:FormItem label="Ellipse:">
<s:RadioButton id="ellipseSkinSelect"
groupName="skinRadioGroup"
selected="true"
change="if(ellipseSkinSelect.selected){toggleSwitch.setStyle('skinClass', ardisia.components.toggleSwitchDesktop.themes.spark.skins.ToggleSwitchDesktopSkin);}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Skin that uses an elliptical thumb and border."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Square:">
<s:RadioButton id="squareSkinSelect"
groupName="skinRadioGroup"
selected="false"
change="if(squareSkinSelect.selected){toggleSwitch.setStyle('skinClass', components.toggleSwitchDesktop.ToggleSwitchSquareSkin);}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Skin that uses a square thumb and border."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Text Styles"/>
<s:FormItem label="Font Size:">
<s:HSlider id="fontSizeSelect"
width="100"
minimum="5" maximum="23" value="13"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Font styles can be set without custom skinning."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Font Bold:">
<s:CheckBox id="fontWeightSelect"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Font styles can be set without custom skinning."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Animation"/>
<s:FormItem label="Duration:">
<s:HSlider id="animationDurationSelect"
width="100"
minimum="0" maximum="1000" value="250"
change="Object(toggleSwitch.skin).moveEffect.duration=animationDurationSelect.value"/>
</s:FormItem>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="2"
change="Object(toggleSwitch.skin).moveEffect.easer=animationEaserSelect.selectedItem.easer">
<s:ArrayCollection>
<fx:Object name="Sine" easer="{new Sine()}"/>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Power" easer="{new Power(0.25)}"/>
<fx:Object name="Bounce" easer="{new Bounce()}"/>
<fx:Object name="Elastic" easer="{new Elastic()}"/>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The easer to use with the slide animation."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>To change selection, you can (a) click the thumb, (b) drag the thumb, or (c) change the selection programmatically via the ToggleButton below.</data:exampleDescription>
<data:toolbarContent>
<s:ToggleButton id="selectedSelect"
label="Selected"
selected="{toggleSwitch.selected}"/>
</data:toolbarContent>
<data:primaryContent>
<toggleSwitchDesktop:ToggleSwitchDesktop id="toggleSwitch"
horizontalCenter="0" verticalCenter="0"
baselineShift.spark="-1"
selected="{selectedSelect.selected}"
fontSize="{fontSizeSelect.value}"
labelSelected="{labelSelectedSelect.text}"
labelNotSelected="{labelNotSelectedSelect.text}"
fontWeight="{fontWeightSelect.selected ? 'bold' : 'normal'}" />
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>