<?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: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));
}
coverflowLayout.useVirtualLayout = virtualSelect.selected;
coverflowLayout.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="CoverflowLayout Description"
description="Lays out elements in a Coverflow 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: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."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="X Separation:">
<s:HSlider id="xSeparationSelect"
width="100"
snapInterval="1" minimum="10" maximum="100" value="50"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The distance between renderers along the x axis."/>
</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 centered, selected element."/>
</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 edges of the container."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Center Offsets:"/>
<s:FormItem label="Offset Z:">
<s:HSlider id="zOffsetSelect"
width="100"
snapInterval="1"
minimum="0" maximum="500" value="200"/>
</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="45" />
</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>CoverflowLayout Example</data:tabLabel>
<data:exampleDescription>Simple DataGroup that displays 20 item renderers if not virtualized and 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 CoverflowList demo for an example of a CoverflowLayout with mouse wheel support.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0"
gap="8"
horizontalAlign="justify">
<s:List id="coverflowPart"
width="600" height="300"
borderVisible="true"
dataProvider="{dp}"
focusEnabled="true"
skinClass="components.coverflowLayout.CoverflowLayoutListSkin">
<s:layout>
<layouts:CoverflowLayout id="coverflowLayout"
zOffset="{zOffsetSelect.value}"
xSeparation="{xSeparationSelect.value}"
centerOffsetY="{offsetYSelect.value}"
useVirtualLayout="{virtualSelect.selected}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.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="#FFFFFF" color.selectedGroup="#3399FF" color.hovered="#DEDEDE"/>
</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="coverflowLayout.horizontalScrollPosition=coverflowLayout.horizontalScrollPosition + coverflowLayout.getScrollPositionDeltaToElement(scrollbar.value).x"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>