This source is included in the download package.
<?xml version="1.0" encoding="utf-8"?>
<mx:Application
xmlns:mx="http://www.adobe.com/2006/mxml"
height="100%"
width="100%"
horizontalScrollPolicy="auto"
verticalScrollPolicy="auto"
initialize="initApp()"
horizontalAlign="middle"
layout="absolute"
backgroundColor="#FFFFFF"
paddingLeft="30"
>
<mx:Script>
<![CDATA[
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
//===========IMPORTS:
import ca.dpcp.components.DPCPTimeChooser;
//import mx.managers.*;
import mx.effects.*;
import mx.controls.Alert;
//==========APP VARS:
public var tc1 : DPCPTimeChooser;
public var tc2 : DPCPTimeChooser;
//-------------------------------------------------------------------------------------------------
private function initApp() : void
{
//Alert.show( "initApp()!!!" );
tc1 = new DPCPTimeChooser();
tc1.id = "mytc1";
tc1.addEventListener( DPCPTimeChooser.TIME_CHANGED, handleTimeChange );
vb12h.addChild( tc1 );
tc2 = new DPCPTimeChooser( 24 );
tc2.id = "mytc2";
tc2.addEventListener( DPCPTimeChooser.TIME_CHANGED, handleTimeChange );
vb24h.addChild( tc2 );
this.addEventListener( DPCPTimeChooser.TIME_CHANGED, handleTimeChangeGeneral );
var tcExample : DPCPTimeChooser = new DPCPTimeChooser();
tcExample.setTimeFromString( "12:34" );
vbExampleTC.addChild( tcExample );
}
//-------------------------------------------------------------------------------------------------
private function resetTC1() : void
{
tc1.bTimeSelected = false;
}
//-------------------------------------------------------------------------------------------------
private function resetTC2() : void
{
tc2.bTimeSelected = false;
}
//-------------------------------------------------------------------------------------------------
private function handleTimeChange( e : Event ) : void
{
//Alert.show("heard a time change! id=" + e.target.id + ", target=" + e.target + ", currentTarget=" + e.currentTarget );
if ( e.target.id == tc1.id )
{
tc1Result.text = !tc1.bTimeSelected ? "<none>" : tc1.getTimeString();
tc1ResultLocale.text = tc1.getTimeLocaleString();
tc1ResultHours.text = tc1.getHours().toString();
tc1ResultMinutes.text = tc1.getMinutes().toString();
}
if ( e.target.id == tc2.id )
{
tc2Result.text = !tc2.bTimeSelected ? "<none>" : tc2.getTimeString();
tc2ResultLocale.text = tc2.getTimeLocaleString();
tc2ResultHours.text = tc2.getHours().toString();
tc2ResultMinutes.text = tc2.getMinutes().toString();
}
dispatchEvent( e );
}
//-------------------------------------------------------------------------------------------------
private function handleTimeChangeGeneral( e : Event ) : void
{
//Alert.show("heard a time change! id=" + e.target.id + ", target=" + e.target + ", currentTarget=" + e.currentTarget );
var g1 : Glow = new Glow();
g1.target = hbExamples;
g1.repeatCount = 1;
g1.duration = 1000;
g1.play();
}
//-------------------------------------------------------------------------------------------------
private function setTC1FromInput() : void
{
tc1.setTimeFromString( tc1Input.text );
}
//-------------------------------------------------------------------------------------------------
private function setTC2FromInput() : void
{
tc2.setTimeFromString( tc2Input.text );
}
//-------------------------------------------------------------------------------------------------
//-------------------------------------------------------------------------------------------------
//+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
]]>
</mx:Script>
<mx:VBox id="vbLayout"
>
<mx:Text
text="TimeChooser component demo"
fontSize="40"
/>
<mx:Text
text="A DPCPTimeChooser component looks like this:"
/>
<mx:VBox id="vbExampleTC"
/>
<mx:Text
htmlText="It can be used in a variety of ways:<br>- click the clock to select a time at half-hour intervals<br>- select the 'none' item to indicate 'no time'<br>- once a time is selected, use the minutes field to indicate an exact time<br>- code-wise, it provides a variety of methods and properties to manipulate and access it<br>- it can be 'localized' (translated into non-English languages), and supports different time formats<br><br>Try out the examples below."
/>
<mx:Spacer
height="20"
/>
<mx:HBox id="hbExamples">
<!-- =================================== 1st panel with 12-hour clock example : start ====================================== -->
<mx:Panel
width="400"
title="12-hour mode example:"
paddingLeft="20"
>
<mx:Text
text="Select a time:"
/>
<mx:VBox id="vb12h"
height="25"
backgroundColor="#eeeeee"
/>
<mx:Grid>
<mx:GridRow>
<mx:GridItem>
<mx:Label
text="Time selected (raw):"
/>
</mx:GridItem>
<mx:GridItem>
<mx:Text id="tc1Result"
color="red"
text=""
/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem
colSpan="2"
>
<mx:HBox>
<mx:Label
text="...hours:"
/>
<mx:Text id="tc1ResultHours"
color="red"
text=""
/>
<mx:Label
text="minutes:"
/>
<mx:Text id="tc1ResultMinutes"
color="red"
text=""
/>
</mx:HBox>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label
text="Time selected (locale):"
/>
</mx:GridItem>
<mx:GridItem>
<mx:Text id="tc1ResultLocale"
color="red"
text=""
/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label
text="Set time from string (HH:MM):"
/>
</mx:GridItem>
<mx:GridItem>
<mx:HBox>
<mx:TextInput id="tc1Input"
width="60"
maxChars="6"
/>
<mx:LinkButton
textDecoration="underline"
label="set"
click="setTC1FromInput();"
/>
</mx:HBox>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:LinkButton click="resetTC1();"
textDecoration="underline"
label="reset"
/>
</mx:Panel>
<!-- =================================== 1st panel with 12-hour clock example : end ====================================== -->
<mx:Spacer
width="20"
/>
<!-- =================================== 2nd panel with 24-hour clock example : start ====================================== -->
<mx:Panel
width="400"
title="24-hour mode example:"
paddingLeft="20"
>
<mx:Text
text="Select a time:"
/>
<mx:VBox id="vb24h"
height="25"
backgroundColor="#eeeeee"
/>
<mx:Grid>
<mx:GridRow>
<mx:GridItem>
<mx:Label
text="Time selected (raw):"
/>
</mx:GridItem>
<mx:GridItem>
<mx:Text id="tc2Result"
color="red"
text=""
/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem
colSpan="2"
>
<mx:HBox>
<mx:Label
text="...hours:"
/>
<mx:Text id="tc2ResultHours"
color="red"
text=""
/>
<mx:Label
text="minutes:"
/>
<mx:Text id="tc2ResultMinutes"
color="red"
text=""
/>
</mx:HBox>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label
text="Time selected (locale):"
/>
</mx:GridItem>
<mx:GridItem>
<mx:Text id="tc2ResultLocale"
color="red"
text=""
/>
</mx:GridItem>
</mx:GridRow>
<mx:GridRow>
<mx:GridItem>
<mx:Label
text="Set time from string (HH:MM):"
/>
</mx:GridItem>
<mx:GridItem>
<mx:HBox>
<mx:TextInput id="tc2Input"
width="60"
maxChars="6"
/>
<mx:LinkButton
textDecoration="underline"
label="set"
click="setTC2FromInput();"
/>
</mx:HBox>
</mx:GridItem>
</mx:GridRow>
</mx:Grid>
<mx:LinkButton click="resetTC2();"
textDecoration="underline"
label="reset"
/>
</mx:Panel>
<!-- =================================== 2nd panel with 24-hour clock example : end ====================================== -->
</mx:HBox>
</mx:VBox>
</mx:Application>