<?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:mx="library://ns.adobe.com/flex/mx"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:rotaryField="ardisia.components.rotaryField.*"
xmlns:wheelList="ardisia.components.wheelList.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
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="WheelList Description"
eastRegionTitle="Bound Values"
description="A Spark based List using renderers arranged as slices in an ellipse. Renderers are designed to be easily extended and skinned. Full keyboard support and support for multiple selection via the SHIFT and CTRL key and enabling de-selection of elements."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:eastContent>
<s:VGroup top="10" right="10" left="10"
horizontalAlign="justify"
gap="10">
<s:HGroup>
<s:Label width="100"
text="Selected Indices:"
fontWeight="bold"/>
<s:RichText width="100%"
text="{wheelList.selectedIndices}"/>
</s:HGroup>
<s:HGroup>
<s:Label width="100"
text="Selected Items:"
fontWeight="bold"/>
<s:RichText width="100%"
text="{wheelList.selectedItems}"/>
</s:HGroup>
</s:VGroup>
</containers:eastContent>
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Width:">
<s:HSlider id="widthSelect"
width="100"
minimum="150" maximum="500" value="300"/>
</s:FormItem>
<s:FormItem label="Height:">
<s:HSlider id="heightSelect"
width="100"
minimum="150" maximum="500" value="300"/>
</s:FormItem>
<s:FormItem label="Force Circle:">
<s:CheckBox id="useCircleSelect"
selected="false"/>
</s:FormItem>
<s:FormItem label="Angle Offset:">
<rotaryField:RotaryField id="angleOffsetSelect"
width="50"
value="90"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The angle offset to use to begin layout of the renderers. Defaults to 90, which lays out the first renderer due North of the center of the list."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Inner Radius:">
<s:HSlider id="innerRadiusSelect"
width="100"
minimum="0" maximum="{Math.min(widthSelect.value / 2 - 10, heightSelect.value / 2 - 10)}" value="40"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The radius of the donut hole to put in the wheel."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Multiple Selection:">
<s:CheckBox id="allowMultipleSelectionSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If enabled, multiple elements can be selected when clicked while the CTRL key or the SHIFT keys are down."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Deselection:">
<s:CheckBox enabled="{!allowMultipleSelectionSelect.selected}"
id="allowDeselectionSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If enabled, individual elements can be deselected. Only relevant if multiple selection is disabled."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>List of common types of tasty pies. Use multiple selection by holding down the CTRL or SHIFT key. Also, keyboard interaction is supported. Component is fully skinnable.</data:exampleDescription>
<data:primaryContent>
<s:BorderContainer horizontalCenter="0" verticalCenter="0"
minWidth="0" minHeight="0">
<s:HGroup top="20" right="20" bottom="20" left="20"
gap="50">
<wheelList:WheelList id="wheelList"
width="{widthSelect.value}"
height="{heightSelect.value}"
useCircle="{useCircleSelect.selected}"
angleOffset="{angleOffsetSelect.value}"
innerRadius="{innerRadiusSelect.value}"
allowDeselection="{allowDeselectionSelect.selected}"
allowMultipleSelection="{allowMultipleSelectionSelect.selected}">
<wheelList:dataProvider>
<s:ArrayCollection>
<fx:String>Apple</fx:String>
<fx:String>Blueberry</fx:String>
<fx:String>Pumpkin</fx:String>
<fx:String>Oreo</fx:String>
<fx:String>Cream</fx:String>
<fx:String>Banana</fx:String>
<fx:String>Meringue</fx:String>
<fx:String>Meat</fx:String>
</s:ArrayCollection>
</wheelList:dataProvider>
</wheelList:WheelList>
</s:HGroup>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>