<?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:colorPicker="ardisia.components.colorPicker.*"
xmlns:gauges="ardisia.components.gauges.*"
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 mx.core.UIComponent;
import spark.effects.Animate;
import spark.effects.animation.MotionPath;
import spark.effects.animation.SimpleMotionPath;
import spark.effects.easing.Power;
import spark.events.IndexChangeEvent;
import ardisia.components.expandingContainer.ExpandingContainer;
protected var timer:Timer;
protected var animator:Animate;
protected var motionPath:SimpleMotionPath;
public function creationComplete():void
{
demoAppWrapper.topLevelCompassContainer.centerRegionInstance.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
{
demoAppWrapper.topLevelCompassContainer.centerRegionInstance.setFocus();
});
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
{
if (demoAppWrapper.viewstack.selectedIndex == 2)
{
if (timer && timer.running)
return;
if (!animator)
{
timer = new Timer(1000);
timer.addEventListener(TimerEvent.TIMER, timerHandler);
animator = new Animate();
animator.duration = 500;
animator.easer = new Power();
motionPath = new SimpleMotionPath("value");
animator.motionPaths = new <MotionPath>[;
animator.target = dashboardGuage;
}
motionPath.valueFrom = 0;
motionPath.valueTo = 500;
animator.play();
timer.start();
}
var enabled:Boolean = demoAppWrapper.viewstack.selectedIndex == 0;
demoAppWrapper.topLevelCompassContainer.eastRegionInstance.enabled = enabled;
for (var i:int = 0; i < demoAppWrapper.westVerticalGroup.numElements; i++)
{
var child:UIComponent = demoAppWrapper.westVerticalGroup.getElementAt(i) as UIComponent;
if (child is ExpandingContainer)
child.enabled = enabled;
}
});
}
protected function labelsFormatFunction(value:Number):Object
{
return nf.format(value) + "%";
}
protected function timerHandler(event:TimerEvent):void
{
var rand:Number = Math.round(Math.random() * 1000);
motionPath.valueFrom = dashboardGuage.value;
motionPath.valueTo = rand;
animator.play();
downloadsLabel.text = String(rand);
}
protected function removedFromStageHandler(event:Event):void
{
if (animator)
animator.stop();
if (timer)
timer.stop();
}
]]>
</fx:Script>
<fx:Declarations>
<s:NumberFormatter id="nf"
fractionalDigits="1"
trailingZeros="false"/>
</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="RadialGauge Description"
eastRegionTitle="Bound Values"
description="Radial gauge that supports labels, tick marks, and start and end angles. Supports an extensive API. See the examples."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<!--- east content -->
<containers:eastContent>
<s:VGroup top="10" left="10" horizontalAlign="justify">
<s:Form id="formC">
<s:FormHeading label="RadialGauge"/>
<s:FormItem label="Value">
<s:Label text="{String(RadialGauge.value)}"
paddingTop="5"/>
</s:FormItem>
</s:Form>
</s:VGroup>
</containers:eastContent>
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Angle Start:">
<s:HSlider id="angleStartSelect"
width="100"
minimum="0" maximum="360" value="135"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The angle at which to begin drawing the gauge arc in degrees"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Angle End:">
<s:HSlider id="angleEndSelect"
width="100"
minimum="0" maximum="360" value="45"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The angle at which to end the drawing of the gauge arc in degrees"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Width:">
<s:HSlider id="widthSelect"
width="100"
minimum="50" maximum="400" value="300" snapInterval="10"/>
</s:FormItem>
<s:FormItem label="Height:">
<s:HSlider id="heightSelect"
width="100"
minimum="50" maximum="400" value="300" snapInterval="10"/>
</s:FormItem>
<s:FormItem label="Editable:">
<s:CheckBox id="editableSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Whether the value can be changed via user interaction. If false, can be used to statically display information without disabling the control. For example, could display download speed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Data Tip:">
<s:CheckBox id="showDataTipSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Display a data tip when dragging the needle (thumb)."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Format Fn:">
<s:CheckBox id="labelsFormatFunctionSelect"
selected="false"
change="if(labelsFormatFunctionSelect.selected){RadialGauge.labelsFormatFunction=labelsFormatFunction}else{RadialGauge.labelsFormatFunction=null;}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The callback function used to format the labels and data tip. Use this property to parse numerical values into strings if desired."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Precision:"
enabled="{!labelsFormatFunctionSelect.selected}">
<s:NumericStepper id="labelDefaultPrecisionSelect"
width="100"
minimum="0" maximum="10" snapInterval="1" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Default precision for the number formatter if a labelsFormatFunction is not provided."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Show Ticks:">
<s:CheckBox id="showTicksSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Major Ticks:">
<s:NumericStepper id="majorTickCountSelect"
width="100"
minimum="2" maximum="20" value="9" snapInterval="1"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Minor Ticks:">
<s:NumericStepper id="minorTickCountSelect"
width="100"
minimum="0" maximum="10" value="4" snapInterval="1"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Tick Labels:">
<s:CheckBox id="showTickLabelsSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Snap Interval:">
<s:NumericStepper id="snapIntervalSelect"
width="100"
minimum="0" maximum="10" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormItem label="Minimum:">
<s:HSlider id="minimumSelect"
width="100"
minimum="-100" maximum="{maximumSelect.minimum-10}" snapInterval="10" value="-100"/>
</s:FormItem>
<s:FormItem label="Maximum:">
<s:HSlider id="maximumSelect"
width="100"
minimum="{minimumSelect.maximum+10}" maximum="100" snapInterval="10" value="100"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormHeading label="Major Ticks"/>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Color:">
<colorPicker:ColorPicker id="majorTickColorSelect"
selectedColor.spark="#000000" selectedColor="#454545" />
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Form:">
<s:DropDownList id="majorTickFormSelect"
width="100"
selectedIndex="0"
requireSelection="true">
<s:ArrayCollection>
<fx:String>line</fx:String>
<fx:String>circle</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Length:">
<s:HSlider id="majorTickLengthSelect"
width="100"
minimum="1" maximum="20" snapInterval="1" value="10"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Weight:">
<s:HSlider id="majorTickThicknessSelect"
width="100"
minimum="1" maximum="10" snapInterval="1" value="4"/>
</s:FormItem>
<s:FormHeading label="Minor Ticks"/>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Form:">
<s:DropDownList id="minorTickFormSelect"
width="100"
selectedIndex="0"
requireSelection="true">
<s:ArrayCollection>
<fx:String>line</fx:String>
<fx:String>circle</fx:String>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Color:">
<colorPicker:ColorPicker id="minorTickColorSelect"
selectedColor.spark="#999999" selectedColor="#BCBCBC"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Length:">
<s:HSlider id="minorTickLengthSelect"
width="100"
minimum="1" maximum="20" snapInterval="1" value="10"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Weight:">
<s:HSlider id="minorTickThicknessSelect"
width="100"
minimum="1" maximum="10" snapInterval="1" value="2"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormItem enabled="{showTicksSelect.selected}"
label="TickOffset:">
<s:HSlider id="tickOffsetSelect"
width="100"
minimum="0" maximum="10"
snapInterval="1"
value="2"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Label Offset:">
<s:HSlider id="labelOffsetSelect"
width="100"
minimum="0" maximum="10"
snapInterval="1"
value="8"/>
</s:FormItem>
<s:FormItem enabled="{showTicksSelect.selected}"
label="Thumb Inset:">
<s:HSlider id="thumbInsetSelect"
width="100"
minimum="0" maximum="50"
snapInterval="1"
value="20"/>
</s:FormItem>
<s:FormItem label="Guage Inset:">
<s:HSlider id="insetSelect"
width="100"
minimum="1" maximum="30"
snapInterval="1"
value="2"/>
</s:FormItem>
<s:FormHeading label="Animation"/>
<s:FormItem label="Duration:">
<s:HSlider id="slideDurationSelect"
width="100"
minimum="0" maximum="1000"
snapInterval="1"
value="500"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Duration of the needle animation when the track is clicked and the needle animates to the new value.">
<s:filters>
<s:GlowFilter color="#000000"
alpha="0.35"
blurX="6" blurY="6"/>
</s:filters>
</s:Image>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Simple Example</data:tabLabel>
<data:exampleDescription>Customizable example below. Use the forms to the left to interact with the gauge. Can drag the thumb by mousing down over it and dragging. Supports keyboard interaction when focused.</data:exampleDescription>
<data:primaryContent>
<s:BorderContainer horizontalCenter="0" verticalCenter="0">
<gauges:RadialGauge id="RadialGauge"
value="50"
width="{widthSelect.value}" height="{heightSelect.value}"
showTicks="{showTicksSelect.selected}"
angleStart="{angleStartSelect.value}"
angleEnd="{angleEndSelect.value}"
showDataTip="{showDataTipSelect.selected}"
editable="{editableSelect.selected}"
labelDefaultPrecision="{labelDefaultPrecisionSelect.value}"
majorTickCount="{majorTickCountSelect.value}"
minorTickCount="{minorTickCountSelect.value}"
showTickLabels="{showTickLabelsSelect.selected}"
snapInterval="{snapIntervalSelect.value}"
minimum="{minimumSelect.value}"
maximum="{maximumSelect.value}"
slideDuration="{slideDurationSelect.value}"
majorTickColor="{majorTickColorSelect.selectedColor}"
majorTickLength="{majorTickLengthSelect.value}"
majorTickForm="{majorTickFormSelect.selectedItem}"
minorTickColor="{minorTickColorSelect.selectedColor}"
minorTickLength="{minorTickLengthSelect.value}"
minorTickForm="{minorTickFormSelect.selectedItem}"
majorTickThickness="{majorTickThicknessSelect.value}"
minorTickThickness="{minorTickThicknessSelect.value}"
tickOffset="{tickOffsetSelect.value}"
labelOffset="{labelOffsetSelect.value}"
thumbInset="{thumbInsetSelect.value}"
inset="{insetSelect.value}"/>
</s:BorderContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Multiple Gauges Example</data:tabLabel>
<data:exampleDescription>Illustrative examples of possible angular configurations of the RadialGauge component.</data:exampleDescription>
<data:primaryContent>
<s:TileGroup top="20" right="20" bottom="20" left="20"
columnAlign="justifyUsingWidth" rowAlign="justifyUsingHeight"
horizontalAlign="justify" verticalAlign="justify"
requestedColumnCount="4">
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="-90" angleEnd="0"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="0" angleEnd="90"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="90" angleEnd="180"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="180" angleEnd="270"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="-45" angleEnd="45"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="45" angleEnd="90"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="135" angleEnd="180"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="235" angleEnd="270"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="-90" angleEnd="90"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="0" angleEnd="180"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="90" angleEnd="270"/>
</s:BorderContainer>
<s:BorderContainer>
<gauges:RadialGauge width="100%" height="100%"
angleStart="180" angleEnd="0"/>
</s:BorderContainer>
</s:TileGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Dashboard Example</data:tabLabel>
<data:exampleDescription>Illustrates the use of a RadialGauge as a non-interactive static infometric. The RadialGauge below has its 'editable' property set to false. Example is a fictional dashboard for the number of concurrent downloads occurring on a hypothetical website.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0">
<s:HGroup verticalAlign="middle">
<s:Label text="Concurrent Downloads:"
fontWeight="bold"/>
<s:Label id="downloadsLabel"
text="0"/>
</s:HGroup>
<gauges:RadialGauge id="dashboardGuage"
width="350" height="350"
majorTickForm="circle"
majorTickThickness="4"
minorTickThickness="2"
minorTickForm="line"
minorTickCount="4"
majorTickCount="9"
labelOffset="12"
editable="false"
minimum="0" maximum="1000" value="0"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>