<?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:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:progressDisplay="ardisia.components.progressDisplay.*"
xmlns:animatedImage="ardisia.components.animatedImage.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import flash.utils.getTimer;
import ardisia.components.pane.events.PaneEvent;
import ardisia.components.progressDisplay.ProgressDisplayDeterminate;
import ardisia.components.progressDisplay.ProgressDisplayIndeterminate;
import ardisia.components.progressDisplay.baseClasses.ProgressDisplayBase;
protected var indeterminate:Boolean;
protected var timer:Timer;
protected var relativeTimer:Number;
protected var progressDisplay:ProgressDisplayBase;
public function creationComplete():void
{
}
protected function floatHandler(event:MouseEvent):void
{
if (progressDisplay && progressDisplay.isFloating)
return;
switch (event.currentTarget)
{
case snakeButton:
indeterminate = true;
progressDisplay = new ProgressDisplayIndeterminate();
progressDisplay.label = "Loading...";
progressDisplay.delayBeforeFloat = preDelaySelect.value;
progressDisplay.minimumFloatTime = minDisplayTime.value;
progressDisplay.delayAfterCloseFloat = postDelaySelect.value;
progressDisplay.timeoutDuration = timeoutDurationSelect.value;
progressDisplay.show(this, modalSelect.selected, moduleFactory);
break;
case arcButton:
indeterminate = false;
progressDisplay = new ProgressDisplayDeterminate();
progressDisplay.delayBeforeFloat = preDelaySelectB.value;
progressDisplay.minimumFloatTime = minDisplayTimeB.value;
progressDisplay.delayAfterCloseFloat = postDelaySelectB.value;
progressDisplay.timeoutDuration = timeoutDurationSelectB.value;
progressDisplay.show(this, modalSelectB.selected, moduleFactory);
break;
}
relativeTimer = getTimer();
addEventListener(Event.ENTER_FRAME, eventHandler);
progressDisplay.addEventListener(PaneEvent.CLOSED, eventHandler);
}
protected function eventHandler(event:Event):void
{
switch (event.type)
{
case Event.ENTER_FRAME:
if (indeterminate)
progressDisplay.label = "Running Time " + String(getTimer() - relativeTimer);
if (!indeterminate)
{
if (progressDisplay is ProgressDisplayDeterminate)
{
ProgressDisplayDeterminate(progressDisplay).updateProgress((getTimer() - relativeTimer) / runtimeSelect.value);
}
if (getTimer() - relativeTimer > runtimeSelect.value)
{
progressDisplay.close();
}
}
break;
case PaneEvent.CLOSED:
removeEventListener(Event.ENTER_FRAME, eventHandler);
progressDisplay.removeEventListener(PaneEvent.CLOSED, eventHandler);
break;
}
}
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="ProgressDisplay Description"
description="The ProgressDisplay Components provide easy and customizable ways to provide feedback to users regarding the progress of some process, most likely a loading process. The displays come in two flavors: (i) the ProgressDisplayIndeterminate component, which displays an AnimatedImage with the ability to update a label to display a general message. Developers can display and update the label with any string desired. Since the animation does not change to reflect the progress of a process, the display is 'Indeterminate'. (ii) The ProgressDisplayDeterminate component supports an animation that will display how far along a process has progressed. By default, the ProgressDisplayIndeterminate skin uses a snake animation and the ProgressDisplayDeterminate skin draws an arc as the process progresses. These components are skinnable and easily customized."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>ProgressDisplay - Snake Skin</data:tabLabel>
<data:exampleDescription>Indeterminate Example. ProgressImage component using a skin with an embedded Snake animation. Snake spritesheet template is included.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup verticalAlign="justify">
<s:Form>
<s:FormItem>
<s:Button id="snakeButton"
label="Float The ProgressDisplay"
click="floatHandler(event)"/>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"
paddingLeft="-10" paddingRight="15"/>
<s:Form>
<s:FormItem label="Timeout">
<s:HSlider id="timeoutDurationSelect"
minimum="1000" maximum="20000" value="5000"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The maximum duration the progressDisplay will be popped up and displayed before being removed and closed. Useful to hide a progressDisplay in case the process never completes."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Modal">
<s:CheckBox id="modalSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Delay Before Float">
<s:HSlider id="preDelaySelect"
minimum="0" maximum="5000" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The delay before the display is floated after floating is requested. Useful to prevent display if the duration of the process being tracked is too short."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Min Display Time">
<s:HSlider id="minDisplayTime"
minimum="0" maximum="10000" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The minimum time the progressDisplay will be displayed. If close is requested before this duration has been reached, the progressDisplay will be displayed until this duration has passed and and then the progressDisplay will be closed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Delay Post Close">
<s:HSlider id="postDelaySelect"
minimum="0" maximum="5000" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The delay after close is called before the progressDisplay is removed from display."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:Group />
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>ProgressDisplay - Arc Skin</data:tabLabel>
<data:exampleDescription>Determinate Example.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup verticalAlign="justify">
<s:Form>
<s:FormItem label="Run Time">
<s:HSlider id="runtimeSelect"
minimum="1000" maximum="60000" value="5000"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Time this progress display should run."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:Button id="arcButton"
label="Float The ProgressDisplay"
click="floatHandler(event)"/>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"
paddingLeft="-10" paddingRight="15"/>
<s:Form>
<s:FormItem label="Timeout">
<s:HSlider id="timeoutDurationSelectB"
minimum="1000" maximum="60000" value="30000"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The maximum duration the progressDisplay will be popped up and displayed before being removed and closed. Useful to hide a progressDisplay in case the process never completes."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Modal">
<s:CheckBox id="modalSelectB"
selected="true"/>
</s:FormItem>
<s:FormItem label="Delay Before Float">
<s:HSlider id="preDelaySelectB"
minimum="0" maximum="5000" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The delay before the display is floated after floating is requested. Useful to prevent display if the duration of the process being tracked is too short."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Min Display Time">
<s:HSlider id="minDisplayTimeB"
minimum="0" maximum="60000" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The minimum time the progressDisplay will be displayed. If close is requested before this duration has been reached, the progressDisplay will be displayed until this duration has passed and and then the progressDisplay will be closed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Delay Post Close">
<s:HSlider id="postDelaySelectB"
minimum="0" maximum="5000" value="500"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The delay after close is called before the progressDisplay is removed from display."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:Group />
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>