<?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:timeMachineList="ardisia.components.timeMachineList.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:layouts="ardisia.layouts.*"
xmlns:reflectionContainer="ardisia.components.reflectionContainer.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import spark.effects.easing.Bounce;
import spark.effects.easing.Elastic;
import spark.effects.easing.Linear;
import spark.effects.easing.Power;
import spark.effects.easing.Sine;
public function creationComplete():void
{
demoAppWrapper.topLevelCompassContainer.centerRegionInstance.addEventListener(MouseEvent.ROLL_OVER, function(event:MouseEvent):void
{
demoAppWrapper.topLevelCompassContainer.centerRegionInstance.setFocus()
});
}
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="TimeMachineList Description"
description="List optimized for use with the TimeMachineLayout class. Supports virtualization, an integrated scrollbar, and mouse and keyboard navigation."
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="Animation Properties:"/>
<s:FormItem label="Duration:">
<s:HSlider id="durationSelect"
width="100"
minimum="0" maximum="5000" value="350"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Duration of the animation between centered items. 0 to skip"/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="2">
<s:ArrayCollection>
<fx:Object name="Sine" easer="{new Sine()}"/>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Power" easer="{new Power(0.1, 4)}"/>
<fx:Object name="Bounce" easer="{new Bounce()}"/>
<fx:Object name="Elastic" easer="{new Elastic()}"/>
</s:ArrayCollection>
</s:DropDownList>
</s:FormItem>
<s:FormHeading label="Scroll Properties:"/>
<s:FormItem label="Z Scroll:">
<s:HSlider id="zScrollSelect"
width="100"
minimum="0" maximum="{12 * zSeparationSelect.value}" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="This layout is scrolled along the z axis."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Layout:"/>
<s:FormItem label="Visible Items:">
<s:HSlider id="visibleItemsSelect"
width="100"
minimum="1" maximum="20" value="10"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The number of items to display at any given time. Necessary for large dataProviders and virtualized layouts."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Z Separation:">
<s:HSlider id="zSeparationSelect"
width="100"
minimum="1" maximum="200" value="150"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The separation between elements on the z axis. Must be greater than 0."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Alpha Properties:"/>
<s:FormItem label="Alpha From:">
<s:HSlider id="alphaFromSelect"
width="100"
snapInterval="0"
minimum="0" maximum="1" value="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The alpha value for the lowest z value elements (closest to user)."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Alpha To:">
<s:HSlider id="alphaToSelect"
width="100"
snapInterval="0"
minimum="0" maximum="1" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The alpha value for elements at the highest possible z value (farthest from user)."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Center Offsets:"/>
<s:FormItem label="Offset X:">
<s:HSlider id="offsetXSelect"
width="100"
snapInterval="1"
minimum="-100" maximum="100" value="0"/>
</s:FormItem>
<s:FormItem label="Offset Y:">
<s:HSlider id="offsetYSelect"
width="100"
snapInterval="1"
minimum="-100" maximum="100" value="0"/>
</s:FormItem>
<s:FormHeading label="Rotation:"/>
<s:FormItem label="Rotation X:">
<s:HSlider id="rotationXSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0" />
</s:FormItem>
<s:FormItem label="Rotation Y:">
<s:HSlider id="rotationYSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0" />
</s:FormItem>
<s:FormItem label="Rotation Z:">
<s:HSlider id="rotationZSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0" />
</s:FormItem>
<s:FormHeading label="Perspective Projections:"/>
<s:FormItem label="Projection X:">
<s:HSlider id="projectionXSelect"
width="100"
snapInterval="1"
minimum="-200" maximum="200" value="0"/>
</s:FormItem>
<s:FormItem label="Projection Y:">
<s:HSlider id="projectionYSelect"
width="100"
snapInterval="1"
minimum="-300" maximum="300" value="-195"/>
</s:FormItem>
<s:FormItem label="Field of View:">
<s:HSlider id="fovSelect"
width="100"
snapInterval="1"
minimum="1" maximum="179" value="90"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Image Example</data:tabLabel>
<data:exampleDescription>List that displays images with captions of the first year of Laika's life. Note: the TimeMachineList accepts keyboard (up, down, left, right, home, end) and mouseWheel navigation as long as it has keyboard focus. Click the list to focus it. This example only has 13 images, but due to virtualization support, this list could display thousands of images.</data:exampleDescription>
<data:primaryContent>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke color="#5F5F5F"
caps="square"
joints="miter"
weight="1"/>
</s:stroke>
<s:fill>
<s:LinearGradient rotation="90">
<s:GradientEntry color="0"
ratio="0"/>
<s:GradientEntry color="#262935"
ratio="1"/>
</s:LinearGradient>
</s:fill>
</s:Rect>
<timeMachineList:TimeMachineList id="timeMachinePart"
top="50" right="50" bottom="50" left="50"
duration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
selectedIndex="0"
useVirtualLayout="false"
focusEnabled="true">
<timeMachineList:dataProvider>
<s:ArrayCollection id="dp">
<s:DataItem header="Laika at 7 Weeks" description="Up to no good." icon="@Embed(source='images/listImages/1.jpg')"/>
<s:DataItem header="Laika at 8 Weeks" description="She likes water." icon="@Embed(source='images/listImages/2.jpg')"/>
<s:DataItem header="Laika at 9 Weeks" description="She makes it hard to say no." icon="@Embed(source='images/listImages/3.jpg')"/>
<s:DataItem header="Laika at 10 Weeks" description="First canoe trip." icon="@Embed(source='images/listImages/4.jpg')"/>
<s:DataItem header="Laika at 11 Weeks" description="Naughty dog." icon="@Embed(source='images/listImages/5.jpg')"/>
<s:DataItem header="Laika at 12 Weeks" description="Common scene." icon="@Embed(source='images/listImages/6.jpg')"/>
<s:DataItem header="Laika at 13 Weeks" description="Discovers her hatred of thunder." icon="@Embed(source='images/listImages/7.jpg')"/>
<s:DataItem header="Laika at 14 Weeks" description="Out of breath." icon="@Embed(source='images/listImages/8.jpg')"/>
<s:DataItem header="Laika at 15 Weeks" description="Bath time." icon="@Embed(source='images/listImages/9.jpg')"/>
<s:DataItem header="Laika at 4 Months" description="Valentines day." icon="@Embed(source='images/listImages/10.jpg')"/>
<s:DataItem header="Laika at 5 Months" description=""I live for this sh**"" icon="@Embed(source='images/listImages/11.jpg')"/>
<s:DataItem header="Laika at 6 Months" description="Rocking out." icon="@Embed(source='images/listImages/12.jpg')"/>
<s:DataItem header="Laika at 1 Year" description="End of a good day." icon="@Embed(source='images/listImages/13.jpg')"/>
</s:ArrayCollection>
</timeMachineList:dataProvider>
<timeMachineList:layout>
<layouts:TimeMachineLayout id="timeMachineLayout"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
zSeparation="{zSeparationSelect.value}"
zScrollPosition="{zScrollSelect.value}"
maxDisplayedElements="{visibleItemsSelect.value}"
centerOffsetX="{offsetXSelect.value}" centerOffsetY="{offsetYSelect.value}"
rotationX="{rotationXSelect.value}" rotationY="{rotationYSelect.value}" rotationZ="{rotationZSelect.value}"
perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
fieldOfView="{fovSelect.value}"/>
</timeMachineList:layout>
<timeMachineList:itemRenderer>
<fx:Component>
<s:DataRenderer horizontalCenter="0" verticalCenter="0">
<s:layout>
<s:VerticalLayout horizontalAlign="justify"
gap="20"/>
</s:layout>
<reflectionContainer:ReflectionContainer alphaFrom="0.5" alphaTo="0" alphaToRatio="0.75">
<s:Image source="{data.icon}"/>
</reflectionContainer:ReflectionContainer>
<s:Group>
<s:RichText horizontalCenter="0"
textAlign="center">
<s:span id="headerText" color="#FFFFFF" fontWeight="bold" text="{data.header}" fontSize="14"/>
<s:br/>
<s:span id="descriptionText" color="#CCCCCC" fontWeight="bold" text="{data.description}"/>
<s:filters>
<s:DropShadowFilter angle="90"
blurX="0" blurY="2"
alpha="1"
distance="1"/>
</s:filters>
</s:RichText>
</s:Group>
</s:DataRenderer>
</fx:Component>
</timeMachineList:itemRenderer>
</timeMachineList:TimeMachineList>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Diary Example</data:tabLabel>
<data:exampleDescription>Elements do not need to be images, as demonstrated by this example. Click the text areas to update Laika's diary on her first year of life. Note: the TimeMachineList accepts keyboard (up, down, left, right, home, end) and mouseWheel navigation as long as it is focused. Click the list to focus it.</data:exampleDescription>
<data:primaryContent>
<timeMachineList:TimeMachineList id="timeMachinePartB"
top="50" right="50" bottom="50" left="50"
duration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
selectedIndex="0"
useVirtualLayout="false"
focusEnabled="true">
<timeMachineList:dataProvider>
<s:ArrayCollection>
<s:DataItem header="Diary Entry #1" description="Enter text here."/>
<s:DataItem header="Diary Entry #2" description="Enter text here."/>
<s:DataItem header="Diary Entry #3" description="Enter text here."/>
<s:DataItem header="Diary Entry #4" description="Enter text here."/>
<s:DataItem header="Diary Entry #5" description="Enter text here."/>
<s:DataItem header="Diary Entry #6" description="Enter text here."/>
<s:DataItem header="Diary Entry #7" description="Enter text here."/>
<s:DataItem header="Diary Entry #8" description="Enter text here."/>
<s:DataItem header="Diary Entry #9" description="Enter text here."/>
<s:DataItem header="Diary Entry #10" description="Enter text here."/>
<s:DataItem header="Diary Entry #11" description="Enter text here."/>
<s:DataItem header="Diary Entry #12" description="Enter text here."/>
<s:DataItem header="Diary Entry #13" description="Enter text here."/>
<s:DataItem header="Diary Entry #14" description="Enter text here."/>
<s:DataItem header="Diary Entry #15" description="Enter text here."/>
</s:ArrayCollection>
</timeMachineList:dataProvider>
<timeMachineList:layout>
<layouts:TimeMachineLayout id="timeMachineLayoutB"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
zSeparation="{zSeparationSelect.value}"
zScrollPosition="{zScrollSelect.value}"
maxDisplayedElements="{visibleItemsSelect.value}"
centerOffsetX="{offsetXSelect.value}" centerOffsetY="{offsetYSelect.value}"
rotationX="{rotationXSelect.value}" rotationY="{rotationYSelect.value}" rotationZ="{rotationZSelect.value}"
perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
fieldOfView="{fovSelect.value}"/>
</timeMachineList:layout>
<timeMachineList:itemRenderer>
<fx:Component>
<s:DataRenderer horizontalCenter="0" verticalCenter="0">
<s:Panel width="400"
title="{data.header}">
<s:TextArea top="20" right="20" bottom="20" left="20"
text="{data.description}"/>
</s:Panel>
</s:DataRenderer>
</fx:Component>
</timeMachineList:itemRenderer>
</timeMachineList:TimeMachineList>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>