<?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:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:layouts="ardisia.layouts.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.collections.IList;
public function creationComplete():void
{
layoutChangeHandler();
numElementsSelectChangeHandler();
}
protected function numElementsSelectChangeHandler():void
{
var dp:IList = listDemo.dataProvider;
if (!dp)
{
dp = new ArrayCollection();
listDemo.dataProvider = dp;
}
dp.removeAll();
for (var i:int = 0; i < numElementsSelect.value; i++)
{
dp.addItem(i);
}
}
protected function layoutChangeHandler(forceTopRight:Boolean = false):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:
packedLayoutDemo.layoutMode = "random"
break;
case 1:
packedLayoutDemo.layoutMode = "radial"
break;
case 2:
if (forceTopRight)
{
packedLayoutDemo.layoutMode = "weightedTopRight";
return;
}
switch (radioGroup.selectedIndex)
{
case 0:
packedLayoutDemo.layoutMode = "weightedRadial"
break;
case 1:
packedLayoutDemo.layoutMode = "weightedTop"
break;
case 2:
packedLayoutDemo.layoutMode = "weightedTopRight"
break;
case 3:
packedLayoutDemo.layoutMode = "weightedRight"
break;
case 4:
packedLayoutDemo.layoutMode = "weightedBottomRight"
break;
case 5:
packedLayoutDemo.layoutMode = "weightedBottom"
break;
case 6:
packedLayoutDemo.layoutMode = "weightedBottomLeft"
break;
case 7:
packedLayoutDemo.layoutMode = "weightedLeft"
break;
case 8:
packedLayoutDemo.layoutMode = "weightedTopLeft"
break;
}
break;
}
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<s:RadioButtonGroup id="radioGroup"
change="layoutChangeHandler()"/>
</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="PackedLayout Description"
description="Layout class that lays out visual elements randomly, radially, or via a distribution function. The overlap of elements is minimized for all layout modes. If the layout mode is weighted, each element's weight on the distribution function is determined from the dimensions of the visual element. Change the Layout Mode dropdown below to test."
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="Properties"/>
<s:FormItem label="Num Renderers:">
<s:HSlider id="numElementsSelect"
width="100"
minimum="1" maximum="50" value="35"
change="numElementsSelectChangeHandler()"/>
</s:FormItem>
<s:FormItem label="Layout Mode:">
<s:DropDownList id="layoutModeSelect"
selectedIndex="1"
requireSelection="true"
width="100"
change="layoutChangeHandler(true)">
<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 use a distribution function for position."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"/>
<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.35" 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.1" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="A random noise to add to the 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="false"
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="true"
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>Example</data:tabLabel>
<data:exampleDescription>Notice that renderer overlap is minimized for all layout modes. When resized, elements will retain their relative positioning. PackedLayout supports keyboard selection.</data:exampleDescription>
<data:toolbarContent>
<s:Button label="Refresh Positions"
click="packedLayoutDemo.refreshPositions()" />
</data:toolbarContent>
<data:primaryContent>
<s:List id="listDemo"
top="20" right="20" bottom="20" left="20"
useVirtualLayout="false">
<s:layout>
<layouts:PackedLayout id="packedLayoutDemo"
resolution="200"
peak="{peakSelect.value}"
noiseFactor="{noiseFactorSelect.value}"
layoutMode="radial"/>
</s:layout>
<s:itemRenderer>
<fx:Component>
<s:ItemRenderer autoDrawBackground="false"
width="20" height="20">
<fx:Script>
<![CDATA[
override public function set data(value:Object):void
{
super.data = value;
labelDemo.text = String(value);
scaleX = scaleY = 1 + Number(value) / outerDocument.numElementsSelect.value * 3;
}
]]>
</fx:Script>
<s:states>
<s:State name="normal" />
<s:State name="hovered" />
<s:State name="selected" />
</s:states>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke pixelHinting="true"
joints="miter"
weight="1"
caps="square"/>
</s:stroke>
<s:fill>
<s:SolidColor color="#FFFFFF" color.hovered="#CCCCCC" color.selected="{getStyle('selectionColor')}" />
</s:fill>
</s:Rect>
<s:Label id="labelDemo"
top="0" right="0" bottom="0" left="0"
text="{data}"
color.selected="#FFFFFF"
textAlign="center" verticalAlign="middle"
fontSize="8"
paddingTop="3" paddingRight="4" paddingBottom="3" paddingLeft="3"/>
</s:ItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:List>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>