<?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:dockingCompassContainer="ardisia.components.dockingCompassContainer.*"
xmlns:containers="containers.*"
xmlns:data="containers.data.*"
xmlns:separators="ardisia.components.separators.*"
xmlns:pane="ardisia.components.pane.*"
xmlns:scroller="ardisia.components.scroller.*"
xmlns:colorPicker="ardisia.components.colorPicker.*"
frameRate="60"
width="100%" height="100%"
removedFromStage="removedFromStageHandler(event)">
<fx:Script>
<![CDATA[
import mx.core.FlexGlobals;
import mx.core.UIComponent;
import mx.events.FlexEvent;
import spark.events.IndexChangeEvent;
import ardisia.components.compassContainer.CompassRegionContainer;
import ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent;
import ardisia.components.pane.Pane;
import ardisia.components.scroller.themes.spark.skins.ScrollerSkin;
protected var floatedPaneA:Pane;
protected var floatedPaneB:Pane;
protected var northID:String;
protected var eastID:String;
protected var southID:String;
public function creationComplete():void
{
demoAppWrapper.viewstack.addEventListener(IndexChangeEvent.CHANGE, viewstack_changeHandler);
}
protected function viewstack_changeHandler(event:IndexChangeEvent):void
{
if (demoAppWrapper.viewstack.selectedIndex == 2)
{
if (floatedPaneA)
{
floatedPaneA.visible = floatedPaneB.visible = true;
}
else
{
floatedPaneA = new PaneFactory();
floatedPaneB = new PaneFactory();
floatedPaneA.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, true, false, null, moduleFactory);
floatedPaneB.floatPane(DisplayObject(FlexGlobals.topLevelApplication), false, true, false, null, moduleFactory);
floatedPaneA.title = "Floated DockingCompassContainer Example 1";
floatedPaneB.title = "Floated DockingCompassContainer Example 2";
}
floatedPaneA.setCurrentState(currentState);
floatedPaneB.setCurrentState(currentState);
floatedPaneA.center(); floatedPaneB.center();
floatedPaneA.x -= 275;
floatedPaneB.x += 275;
}
else if (floatedPaneA)
{
floatedPaneA.visible = floatedPaneB.visible = false;
}
}
protected function dccD_creationCompleteHandler(event:FlexEvent):void
{
northID = CompassRegionContainer(dccD.topLevelCompassContainer.northRegionInstance).regionID;
eastID = CompassRegionContainer(dccD.topLevelCompassContainer.eastRegionInstance).regionID;
southID = CompassRegionContainer(dccD.topLevelCompassContainer.southRegionInstance).regionID;
}
protected function dccDEventHandler(event:DockingCompassContainerEvent):void
{
var overRegion:UIComponent = event.overRegion;
var draggedRegion:CompassRegionContainer = event.draggedRegion as CompassRegionContainer;
switch (event.type)
{
case DockingCompassContainerEvent.DRAG_ENTER:
event.northDockAllowed = northDockSelect.selected;
event.eastDockAllowed = eastDockSelect.selected;
event.southDockAllowed = southDockSelect.selected;
event.westDockAllowed = westDockSelect.selected;
break;
case DockingCompassContainerEvent.DRAG_REGION_ENTER:
switch (CompassRegionContainer(overRegion).regionID)
{
case northID:
var northAllowed:Boolean = northNorthDockableSelect.selected;
var eastAllowed:Boolean = northEastDockableSelect.selected;
var southAllowed:Boolean = northSouthDockableSelect.selected;
var westAllowed:Boolean = northWestDockableSelect.selected;
break;
case eastID:
northAllowed = eastNorthDockableSelect.selected;
eastAllowed = eastEastDockableSelect.selected;
southAllowed = eastSouthDockableSelect.selected;
westAllowed = eastWestDockableSelect.selected;
break;
case southID:
northAllowed = southNorthDockableSelect.selected;
eastAllowed = southEastDockableSelect.selected;;
southAllowed = southSouthDockableSelect.selected;;
westAllowed = southWestDockableSelect.selected;;
break;
default:
northAllowed = centerNorthDockableSelect.selected;
eastAllowed = centerEastDockableSelect.selected;
southAllowed = centerSouthDockableSelect.selected;
westAllowed = centerWestDockableSelect.selected;
break;
}
event.northDockAllowed = northAllowed;
event.eastDockAllowed = eastAllowed;
event.southDockAllowed = southAllowed;
event.westDockAllowed = westAllowed;
break;
case DockingCompassContainerEvent.DRAG_STARTING:
switch (CompassRegionContainer(draggedRegion).regionID)
{
case northID:
if (!northDraggableSelect.selected)
event.preventDefault();
break;
case eastID:
if (!eastDraggableSelect.selected)
event.preventDefault();
break;
case southID:
if (!southDraggableSelect.selected)
event.preventDefault();
break;
}
break;
}
}
protected function dccB1_dragEnterHandler(event:DockingCompassContainerEvent):void
{
var dcc:DockingCompassContainer = event.currentTarget as DockingCompassContainer;
if (!dcc.contains(event.draggedRegion) && disableCrossDocking.selected)
{
event.preventDefault();
}
}
protected function removedFromStageHandler(event:Event):void
{
if (floatedPaneA)
floatedPaneA.closeFloatedPane(true);
if (floatedPaneB)
floatedPaneB.closeFloatedPane(true);
}
]]>
</fx:Script>
<fx:Declarations>
<fx:Component className="PaneFactory">
<pane:Pane width="500" height="400"
displayCloseButton="false" displayMaximizedButton="false" displayMinimizedButton="false"
boundingMode="boundEntirePane">
<pane:states>
<s:State name="stockholm" />
<s:State name="london" />
<s:State name="spark" />
</pane:states>
<dockingCompassContainer:DockingCompassContainer id="dcc"
top="-1" right="-1" bottom="-1" left="-1"
top.london="0"
centerBorderVisible="true"
northRegionTitle="Draggable Region"
northHeight="75" maxWestWidth="250"
showWestChrome="false"
showCenterChrome="false">
<!--- center -->
<s:Label top="10" left="10"
fontSize="36"
fontWeight="bold"
text="{tree.selectedItem['@label']}"/>
<dockingCompassContainer:northContent>
<s:HGroup left="20" verticalCenter="0"
verticalAlign="middle">
<s:Button label="Toolbar Button A"/>
<s:Button label="Toolbar Button B"/>
<s:Button label="Toolbar Button C"/>
</s:HGroup>
</dockingCompassContainer:northContent>
<dockingCompassContainer:westContent>
<mx:Tree id="tree"
top="0" right="0" bottom="0" left="0"
labelField="@label"
showRoot="true"
borderStyle="none"
selectedIndex="0">
<mx:XMLListCollection>
<fx:XMLList>
<folder label="Folder A">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
<folder label="Folder B">
<folder label="File 1" />
<folder label="File 2" />
<folder label="File 3" />
<folder label="File 4" />
</folder>
</fx:XMLList>
</mx:XMLListCollection>
</mx:Tree>
</dockingCompassContainer:westContent>
</dockingCompassContainer:DockingCompassContainer>
</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="DockingCompassContainer Description"
description="The DockingCompassContainer component is a container that allows users to drag regions via their headers and dock them to new quadrants of the container. Regions can be re-docked internally within a DockingCompassContainer and between different DockingCompassContainer containers. Regions can either be docked to the edges of the container or within a region by using the drop indicators. Regions can be excluded from dragging and/or docking via event management. Drop targets, headers, and regions are fully skinnable and customizable. Extends and fully supports the CompassContainer API. See the CompassContainer demo."
currentState.stockholm="stockholm" currentState.london="london" currentState.spark="spark">
<containers:centerContent>
<!--- example #1 -->
<data:PrimaryContentData>
<data:tabLabel>Overview Example</data:tabLabel>
<data:exampleDescription>To drag, mouse down a region header below and drag to begin a docking session. To dock a region to the edges of the container, drop over the drop targets displayed at the edges of the container. To dock the region within another region, use the drop target displayed in the center of the hovered region and drop over the desired quadrant in the drop target. For this example, all the regions can be dragged and docked to all other quadrants.</data:exampleDescription>
<data:primaryContent>
<dockingCompassContainer:DockingCompassContainer id="dccA"
top="5" right="5" bottom="5" left="5"
centerRegionTitle="Center Region (the center region is not draggable but is dockable)"
northRegionTitle="North Region"
eastRegionTitle="East Region"
southRegionTitle="South Region"
westRegionTitle="West Region"
showCenterChrome="true"
northCanBeClosed="true" eastCanBeClosed="true" southCanBeClosed="true" westCanBeClosed="true">
<s:VGroup top="10" left="10">
<s:Label text="Center content." />
<s:Button label="Center Dummy Button" />
</s:VGroup>
<dockingCompassContainer:northContent>
<s:Group>
<s:VGroup top="10" left="10">
<s:Label text="North content." />
<s:Button label="North Dummy Button" />
</s:VGroup>
</s:Group>
</dockingCompassContainer:northContent>
<dockingCompassContainer:eastContent>
<scroller:Scroller id="eastScroller"
width="100%" height="100%">
<s:Group id="viewport">
<s:VGroup top="10" left="10">
<s:Label text="East content (scrollable)." />
<s:Button label="East Dummy Button" />
<s:Label text=" Scrollable. " />
</s:VGroup>
</s:Group>
</scroller:Scroller>
</dockingCompassContainer:eastContent>
<dockingCompassContainer:southContent>
<s:VGroup top="10" left="10">
<s:Label text="South content." />
<s:Button label="South Dummy Button" />
</s:VGroup>
</dockingCompassContainer:southContent>
<dockingCompassContainer:westContent>
<s:VGroup top="10" left="10">
<s:Label text="West content." />
<s:Button label="West Dummy Button" />
</s:VGroup>
</dockingCompassContainer:westContent>
</dockingCompassContainer:DockingCompassContainer>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #2 -->
<data:PrimaryContentData>
<data:tabLabel>Multiple Docking Example</data:tabLabel>
<data:exampleDescription>To drag, mouse down a region header below and drag to begin a docking session. Regions can be docked between different DockingCompassContainers. Try dragging regions between the docking containers below.</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="True to disable docking regions between the two DockingCompassContainers."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</data:toolbarContent>
<data:primaryContent>
<s:HGroup top="20" right="20" bottom="20" left="20"
gap="50">
<s:Group width="100%" height="100%">
<dockingCompassContainer:DockingCompassContainer id="dccB1"
width="100%" height="100%"
northRegionTitle="Left North" eastRegionTitle="Left East" southRegionTitle="Left South" westRegionTitle="Left West"
showCenterChrome="false"
dragEnter="dccB1_dragEnterHandler(event)">
<s:Group top="1" right="1" bottom="1" left="1"
clipAndEnableScrolling="true">
<s:VGroup top="10" left="10">
<s:Label text="Left Center content." />
<s:Button label="Left Center Dummy Button" />
</s:VGroup>
</s:Group>
<dockingCompassContainer:northContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup top="10" left="10">
<s:Label text="Left North content." />
<s:Button label="Left North Dummy Button" />
</s:VGroup>
</s:Group>
</scroller:Scroller>
</dockingCompassContainer:northContent>
<dockingCompassContainer:southContent>
<s:VGroup top="10" left="10">
<s:Label text="Left South content." />
<s:Button label="Left South Dummy Button" />
</s:VGroup>
</dockingCompassContainer:southContent>
</dockingCompassContainer:DockingCompassContainer>
</s:Group>
<s:Group width="100%" height="100%">
<dockingCompassContainer:DockingCompassContainer id="dccB2"
width="100%" height="100%"
northRegionTitle="Right North" eastRegionTitle="Right East" southRegionTitle="Right South" westRegionTitle="Right West"
showCenterChrome="false"
dragEnter="dccB1_dragEnterHandler(event)">
<s:Group top="1" right="1" bottom="1" left="1"
clipAndEnableScrolling="true">
<s:VGroup top="10" left="10">
<s:Label text="Right Center content." />
<s:Button label="Right Center Dummy Button" />
</s:VGroup>
</s:Group>
<dockingCompassContainer:northContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:VGroup top="10" left="10">
<s:Label text="Right North content." />
<s:Button label="Right North Dummy Button" />
</s:VGroup>
</s:Group>
</scroller:Scroller>
</dockingCompassContainer:northContent>
<dockingCompassContainer:southContent>
<s:VGroup top="10" left="10">
<s:Label text="Right South content." />
<s:Button label="Right South Dummy Button" />
</s:VGroup>
</dockingCompassContainer:southContent>
</dockingCompassContainer:DockingCompassContainer>
</s:Group>
</s:HGroup>
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #3 -->
<data:PrimaryContentData>
<data:tabLabel>Pane Example</data:tabLabel>
<data:exampleDescription>Illustrates that DockingCompassContainer containers can be added to floated panes and regions can be dragged and docked between them. Only the North regions below are draggable but all regions are dockable.</data:exampleDescription>
<data:primaryContent>
<s:Group />
</data:primaryContent>
</data:PrimaryContentData>
<!--- example #4 -->
<data:PrimaryContentData>
<data:tabLabel>Docking Management Example</data:tabLabel>
<data:exampleDescription>Developers have full control over what regions can be dragged and what regions can be docked to. Developers can also control what quadrants within a region can be docked to. The DockingCompassContainer uses cancellable events to give immense flexibility regarding docking. See the example below.</data:exampleDescription>
<data:toolbarContent>
<s:HGroup>
<s:Form>
<s:FormItem label="Top Level North Dock Allowed:">
<s:CheckBox id="northDockSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow a top level docking on the North quadrant."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Top Level East Dock Allowed:">
<s:CheckBox id="eastDockSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow a top level docking on the East quadrant."/>
</s:helpContent>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormItem label="Top Level South Dock Allowed:">
<s:CheckBox id="southDockSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow a top level docking on the South quadrant."/>
</s:helpContent>
</s:FormItem>
<s:FormItem label="Top Level West Dock Allowed:">
<s:CheckBox id="westDockSelect"
selected="true"/>
<s:helpContent>
<s:Image source="@Embed(source='icons/question.png')"
toolTip="True to allow a top level docking on the West quadrant."/>
</s:helpContent>
</s:FormItem>
</s:Form>
</s:HGroup>
</data:toolbarContent>
<data:primaryContent>
<dockingCompassContainer:DockingCompassContainer id="dccD"
top="20" right="20" bottom="20" left="20"
northRegionTitle="Quadrant A - North Region"
eastRegionTitle="Quadrant B - East Region"
southRegionTitle="Quadrant C - South Region"
westRegionTitle="Quadrant D - West Region"
northCanBeClosed="true" eastCanBeClosed="true" southCanBeClosed="true" westCanBeClosed="true"
northHeight="150" southHeight="150" eastWidth="300"
dragEnter="dccDEventHandler(event)"
dragRegionEnter="dccDEventHandler(event)"
dragStarting="dccDEventHandler(event)"
showCenterChrome="false"
creationComplete="dccD_creationCompleteHandler(event)">
<s:Group top="1" right="1" bottom="1" left="1"
clipAndEnableScrolling="true">
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:HGroup top="10" left="10">
<s:Form>
<s:FormHeading label="Dockable Quadrants"/>
<s:FormItem label="North:">
<s:CheckBox id="centerNorthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="East:">
<s:CheckBox id="centerEastDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="South:">
<s:CheckBox id="centerSouthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="West:">
<s:CheckBox id="centerWestDockableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Group>
</scroller:Scroller>
</s:Group>
<dockingCompassContainer:northContent>
<scroller:Scroller width="100%" height="100%"
skinClass="ardisia.components.scroller.themes.spark.skins.ScrollerSkin">
<s:Group>
<s:HGroup top="10" left="10">
<s:Form>
<s:FormHeading label="Dockable Quadrants"/>
<s:FormItem label="North:">
<s:CheckBox id="northNorthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="East:">
<s:CheckBox id="northEastDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="South:">
<s:CheckBox id="northSouthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="West:">
<s:CheckBox id="northWestDockableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Draggable"/>
<s:FormItem label="Region Draggable:">
<s:CheckBox id="northDraggableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Group>
</scroller:Scroller>
</dockingCompassContainer:northContent>
<dockingCompassContainer:eastContent>
<scroller:Scroller width="100%" height="100%"
skinClass="ardisia.components.scroller.themes.spark.skins.ScrollerSkin">
<s:Group>
<s:HGroup top="10" left="10">
<s:Form>
<s:FormHeading label="Dockable Quadrants"/>
<s:FormItem label="North:">
<s:CheckBox id="eastNorthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="East:">
<s:CheckBox id="eastEastDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="South:">
<s:CheckBox id="eastSouthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="West:">
<s:CheckBox id="eastWestDockableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Draggable"/>
<s:FormItem label="Region Draggable:">
<s:CheckBox id="eastDraggableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Group>
</scroller:Scroller>
</dockingCompassContainer:eastContent>
<dockingCompassContainer:southContent>
<scroller:Scroller width="100%" height="100%">
<s:Group>
<s:HGroup top="10" left="10">
<s:Form>
<s:FormHeading label="Dockable Quadrants"/>
<s:FormItem label="North:">
<s:CheckBox id="southNorthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="East:">
<s:CheckBox id="southEastDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="South:">
<s:CheckBox id="southSouthDockableSelect"
selected="true"/>
</s:FormItem>
<s:FormItem label="West:">
<s:CheckBox id="southWestDockableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
<s:Form>
<s:FormHeading label="Draggable"/>
<s:FormItem label="Region Draggable:">
<s:CheckBox id="southDraggableSelect"
selected="true"/>
</s:FormItem>
</s:Form>
</s:HGroup>
</s:Group>
</scroller:Scroller>
</dockingCompassContainer:southContent>
</dockingCompassContainer:DockingCompassContainer>
</data:primaryContent>
</data:PrimaryContentData>
</containers:centerContent>
</containers:DemoApplicationWrapper>
</s:Module>