<?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:coverflowList="ardisia.components.coverflowList.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
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="CoverflowList Description"
description="List optimized for use with the CoverflowLayout 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="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="Layout:"/>
<s:FormItem label="X Separation:">
<s:HSlider id="xSeparationSelect"
width="100"
snapInterval="1" minimum="10" maximum="400" value="300"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The distance between renderers along the x axis."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Offset Y:">
<s:HSlider id="offsetYSelect"
width="100"
snapInterval="1"
minimum="-100" maximum="100" value="0"/>
</s:FormItem>
<s:FormItem label="Offset Z:">
<s:HSlider id="zOffsetSelect"
width="100"
snapInterval="1"
minimum="0" maximum="400" value="275"/>
</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.75"/>
<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="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="90" />
</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="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 CoverflowList 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>
<coverflowList:CoverflowList id="coverflowPart"
top="50" right="50" bottom="50" left="50"
duration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
selectedIndex="5"
useVirtualLayout="false"
focusEnabled="true">
<coverflowList:dataProvider>
<s:ArrayCollection>
<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 breathe." 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>
</coverflowList:dataProvider>
<coverflowList:layout>
<layouts:CoverflowLayout id="coverflowLayout"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
zOffset="{zOffsetSelect.value}"
xSeparation="{xSeparationSelect.value}"
centerOffsetY="{offsetYSelect.value}"
rotationX="{rotationXSelect.value}" rotationY="{rotationYSelect.value}" rotationZ="{rotationZSelect.value}"
perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
fieldOfView="{fovSelect.value}"/>
</coverflowList:layout>
<coverflowList: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>
</coverflowList:itemRenderer>
</coverflowList:CoverflowList>
</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 textareas to update Laika's diary on her first year of life. Note: the CoverflowList 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>
<coverflowList:CoverflowList id="coverflowPartB"
top="50" right="50" bottom="50" left="50"
duration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
selectedIndex="5"
useVirtualLayout="false"
focusEnabled="true">
<coverflowList: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>
</coverflowList:dataProvider>
<coverflowList:layout>
<layouts:CoverflowLayout id="coverflowLayoutB"
zOffset="{zOffsetSelect.value}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
xSeparation="{xSeparationSelect.value}"
centerOffsetY="{offsetYSelect.value}"
rotationX="{rotationXSelect.value}" rotationY="{rotationYSelect.value}" rotationZ="{rotationZSelect.value}"
perspectiveProjectionCenterOffsetX="{projectionXSelect.value}" perspectiveProjectionCenterOffsetY="{projectionYSelect.value}"
fieldOfView="{fovSelect.value}"/>
</coverflowList:layout>
<coverflowList: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>
</coverflowList:itemRenderer>
</coverflowList:CoverflowList>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>