<?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.*"
xmlns:dockingCompassContainer="ardisia.components.dockingCompassContainer.*"
xmlns:floatPaneControlBar="ardisia.components.floatPaneControlBar.*"
xmlns:pane="ardisia.components.pane.*"
xmlns:tabPaneNavigator="ardisia.components.paneNavigators.tabPaneNavigator.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event);"
creationComplete="creationCompletehandler(event);">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
public function animatedIn():void
{
paneA.move(300, 200);
paneA.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, false, null, moduleFactory);
paneB.move(400, 220);
paneB.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, false, false, null, moduleFactory);
}
public function creationCompletehandler(event:Event):void
{
callLater(FlexGlobals.topLevelApplication.creationComplete);
}
protected function removedFromStageHandler(event:Event):void
{
if (paneA)
paneA.closeFloatedPane(true);
if (paneB)
paneB.closeFloatedPane(true);
if (tabA1)
tabA1.closeFloatedPane(true);
if (tabA2)
tabA2.closeFloatedPane(true);
if (tabB1)
tabB1.closeFloatedPane(true);
if (tabB2)
tabB2.closeFloatedPane(true);
}
]]>
</fx:Script>
<fx:Declarations>
<pane:Pane id="paneA"
width="350"
title="Floating Pane A"
boundingMode="boundEntirePane"
alphaOverPaneNavigator="1"
minWidth="300" minHeight="300"
canBeDocked="true" canBeFloated="true" displayMinimizedButton="true" displayMaximizedButton="true" displayCloseButton="true">
<s:Label top="20" right="20" bottom="20" left="20"
text="This pane can be minimized, maximized, and focused via the FloatPaneControlBar at the bottom of the screen. You can also dock this Pane to the TabPaneNavigator(s) that are initially in the East and West region containers." />
</pane:Pane>
<pane:Pane id="paneB"
width="350"
title="Floating Pane B"
boundingMode="boundEntirePane"
alphaOverPaneNavigator="1"
minWidth="300" minHeight="300"
canBeDocked="true" canBeFloated="true" displayMinimizedButton="true" displayMaximizedButton="true" displayCloseButton="true">
<s:Label top="20" right="20" bottom="20" left="20"
text="This pane can be minimized, maximized, and focused via the FloatPaneControlBar at the bottom of the screen. You can also dock this Pane to the TabPaneNavigator(s) that are initially in the East and West region containers." />
</pane:Pane>
</fx:Declarations>
<s:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</s:states>
<s:Rect top="0" right="0" bottom="0" left="0">
<s:fill>
<s:SolidColor color="#FFFFFF" />
</s:fill>
</s:Rect>
<s:VGroup top="5" right="5" bottom="5" left="5"
horizontalAlign="justify">
<dockingCompassContainer:DockingCompassContainer id="exampleA"
height="100%"
eastWidth="250" westWidth="250"
eastRegionTitle="East (Draggable)"
westRegionTitle="West (Draggable)"
showCenterChrome="false"
centerBorderVisible="false"
northCanBeClosed="true" eastCanBeClosed="true" southCanBeClosed="true" westCanBeClosed="true">
<dockingCompassContainer:DockingCompassContainer id="exampleB"
width="100%" height="100%"
showCenterChrome="true"
centerBorderVisible="true"
centerRegionTitle="Center"
northRegionTitle="North (Draggable)"
southRegionTitle="South (Draggable)">
<s:Label top="10" right="10" bottom="10" left="10"
text="Rollup example of many Ardisia container classes: Pane, DockingCompassContainer, FloatPaneControlBar, and the TabPaneNavigator."/>
<dockingCompassContainer:southContent>
<s:VGroup top="10" left="10">
<s:Label text="South content." />
</s:VGroup>
</dockingCompassContainer:southContent>
<dockingCompassContainer:northContent>
<s:VGroup top="10" left="10">
<s:Label text="North content." />
</s:VGroup>
</dockingCompassContainer:northContent>
</dockingCompassContainer:DockingCompassContainer>
<dockingCompassContainer:eastContent>
<tabPaneNavigator:TabPaneNavigator id="tabPaneNavigatorA"
top="3" right="-1" bottom="-1" left="-1"
top.london="-2"
backgroundColor="#FFFFFF"
creationPolicy="all"
unDocked="event.pane.width=310;event.pane.height=380;"
borderVisible="true">
<pane:Pane id="tabA1"
title="Tab A"
boundingMode="boundEntirePane"
alphaOverPaneNavigator="1"
displayMinimizedButton="true" displayMaximizedButton="true" displayCloseButton="true">
<s:Label top="10" right="10" bottom="10" left="10"
text="Tab A When docked in a tab bar, you can drag the tab out of the navigator to float the Pane. When floating, you can dock to a TabNavigator by dragging the Pane over the tab bar." />
</pane:Pane>
<pane:Pane id="tabA2"
title="Tab B"
boundingMode="boundEntirePane"
alphaOverPaneNavigator="1"
displayMinimizedButton="true" displayMaximizedButton="true" displayCloseButton="true">
<s:Label top="10" right="10" bottom="10" left="10"
text="Tab B When docked in a tab bar, you can drag the tab out of the navigator to float the Pane. When floating, you can dock to a TabNavigator by dragging the Pane over the tab bar." />
</pane:Pane>
</tabPaneNavigator:TabPaneNavigator>
</dockingCompassContainer:eastContent>
<dockingCompassContainer:westContent>
<tabPaneNavigator:TabPaneNavigator id="tabPaneNavigatorB"
top="3" right="-1" bottom="-1" left="-1"
top.london="-2"
backgroundColor="#FFFFFF"
creationPolicy="all"
unDocked="event.pane.width=310;event.pane.height=380;"
borderVisible="true">
<pane:Pane id="tabB1"
title="Tab A"
boundingMode="boundEntirePane"
alphaOverPaneNavigator="1"
displayMinimizedButton="true" displayMaximizedButton="true" displayCloseButton="true">
<s:Label top="10" right="10" bottom="10" left="10"
text="Tab A When docked in a tab bar, you can drag the tab out of the navigator to float the Pane. When floating, you can dock to a TabNavigator by dragging the Pane over the tab bar." />
</pane:Pane>
<pane:Pane id="tabB2"
title="Tab B"
boundingMode="boundEntirePane"
alphaOverPaneNavigator="1"
displayMinimizedButton="true" displayMaximizedButton="true" displayCloseButton="true">
<s:Label top="10" right="10" bottom="10" left="10"
text="Tab B When docked in a tab bar, you can drag the tab out of the navigator to float the Pane. When floating, you can dock to a TabNavigator by dragging the Pane over the tab bar." />
</pane:Pane>
</tabPaneNavigator:TabPaneNavigator>
</dockingCompassContainer:westContent>
</dockingCompassContainer:DockingCompassContainer>
<floatPaneControlBar:FloatPaneControlBar maximizeBottom="53"/>
</s:VGroup>
</s:Module>