<?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:compassContainer="ardisia.components.compassContainer.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:pane="ardisia.components.pane.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:toolbar="ardisia.components.toolbar.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)"
currentState="stockholm">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
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;
import spark.events.IndexChangeEvent;
import ardisia.components.expandingContainer.ExpandingContainer;
import ardisia.components.pane.Pane;
import ardisia.dataTypes.CompassQuadrant;
protected var floatedPane:Pane;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
}
protected function viewstack_changeHandler(event:IndexChangeEvent):void
{
if (demoAppWrapper.tabBar.selectedItem.label == "Pane Example")
{
if (floatedPane)
{
floatedPane.visible = true;
floatedPane.center();
}
else
{
floatedPane = new PaneFactory();
floatedPane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, true, true, null, moduleFactory);
floatedPane.visible = true;
}
floatedPane.setCurrentState(currentState);
}
else
{
if (floatedPane)
{
floatedPane.visible = false;
}
}
var enabled:Boolean = demoAppWrapper.tabBar.selectedItem.label == "Pane Example" || demoAppWrapper.tabBar.selectedItem.label == "Highly Nested Example";
for (var i:int = 0; i < demoAppWrapper.westVerticalGroup.numElements; i++)
{
var element:ExpandingContainer = demoAppWrapper.westVerticalGroup.getElementAt(i) as ExpandingContainer;
if (element)
element.enabled = !enabled;
}
}
protected function removedFromStageHandler(event:Event):void
{
if (floatedPane)
{
floatedPane.closeFloatedPane(true);
}
}
protected function checkbox1_changeHandler(event:Event):void
{
var collapse:Boolean = collapseAll.selected;
compassD1.setMinimizeState(CompassQuadrant.NORTH, collapse);
compassD1.setMinimizeState(CompassQuadrant.EAST, collapse);
compassD1.setMinimizeState(CompassQuadrant.SOUTH, collapse);
compassD1.setMinimizeState(CompassQuadrant.WEST, collapse);
compassD5.setMinimizeState(CompassQuadrant.NORTH, collapse);
compassD5.setMinimizeState(CompassQuadrant.EAST, collapse);
compassD5.setMinimizeState(CompassQuadrant.SOUTH, collapse);
compassD5.setMinimizeState(CompassQuadrant.WEST, collapse);
compassD2.setMinimizeState(CompassQuadrant.EAST, collapse);
compassD3.setMinimizeState(CompassQuadrant.SOUTH, collapse);
compassD4.setMinimizeState(CompassQuadrant.EAST, collapse);
compassD4.setMinimizeState(CompassQuadrant.WEST, collapse);
compassD4.setMinimizeState(CompassQuadrant.EAST, collapse);
compassD4.setMinimizeState(CompassQuadrant.WEST, collapse);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="PaneFactory">
<pane:Pane width="500" height="400"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false"
boundingMode="boundEntirePane"
title="Floated CompassContainer Example">
<pane:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</pane:states>
<compassContainer:CompassContainer id="paneCC"
width="100%" height="100%"
showNorthChrome="false" showWestChrome="true" showCenterChrome="false"
northBorderVisible="false" westBorderVisible="false" centerBorderVisible="false"
westRegionTitle="Select a Tree Node"
westCanBeClosed="false" westCanBeMinimized="true"
gap="1" resizeRegionWidth="6" resizeRegionHeight="6"
gapColor="#9A9A9A" gapAlpha="1"
northHeight="50"
maxWestWidth="250">
<!--- center -->
<s:Label top="10" left="10"
fontSize="36"
fontWeight="bold"
text="{tree.selectedItem['@label']}"/>
<compassContainer:northContent>
<toolbar:Toolbar width="100%" height="100%"
borderVisible="false">
<s:HGroup left="20" verticalCenter="0"
verticalAlign="middle">
<s:Button label="Toolbar Button A"/>
<s:Button label="Toolbar Button B"/>
<s:Button label="Toolbar Button C"/>
</s:HGroup>
</toolbar:Toolbar>
</compassContainer:northContent>
<compassContainer:westContent>
<mx:Tree id="tree"
top="0" right="0" bottom="-1" left="-1"
labelField="@label"
showRoot="true"
selectedIndex="0"
borderStyle="none">
<mx:XMLListCollection>
<fx:XMLList>
<folder label="Folder A">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder B">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder C">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder D">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder E">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder F">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder G">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder H">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder I">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder J">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder K">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder L">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder M">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder N">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder O">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder P">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder Q">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder R">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder S">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder T">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder U">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder V">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder W">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder X">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder Y">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder Z">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
</fx:XMLList>
</mx:XMLListCollection>
</mx:Tree>
</compassContainer:westContent>
</compassContainer:CompassContainer>
<s:Rect includeIn="london"
top="0" right="0" bottom="0" left="0">
<s:stroke>
<s:SolidColorStroke weight="1"
pixelHinting="true"
caps="square"
joints="miter"
color="#9A9A9A" />
</s:stroke>
</s:Rect>
</pane:Pane>
</fx:Component>
</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="CompassContainer Description"
description="Creates a container with North, South, East, West, and center regions (compass directions) that content can be added to programmatically or via MXML. Regions can be resized via dividers. Regions may also be configured to be minimized and maximized. Once minimized they can be viewed by either restoring them, or floating the content. Regions are created as necessary, and therefore the class is highly performant. Do not hesitate to use this class as a lightweight replacement for the Flex SDK DividedBox class, even for simple containers. To increase performance, set showRegionChrome to false for all regions and only create header elements on demand in the skin using the Flex Spark skinning architecture. Also, all content can be declared in MXML."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Overview Example</data:tabLabel>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormItem label="Layout Gap:">
<s:HSlider id="gapSelect"
minimum="-10" maximum="10"
value="-1" value.london="4" value.spark="6"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The gap between regions."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Resize Region Width:">
<s:HSlider id="dWidthSelect"
minimum="2" maximum="10"
value="10" value.london="10" value.spark="6"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The width of the region between vertical panels that can trigger a resize when moused. Can be wider than the gap so the resize region is larger than the layout gap. This way, if the layout gap is very small, say 0, users can still trigger region resizing."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Resize Region Height:">
<s:HSlider id="dHeightSelect"
minimum="2" maximum="10"
value="10" value.london="10" value.spark="6"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The height of the region between vertical panels that can trigger a resize when moused. Can be wider than the gap so the resize region is larger than the layout gap. This way, if the layout gap is very small, say 0, users can still trigger region resizing."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<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.5, 3)}"/>
<fx:Object name="Bounce" easer="{new Bounce()}"/>
<fx:Object name="Elastic" easer="{new Elastic()}"/>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The easer to use for the fade animation triggered when regions are minimized or closed."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Duration:">
<s:HSlider id="durationSelect"
minimum="0" maximum="2500" value="350" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The duration of the fade animation triggered when regions are minimized or closed."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Gap Alpha:">
<s:HSlider id="gapAlphaSelect"
minimum="0" maximum="1" snapInterval="0"
value="0" value.spark="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The alpha of the gap."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Gap Color:">
<colorPicker:ColorPicker id="gapColorSelect"
selectedColor="#FFFFFF" selectedColor.london="#C6C6C6"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Color of the region between the gaps."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<compassContainer:CompassContainer id="CompassB"
top="5" right="5" bottom="5" left="5"
gap="{gapSelect.value}"
resizeRegionWidth="{dWidthSelect.value}" resizeRegionHeight="{dHeightSelect.value}"
animationDuration="{durationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
centerRegionTitle="{centerTitleSelect.text}"
showCenterChrome="{centerShowChromeSelect.selected}"
showEastChrome="{eastShowChromeSelect.selected}"
eastRegionTitle="{eastTitleSelect.text}"
eastCanBeClosed="{eastCanBeClosedSelect.selected}"
eastCanBeMinimized="{eastMinizableSelect.selected}"
eastResizeLocked="{!eastResizableSelect.selected}"
minEastWidth="{eastMinWidth.value}"
maxEastWidth="{eastMaxWidth.value}"
eastWidth="250"
showWestChrome="{westShowChromeSelect.selected}"
westRegionTitle="{westTitleSelect.text}"
westCanBeClosed="{westCanBeClosedSelect.selected}"
westCanBeMinimized="{westMinizableSelect.selected}"
westResizeLocked="{!westResizableSelect.selected}"
minWestWidth="{westMinWidth.value}"
maxWestWidth="{westMaxWidth.value}"
westWidth="250"
showNorthChrome="{northShowChromeSelect.selected}"
northRegionTitle="{northTitleSelect.text}"
northCanBeClosed="{northCanBeClosedSelect.selected}"
northCanBeMinimized="{northMinizableSelect.selected}"
northResizeLocked="{!northResizableSelect.selected}"
minNorthHeight="{northMinHeight.value}"
maxNorthHeight="{northMaxHeight.value}"
northHeight="165"
showSouthChrome="{southShowChromeSelect.selected}"
southRegionTitle="{southTitleSelect.text}"
southCanBeClosed="{southCanBeClosedSelect.selected}"
southCanBeMinimized="{southMinizableSelect.selected}"
southResizeLocked="{!southResizableSelect.selected}"
minSouthHeight="{southMinHeight.value}"
maxSouthHeight="{southMaxHeight.value}"
southHeight="165"
gapColor="{gapColorSelect.selectedColor}"
gapAlpha="{gapAlphaSelect.value}"
northBackgroundColor="{northBackgroundColorSelect.selectedColor}"
eastBackgroundColor="{eastBackgroundColorSelect.selectedColor}"
westBackgroundColor="{westBackgroundColorSelect.selectedColor}"
southBackgroundColor="{southBackgroundColorSelect.selectedColor}"
centerBackgroundColor="{centerBackgroundColorSelect.selectedColor}"
centerBorderVisible="{centerShowBorderSelect.selected}"
centerBorderAlpha="{centerBorderAlpha.value}"
centerBorderColor="{centerBorderColorSelect.selectedColor}"
westBorderVisible="{westShowBorderSelect.selected}"
westBorderAlpha="{westBorderAlpha.value}"
westBorderColor="{westBorderColorSelect.selectedColor}"
eastBorderVisible="{eastShowBorderSelect.selected}"
eastBorderAlpha="{eastBorderAlpha.value}"
eastBorderColor="{eastBorderColorSelect.selectedColor}"
northBorderVisible="{northShowBorderSelect.selected}"
northBorderAlpha="{northBorderAlpha.value}"
northBorderColor="{northBorderColorSelect.selectedColor}"
southBorderVisible="{southShowBorderSelect.selected}"
southBorderAlpha="{southBorderAlpha.value}"
southBorderColor="{southBorderColorSelect.selectedColor}"
skinClass.stockholm="components.compassContainer.CompassContainerSkin">
<!--- center -->
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup top="10" left="10">
<s:Label top="10" left="10"
fontSize="36"
text="Center" />
<s:Form>
<s:FormItem label="Show Chrome:">
<s:CheckBox id="centerShowChromeSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{eastShowChromeSelect.selected}"
label="Title:">
<s:TextInput id="centerTitleSelect"
width="100"
text="Center Region"/>
</s:FormItem>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="centerBackgroundColorSelect"
selectedColor.stockholm="#FFFFFF" selectedColor.london="#F9F9F9"/>
</s:FormItem>
<s:FormItem label="Border Visible:">
<s:CheckBox id="centerShowBorderSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{centerShowBorderSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="centerBorderColorSelect"
selectedColor.stockholm="#9B9B9B" selectedColor.london="#7A7A7A" selectedColor.spark="#808080"/>
</s:FormItem>
<s:FormItem enabled="{centerShowBorderSelect.selected}"
label="Border Alpha:">
<s:HSlider id="centerBorderAlpha"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
</s:Form>
</s:VGroup>
</s:Group>
</scroller:Scroller>
<compassContainer:eastContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup top="10" left="10"
paddingBottom="10">
<s:Label top="10" left="10"
fontSize="36"
text="East" />
<s:Form>
<s:FormItem label="Show Chrome:">
<s:CheckBox id="eastShowChromeSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{eastShowChromeSelect.selected}"
label="Title:">
<s:TextInput id="eastTitleSelect"
width="100"
text="East Region"/>
</s:FormItem>
<s:FormItem enabled="{eastShowChromeSelect.selected}"
label="Closable:">
<s:CheckBox id="eastCanBeClosedSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{eastShowChromeSelect.selected}"
label="Minimizable:">
<s:CheckBox id="eastMinizableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Resizeable:">
<s:CheckBox id="eastResizableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Min Width:">
<s:HSlider id="eastMinWidth"
width="100"
minimum="50" maximum="200" value="50"/>
</s:FormItem>
<s:FormItem label="Max Width:">
<s:HSlider id="eastMaxWidth"
width="100"
minimum="{eastMinWidth.value + 10}" maximum="400" value="400"/>
</s:FormItem>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="eastBackgroundColorSelect"
selectedColor="#FFFFFF" selectedColor.london="#F9F9F9"/>
</s:FormItem>
<s:FormItem label="Border Visible:">
<s:CheckBox id="eastShowBorderSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{eastShowBorderSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="eastBorderColorSelect"
selectedColor="#9B9B9B" selectedColor.london="#7A7A7A" selectedColor.spark="#808080"/>
</s:FormItem>
<s:FormItem enabled="{eastShowBorderSelect.selected}"
label="Border Alpha:">
<s:HSlider id="eastBorderAlpha"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
</s:Form>
</s:VGroup>
</s:Group>
</scroller:Scroller>
</compassContainer:eastContent>
<compassContainer:northContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:HGroup top="10" left="10"
gap="20"
paddingRight="10">
<s:Label top="10" left="10"
fontSize="36"
text="North" />
<s:Form>
<s:FormItem label="Show Chrome:">
<s:CheckBox id="northShowChromeSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{northShowChromeSelect.selected}"
label="Title:">
<s:TextInput id="northTitleSelect"
width="100"
text="North Region"/>
</s:FormItem>
<s:FormItem enabled="{northShowChromeSelect.selected}"
label="Closable:">
<s:CheckBox id="northCanBeClosedSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{northShowChromeSelect.selected}"
label="Minimizable:">
<s:CheckBox id="northMinizableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Resizeable:">
<s:CheckBox id="northResizableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Min Height:">
<s:HSlider id="northMinHeight"
width="100"
minimum="50" maximum="200" value="50"/>
</s:FormItem>
<s:FormItem label="Max Height:">
<s:HSlider id="northMaxHeight"
width="100"
minimum="{northMinHeight.value + 10}" maximum="400" value="400"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="northBackgroundColorSelect"
selectedColor="#FFFFFF" selectedColor.london="#F9F9F9"/>
</s:FormItem>
<s:FormItem label="Border Visible:">
<s:CheckBox id="northShowBorderSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{northShowBorderSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="northBorderColorSelect"
selectedColor="#9B9B9B" selectedColor.london="#7A7A7A" selectedColor.spark="#808080"/>
</s:FormItem>
<s:FormItem enabled="{northShowBorderSelect.selected}"
label="Border Alpha:">
<s:HSlider id="northBorderAlpha"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Group>
</scroller:Scroller>
</compassContainer:northContent>
<compassContainer:southContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:HGroup top="10" left="10"
gap="20" paddingRight="10">
<s:Label top="10" left="10"
fontSize="36"
text="South" />
<s:Form>
<s:FormItem label="Show Chrome:">
<s:CheckBox id="southShowChromeSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{southShowChromeSelect.selected}"
label="Title:">
<s:TextInput id="southTitleSelect"
width="100"
text="South Region"/>
</s:FormItem>
<s:FormItem enabled="{southShowChromeSelect.selected}"
label="Closable:">
<s:CheckBox id="southCanBeClosedSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{southShowChromeSelect.selected}"
label="Minimizable:">
<s:CheckBox id="southMinizableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Resizeable:">
<s:CheckBox id="southResizableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Min Height:">
<s:HSlider id="southMinHeight"
width="100"
minimum="50" maximum="200" value="50"/>
</s:FormItem>
<s:FormItem label="Max Height:">
<s:HSlider id="southMaxHeight"
width="100"
minimum="{southMinHeight.value + 10}" maximum="400" value="400"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="southBackgroundColorSelect"
selectedColor="#FFFFFF" selectedColor.london="#F9F9F9"/>
</s:FormItem>
<s:FormItem label="Border Visible:">
<s:CheckBox id="southShowBorderSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{southShowBorderSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="southBorderColorSelect"
selectedColor="#9B9B9B" selectedColor.london="#7A7A7A" selectedColor.spark="#808080"/>
</s:FormItem>
<s:FormItem enabled="{southShowBorderSelect.selected}"
label="Border Alpha:">
<s:HSlider id="southBorderAlpha"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Group>
</scroller:Scroller>
</compassContainer:southContent>
<compassContainer:westContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup top="10" left="10"
paddingBottom="10">
<s:Label top="10" left="10"
fontSize="36"
text="West" />
<s:Form>
<s:FormItem label="Show Chrome:">
<s:CheckBox id="westShowChromeSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{westShowChromeSelect.selected}"
label="Title:">
<s:TextInput id="westTitleSelect"
width="100"
text="West Region"/>
</s:FormItem>
<s:FormItem enabled="{westShowChromeSelect.selected}"
label="Closable:">
<s:CheckBox id="westCanBeClosedSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{westShowChromeSelect.selected}"
label="Minimizable:">
<s:CheckBox id="westMinizableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Resizeable:">
<s:CheckBox id="westResizableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Min Width:">
<s:HSlider id="westMinWidth"
width="100"
minimum="50" maximum="200" value="50"/>
</s:FormItem>
<s:FormItem label="Max Width:">
<s:HSlider id="westMaxWidth"
width="100"
minimum="{westMinWidth.value + 10}" maximum="400" value="400"/>
</s:FormItem>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="westBackgroundColorSelect"
selectedColor="#FFFFFF" selectedColor.london="#F9F9F9"/>
</s:FormItem>
<s:FormItem label="Border Visible:">
<s:CheckBox id="westShowBorderSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{westShowBorderSelect.selected}"
label="Border Color:">
<colorPicker:ColorPicker id="westBorderColorSelect"
selectedColor="#9B9B9B" selectedColor.london="#7A7A7A" selectedColor.spark="#808080"/>
</s:FormItem>
<s:FormItem enabled="{westShowBorderSelect.selected}"
label="Border Alpha:">
<s:HSlider id="westBorderAlpha"
width="100"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
</s:Form>
</s:VGroup>
</s:Group>
</scroller:Scroller>
</compassContainer:westContent>
</compassContainer:CompassContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Simple Divided Box Example</data:tabLabel>
<data:exampleDescription>Illustrates how a CompassContainer can easily be configured to function as a simple divided container. Due to Spark skinning, these examples are extremely lightweight because they do not create region chrome. Do not hesitate to configure a CompassContainer as a simple, lightweight container.</data:exampleDescription>
<data:primaryContent>
<s:HGroup horizontalCenter="0" verticalCenter="0"
gap="60"
verticalAlign="justify">
<s:VGroup>
<s:Label text="Simple Divided Vertical Container"
fontWeight="bold"/>
<compassContainer:CompassContainer width="250" height="400"
showNorthChrome="false"
showCenterChrome="false"
centerBorderVisible="true"
northBorderVisible="true"
minNorthHeight="50" maxNorthHeight="350">
<s:Label top="10" right="10" left="10"
text="(CENTER) Add components here."/>
<compassContainer:northContent>
<s:Label top="10" right="10" left="10"
text="(NORTH) Add components here."/>
</compassContainer:northContent>
</compassContainer:CompassContainer>
</s:VGroup>
<s:VGroup>
<s:Label text="Simple Divided Horizontal Container"
fontWeight="bold"/>
<compassContainer:CompassContainer width="400" height="400"
showWestChrome="false"
minWestWidth="50" maxWestWidth="350"
showCenterChrome="false"
westBorderVisible="true"
centerBorderVisible="true">
<s:Label top="10" right="10" left="10"
text="(CENTER) Add components here."/>
<compassContainer:westContent>
<s:Label top="10" right="10" left="10"
text="(WEST) Add components here."/>
</compassContainer:westContent>
</compassContainer:CompassContainer>
</s:VGroup>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Pane Example</data:tabLabel>
<data:exampleDescription>Illustrates a simple CompassContainer in a floated pane.</data:exampleDescription>
<data:primaryContent>
<!--- include something so that the creationComplete event fires -->
<s:Group />
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Highly Nested Example</data:tabLabel>
<data:exampleDescription>Compass Containers can be nested within each other to create extremely complex layouts. The example below contains multiple CompassContainers, the deepest of which are nested three CompassContainers deep.</data:exampleDescription>
<data:toolbarContent>
<s:FormItem label="Collapse All Regions">
<s:CheckBox id="collapseAll"
selected="false"
change="checkbox1_changeHandler(event)"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Collapse or expand all the regions programmatically."/>
</s:helpContent>
</s:FormItem>
</data:toolbarContent>
<data:primaryContent>
<compassContainer:CompassContainer id="compassD1"
top="20" right="20" bottom="20" left="20"
minNorthHeight="50" northHeight="100"
centerRegionTitle="Lv.1 Center Region"
northRegionTitle="Lv.1 North Region"
eastRegionTitle="Lv.1 East Region"
southRegionTitle="Lv.1 South Region"
westRegionTitle="Lv.1 West Region">
<compassContainer:CompassContainer id="compassD5"
top="-1" right="-1" bottom="-1" left="-1"
minNorthHeight="50" northHeight="100"
centerRegionTitle="Lv.2 Center Region"
northRegionTitle="Lv.2 North Region"
eastRegionTitle="Lv.2 East Region"
southRegionTitle="Lv.2 South Region"
westRegionTitle="Lv.2 West Region">
<compassContainer:CompassContainer id="compassD2"
top="-1" right="-1" bottom="-1" left="-1"
minNorthHeight="50" northHeight="100"
centerRegionTitle="Lv.3 Center Region"
eastRegionTitle="Lv.3 East Region">
<s:Label top="10" left="10"
text="Center Center Center"
fontSize="14"
fontWeight="bold"/>
<compassContainer:eastContent>
<s:Label top="10" left="10"
text="Center Center East"
fontSize="14"
fontWeight="bold"/>
</compassContainer:eastContent>
</compassContainer:CompassContainer>
<compassContainer:northContent>
<s:Label top="10" left="10"
text="Center North"
fontSize="14"
fontWeight="bold"/>
</compassContainer:northContent>
<compassContainer:eastContent>
<s:Label top="10" left="10"
text="Center East"
fontSize="14"
fontWeight="bold"/>
</compassContainer:eastContent>
<compassContainer:westContent >
<s:Label top="10" left="10"
text="Center West"
fontSize="14"
fontWeight="bold"/>
</compassContainer:westContent>
<compassContainer:southContent>
<compassContainer:CompassContainer id="compassD6"
top="-1" right="-1" bottom="-1" left="-1"
centerRegionTitle="Lv.3 Center Region"
eastRegionTitle="Lv.3 East Region">
<s:Label top="10" left="10"
text="South Center Center"
fontSize="14"
fontWeight="bold"/>
<compassContainer:eastContent>
<s:Label top="10" left="10"
text="South Center East"
fontSize="14"
fontWeight="bold"/>
</compassContainer:eastContent>
</compassContainer:CompassContainer>
</compassContainer:southContent>
</compassContainer:CompassContainer>
<compassContainer:westContent>
<compassContainer:CompassContainer id="compassD3"
top="-1" right="-1" bottom="-1" left="-1"
centerRegionTitle="Lv.2 Center Region"
southRegionTitle="Lv.2 South Region">
<s:Label top="10" left="10"
text="West Center"
fontSize="14"
fontWeight="bold"/>
</compassContainer:CompassContainer>
</compassContainer:westContent>
<compassContainer:northContent>
<compassContainer:CompassContainer id="compassD4"
top="-1" right="-1" bottom="-1" left="-1"
centerRegionTitle="Lv.2 Center Region"
eastRegionTitle="Lv.2 East Region"
westRegionTitle="Lv.2 West Region">
<s:Label top="10" left="10"
text="North Center"
fontSize="14"
fontWeight="bold"/>
<compassContainer:eastContent>
<s:Label top="10" left="10"
text="North East"
fontSize="14"
fontWeight="bold"/>
</compassContainer:eastContent>
<compassContainer:westContent>
<s:Label top="10" left="10"
text="North West"
fontSize="14"
fontWeight="bold"/>
</compassContainer:westContent>
</compassContainer:CompassContainer>
</compassContainer:northContent>
</compassContainer:CompassContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>