<?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:fieldSet="ardisia.components.fieldSet.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:textInput="ardisia.components.textInput.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
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;
public function creationComplete():void
{
}
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="FieldSet Description"
description="Fieldset container similar to a HTML fieldset with the addition of being collapsible. Fully supports the Spark skinning architecture."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:FormItem label="Legend Text:">
<textInput:TextInput id="legendSelect"
width="100"
text="Purchase Information"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The string to display in the legend."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Collapsible:">
<s:CheckBox id="collapsibleSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, the fieldset can be collapsed by the headerButton skin part."/>
</s:helpContent>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Animation"/>
<s:FormItem enabled="{collapsibleSelect.selected}"
label="Duration:">
<s:HSlider id="animationDurationSelect"
width="100"
minimum="0" maximum="1000" value="150"/>
</s:FormItem>
<s:FormItem enabled="{collapsibleSelect.selected}"
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 expanding animation."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
<!--- expanding container #2 -->
<data:ExpandingContainerData>
<data:label>Styling</data:label>
<data:content>
<s:FormItem label="Legend Offset:">
<s:HSlider id="legendLeftOffsetSelect"
minimum="0" maximum="100" value="20"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The number of pixels to offset the legend from the left border."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Corner Radius:">
<s:HSlider id="cornerRadiusSelect"
minimum="0" maximum="10" value="0" value.london="2" value.spark="2"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Radius of the corners for the border."/>
</s:helpContent>
</s:FormItem>
<s:FormHeading label="Background"/>
<s:FormItem label="Color:">
<colorPicker:ColorPicker id="backgroundColorSelect"
showColorSpacePicker="true"
selectedColor="#FFFFFF"/>
</s:FormItem>
<s:FormItem label="Alpha:">
<s:HSlider id="backgroundAlphaSelect"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
<s:FormHeading label="Border"/>
<s:FormItem label="Color:">
<colorPicker:ColorPicker id="borderColorSelect"
showColorSpacePicker="true"
selectedColor="{getStyle('borderColor')}"/>
</s:FormItem>
<s:FormItem label="Alpha:">
<s:HSlider id="borderAlphaSelect"
minimum="0" maximum="1" value="1" snapInterval="0"/>
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Padding"/>
<s:FormItem label="Top:">
<s:HSlider id="contentPaddingTopSelect"
width="100"
minimum="0" maximum="20" value="10"/>
</s:FormItem>
<s:FormItem label="Right:">
<s:HSlider id="contentPaddingRightSelect"
width="100"
minimum="0" maximum="20" value="10"/>
</s:FormItem>
<s:FormItem label="Bottom:">
<s:HSlider id="contentPaddingBottomSelect"
width="100"
minimum="0" maximum="20" value="10"/>
</s:FormItem>
<s:FormItem label="Left:">
<s:HSlider id="contentPaddingLeftSelect"
width="100"
minimum="0" maximum="30" value="20"/>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Example</data:tabLabel>
<data:exampleDescription>Illustrates how the FieldSet component can be useful to break up content, particularly forms. If the fieldset is collapsible, collapse/expand by clicking the header button or tabbing to the header button and depressing the spacebar.</data:exampleDescription>
<data:primaryContent>
<s:Panel id="panel"
width="350"
horizontalCenter="0" verticalCenter="0"
dropShadowVisible="true"
title="Purchase Widget">
<s:VGroup top="20" right="20" bottom="20" left="20"
gap="20">
<fieldSet:FieldSet width="100%"
legend="{legendSelect.text}"
collapsible="{collapsibleSelect.selected}"
easer="{animationEaserSelect.selectedItem.easer}"
duration="{animationDurationSelect.value}"
legendLeftOffset="{legendLeftOffsetSelect.value}"
cornerRadius="{cornerRadiusSelect.value}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}">
<s:RichText top="{contentPaddingTopSelect.value}" right="{contentPaddingRightSelect.value}" bottom="{contentPaddingBottomSelect.value}" left="{contentPaddingLeftSelect.value}"
maxDisplayedLines="-1" lineBreak="toFit"
text="Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam."/>
</fieldSet:FieldSet>
<fieldSet:FieldSet width="100%"
legend="{legendSelect.text}"
collapsible="{collapsibleSelect.selected}"
easer="{animationEaserSelect.selectedItem.easer}"
duration="{animationDurationSelect.value}"
legendLeftOffset="{legendLeftOffsetSelect.value}"
cornerRadius="{cornerRadiusSelect.value}"
backgroundColor="{backgroundColorSelect.selectedColor}"
backgroundAlpha="{backgroundAlphaSelect.value}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}">
<s:Form top="{contentPaddingTopSelect.value}" right="{contentPaddingRightSelect.value}" bottom="{contentPaddingBottomSelect.value}" left="{contentPaddingLeftSelect.value}">
<s:FormItem width="100%"
label="Email:">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem width="100%"
label="Phone Number:">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem width="100%"
label="Fax:">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem width="100%"
label="Phone:">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem width="100%"
label="Address:">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem width="100%"
label="City:">
<s:TextInput width="100%"/>
</s:FormItem>
<s:FormItem width="100%"
label="PO Box:">
<s:CheckBox />
</s:FormItem>
</s:Form>
</fieldSet:FieldSet>
<s:Button label="Purchase"/>
</s:VGroup>
</s:Panel>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>