<?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:layouts="ardisia.layouts.*"
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
{
virtualSelect_changeHandler();
}
protected function virtualSelect_changeHandler():void
{
dp.removeAll();
var len:int = virtualSelect.selected ? 2000 : 20;
for (var i:int = 0; i < len; i++)
{
dp.addItem(String(i));
}
timeMachineLayout.useVirtualLayout = virtualSelect.selected;
timeMachineLayout.horizontalScrollPosition = 0;
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<s:ArrayCollection id="dp" />
</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="TimeMachineLayout Description"
description="Lays out elements in a TimeMachine layout pattern. Layout is capable of displaying thousands of renderers via virtualization."
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="Scroll Properties:"/>
<s:FormItem label="Z Scroll:">
<s:HSlider id="zScrollSelect"
width="100"
minimum="0" maximum="{(dp.length - 1) * 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="Virtual Layout:">
<s:CheckBox id="virtualSelect"
selected="true"
change="virtualSelect_changeHandler()"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Supports virtualization. When virtualized, the list on the right will be populated with a dataProvider of length 2000. For non-virtualized layouts, the list on the right will be populated with a dataProvider of length 20."/>
</s:helpContent>
</s:FormItem>
<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="100" value="90"/>
<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 elements that are the closest to the user."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Alpha To:">
<s:HSlider id="alphaToSelect"
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 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="-200" maximum="200" value="-150"/>
</s:FormItem>
<s:FormItem label="Field of View:">
<s:HSlider id="fovSelect"
width="100"
snapInterval="1"
minimum="1" maximum="179" value="70"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Timemachine Example</data:tabLabel>
<data:exampleDescription>Simple DataGroup that has a dataProvider of length 20 if not virtualized and a dataProvider of length 2,000 if the layout is virtualized. The keyboard arrow keys can be used to change selection. Mouse wheel support is not added by the layout. View the TimeMachineList demo for an example of a TimeMachineLayout with mouse wheel support.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0"
gap="8"
horizontalAlign="justify">
<s:List id="timemachineList"
width="600" height="300"
borderVisible="true"
dataProvider="{dp}"
focusEnabled="true">
<s:layout>
<layouts:TimeMachineLayout id="timeMachineLayout"
useVirtualLayout="{virtualSelect.selected}"
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}"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer width="{Math.max(200, Math.min(400, Math.round(Math.random() * 400)))}"
height="{Math.max(100, Math.min(200, Math.round(Math.random() * 200)))}"
autoDrawBackground="false">
<s:states>
<s:State name="normal" />
<s:State name="hovered" stateGroups="hoveredGroup"/>
<s:State name="selectedAndHovered" stateGroups="selectedGroup, hoveredGroup"/>
<s:State name="selected" stateGroups="selectedGroup"/>
</s:states>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke weight="5"
pixelHinting="true"
caps="square"
joints="miter"/>
</s:stroke>
<s:fill>
<s:SolidColor color="0xFFFFFF" color.selectedGroup="0x3399FF" color.hovered="0xDEDEDE"/>
</s:fill>
</s:Rect>
<s:Label horizontalCenter="0" verticalCenter="0"
fontWeight="bold"
fontSize="20"
text="{data}"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
<s:HScrollBar id="scrollbar"
minimum="0" maximum="{dp.length - 1}"
change="timeMachineLayout.zScrollPosition=timeMachineLayout.getScrollPositionToElement(scrollbar.value);"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>