<?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:datePicker="ardisia.scheduling.datePicker.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.UIComponent;
import spark.events.IndexChangeEvent;
import ardisia.dataTypes.Period;
import ardisia.utils.DateUtils;
import components.datePicker.CustomDatePickerSkin;
public function creationComplete():void
{
var dt:Date = new Date();
highlightedRangeSelectA.selectedDate = new Date(dt.fullYear, dt.month, 10);
highlightedRangeSelectB.selectedDate = new Date(dt.fullYear, dt.month, 20);
datePicker.highlightedDateRange = datePicker2.highlightedDateRange = new Period(highlightedRangeSelectA.selectedDate, highlightedRangeSelectB.selectedDate);
selectedDateSelect.selectedDate = DateUtils.addDays(new Date(), 1);
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:IndexChangeEvent):void
{
var enable:Boolean = demoAppWrapper.tabBar.selectedItem.label == "Default Example";
UIComponent(demoAppWrapper.westVerticalGroup.getElementAt(1)).enabled = enable;
UIComponent(demoAppWrapper.westVerticalGroup.getElementAt(2)).enabled = enable;
});
}
protected function highlightedRangeHandler(event:Event):void
{
switch (event.currentTarget)
{
case highlightedRangeSelectA:
var dt:Date = new Date(Math.max(highlightedRangeSelectA.selectedDate.time, highlightedRangeSelectB.selectedDate.time));
highlightedRangeSelectB.selectedDate = dt;
break;
case highlightedRangeSelectB:
dt = new Date(Math.min(highlightedRangeSelectA.selectedDate.time, highlightedRangeSelectB.selectedDate.time));
highlightedRangeSelectA.selectedDate = dt;
break;
}
datePicker.highlightedDateRange = datePicker2.highlightedDateRange = new Period(highlightedRangeSelectA.selectedDate, highlightedRangeSelectB.selectedDate);
}
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="DatePicker Description"
description="The DatePicker component is a datepicker that fully supports skinning and custom itemRenderers. This makes customization much easier than with the default Flex SDK DateChooser. When the picker has focus, users can change the selected date via the keyboard arrow keys."
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="First Day:">
<s:DropDownList id="firstDayOfWeekSelect"
width="100"
selectedIndex="1"
labelField="name">
<s:ArrayCollection>
<fx:Object name="Sunday" value="0" />
<fx:Object name="Monday" value="1" />
<fx:Object name="Tuesday" value="2" />
<fx:Object name="Wednesday" value="3" />
<fx:Object name="Thursday" value="4" />
<fx:Object name="Friday" value="5" />
<fx:Object name="Saturday" value="6" />
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Defines what day is the first day of the week. Defaults to Monday."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Selected Date:">
<mx:DateField id="selectedDateSelect"
width="100"
selectedDate="{datePicker.selectedDate}"/>
</s:FormItem>
<s:FormItem label="Displayed Month:">
<mx:DateField id="displayedMonthSelect"
width="100"
selectedDate="{datePicker.displayedMonth}"/>
</s:FormItem>
<s:FormItem label="Highlighted Range:">
<mx:DateField id="highlightedRangeSelectA"
width="100"
change="highlightedRangeHandler(event)"/>
<s:Label text="to"
paddingLeft="35"/>
<mx:DateField id="highlightedRangeSelectB"
width="100"
change="highlightedRangeHandler(event)"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Layout:"/>
<s:FormItem label="Width:">
<s:HSlider id="widthSelect"
width="100"
minimum="100" maximum="300" value="175"/>
</s:FormItem>
<s:FormItem label="Height:">
<s:HSlider id="heightSelect"
width="100"
minimum="100" maximum="300" value="200"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormItem label="Display Border:">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="borderColorSelect"
selectedColor="{getStyle('borderColor')}"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Border Alpha:">
<s:HSlider id="borderAlphaSelect"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Default Example</data:tabLabel>
<data:exampleDescription>Default skin. Selection can be changed via the keyboard when the DatePicker has focus.</data:exampleDescription>
<data:primaryContent>
<s:Panel horizontalCenter="0" verticalCenter="0"
title="Pick a Time"
dropShadowVisible="true"
backgroundColor="#FFFFFF">
<datePicker:DatePicker id="datePicker"
top="100" right="100" bottom="100" left="100"
width="{widthSelect.value}" height="{heightSelect.value}"
horizontalCenter="0" verticalCenter="0"
selectedDate="{selectedDateSelect.selectedDate}"
displayedMonth="{displayedMonthSelect.selectedDate}"
firstDayOfWeek="{firstDayOfWeekSelect.selectedItem.value}"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"/>
</s:Panel>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Custom Skin Example</data:tabLabel>
<data:exampleDescription>This example uses a custom skin and item renderers defined in the skin. Illustrates the power skinning provides over customization.</data:exampleDescription>
<data:primaryContent>
<s:Panel horizontalCenter="0" verticalCenter="0"
title="Pick a Time"
dropShadowVisible="true"
backgroundColor="#FFFFFF">
<datePicker:DatePicker id="datePicker2"
top="100" right="100" bottom="100" left="100"
skinClass="components.datePicker.CustomDatePickerSkin"/>
</s:Panel>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>