<?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:buttonBar="ardisia.components.buttonBar.*"
xmlns:layouts="ardisia.components.buttonBar.layouts.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:textInput="ardisia.components.textInput.*"
xmlns:viewStack="ardisia.components.viewStack.*"
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;
import spark.events.IndexChangeEvent;
public function creationComplete():void
{
}
protected function button1_clickHandler(event:MouseEvent):void
{
var newElement:SkinnableContainer = new SkinnableContainer();
var label:Label = new Label();
label.setStyle("fontSize", 80);
label.verticalCenter = label.horizontalCenter = 0;
label.text = addTabLabelSelectA.text;
newElement.addElement(label);
viewStackDemo.addElement(newElement);
var newDataItem:Object = {
label: addTabLabelSelectA.text,
element: newElement
};
slidingTabs.dataProvider.addItem(newDataItem);
slidingTabs.selectedItem = newDataItem;
viewStackDemo.selectedChild = newElement;
}
protected function addTabBarHandler(event:MouseEvent):void
{
var newElement:SkinnableContainer = new SkinnableContainer();
var label:Label = new Label();
label.setStyle("fontSize", 80);
label.verticalCenter = label.horizontalCenter = 0;
label.text = addTabLabelSelectA.text;
newElement.addElement(label);
viewStackDemo.addElement(newElement);
var newDataItem:Object = {
label: addTabLabelSelectA.text,
icon: basicIconSelect1.selectedItem.icon,
element: newElement,
closable: closableSelectA.selected
};
if (event.currentTarget == addTabSelect)
{
slidingTabs.dataProvider.addItem(newDataItem);
slidingTabs.selectedItem = newDataItem;
}
else
{
slidingTabs.addButton(newDataItem, true);
}
viewStackDemo.selectedChild = newElement;
}
protected function addButtonBarHandler(event:MouseEvent):void
{
var newDataItem:Object = {
label: addTabLabelSelectB.text,
icon: basicIconSelect2.selectedItem.icon,
closable: closableSelectB.selected
};
if (event.currentTarget == addButtonSelect)
{
buttonBar.dataProvider.addItem(newDataItem);
buttonBar.selectedItem = newDataItem;
}
else
{
buttonBar.addButton(newDataItem, true);
}
}
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="ButtonBar Description"
description="Button bar that supports dragging, button removal, and animations. Fully supports the Flex SDK ButtonBar API, including skinning and tab/keyboard navigation. Buttons support truncation and shrinking to fit the available space. When truncated, a button will display its label as a tooltip."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:expandingContainerContent>
<!--- expanding container #1 -->
<data:ExpandingContainerData>
<data:label>API</data:label>
<data:content>
<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="The duration of the slide animations."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Easer:">
<s:DropDownList id="animationEaserSelect"
width="100"
labelField="name"
selectedIndex="0">
<s:ArrayCollection>
<fx:Object name="Linear" easer="{new Linear()}"/>
<fx:Object name="Sine" easer="{new Sine()}"/>
<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 slide animations."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>TabBar Example</data:tabLabel>
<data:exampleDescription>TabBar linked to a viewstack. Test the demo by dragging the tabs around, removing tabs via the close icon in the tabs, and playing with the API below.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="Layout"/>
<s:FormItem label="Gap:">
<s:HSlider id="gapSelectA"
width="100"
minimum="-20" maximum="20" value="2" value.london="-15" value.spark="1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Gap between tabs."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Use Preferred Width:">
<s:CheckBox id="usePreferredWidthSelectA"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, button width will be set to the preferred width of each button. If false, the buttons will be sized to fill the available space. The width of each button cannot exceed the max button width property, set below. If the width of the buttons exceeds the available space, the buttons will be proportionally shrunk to fit."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Max Button Width:">
<s:HSlider id="maxButtonWidthSelectA"
width="100"
minimum="{35 - gapSelectA.value}" maximum="500" value="300" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The maximum allowed width for a tab."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"/>
<s:Form>
<s:FormHeading label="Add New Button"/>
<s:FormItem label="Label:">
<textInput:TextInput id="addTabLabelSelectA"
iconClass="{null}"
width="100"
text="New Button"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Will be displayed in a tooltip if truncated in the button."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Can be Closed:">
<s:CheckBox id="closableSelectA"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to add a close icon to the tab so users can close the tab via mouse interaction."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Include Icon">
<s:DropDownList id="basicIconSelect1"
width="120"
selectedIndex="0"
labelField="label">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="No Icon" icon="{null}" />
<fx:Object label="Camera Icon" icon="@Embed(source='icons/open-iconic-master/camera-slr-2x.png')" />
<fx:Object label="Globe Icon" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
<fx:Object label="Home Icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
<fx:Object label="Paperclip Icon" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
<fx:Object label="Magnify Icon" icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')" />
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Tabs can include arbitrary icons. Use this dropdown to add an icon bundled with this demo."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:Button id="addTabSelect"
label="Add Tab"
click="addTabBarHandler(event)"/>
<s:Button label="Add Tab via Animation"
click="addTabBarHandler(event)"/>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"/>
<s:Form>
<s:FormHeading label="Misc. API"/>
<s:Button enabled="{slidingTabs.dataProvider.length > 0}"
label="Remove Last Button"
click="if (slidingTabs.dataProvider.length > 0) slidingTabs.removeButton(slidingTabs.dataProvider.length - 1)" />
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<s:VGroup top="20" right="20" bottom="20" left="20"
horizontalAlign="justify"
gap="-1">
<buttonBar:TabBar id="slidingTabs"
closableField="closable"
width="100%"
depth="1"
easer="{animationEaserSelect.selectedItem.easer}"
duration="{animationDurationSelect.value}"
labelField="label"
iconField="icon"
selectedIndex="0"
change="viewStackDemo.selectedChild=slidingTabs.selectedItem.element;">
<buttonBar:layout>
<layouts:ButtonBarLayout gap="{gapSelectA.value}"
usePreferredWidth="{usePreferredWidthSelectA.selected}"
maxButtonWidth="{maxButtonWidthSelectA.value}"/>
</buttonBar:layout>
<buttonBar:dataProvider>
<s:ArrayCollection>
<fx:Object label="Drag Me A" element="{elementA}" closable="true"/>
<fx:Object label="Drag Me B Tab" element="{elementB}" closable="true"/>
<fx:Object label="Drag Me C" element="{elementC}" closable="true" />
<fx:Object label="Drag Me D Tab Long Label" element="{elementD}" closable="true" icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<fx:Object label="Tab E" element="{elementE}" closable="true" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
</s:ArrayCollection>
</buttonBar:dataProvider>
</buttonBar:TabBar>
<viewStack:ViewStack id="viewStackDemo"
height="100%" width="100%"
depth="0"
borderVisible="true"
backgroundColor="#FFFFFF">
<s:SkinnableContainer id="elementA">
<s:Label horizontalCenter="0" verticalCenter="0"
text="A"
fontSize="80"/>
</s:SkinnableContainer>
<s:SkinnableContainer id="elementB">
<s:Label horizontalCenter="0" verticalCenter="0"
text="B"
fontSize="80"/>
</s:SkinnableContainer>
<s:SkinnableContainer id="elementC">
<s:Label horizontalCenter="0" verticalCenter="0"
text="C"
fontSize="80"/>
</s:SkinnableContainer>
<s:SkinnableContainer id="elementD">
<s:Label horizontalCenter="0" verticalCenter="0"
text="D"
fontSize="80"/>
</s:SkinnableContainer>
<s:SkinnableContainer id="elementE">
<s:Label horizontalCenter="0" verticalCenter="0"
text="E"
fontSize="80"/>
</s:SkinnableContainer>
</viewStack:ViewStack>
</s:VGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>ButtonBar Example</data:tabLabel>
<data:exampleDescription>ButtonBar example. Test the demo by dragging the buttons around, removing buttons via the close icon in the buttons, and playing with the API below.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormHeading label="Layout"/>
<s:FormItem label="Gap:">
<s:HSlider id="gapSelectB"
width="100"
minimum="-20" maximum="20" value="-1"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Gap between buttons."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Use Preferred Width:">
<s:CheckBox id="usePreferredWidthSelectB"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="If true, button width will be set to the preferred width of each button. If false, the buttons will be sized to fill the available space. The width of each button cannot exceed the max button width property, set below. If the width of the buttons exceeds the available space, the buttons will be proportionally shrunk to fit."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Max Button Width:">
<s:HSlider id="maxButtonWidthSelectB"
width="100"
minimum="{35 - gapSelectB.value}" maximum="500" value="500" />
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The maximum allowed width for a button. Only relevant if the buttons are not sized to their preferred width."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"/>
<s:Form>
<s:FormHeading label="Add New Button"/>
<s:FormItem label="Label:">
<textInput:TextInput id="addTabLabelSelectB"
iconClass="{null}"
width="100"
text="New Button"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Will be displayed in a tooltip if truncated in the button."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Can be Closed:">
<s:CheckBox id="closableSelectB"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to add a close icon to the button so users can close the button via mouse interaction."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Include Icon">
<s:DropDownList id="basicIconSelect2"
width="120"
selectedIndex="0"
labelField="label">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="No Icon" icon="{null}" />
<fx:Object label="Camera Icon" icon="@Embed(source='icons/open-iconic-master/camera-slr-2x.png')" />
<fx:Object label="Globe Icon" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')" />
<fx:Object label="Home Icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
<fx:Object label="Paperclip Icon" icon="@Embed(source='icons/open-iconic-master/paperclip-2x.png')" />
<fx:Object label="Magnify Icon" icon="@Embed(source='icons/open-iconic-master/magnifying-glass-2x.png')" />
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Tabs can include arbitrary icons. Use this dropdown to add an icon bundled with this demo."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:Button id="addButtonSelect"
label="Add Button"
click="addButtonBarHandler(event)"/>
<s:Button label="Add Button via Animation"
click="addButtonBarHandler(event)"/>
</s:FormItem>
</s:Form>
<separators:VSeparator height="100%"/>
<s:Form>
<s:FormHeading label="Misc. API"/>
<s:FormItem label="Require Selection:">
<s:CheckBox id="requireSelectionSelect"
selected="false"/>
</s:FormItem>
<s:Button enabled="{buttonBar.dataProvider.length > 0}"
label="Remove Last Button"
click="if (buttonBar.dataProvider.length > 0) buttonBar.removeButton(buttonBar.dataProvider.length - 1)" />
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<buttonBar:ButtonBar id="buttonBar"
verticalCenter="0"
left="20" right="20"
closableField="closable"
depth="1"
requireSelection="{requireSelectionSelect.selected}"
easer="{animationEaserSelect.selectedItem.easer}"
duration="{animationDurationSelect.value}"
labelField="label"
selectedIndex="0"
change="viewStackDemo.selectedChild=slidingTabs.selectedItem.element;">
<buttonBar:layout>
<layouts:ButtonBarLayout gap="{gapSelectB.value}"
usePreferredWidth="{usePreferredWidthSelectB.selected}"
maxButtonWidth="{maxButtonWidthSelectB.value}"/>
</buttonBar:layout>
<buttonBar:dataProvider>
<s:ArrayCollection>
<fx:Object label="Drag Me A" element="{elementA}" closable="true"/>
<fx:Object label="Drag Me B Button" element="{elementB}" closable="true"/>
<fx:Object label="Drag Me C" element="{elementC}" closable="true" />
<fx:Object label="Drag Me D Button Long Label" element="{elementD}" closable="true" icon="@Embed(source='icons/open-iconic-master/home-2x.png')"/>
<fx:Object label="Button E" element="{elementE}" closable="true" icon="@Embed(source='icons/open-iconic-master/globe-2x.png')"/>
</s:ArrayCollection>
</buttonBar:dataProvider>
</buttonBar:ButtonBar>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>