<?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:timePicker="ardisia.components.timePicker.*"
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="TimePicker Description"
description="The TimePicker is a component designed to help users select a time, specific to the minute. At first glance, this component appears to be a simple combo box with a list of time strings, but it is fact much more complex. Values ranges from 0 (12:00am) to 1439 (11:59pm). Users can enter a custom time, and that value will be added to the drop-down. On commit of a user entered string, the component will attempt to parse a readable time. Will hint at the closest available time in the drop down based on the user entered string, without selecting it. Users can use the arrow keys to navigate from the hinted index."
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="Snap Interval:">
<s:NumericStepper id="snapIntervalSelect"
width="100"
minimum="1" maximum="600" value="30"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Sets the intervals, in minutes, displayed in the drop down. E.G. a value of 30 indicates that the drop down will display times each 30 minutes: 7:00am, 7:30am, 8:00am, 8:30am., etc."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Default Time:">
<s:NumericStepper id="defaultDropDownTimeSelect"
width="100"
minimum="0" maximum="1439" value="480"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="When the user opens the drop down and the 'selectedMinutes' property is not set, this is the default time to center in the drop down and hint at, but not select. For example: 8am = 8 * 60 = 480 Useful because if the user begins typing a time, the drop down will hint at this time and then the user can adjust the time via the arrow keys."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Open on Focus:">
<s:CheckBox id="openOnFocusSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Whether the drop down will open on focus."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Require Selection:">
<s:CheckBox id="requireSelectionSelect"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, a value of -1 (no selection) is not allowed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!requireSelectionSelect.selected}"
label="Error Message:">
<s:TextArea id="validationErrorMessageSelect"
width="100"
text="Not a recognized time. Examples: 7p, 7pm, 7:00pm, 700p, 19:00p, 19PM etc."/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The error message to display when the user entered string fails validation and could not be converted to a valid minutes value."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>Additional Notes.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Parsing User Entered Strings:">
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="On commit of a user entered string, the TimePicker will attempt to parse a readable time. E.G. if the user enters 902, the parser will guess 9:02am. Another example is that 9p would be converted to 9pm. If the user entered string cannot be parsed, a error message will be delivered to the user and the selectedMinutes will be set to -1. Try entering shorthand time strings like 7p, 7pm, 7:00pm, 700p, 19:00p, 19PM etc. The TimePicker can accept most logical strings."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Custom Times:">
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Users can enter any custom time, and that value will be added to the drop-down."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Time Hinting:">
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Will hint at the closest available time in the drop down based on the user entered string, without selecting it. Keyboard navigation will change the selection starting from the hinted time if no selection has been made. For example: 8am = 8 * 60 = 480; Useful because if the user begins typing a time, the drop down will hint at this time and then the user can adjust the time via the arrow keys."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Keyboard Navigation:">
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="User can scroll through values, and the hinted index will remain highlighted. Supports all ComboBox keyboard navigation, like committing on the ENTER key."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup horizontalCenter="0"
top="100"
width="400"
horizontalAlign="justify"
gap="50">
<s:VGroup gap="20">
<s:VGroup>
<s:Label fontSize="13"
fontWeight="bold"
text="Select a Time:"/>
<s:Label width="400"
text="Can parse English time descriptions like 7p or 1230a, etc. Try it out by typing time descriptions and hitting the ENTER key."/>
</s:VGroup>
<s:HGroup gap="20"
verticalAlign="top">
<timePicker:TimePicker id="timePicker"
selectedMinutes="-1"
horizontalCenter="0" verticalCenter="0"
requireSelection="{requireSelectionSelect.selected}"
snapInterval="{snapIntervalSelect.value}"
defaultDropDownTime="{defaultDropDownTimeSelect.value}"
openOnFocus="{openOnFocusSelect.selected}"
validationErrorMessage="{validationErrorMessageSelect.text}"/>
<s:HGroup width="150"
paddingTop="5">
<s:Label text="Selected Minutes:"
fontWeight="bold"/>
<s:Label text="{timePicker.selectedMinutes}"/>
</s:HGroup>
</s:HGroup>
</s:VGroup>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>