<?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:viewStack="ardisia.components.viewStack.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:accordion="ardisia.components.accordion.*"
xmlns:textInput="ardisia.components.textInput.*"
xmlns:containers="containers.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:data="containers.data.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.binding.utils.BindingUtils;
import mx.core.IVisualElementContainer;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import mx.utils.DisplayUtil;
import spark.components.SkinnableContainer;
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.viewStack.ViewStack;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, 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(event:IndexChangeEvent = null):void
{
callLater(initDisplay);
}
protected function addContainerHandler(event:MouseEvent):void
{
accordion1Stepper.maximum++;
var newContent:Label = new Label();
newContent.text = labelSelect.text;
newContent.horizontalCenter = newContent.verticalCenter = 0;
newContent.setStyle("fontSize", 20);
var ct:AccordionContainer = new AccordionContainer();
ct.addEventListener(FlexEvent.INITIALIZE, function(event:FlexEvent):void {
eventLabel.text += labelSelect.text + ' Initialized \n';
});
ct.setStyle("fontSize", fontSizeSelect.value);
ct.label = labelSelect.text;
if (iconSelect.selectedItem.icon)
{
ct.icon = iconSelect.selectedItem.icon;
}
ct.addElement(newContent);
accordionA.addElementAt(ct, 0);
accordionA.selectedChild = ct;
BindingUtils.bindSetter(function(val:Number){ct.duration=animationDurationSelect.value}, animationDurationSelect, "value");
BindingUtils.bindSetter(function(val:Object){ct.easer=animationEaserSelect.selectedItem.easer}, animationEaserSelect, "selectedItem");
}
protected function button1_clickHandler(event:MouseEvent):void
{
if (accordionA.numElements <= removeIndexSelect.value)
return;
accordionA.removeElementAt(removeIndexSelect.value);
}
protected function removedFromStageHandler(event:Event):void
{
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Object id="icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<containers:DemoApplicationWrapper id="demoAppWrapper"
top="0" right="0" bottom="0" left="0"
top.london="0" right.london="4" bottom.london="4" left.london="4"
westRegionTitle="Accordion Description"
eastRegionTitle="Element Initialization Log"
description="Accordion component that supports deferred instantiation for MXML content. By default, child content is initialized when selected. See the Element Initialization Log (East container) to see when content is created. If desired, all content can be created immediately via the '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>API</data:label>
<data:content>
<s:Form>
<s:FormHeading label="Animation"/>
<s:FormItem label="Duration:">
<s:HSlider id="animationDurationSelect"
width="100"
minimum="0" maximum="1000" value="150"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Duration of the expand/collapse animation in milliseconds. Set to 0 to skip the animation."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="0">
<s:ArrayCollection>
<fx:Object name="Sine" easer="{new Sine()}"/>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Power" easer="{new Power()}"/>
<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 with the animation."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Shared Styles</data:label>
<data:content>
<s:Form>
<s:FormHeading label="Background:"/>
<s:FormItem label="Color:">
<colorPicker:ColorPicker id="backgroundColorSelect"
showColorSpacePicker="true"
selectedColor="#FFFFFF"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Only visible if the container is transparent. See the last container named 'BackgroundColor Test' to see the background color."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Alpha:">
<s:HSlider id="backgroundAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingBottom="5" paddingTop="5"/>
<s:FormHeading label="Border:"/>
<s:FormItem label="Visible:">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="Color:">
<colorPicker:ColorPicker id="borderColorSelect"
showColorSpacePicker="true"
selectedColor="#9B9B9B"/>
</s:FormItem>
<s:FormItem label="Alpha:">
<s:HSlider id="borderAlphaSelect"
width="100"
minimum="0" maximum="1" snapInterval="0" value="1"/>
</s:FormItem>
</s:Form>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Basic Example</data:tabLabel>
<data:exampleDescription>Accordion with deferred content instantiation. Header buttons can have variable heights. Add a new container with a large font size for an illustration.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="API"/>
<s:FormItem label="Selected Index:">
<s:NumericStepper id="accordion1Stepper"
width="100"
minimum="0" maximum="5"
value="{accordionA.selectedIndex}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select the index to display in the Accordion below."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Remove Index:">
<s:NumericStepper id="removeIndexSelect"
width="100"
minimum="0" maximum="10"/>
<s:Button width="125"
label="Remove Index"
click="button1_clickHandler(event)"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select the index to remove in the Accordion below."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"
paddingLeft="0"/>
<s:Form>
<s:FormHeading label="Add An Accordion Container"/>
<s:FormItem label="Label:">
<textInput:TextInput id="labelSelect"
width="100"
text="New Container"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The string to display in the header button part."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Label Font Size:">
<s:NumericStepper id="fontSizeSelect"
width="100"
value="30" minimum="6" maximum="60"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Font size for the header label."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Header Icon:">
<s:DropDownList id="iconSelect"
width="120"
selectedIndex="2"
requireSelection="true">
<s:ArrayCollection>
<fx:Object label="No Icon" icon="" />
<fx:Object label="Small Icon" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
<fx:Object label="Large Icon" icon="@Embed(source='icons/open-iconic-master/clock-6x.png')" />
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="An optional icon to display in the header button part. See the 'icon' property for a Spark button for supported formats."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:Button label="Add Container"
click="addContainerHandler(event)"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<accordion:Accordion id="accordionA"
width="300"
top="20" bottom="20"
horizontalCenter="0"
selectedIndex="{accordion1Stepper.value}"
duration="{animationDurationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<accordion:AccordionContainer label="Accordion Container A">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="15" bottom="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container B With Scroller">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0"
color="#00008E" />
</s:fill>
</s:Rect>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup height="5000"
top="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label width="100%"
text="Element 2 - 5000 Pixels Height"
fontWeight="bold"
color="#000000"
fontSize="18"/>
</s:VGroup>
</s:Group>
</scroller:Scroller>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container C">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container D">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container E">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="BackgroundColor Test">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0"
color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label width="100%"
text="Element 6 - Should display the Accordion BackgroundColor"
fontWeight="bold"
color="#000000"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
</accordion:Accordion>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Creation Policy 'All' Example</data:tabLabel>
<data:exampleDescription>Accordion with its 'creationPolicy' property set to 'all'. Therefore all child content is immediately created with nothing deferred. See the East container initialization log.</data:exampleDescription>
<data:primaryContent>
<accordion:Accordion id="accordionB"
creationPolicy="all"
top="20" right="20" bottom="20" left="20"
duration="{animationDurationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<accordion:AccordionContainer label="Accordion Container A">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="15" bottom="15" left="15" right="15">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container B With Scroller">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0"
color="#00008E" />
</s:fill>
</s:Rect>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup height="5000"
top="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label width="100%"
text="Element 2 - 5000 Pixels Height"
fontWeight="bold"
color="#000000"
fontSize="18"/>
</s:VGroup>
</s:Group>
</scroller:Scroller>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container C">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container D">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Accordion Container E">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="BackgroundColor Test">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0"
color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label width="100%"
text="Element 6 - Should display the Accordion BackgroundColor"
fontWeight="bold"
color="#000000"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
</accordion:Accordion>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<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>
<accordion:Accordion id="accordionC"
top="20" right="20" bottom="20" left="20"
duration="{animationDurationSelect.value}"
easer="{animationEaserSelect.selectedItem.easer}"
borderAlpha="{borderAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderVisible="{borderVisibleSelect.selected}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}">
<accordion:AccordionContainer label="Created Immediately"
creationPolicy="all">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#339900" />
</s:fill>
</s:Rect>
<s:VGroup top="15" bottom="15" left="15" right="15">
<s:Label text="Element 1"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Created Immediately"
creationPolicy="all">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0"
color="#00008E" />
</s:fill>
</s:Rect>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup height="5000"
top="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label width="100%"
text="Element 2 - 5000 Pixels Height"
fontWeight="bold"
color="#000000"
fontSize="18"/>
</s:VGroup>
</s:Group>
</scroller:Scroller>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Deferred Creation">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#0000FF" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 3"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Deferred Creation">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#890089" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 4"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Deferred Creation">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15"
initialize="viewstackHandler()">
<s:Label text="Element 5"
fontWeight="bold"
color="#FFFFFF"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
<accordion:AccordionContainer label="Created Immediately"
creationPolicy="all">
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor alpha="0"
color="#00008E" />
</s:fill>
</s:Rect>
<s:VGroup top="15" left="15" right="15"
initialize="viewstackHandler()">
<s:Label width="100%"
text="Element 6 - Should display the Accordion BackgroundColor because this container is transparent."
fontWeight="bold"
color="#000000"
fontSize="18"/>
</s:VGroup>
</accordion:AccordionContainer>
</accordion:Accordion>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>