<?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:viewStack="ardisia.components.viewStack.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.IVisualElementContainer;
import mx.core.UIComponent;
import mx.utils.DisplayUtil;
import spark.components.SkinnableContainer;
import spark.events.IndexChangeEvent;
import ardisia.components.viewStack.ViewStack;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, function(event:Event):void
{
viewstackHandler();
});
viewstackHandler();
}
protected function initDisplay():void
{
var str:String = "";
var selChild:SkinnableContainer = demoAppWrapper.viewstack.selectedChild as SkinnableContainer;
if (!selChild)
return;
DisplayUtil.walkDisplayObjects(selChild, function(obj:Object):void
{
if (obj is ViewStack)
{
var viewstack:ViewStack = obj as ViewStack;
var len:int = viewstack.numElements;
for (var i:int = 0; i < len; i++)
{
var element:IVisualElementContainer = viewstack.getElementAt(i) as IVisualElementContainer;
if (element.numElements > 1 && (element.getElementAt(1) as UIComponent).initialized)
str += "Element " + (i + 1) + " initialized\n";
}
}
});
eventLabel.text = str;
}
protected function viewstackHandler():void
{
callLater(initDisplay);
}
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="ViewStack Description"
eastRegionTitle="Element Initialization Log"
description="The Ardisia ViewStack is a Spark based container that displays a single child element at any given time. The ViewStack fully supports deferred instantiation for MXML content, skinning, and dynamic resizing to selected content. For these ViewStack examples, child content is initialized when selected to illustrate deferred instantiation. See the Element Initialization Log (East pane). If desired, all content can be created immediately via the ViewStack's 'creationPolicy' property. Content creation policies can be mixed with some content initialized immediately and some content created on-demand."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:eastContent>
<s:RichText id="eventLabel"
top="10" right="10" bottom="10" left="10"
text="Element 1 Initialized "/>
</containers:eastContent>
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormHeading label="Background:"/>
<s:FormItem label="Background Color:">
<colorPicker:ColorPicker id="backgroundColorSelect"
showColorSpacePicker="true"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Background Alpha:">
<s:HSlider id="backgroundAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<s:FormHeading label="Border:"/>
<s:FormItem label="Border Visible:">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Border Color:">
<colorPicker:ColorPicker id="borderColorSelect"
showColorSpacePicker="true"
selectedColor="{getStyle('borderColor')}"/>
</s:FormItem>
<s:FormItem label="Border Alpha:">
<s:HSlider id="borderAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>The ViewStack's selectedIndex is bound to a numeric stepper. See the East container for the element instantiation log.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormItem label="Selected Index:"
height="23">
<s:NumericStepper id="viewstack1Stepper"
value="1" minimum="1" maximum="5"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select the index to display in the ViewStack below."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Layout:">
<s:ButtonBar id="viewstack1LayoutBB"
requireSelection="true"
selectedIndex="0"
change="if (viewstack1LayoutBB.selectedIndex==0){viewstackDemo1.percentHeight=viewstackDemo1.percentWidth=NaN;}else{viewstackDemo1.percentHeight=viewstackDemo1.percentWidth=100;}">
<s:ArrayCollection>
<fx:String>Measured</fx:String>
<fx:String>Explicit</fx:String>
</s:ArrayCollection>
</s:ButtonBar>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By default, the ViewStack will resize to the preferred dimensions of the selectedChild. If the ViewStack's dimensions are set explicitly or via anchors then the selectedChild will be sized to fit the ViewStack. For the example below, the Viewstack will resize to the measured dimensions of the selected content or the Viewstack will be explicitly set to fill the viewport and selected content will be sized to fill the ViewStack."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<viewStack:ViewStack id="viewstackDemo1"
verticalCenter="0" horizontalCenter="0"
selectedIndex="{viewstack1Stepper.value - 1}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<s:SkinnableContainer height="200" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 200"
color="#FFFFFF" />
<s:Label text="Measured Width: 200"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="300" width="300">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#FF0000" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 2"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 300"
color="#FFFFFF" />
<s:Label text="Measured Width: 300"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="150" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler();">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 150"
color="#FFFFFF" />
<s:Label text="Measured Width: 200"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="200" width="275">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 200"
color="#FFFFFF" />
<s:Label text="Measured Width: 275"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="225" width="250">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 225"
color="#FFFFFF" />
<s:Label text="Measured Width: 250"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
</viewStack:ViewStack>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>ButtonBar Example</data:tabLabel>
<data:exampleDescription>The ViewStack's selectedIndex is bound to a ButtonBar. See the East container for the element instantiation log.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup gap="20">
<s:Form>
<s:FormItem label="Selected Index:">
<s:ButtonBar id="viewstack2ButtonBar"
selectedIndex="0"
requireSelection="true">
<s:ArrayCollection>
<fx:String>Element 1</fx:String>
<fx:String>Element 2</fx:String>
<fx:String>Element 3</fx:String>
<fx:String>Element 4</fx:String>
<fx:String>Element 5</fx:String>
</s:ArrayCollection>
</s:ButtonBar>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select the index to display in the ViewStack below."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Layout:">
<s:ButtonBar id="viewstack2LayoutBB"
selectedIndex="0"
requireSelection="true"
change="if (viewstack2LayoutBB.selectedIndex==0){viewstackDemo2.percentHeight=viewstackDemo2.percentWidth=NaN;}else{viewstackDemo2.percentHeight=viewstackDemo2.percentWidth=100;}">
<s:ArrayCollection>
<fx:String>Measured</fx:String>
<fx:String>Explicit</fx:String>
</s:ArrayCollection>
</s:ButtonBar>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By default, the ViewStack will resize to the preferred dimensions of the selectedChild. If the ViewStack's dimensions are set explicitly or via anchors then the selectedChild will be sized to fit the ViewStack. For the example below, the Viewstack will resize to the measured dimensions of the selected content or the Viewstack will be explicitly set to fill the viewport and selected content will be sized to fill the ViewStack."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<viewStack:ViewStack id="viewstackDemo2"
verticalCenter="0" horizontalCenter="0"
selectedIndex="{viewstack2ButtonBar.selectedIndex}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<s:SkinnableContainer height="200" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 200"
color="#FFFFFF" />
<s:Label text="Measured Width: 200"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="300" width="300">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#FF0000" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 2"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 300"
color="#FFFFFF" />
<s:Label text="Measured Width: 300"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="150" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 150"
color="#FFFFFF" />
<s:Label text="Measured Width: 200"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="200" width="275">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 200"
color="#FFFFFF" />
<s:Label text="Measured Width: 275"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="225" width="250">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 225"
color="#FFFFFF" />
<s:Label text="Measured Width: 250"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
</viewStack:ViewStack>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>TabBar Example</data:tabLabel>
<data:exampleDescription>The ViewStack's selectedIndex is bound to a TabBar. See the East container for the element instantiation log.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Layout:">
<s:ButtonBar id="viewstack3LayoutBB"
selectedIndex="0"
requireSelection="true"
change="if (viewstack3LayoutBB.selectedIndex==0){
viewstack3Wrapper.top=viewstack3Wrapper.right=viewstack3Wrapper.bottom=viewstack3Wrapper.left=NaN;}else{
viewstack3Wrapper.right=viewstack3Wrapper.bottom=viewstack3Wrapper.left=0;viewstack3Wrapper.top=1}">
<s:ArrayCollection>
<fx:String>Measured</fx:String>
<fx:String>Explicit</fx:String>
</s:ArrayCollection>
</s:ButtonBar>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By default, the ViewStack will resize to the preferred dimensions of the selectedChild. If the ViewStack's dimensions are set explicitly or via anchors then the selectedChild will be sized to fit the ViewStack. For the example below, the Viewstack will resize to the measured dimensions of the selected content or the Viewstack will be explicitly set to fill the viewport and selected content will be sized to fill the ViewStack."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup id="viewstack3Wrapper"
verticalCenter="0" horizontalCenter="0"
gap="-1"
horizontalAlign="justify">
<s:TabBar id="viewstack3TabBar"
depth="1">
<s:ArrayCollection>
<fx:String>1</fx:String>
<fx:String>2</fx:String>
<fx:String>3</fx:String>
<fx:String>4</fx:String>
<fx:String>5</fx:String>
</s:ArrayCollection>
</s:TabBar>
<viewStack:ViewStack id="viewstackDemo3"
width="100%" height="100%"
selectedIndex="{viewstack3TabBar.selectedIndex}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<s:SkinnableContainer height="200" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 200"
color="#FFFFFF" />
<s:Label text="Measured Width: 200"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="300" width="300">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#FF0000" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 2"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 300"
color="#FFFFFF" />
<s:Label text="Measured Width: 300"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="150" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 150"
color="#FFFFFF" />
<s:Label text="Measured Width: 200"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="200" width="275">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 200"
color="#FFFFFF" />
<s:Label text="Measured Width: 275"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="225" width="250">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
<s:Label text="Measured Height: 225"
color="#FFFFFF" />
<s:Label text="Measured Width: 250"
color="#FFFFFF" />
</s:VGroup>
</s:SkinnableContainer>
</viewStack:ViewStack>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Creation Policy 'All' Example</data:tabLabel>
<data:exampleDescription>No deferred creation of child content by setting the ViewStack's creationPolicy to 'all'. All content is created immediately. See the East container for the element instantiation log.</data:exampleDescription>
<data:primaryContent>
<s:VGroup verticalCenter="0" horizontalCenter="0"
gap="-1"
horizontalAlign="justify">
<s:TabBar id="viewstack4TabBar"
depth="1">
<s:ArrayCollection>
<fx:String>Created Immediately</fx:String>
<fx:String>Not Deferred</fx:String>
<fx:String>Not Deferred</fx:String>
<fx:String>Not Deferred</fx:String>
<fx:String>Not Deferred</fx:String>
</s:ArrayCollection>
</s:TabBar>
<viewStack:ViewStack id="viewstackDemo4"
width="400" height="200"
creationPolicy="all"
selectedIndex="{viewstack4TabBar.selectedIndex}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<s:SkinnableContainer height="200" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="300" width="300">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#FF0000" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 2"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="150" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="200" width="275">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="225" width="250">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
</viewStack:ViewStack>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #5 -->
<data:PrimaryContentData>
<data:tabLabel>Mixed Creation Policy</data:tabLabel>
<data:exampleDescription>Some child content can be created immediately and the rest on demand. See the East container for the element instantiation log.</data:exampleDescription>
<data:primaryContent>
<s:VGroup verticalCenter="0" horizontalCenter="0"
gap="-1"
horizontalAlign="justify">
<s:TabBar id="viewstack5TabBar"
requireSelection="true"
depth="1">
<s:ArrayCollection>
<fx:String>Immediate</fx:String>
<fx:String>Immediate</fx:String>
<fx:String>Deferred</fx:String>
<fx:String>Deferred</fx:String>
<fx:String>Immediate</fx:String>
</s:ArrayCollection>
</s:TabBar>
<viewStack:ViewStack id="viewstackDemo5"
width="400" height="200"
selectedIndex="{viewstack5TabBar.selectedIndex}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<s:SkinnableContainer height="200" width="200"
creationPolicy="all">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="300" width="300"
creationPolicy="all">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#FF0000" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 2"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="150" width="200">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="200" width="275">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
<s:SkinnableContainer height="225" width="250"
creationPolicy="all">
<s:Rect top="20" right="20" bottom="20" left="20">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="30" right="0" left="30"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</s:SkinnableContainer>
</viewStack:ViewStack>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>