<?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:packedList="ardisia.components.packedList.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorizer="ardisia.components.colorizer.*"
xmlns:rotaryField="ardisia.components.rotaryField.*"
xmlns:data1="ardisia.components.colorizer.data.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
public function creationComplete():void
{
layoutChangeHandler();
}
protected function layoutChangeHandler():void
{
var enabled:Boolean = layoutModeSelect.selectedIndex == 2 ? true : false;
weightedHeading.enabled = weightedPropertiesFormItem.enabled = peakFormItem.enabled = noiseFactorFormItem.enabled = radialWeighted.enabled =
topWeighted.enabled = topRightWeighted.enabled = rightWeighted.enabled = bottomRightWeight.enabled = bottomWeighted.enabled =
bottomLeftWeight.enabled = leftWeighted.enabled = topLeftWeighted.enabled = enabled;
switch (layoutModeSelect.selectedIndex)
{
case 0:
packedListDemo.layoutMode = "random";packedListDemoB.layoutMode = "random";
break;
case 1:
packedListDemo.layoutMode = "radial";packedListDemoB.layoutMode = "radial";
break;
case 2:
switch (radioGroup.selectedIndex)
{
case 0:
packedListDemo.layoutMode = "weightedRadial";packedListDemoB.layoutMode = "weightedRadial";
break;
case 1:
packedListDemo.layoutMode = "weightedTop";packedListDemoB.layoutMode = "weightedTop";
break;
case 2:
packedListDemo.layoutMode = "weightedTopRight";packedListDemoB.layoutMode = "weightedTopRight";
break;
case 3:
packedListDemo.layoutMode = "weightedRight";packedListDemoB.layoutMode = "weightedRight";
break;
case 4:
packedListDemo.layoutMode = "weightedBottomRight";packedListDemoB.layoutMode = "weightedBottomRight";
break;
case 5:
packedListDemo.layoutMode = "weightedBottom";packedListDemoB.layoutMode = "weightedBottom";
break;
case 6:
packedListDemo.layoutMode = "weightedBottomLeft";packedListDemoB.layoutMode = "weightedBottomLeft";
break;
case 7:
packedListDemo.layoutMode = "weightedLeft";packedListDemoB.layoutMode = "weightedLeft";
break;
case 8:
packedListDemo.layoutMode = "weightedTopLeft";packedListDemoB.layoutMode = "weightedTopLeft";
break;
}
break;
}
}
protected function enableThrowingSelect_changeHandler(event:Event):void
{
autoVelocityFormItem.enabled = autoThrowSpeedFudgeFormItem.enabled = autoMaxSpeedFormItem.enabled = autoMinSpeedFormItem.enabled =
throwVelocityFormItem.enabled = throwDecayFormItem.enabled = throwAngleOffsetFormItem.enabled = enableThrowingSelect.selected;
if (enableThrowingSelect.selected)
{
throwVelocityFormItem.enabled = !autoVelocitySelect.selected;
autoThrowSpeedFudgeFormItem.enabled = autoMaxSpeedFormItem.enabled = autoMinSpeedFormItem.enabled = autoVelocitySelect.selected;
}
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="radioGroup"
change="layoutChangeHandler()"/>
<colorizer:GradientColorizer id="colorizer"
rangeMinimum="0" rangeMaximum="1">
<data1:GradientColorizerData color="#0080FF" ratio="0"/>
<data1:GradientColorizerData color="#FF0000" ratio="1"/>
</colorizer:GradientColorizer>
</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="PackedList Description"
description="List designed to use the PackedLayout layout class. Also supports throwing layout elements via mouse interaction. Useful to create interactive distributive lists like tag clouds."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Throwing Animation Properties</data:label>
<data:content>
<s:FormItem label="Enabled:">
<s:CheckBox id="enableThrowingSelect"
selected="true"
change="enableThrowingSelect_changeHandler(event)"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Enable renderer throwing."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="autoVelocityFormItem"
label="Auto Velocity:">
<s:CheckBox id="autoVelocitySelect"
selected="true"
change="if (autoVelocitySelect.selected){packedListDemo.throwVelocity=packedListDemoB.throwVelocity=0;}else{packedListDemo.throwVelocity=packedListDemoB.throwVelocity=throwVelocitySelect.value}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Throw velocity will be automatically calculated based on how fast the user is moving the mouse over the renderers. The faster the user mouses out of items, the faster they are thrown."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="autoThrowSpeedFudgeFormItem"
enabled="{autoVelocitySelect.selected}"
label="Speed Fudge:">
<s:HSlider id="autoThrowSpeedFudgeSelect"
width="100"
minimum="0" maximum="1" value="0.1" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="A fudge factor to speed up/slow down throws if throwVelocity is auto."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="autoMaxSpeedFormItem"
enabled="{autoVelocitySelect.selected}"
label="Auto Max Speed:">
<s:HSlider id="autoMaxSpeedSelect"
width="100"
minimum="0" maximum="10" value="3" snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Maximum throw speed. Only relevant if throwVelocity is auto."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="autoMinSpeedFormItem"
enabled="{autoVelocitySelect.selected}"
label="Auto Min Speed:">
<s:HSlider id="autoMinSpeedSelect"
width="100"
minimum="0" maximum="10" value="0" snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Minimum throw speed. Only relevant if throwVelocity is auto."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="throwVelocityFormItem"
enabled="{!autoVelocitySelect.selected}"
label="Velocity:">
<s:HSlider id="throwVelocitySelect"
width="100"
minimum="1" maximum="20" value="5" snapInterval="1"
change="packedListDemo.throwVelocity=packedListDemoB.throwVelocity=throwVelocitySelect.value"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The speed at which renderers are thrown on item roll out."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="throwDecayFormItem"
label="Decay:">
<s:HSlider id="throwDecaySelect"
width="100"
minimum="1" maximum="10" value="1" snapInterval="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The rate at which thrown renderer movement decays. Think of this as a friction coefficient."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="throwAngleOffsetFormItem"
label="Angle Offset:">
<rotaryField:RotaryField id="throwAngleOffsetSelect"
width="50"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The angle at which to offset the throw direction from the mouse movement direction. Expressed in degrees."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Update Layout:">
<s:Button label="Refresh"
click="packedListDemo.refreshPositions();packedListDemoB.refreshPositions();" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Call to refresh the positions of the layout elements."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Layout Mode:">
<s:DropDownList id="layoutModeSelect"
selectedIndex="1"
requireSelection="true"
width="100"
change="layoutChangeHandler()">
<s:dataProvider>
<s:ArrayCollection>
<fx:String>random</fx:String>
<fx:String>radial</fx:String>
<fx:String>weighted</fx:String>
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The default value of 'random' will randomly place elements anywhere within the control's bounds. A value of 'radial' will position the elements radially around the center with some weighting for element size but primarily designed to have the best appearance. All other modes involve a distribution function for layout."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingBottom="5" paddingTop="5"/>
<s:FormHeading id="weightedPropertiesFormItem"
label="Weighted Properties"/>
<s:FormItem id="peakFormItem"
label="Peak:">
<s:HSlider id="peakSelect"
width="100"
minimum="0.01" maximum="1" value="0.55" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The location of the peak for layout modes that use the distribution function."/>
</s:helpContent>
</s:FormItem>
<s:FormItem id="noiseFactorFormItem"
label="Noise:">
<s:HSlider id="noiseFactorSelect"
width="100"
minimum="0.0" maximum="1" value="0.5" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="A random noise to add to the normal distribution, expressed as a percentage of the total width. Set to a non-zero value for layout elements to be positioned off their exact position on the distribution."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"/>
<s:FormHeading id="weightedHeading"
label="Weighted Layout Modes"/>
<s:FormItem id="radialWeighted"
label="Radial:">
<s:RadioButton selected="true"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="topWeighted"
label="Top:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="topRightWeighted"
label="Top-Right:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="rightWeighted"
label="Right:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="bottomRightWeight"
label="Bottom-Right:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="bottomWeighted"
label="Bottom:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="bottomLeftWeight"
label="Bottom-Left:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="leftWeighted"
label="Left:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
<s:FormItem id="topLeftWeighted"
label="Top-Left:">
<s:RadioButton selected="false"
groupName="radioGroup"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Tag Cloud Example</data:tabLabel>
<data:exampleDescription>Tag cloud. Item renderers are scaled and colorized according to the popularity of the dog name in the USA. Labels are colorized using an Ardisia GradientColorizer with the minimum of the range colored blue, and the maximum colored red.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalAlign="justify"
top="20" right="20" bottom="20" left="20">
<s:Label text="Most Popular Dog Names"
fontWeight="bold"/>
<packedList:PackedList id="packedListDemo"
width="100%" height="100%"
resolution="200"
enableThrowing="{enableThrowingSelect.selected}"
throwDecay="{throwDecaySelect.value}"
throwAngleOffset="{throwAngleOffsetSelect.value}"
autoThrowSpeedFudge="{autoThrowSpeedFudgeSelect.value}"
autoMaxSpeed="{autoMaxSpeedSelect.value}"
autoMinSpeed="{autoMinSpeedSelect.value}"
peak="{peakSelect.value}"
noiseFactor="{noiseFactorSelect.value}"
layoutMode="radial"
contentBackgroundColor="#000000">
<packedList:dataProvider>
<s:ArrayCollection>
<fx:Object label="Bella" popularity="1" />
<fx:Object label="Max" popularity="2" />
<fx:Object label="Lucy" popularity="3" />
<fx:Object label="Molly" popularity="4" />
<fx:Object label="Buddy" popularity="5" />
<fx:Object label="Daisy" popularity="6" />
<fx:Object label="Maggie" popularity="7" />
<fx:Object label="Charlie" popularity="8" />
<fx:Object label="Sophie" popularity="9" />
<fx:Object label="Jack" popularity="10" />
<fx:Object label="Sadie" popularity="11" />
<fx:Object label="Toby" popularity="12" />
<fx:Object label="Chloe" popularity="13" />
<fx:Object label="Cody" popularity="14" />
<fx:Object label="Bailey" popularity="15" />
<fx:Object label="Buster" popularity="16" />
<fx:Object label="Lola" popularity="17" />
<fx:Object label="Duke" popularity="18" />
<fx:Object label="Zoe" popularity="19" />
<fx:Object label="Cooper" popularity="20" />
<fx:Object label="Abby" popularity="21" />
<fx:Object label="Riley" popularity="22" />
<fx:Object label="Ginger" popularity="23" />
<fx:Object label="Rocky" popularity="24" />
<fx:Object label="Bailey" popularity="25" />
</s:ArrayCollection>
</packedList:dataProvider>
<packedList:itemRenderer>
<fx:Script>
<![CDATA[
import mx.events.FlexEvent;
]]>
</fx:Script>
<fx:Component>
<s:ItemRenderer depth.selected="1" depth.hovered="2"
autoDrawBackground="false">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
var scaleFactor:Number = value.popularity / 25;
scaleX = scaleY = 1 + Math.sqrt(scaleFactor) * 4;
textLabel.text = value.label;
textLabel.setStyle('color', outerDocument.colorizer.getColor(scaleFactor));
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="hovered">
<s:Animate target="{this.stroke}"
duration="250">
<s:SimpleMotionPath property="alpha"
valueFrom="0.25" valueTo="0.75"/>
</s:Animate>
</s:Transition>
</s:transitions>
<!--- border & background -->
<s:Rect includeIn="hovered,selected"
top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke id="stroke"
color="#FFFFFF"
pixelHinting="true"
joints="miter"
caps="square"
alpha="0.75"
weight="1" weight.selected="2"/>
</s:stroke>
<s:fill>
<s:SolidColor alpha="0" color="{getStyle('color')}" alpha.selected="0.1"/>
</s:fill>
<s:filters>
<s:GlowFilter blurX="8" blurY="8"
color="0"/>
</s:filters>
</s:Rect>
<s:Label id="textLabel"
top="4" right="3" bottom="2" left="3"
fontSize="12">
<s:filters>
<s:DropShadowFilter alpha="0.5"
blurX="2" blurY="2"
distance="2"/>
</s:filters>
</s:Label>
</s:ItemRenderer>
</fx:Component>
</packedList:itemRenderer>
</packedList:PackedList>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Packed List Image Example</data:tabLabel>
<data:exampleDescription>Example with images rather than text.</data:exampleDescription>
<data:primaryContent>
<packedList:PackedList id="packedListDemoB"
top="20" right="20" bottom="20" left="20"
resolution="200"
enableThrowing="{enableThrowingSelect.selected}"
throwDecay="{throwDecaySelect.value}"
throwAngleOffset="{throwAngleOffsetSelect.value}"
autoThrowSpeedFudge="{autoThrowSpeedFudgeSelect.value}"
autoMaxSpeed="{autoMaxSpeedSelect.value}"
autoMinSpeed="{autoMinSpeedSelect.value}"
peak="{peakSelect.value}"
noiseFactor="{noiseFactorSelect.value}"
layoutMode="radial">
<packedList:dataProvider>
<s:ArrayCollection>
<fx:Object icon="@Embed(source='icons/open-iconic-master/camera-slr-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/clock-6x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/eye-3x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/headphones-6x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/lightbulb-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/lock-locked-4x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/microphone.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/monitor.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/person-8x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/pie-chart-3x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/plus.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/print-4x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/puzzle-piece-8x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/task-2x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/terminal-3x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/thumb-down-4x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/thumb-up-6x.png')"/>
<fx:Object icon="@Embed(source='icons/open-iconic-master/timer-8x.png')"/>
</s:ArrayCollection>
</packedList:dataProvider>
<packedList:itemRenderer>
<fx:Component>
<s:ItemRenderer depth.selected="1" depth.hovered="2"
autoDrawBackground="false">
<s:states>
<s:State name="normal" />
<s:State name="disabled" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:transitions>
<s:Transition fromState="*" toState="hovered">
<s:Animate target="{this.stroke}"
duration="250">
<s:SimpleMotionPath property="alpha"
valueFrom="0.25" valueTo="0.75"/>
</s:Animate>
</s:Transition>
</s:transitions>
<!--- border & background -->
<s:Rect includeIn="hovered,selected"
top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke id="stroke"
color="#000000"
pixelHinting="true"
joints="miter"
caps="square"
alpha="0.75"
weight="1" weight.selected="2"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFFFF" color.selected="#000"/>
</s:fill>
</s:Rect>
<s:Image top="5" right="5" bottom="5" left="5"
source="{data.icon}">
<s:filters>
<s:ColorMatrixFilter matrix.selected="[
1, 0, 0, 0, 255,
0, 1, 0, 0, 255,
0, 0, 1, 0, 255,
0, 0, 0, 1, 0
]"/>
</s:filters>
</s:Image>
</s:ItemRenderer>
</fx:Component>
</packedList:itemRenderer>
</packedList:PackedList>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>