<?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.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import ardisia.utils.GraphicsUtils;
public function creationComplete():void
{
rotaryHandler();
}
protected function rotaryHandler(event:Event = null):void
{
var g:Graphics = rotaryCanvas.skin.graphics;
var angleRad:Number = Math.PI * (rotaryField.value / 180 + angleOffsetSelect.value / 180);
var x:Number = 50 + 50 * Math.cos(angleRad);
var y:Number = 50 + 50 * Math.sin(angleRad);
g.clear();
g.lineStyle(1, 0, 1, false, LineScaleMode.NORMAL, CapsStyle.ROUND, JointStyle.ROUND);
GraphicsUtils.drawArrow(g, new Point(50, 50), new Point(x, y), 25, 8);
}
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="RotaryField Description"
description="UI component used to select an angle from 0 to 360 degrees. Handles focus, keyboard, and mouse interaction. The wheel popup can be closed via the mouse or by hitting the ESCAPE key, and the entered value can be committed by using the ENTER key. 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:FormHeading label="Properties:"/>
<s:FormItem label="Snap Interval:">
<s:HSlider id="snapIntervalSelect"
width="100"
minimum="1" maximum="180" value="1" snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The snapInterval for the 'value' property."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Angle Offset:">
<s:HSlider id="angleOffsetSelect"
width="100"
minimum="-360" maximum="360" value="-90" snapInterval="15" stepSize="15"
change="rotaryHandler()"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Used to change what direction 0 degrees points towards on the ellipse. The Flash based coordinate system has 0 degrees at due East. This angle offsets the location of 0 degrees from due East. Positive increases in angle move the angle in a clockwise direction."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>Basic example to demonstrate the RotaryField component by displaying an arrow at the selected angle. Note: the popup will detect screen overflow and adjust accordingly.</data:exampleDescription>
<data:primaryContent>
<s:HGroup horizontalCenter="0" verticalCenter="0">
<rotaryField:RotaryField id="rotaryField"
snapInterval="{snapIntervalSelect.value}"
angleOffset="{angleOffsetSelect.value}"
valueCommit="rotaryHandler(event);"/>
<s:BorderContainer>
<s:BorderContainer id="rotaryCanvas"
top="2" right="2" bottom="2" left="2"
width="100" height="100"/>
</s:BorderContainer>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>