<?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));
}
}
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="CarouselLayout Description"
description="Lays out elements in a Carousel 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="Radii:"/>
<s:FormItem label="Use Calculated:">
<s:CheckBox id="radiiSelect"
selected="false"
change="if(radiiSelect.selected){carouselLayout.radiusX=carouselLayout.radiusY=carouselLayout.radiusZ=NaN}
else{carouselLayout.radiusX=radiusXSelect.value;carouselLayout.radiusY=radiusYSelect.value;carouselLayout.radiusZ=radiusZSelect.value;}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By default, the x y z radii are all automatically calculated to approximately fill the carousel dimensions. Can be set explicitly. Calculated values may not look terribly great because of field of view and offset settings. It is recommended to use explicit values."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!radiiSelect.selected}"
label="Radius X:">
<s:HSlider id="radiusXSelect"
width="100"
snapInterval="1" minimum="100" maximum="1000" value="500"
change="{carouselLayout.radiusX=radiusXSelect.value}"/>
</s:FormItem>
<s:FormItem enabled="{!radiiSelect.selected}"
label="Radius Y:">
<s:HSlider id="radiusYSelect"
width="100"
snapInterval="1" minimum="0" maximum="1000" value="50"
change="{carouselLayout.radiusY=radiusYSelect.value}"/>
</s:FormItem>
<s:FormItem enabled="{!radiiSelect.selected}"
label="Radius Z:">
<s:HSlider id="radiusZSelect"
width="100"
snapInterval="1" minimum="100" maximum="1000" value="500"
change="{carouselLayout.radiusZ=radiusZSelect.value}"/>
</s:FormItem>
<s:FormHeading label="Scroll Properties:"/>
<s:FormItem label="Angle Scroll:">
<s:HSlider id="angleScrollSelect"
width="100"
snapInterval="1" minimum="-360" maximum="360" value="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="This layout is scrolled via the angleOffset."/>
</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."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{!virtualSelect.selected}"
label="Arc Length:">
<s:HSlider id="arcLengthSelect"
minimum="45" maximum="360" value="360" snapInterval="1"/>
</s:FormItem>
<s:FormItem enabled="{virtualSelect.selected}"
label="Visible Items:">
<s:HSlider id="maxVisibleVirtualElementsSelect"
width="100"
minimum="1" maximum="50" value="20"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The number of items to display at any given time for virtualized layouts."/>
</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 (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 the highest z value element (farthest from the 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="-20"/>
</s:FormItem>
<s:FormHeading label="Rotation:"/>
<s:FormItem label="Explicit Y:">
<s:CheckBox id="explicitYselect"
selected="false"
change="carouselLayout.rotationY=explicitYselect.selected ? rotationYSelect.value : NaN" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By default, the y rotation will be calculated so each element is curved to create a circle. Can be set explicitly."/>
</s:helpContent>
</s:FormItem>
<s:FormItem enabled="{explicitYselect.selected}"
label="Rotation Y:">
<s:HSlider id="rotationYSelect"
width="100"
snapInterval="1"
minimum="-90" maximum="90" value="0"
change="carouselLayout.rotationY=rotationYSelect.value"/>
</s:FormItem>
<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 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="-100"/>
</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>Carousel Layout Example</data:tabLabel>
<data:exampleDescription>Simple List (supports selection) 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 CarouselList demo for an example of a CarouselLayout with mouse wheel support.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0"
gap="8"
horizontalAlign="justify">
<s:List id="carouselPart"
width="600" height="300"
borderVisible="true"
dataProvider="{dp}"
focusEnabled="true">
<s:layout>
<layouts:CarouselLayout id="carouselLayout"
radiusX="500"
radiusY="50"
radiusZ="300"
maxVisibleVirtualElements="{maxVisibleVirtualElementsSelect.value}"
arcLength="{arcLengthSelect.value}"
angleOffset="{angleScrollSelect.value}"
centerOffsetX="{offsetXSelect.value}"
centerOffsetY="{offsetYSelect.value}"
useVirtualLayout="{virtualSelect.selected}"
alphaFrom="{alphaFromSelect.value}"
alphaTo="{alphaToSelect.value}"
rotationX="{rotationXSelect.value}"
rotationY="NaN"
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="carouselLayout.angleOffset=carouselLayout.getAngleOffsetToElement(scrollbar.value);"/>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>