<?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:tabPaneNavigator="ardisia.components.paneNavigators.tabPaneNavigator.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:pane="ardisia.components.pane.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:dockingCompassContainer="ardisia.components.dockingCompassContainer.*"
xmlns:floatPaneControlBar="ardisia.components.floatPaneControlBar.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.events.FlexEvent;
import mx.graphics.SolidColor;
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 spark.primitives.Rect;
import ardisia.components.buttonBar.layouts.ButtonBarLayout;
import ardisia.components.pane.Pane;
import ardisia.components.paneNavigators.events.PaneNavigatorEvent;
protected var paneCounter:int = 0;
protected var panesTabA:Array = [];
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
}
public function animatedIn():void
{
addPane();
addPane();
addPane();
callLater(addPane, [true, false]);
}
protected function addPane(float:Boolean = false, animate:Boolean = true):void
{
var pane:Pane = new paneFactory();
panesTabA.push(pane);
var rect:Rect = new Rect();
rect.depth = 0;
rect.percentHeight = rect.percentWidth = 100;
var fill:SolidColor = new SolidColor();
rect.fill = fill;
fill.color = Math.round(Math.random() * 255 * 255 * 255);
fill.alpha = 0.2;
pane.addElement(rect);
if (float)
{
var pt:Point = tpnav1.localToGlobal(new Point(tpnav1.width, 0));
pane.move(pt.x + Math.round(Math.random() * 30), pt.y + Math.round(Math.random() * 20) + 60);
pane.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, animate, null, moduleFactory);
}
paneCounter++;
if (!float)
{
tpnav1.addElement(pane);
tpnav1.selectedChild = pane;
}
pane.title = "Pane #" + String(paneCounter);
}
protected function addPaneHandler(event:MouseEvent):void
{
addPane(paneTypeSelect.selectedIndex == 1);
}
protected function viewstack_changeHandler(event:IndexChangeEvent):void
{
if (!tpnavB1_A || !tpnavB1_B || !tpnavB1_C || !tpnavB1_D)
return;
for each (var pane:Pane in panesTabA)
{
if (pane.isFloating)
pane.visible = demoAppWrapper.tabBar.selectedItem.label == "Overview Example";
}
if (tpnavB1_A.isFloating)
tpnavB1_A.visible = demoAppWrapper.tabBar.selectedItem.label == "Multiple TabPaneNavigators Example";
if (tpnavB1_B.isFloating)
tpnavB1_B.visible = demoAppWrapper.tabBar.selectedItem.label == "Multiple TabPaneNavigators Example";
if (tpnavB1_C.isFloating)
tpnavB1_C.visible = demoAppWrapper.tabBar.selectedItem.label == "Multiple TabPaneNavigators Example";
if (tpnavB1_D.isFloating)
tpnavB1_D.visible = demoAppWrapper.tabBar.selectedItem.label == "Multiple TabPaneNavigators Example";
}
protected function crossDockHandler(event:PaneNavigatorEvent):void
{
var left:Boolean = event.pane.title.indexOf("Left") > -1;
if (left && event.currentTarget != tpnav2A && disableCrossDocking.selected)
event.preventDefault();
else if (!left && event.currentTarget != tpnav2B && disableCrossDocking.selected)
event.preventDefault();
}
protected function removedFromStageHandler(event:Event):void
{
for each (var pane:Pane in panesTabA)
{
if (pane && pane.isFloating)
pane.closeFloatedPane(true);
}
if (tpnavB1_A)
tpnavB1_A.closeFloatedPane(true);
if (tpnavB1_B)
tpnavB1_B.closeFloatedPane(true);
if (tpnavB1_C)
tpnavB1_C.closeFloatedPane(true);
if (tpnavB1_D)
tpnavB1_D.closeFloatedPane(true);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="paneFactory">
<pane:Pane title="{titleSelect.text}"
width="310" height="380"
boundingMode="boundEntirePane"
icon="{iconSelect.selectedItem.icon}"
displayCloseButton="{basicdisplayCloseButtonSelect1.selected}"
canBeDocked="{basicCanBeDockedSelect.selected}"
canBeFloated="{basicCanBeFloatedSelect.selected}"
displayMaximizedButton="false"
displayMinimizedButton="false"
includeInControlBar="false"
alphaOverPaneNavigator="{alphaOverPaneNavigatorSelect.value}">
<scroller:Scroller width="100%" height="100%"
depth="2">
<s:Group>
<s:VGroup top="20" right="20" bottom="20" left="20"
paddingBottom="20">
<s:Label id="basicPane1Label"
width="100%"
text="If floated, this pane can be docked to the TabPaneNavigator by dragging over its tab bar region. If docked within a TabPaneNavigator, can be floated by dragging it out of the tab bar region."/>
<separators:HSeparator width="100%" />
<s:Form top="20" bottom="20" left="20">
<s:FormHeading label="API:"/>
<s:FormItem label="Title">
<s:TextInput id="titleSelect"
width="100"
text="{title}"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The pane title."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Include Icon">
<s:DropDownList id="iconSelect"
width="100"
selectedIndex="0"
labelField="label">
<s:dataProvider>
<s:ArrayCollection>
<fx:Object label="No Icon" icon="{null}" />
<fx:Object label="Task Icon" icon="@Embed(source='icons/open-iconic-master/task-2x.png')" />
<fx:Object label="Cross Icon" icon="@Embed(source='icons/cross.png')" />
<fx:Object label="Folder" icon="@Embed(source='icons/folder-open.png')" />
<fx:Object label="Home Icon" icon="@Embed(source='icons/open-iconic-master/home-2x.png')" />
<fx:Object label="Plus Icon" icon="@Embed(source='icons/plus.png')" />
<fx:Object label="Delete Icon" icon="@Embed(source='icons/cross-red.png')" />
</s:ArrayCollection>
</s:dataProvider>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The pane icon."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Can Be Closed">
<s:CheckBox id="basicdisplayCloseButtonSelect1"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the pane to be closed via mouse interaction."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Can Be Docked">
<s:CheckBox id="basicCanBeDockedSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the pane to be docked to a PaneNavigator when floated and dragged over the navigator's tab bar."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Can Be Floated">
<s:CheckBox id="basicCanBeFloatedSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow the pane to be un-docked and floated when dragged out of the navigator past the unDockingThreshold."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Hover Alpha">
<s:HSlider id="alphaOverPaneNavigatorSelect"
minimum="0" maximum="1" value="0.5" snapInterval="0"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The alpha to set the pane to when hovering over a PaneNavigator and the pane can be docked."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:VGroup>
</s:Group>
</scroller:Scroller>
</pane:Pane>
</fx:Component>
</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="TabPaneNavigator Description"
description="The TabPaneNavigator class is a tab bar combined with a viewstack that enables users to drag content out into floating panes and back into a PaneNavigator. All child elements are Ardisia Pane containers. Panes that are children of the TabPaneNavigator can be dragged out of the viewstack and floated. Floated panes can also be dragged in and docked to the navigator. Fully supports the API for the Ardisia Buttonbar and the Viewstack including deferred instantiation."
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="Threshold:">
<s:HSlider id="unDockingThresholdSelect"
minimum="0" maximum="100" value="50"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="The number of pixels the mouse must move outside of the navigator during tab dragging to un-dock a Pane. Too few pixels and it is easy to accidently drag a pane out of the navigator."/>
</s:helpContent>
</s:FormItem>
</data:content>
</data:ExpandingContainerData>
</containers:expandingContainerContent>
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Overview Example</data:tabLabel>
<data:exampleDescription>Basic example below. Drag tabs out of the tab bar region of the TabPaneNavigator to float the pane content or drag floated panes back over the tab bar region of the TabPaneNavigator to dock floated panes to the navigator.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormHeading label="Add New Pane"/>
<s:FormItem label="Pane Type">
<s:layout>
<s:HorizontalLayout />
</s:layout>
<s:DropDownList id="paneTypeSelect"
width="100"
selectedIndex="0"
requireSelection="true">
<s:ArrayCollection>
<fx:String>Tab</fx:String>
<fx:String>Floated</fx:String>
</s:ArrayCollection>
</s:DropDownList>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="Select whether to add the pane to the TabPaneNavigator or add as a floated pane."/>
</s:helpContent>
</s:FormItem>
<s:FormItem>
<s:Button id="addPaneSelect"
width="100"
label="Add Pane"
click="addPaneHandler(event);"/>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20"
gap="20">
<!--- create immediately because adding content via actionscript -->
<tabPaneNavigator:TabPaneNavigator id="tpnav1"
width="100%" height="100%"
borderVisible="true"
backgroundColor="#E2E2E2"
creationPolicy="all"
unDockThreshold="{unDockingThresholdSelect.value}"
unDocked="event.pane.width=310;event.pane.height=380;"/>
<s:Label width="100%"
text="Drag tabs out of the TabPaneNavigator (left) to float the pane content. Drag floated panes over the TabPaneNavigator tab-bar region to dock floated panes."
fontWeight="bold"/>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Multiple TabPaneNavigators Example</data:tabLabel>
<data:exampleDescription>Panes can be dragged, docked, and un-docked between unlimited numbers of TabPaneNavigators. Docking to specific TabPaneNavigators can be prevented by cancelling the dragEnter event. See the 'Disable Cross Docking' checkbox below. Try undocking panes from a TabPaneNavigator below and docking it to the other TabPaneNavigator.</data:exampleDescription>
<data:toolbarContent>
<s:Form>
<s:FormItem label="Disable Cross Docking">
<s:CheckBox id="disableCrossDocking"
selected="false"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="By cancelling the 'dragEnter' event, prevent 'left' panes from docking to the TabPaneNavigator on the right and vice-versa."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20"
gap="60">
<tabPaneNavigator:TabPaneNavigator id="tpnav2A"
width="100%" height="100%"
borderVisible="true"
creationPolicy="auto"
unDockThreshold="{unDockingThresholdSelect.value}"
creationComplete="ButtonBarLayout(tpnav2A.tabBarPart.layout).maxButtonWidth=125"
unDocked="event.pane.width=450;event.pane.height=300;"
dragEnter="crossDockHandler(event);">
<pane:Pane id="tpnavB1_A"
title="Left Navigator 1"
boundingMode="boundEntirePane"
icon="@Embed(source='icons/open-iconic-master/home-2x.png')"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false" includeInControlBar="false">
<s:Label horizontalCenter="0" verticalCenter="0"
text="Left A"
fontSize="80"
fontWeight="bold"/>
</pane:Pane>
<pane:Pane id="tpnavB1_B"
title="Left Navigator 2"
boundingMode="boundEntirePane"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false" includeInControlBar="false">
<s:Label horizontalCenter="0" verticalCenter="0"
text="Left B"
fontSize="80"
fontWeight="bold"/>
</pane:Pane>
</tabPaneNavigator:TabPaneNavigator>
<tabPaneNavigator:TabPaneNavigator id="tpnav2B"
width="100%" height="100%"
borderVisible="true"
creationPolicy="auto"
unDockThreshold="{unDockingThresholdSelect.value}"
creationComplete="ButtonBarLayout(tpnav2B.tabBarPart.layout).maxButtonWidth=125"
unDocked="event.pane.width=450;event.pane.height=300;"
dragEnter="crossDockHandler(event);">
<pane:Pane id="tpnavB1_C"
title="Right Navigator 1"
boundingMode="boundEntirePane"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false" includeInControlBar="false"
icon="@Embed(source='icons/cross-red.png')">
<s:Label horizontalCenter="0" verticalCenter="0"
text="Right A"
fontSize="80"
fontWeight="bold"/>
</pane:Pane>
<pane:Pane id="tpnavB1_D"
title="Right Navigator 2"
boundingMode="boundEntirePane"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false" includeInControlBar="false">
<s:Label horizontalCenter="0" verticalCenter="0"
text="Right B"
fontSize="80"
fontWeight="bold"/>
</pane:Pane>
</tabPaneNavigator:TabPaneNavigator>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>