<?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.*"
removedFromStage="removedFromStageHandler(event)"
xmlns:separators="ardisia.components.separators.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
xmlns:toolbar="ardisia.components.toolbar.*"
frameRate="60"
width="100%" height="100%">
<fx:Script>
<![CDATA[
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"
top="0" right="0" bottom="0" left="0"
top.london="0" right.london="4" bottom.london="4" left.london="4"
westRegionTitle="Toolbar Description"
description="Simple container used to easily position and style toolbar content. In addition to skins for the toolbar, skins for various toolbar buttons are also included for each theme."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<s:Form>
<s:FormHeading label="Padding"/>
<s:FormItem label="Top:">
<s:HSlider id="paddingTopSelect"
minimum="-10" maximum="20"
snapInterval="1"
value="6" />
</s:FormItem>
<s:FormItem label="Right:">
<s:HSlider id="paddingRightSelect"
minimum="-10" maximum="20"
snapInterval="1"
value="6" />
</s:FormItem>
<s:FormItem label="Bottom:">
<s:HSlider id="paddingBottomSelect"
minimum="-10" maximum="20"
snapInterval="1"
value="6" />
</s:FormItem>
<s:FormItem label="Left:">
<s:HSlider id="paddingLeftSelect"
minimum="-10" maximum="20"
snapInterval="1"
value="6" />
</s:FormItem>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5"/>
<s:FormHeading label="Border"/>
<s:FormItem label="Visible:">
<s:CheckBox id="borderVisibleSelect"
selected="true"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Color:">
<colorPicker:ColorPicker id="borderColorSelect"
selectedColor="{getStyle('borderColor')}"/>
</s:FormItem>
<s:FormItem enabled="{borderVisibleSelect.selected}"
label="Alpha:">
<s:HSlider id="borderAlphaSelect"
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>The Toolbar container can accept any Spark layout class.</data:exampleDescription>
<data:primaryContent>
<s:VGroup horizontalCenter="0" verticalCenter="0">
<s:HGroup gap="20">
<s:VGroup horizontalAlign="left">
<s:Label text="Vertical"/>
<toolbar:Toolbar borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}">
<toolbar:layout>
<s:VerticalLayout horizontalAlign="center"/>
</toolbar:layout>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')"/>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5" />
<toolbar:ToolbarButton label="Save"
rotation="-90"/>
<toolbar:ToolbarButton label="Close"
rotation="-90"/>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5" />
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<separators:HSeparator width="100%"
paddingTop="5" paddingBottom="5" />
<toolbar:ToolbarColorTransformIconToggleButton selected="true"
icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/document-image.png')"/>
</toolbar:Toolbar>
</s:VGroup>
<s:VGroup gap="25">
<s:VGroup>
<s:Label text="Horizontal"/>
<toolbar:Toolbar width="600"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="middle"
gap="2"/>
</toolbar:layout>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarButton label="Save"/>
<toolbar:ToolbarButton label="Close"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarColorTransformIconToggleButton selected="true"
icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<s:HGroup width="100%"
horizontalAlign="right">
<s:DropDownList width="100"
labelField="label"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>Option A</fx:String>
<fx:String>Option B</fx:String>
<fx:String>Option C</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:ComboBox width="100"
labelField="label"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>Option A</fx:String>
<fx:String>Option B</fx:String>
<fx:String>Option C</fx:String>
</s:ArrayCollection>
</s:ComboBox>
</s:HGroup>
</toolbar:Toolbar>
</s:VGroup>
<s:VGroup>
<s:Label text="Toolbar Vanilla Buttons"/>
<toolbar:Toolbar width="300"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</toolbar:layout>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarButton label="Close"/>
<toolbar:ToolbarButton label="Open"/>
</toolbar:Toolbar>
</s:VGroup>
<s:VGroup>
<s:Label text="Toolbar Color Transform Buttons"/>
<toolbar:Toolbar width="300"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</toolbar:layout>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<separators:VSeparator height="100%"
paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/folder-open.png')"
label="Click Me"/>
</toolbar:Toolbar>
</s:VGroup>
<s:VGroup>
<s:Label text="Toolbar Toggle Buttons"/>
<toolbar:Toolbar width="300"
borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</toolbar:layout>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton selected="true"
icon="@Embed(source='icons/fugue/document-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/folder-open.png')"
label="Click Me"/>
</toolbar:Toolbar>
</s:VGroup>
<s:VGroup>
<s:Label text="Toolbar TabBar"/>
<s:VGroup width="600"
horizontalAlign="justify"
gap="-1">
<toolbar:ToolbarTabBar depth="2">
<s:ArrayCollection>
<fx:String>Tab A</fx:String>
<fx:String>Tab B</fx:String>
<fx:String>Tab C</fx:String>
<fx:String>Tab D</fx:String>
</s:ArrayCollection>
</toolbar:ToolbarTabBar>
<toolbar:Toolbar borderVisible="{borderVisibleSelect.selected}"
borderColor="{borderColorSelect.selectedColor}"
borderAlpha="{borderAlphaSelect.value}"
paddingTop="{paddingTopSelect.value}"
paddingRight="{paddingRightSelect.value}"
paddingBottom="{paddingBottomSelect.value}"
paddingLeft="{paddingLeftSelect.value}">
<toolbar:layout>
<s:HorizontalLayout verticalAlign="middle"/>
</toolbar:layout>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<toolbar:ToolbarButton icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarButton label="Save"/>
<toolbar:ToolbarButton label="Close"/>
<separators:VSeparator height="100%"
paddingTop="0" paddingBottom="0" paddingRight="5" paddingLeft="5"/>
<toolbar:ToolbarColorTransformIconToggleButton selected="true"
icon="@Embed(source='icons/fugue/clipboard-paste-image.png')"/>
<toolbar:ToolbarColorTransformIconToggleButton icon="@Embed(source='icons/fugue/document-image.png')"/>
<s:HGroup width="100%"
horizontalAlign="right">
<s:DropDownList width="100"
labelField="label"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>Option A</fx:String>
<fx:String>Option B</fx:String>
<fx:String>Option C</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:ComboBox width="100"
labelField="label"
selectedIndex="0">
<s:ArrayCollection>
<fx:String>Option A</fx:String>
<fx:String>Option B</fx:String>
<fx:String>Option C</fx:String>
</s:ArrayCollection>
</s:ComboBox>
</s:HGroup>
</toolbar:Toolbar>
</s:VGroup>
</s:VGroup>
</s:VGroup>
</s:HGroup>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>