<?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:sliderField="ardisia.components.sliderField.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
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="SliderField Description"
description="Numerical field that combines a text input (restricted to numbers only) with a vertical slider. The vertical slider thumb is centered beneath the mouse for rapid adjustments. Handles focus, keyboard, and mouse interaction."
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="0" maximum="100" 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="Maximum:">
<s:HSlider id="maximumSelect"
width="100"
minimum="10" maximum="1000" value="100" snapInterval="10" stepSize="10"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The maximum allowed value in the field."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Minimum:">
<s:HSlider id="minimumSelect"
width="100"
minimum="-1000" maximum="0" value="-100" snapInterval="10" stepSize="10"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The minimum allowed value in the field."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormHeading label="Padding:"/>
<s:FormItem label="Top:">
<s:HSlider id="paddingTopSelect"
width="100"
minimum="0" maximum="10"
value="2" value.spark="4"/>
</s:FormItem>
<s:FormItem label="Right:">
<s:HSlider id="paddingRightSelect"
width="100"
minimum="0" maximum="10"
value="0"/>
</s:FormItem>
<s:FormItem label="Bottom:">
<s:HSlider id="paddingBottomSelect"
width="100"
minimum="0" maximum="10"
value="2" value.spark="2"/>
</s:FormItem>
<s:FormItem label="Left:">
<s:HSlider id="paddingLeftSelect"
width="100"
minimum="0" maximum="10"
value="0" value.spark="3"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>Basic example to demonstrate the SliderField component. Note: the popup will detect screen overflow and adjust accordingly.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0"
horizontalAlign="center"
gap="20">
<s:Label width="400"
text="There are 2 ways to select new values from the popup slider: (1) Keep the mouse button down when opening the slider, select a new value while the mouse button is down, and then the slider will automatically close on mouseUp. (2) Open the slider with a click and then the slider will stay open until the ENTER or ESCAPE key are depressed, or the slider loses focus." />
<sliderField:SliderField horizontalCenter="0" verticalCenter="0"
snapInterval="{snapIntervalSelect.value}"
maximum="{maximumSelect.value}"
minimum="{minimumSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>