Packageardisia.components.dockingCompassContainer
Classpublic class DockingCompassContainer
InheritanceDockingCompassContainer Inheritance CompassContainerBase Inheritance spark.components.supportClasses.SkinnableComponent

A container system that allows the user to drag regions from within a CompassContainer and dock to new regions.

View the technical documentation on the Ardisia Labs website for more information.

Default MXML PropertycenterContent



Public Properties
 PropertyDefined By
 InheritedanimationDuration : Number
The duration of animations for the minimize/maximize animations.
CompassContainerBase
 InheritedcenterContent : Array
[write-only] Array of MXML content to add to the center region.
CompassContainerBase
 InheritedcenterRegionInstance : CompassRegionContainer
CompassContainerBase
 InheritedcenterRegionTitle : String
The title to display in the header for the center region if the header is displayed.
CompassContainerBase
 Inheritedeaser : IEaser
The easer to use for the minimize/maximize fade animation.
CompassContainerBase
 InheritedeastCanBeClosed : Boolean
True if the east region can be closed via mouse interaction.
CompassContainerBase
 InheritedeastCanBeMinimized : Boolean
True if the east region can be minimized via mouse interaction.
CompassContainerBase
 InheritedeastContent : Array
[write-only] Array of MXML content to add to the east region.
CompassContainerBase
 InheritedeastRegionInstance : CompassRegionContainer
CompassContainerBase
 InheritedeastRegionTitle : String
The title to display in the header for the east region if the header is displayed.
CompassContainerBase
 InheritedeastResizeLocked : Boolean
True to prevent the region from being resized via user interaction.
CompassContainerBase
  eastTopLevelDropTarget : TopLevelDropTarget
DockingCompassContainer
 InheritedeastWidth : Number
Explicit width of the east region.
CompassContainerBase
 InheritedmaxEastWidth : Number
The maximum allowed size of the east region.
CompassContainerBase
 InheritedmaxNorthHeight : Number
The maximum allowed size of the north region.
CompassContainerBase
 InheritedmaxSouthHeight : Number
The maximum allowed size of the south region.
CompassContainerBase
 InheritedmaxWestWidth : Number
The maximum allowed size of the west region.
CompassContainerBase
 InheritedminEastWidth : Number
The minimum allowed size of the east region.
CompassContainerBase
 InheritedminNorthHeight : Number
The minimum allowed size of the north region.
CompassContainerBase
 InheritedminSouthHeight : Number
The minimum allowed size of the south region.
CompassContainerBase
 InheritedminWestWidth : Number
The minimum allowed size of the west region.
CompassContainerBase
 InheritednorthCanBeClosed : Boolean
True if the north region can be closed via mouse interaction.
CompassContainerBase
 InheritednorthCanBeMinimized : Boolean
True if the north region can be minimized via mouse interaction.
CompassContainerBase
 InheritednorthContent : Array
[write-only] Array of MXML content to add to the north region.
CompassContainerBase
 InheritednorthHeight : Number
Explicit height of the north region.
CompassContainerBase
 InheritednorthRegionInstance : CompassRegionContainer
CompassContainerBase
 InheritednorthRegionTitle : String
The title to display in the header for the north region if the header is displayed.
CompassContainerBase
 InheritednorthResizeLocked : Boolean
True to prevent the region from being resized via user interaction.
CompassContainerBase
  northTopLevelDropTarget : TopLevelDropTarget
DockingCompassContainer
  regionDropTargetInstance : RegionDropTarget
DockingCompassContainer
 InheritedshowCenterChrome : Boolean
True to display the chrome for the center region.
CompassContainerBase
 InheritedshowEastChrome : Boolean
True to display the chrome for the east region.
CompassContainerBase
 InheritedshowNorthChrome : Boolean
True to display the chrome for the north region.
CompassContainerBase
 InheritedshowSouthChrome : Boolean
True to display the chrome for the south region.
CompassContainerBase
 InheritedshowWestChrome : Boolean
True to display the chrome for the west region.
CompassContainerBase
 InheritedsouthCanBeClosed : Boolean
True if the east region can be closed via mouse interaction.
CompassContainerBase
 InheritedsouthCanBeMinimized : Boolean
True if the south region can be minimized via mouse interaction.
CompassContainerBase
 InheritedsouthContent : Array
[write-only] Array of MXML content to add to the south region.
CompassContainerBase
 InheritedsouthHeight : Number
Explicit height of the south region.
CompassContainerBase
 InheritedsouthRegionInstance : CompassRegionContainer
CompassContainerBase
 InheritedsouthRegionTitle : String
The title to display in the header for the south region if the header is displayed.
CompassContainerBase
 InheritedsouthResizeLocked : Boolean
True to prevent the region from being resized via user interaction.
CompassContainerBase
  southTopLevelDropTarget : TopLevelDropTarget
DockingCompassContainer
  topLevelCompassContainer : CompassContainer
[read-only] Top level compass container.
DockingCompassContainer
 InheritedwestCanBeClosed : Boolean
True if the west region can be closed via mouse interaction.
CompassContainerBase
 InheritedwestCanBeMinimized : Boolean
True if the west region can be minimized via mouse interaction.
CompassContainerBase
 InheritedwestContent : Array
[write-only] Array of MXML content to add to the west region.
CompassContainerBase
 InheritedwestRegionInstance : CompassRegionContainer
CompassContainerBase
 InheritedwestRegionTitle : String
The title to display in the header for the west region if the header is displayed.
CompassContainerBase
 InheritedwestResizeLocked : Boolean
True to prevent the region from being resized via user interaction.
CompassContainerBase
  westTopLevelDropTarget : TopLevelDropTarget
DockingCompassContainer
 InheritedwestWidth : Number
Explicit width of the west region.
CompassContainerBase
Public Methods
 MethodDefined By
  
dragDrop(draggedRegion:CompassRegionContainer, hoveredRegion:CompassRegionContainer, regionDropQuadrant:String = null, topLevelQuadrant:String = null):void
Called when a region drag is dropped.
DockingCompassContainer
  
dragEnd():void
Called when a drag operation ends.
DockingCompassContainer
  
Called when a drag operation enters the entire DockingCompassContainer.
DockingCompassContainer
  
dragExit():void
Called when a drag operation exits the entire DockingCompassContainer.
DockingCompassContainer
  
dragMove(hoveredRegion:CompassRegionContainer, originatingDockingCompassContainer:DockingCompassContainer):void
Called when a drag operation moves over the DockingCompassContainer.
DockingCompassContainer
  
Called when a region drag enters a docking container region.
DockingCompassContainer
  
Called when a drag operations exits a docking region.
DockingCompassContainer
Protected Methods
 MethodDefined By
  
compassContainerHandler(event:Event):void
Handles events on the CompassContainer.
DockingCompassContainer
  
dockingHandler(event:MouseEvent):void
Handles docking operations for the dragged region.
DockingCompassContainer
  
drawDropIndicator(location:String, region:UIComponent, originatingDockingCompassContainer:DockingCompassContainer):void
Draw an indicator when hovering over a top level drop target or a region drop target.
DockingCompassContainer
  
Return the region drop target hovered (if any).
DockingCompassContainer
  
Check if any top level drop targets are hovered over.
DockingCompassContainer
  
Remove the region drop target instance.
DockingCompassContainer
  
Remove the top level drop targets.
DockingCompassContainer
Events
 Event Summary Defined By
  Dispatched when a drop is completed and after the dragged region has been added to the drop region.DockingCompassContainer
  Dispatched when a drop is initiated, assuming it was not cancelled in the "dragEnter" event.DockingCompassContainer
  Dispatched when a drag ends, regardless if a drop occurred or not.DockingCompassContainer
  Dispatched when a drag enters a DockingCompassContainer.DockingCompassContainer
  Dispatched when a drag leaves a DockingCompassContainer.DockingCompassContainer
  Dispatched when a drag enters another region of a DockingCompassContainer.DockingCompassContainer
  Dispatched when a drag leaves a region of the CompassRegionContainer.DockingCompassContainer
  Dispatched when a region begins dragging.DockingCompassContainer
  Dispatched when a region is about to begin dragging.DockingCompassContainer
Styles
 Style Description Defined By
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the background for the center region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Alpha of the border for the center region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the border for the center region.
CompassContainerBase
 InheritedType: Boolean CSS Inheritance: no
True to display a border around the center region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the background for the east region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Alpha of the border for the east region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the border for the east region.
CompassContainerBase
 InheritedType: Boolean CSS Inheritance: no
True to display a border around the east region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
The gap between regions.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Alpha of the gap.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Color of the gap between regions.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the background for the north region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Alpha of the border for the north region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the border for the north region.
CompassContainerBase
 InheritedType: Boolean CSS Inheritance: no
True to display a border around the north region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Height of the divider button for horizontal dividers.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Width of the divider button for vertical dividers.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the background for the south region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Alpha of the border for the south region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the border for the south region.
CompassContainerBase
 InheritedType: Boolean CSS Inheritance: no
True to display a border around the south region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the background for the west region.
CompassContainerBase
 InheritedType: Number CSS Inheritance: no
Alpha of the border for the west region.
CompassContainerBase
 InheritedType: uint Format: Color CSS Inheritance: no
Color of the border for the west region.
CompassContainerBase
 InheritedType: Boolean CSS Inheritance: no
True to display a border around the west region.
CompassContainerBase
Skin Parts

This component uses skins made up of skin parts. Do not set the skin parts directly. The component's skin sets the skin parts.


 Skin Part Description Defined By
  
compassContainerFactoryPart:mx.core.IFactory
Required: true Part Type: Dynamic
Factory that creates the CompassContainers. At least one top level CompassContainer will be created.

The IFactory must return an object of type CompassContainer
DockingCompassContainer
  
dragProxyFactoryPart:mx.core.IFactory
Required: true Part Type: Dynamic
Factory to create the region drag proxy.

The IFactory must return an object of type DataRenderer
DockingCompassContainer
  
regionDropTargetFactoryPart:mx.core.IFactory
Required: true Part Type: Dynamic
Creates elements that function as drop targets for a CompassRegionContainer.

The IFactory must return an object of type UIComponent
DockingCompassContainer
  
topLevelDropTargetFactoryPart:mx.core.IFactory
Required: true Part Type: Dynamic
Creates elements that function as drop targets for the top level DockingCompassContainer. Will create 4, 1 for each cardinal direction if the docking quadrant is enabled.

The IFactory must return an object of type UIComponent
DockingCompassContainer
Skin States

To skin the component, implement a skin that defines the following states. Although you must implement all skin states, a skin state can be empty. An empty skin state specifies no changes to the default skin state.


 Skin State Description Defined By
 InheritedCompassContainerBase
 InheritedCompassContainerBase
Property Detail
eastTopLevelDropTargetproperty
public var eastTopLevelDropTarget:TopLevelDropTarget

northTopLevelDropTargetproperty 
public var northTopLevelDropTarget:TopLevelDropTarget

regionDropTargetInstanceproperty 
public var regionDropTargetInstance:RegionDropTarget

southTopLevelDropTargetproperty 
public var southTopLevelDropTarget:TopLevelDropTarget

topLevelCompassContainerproperty 
topLevelCompassContainer:CompassContainer  [read-only]

Top level compass container. Should be available after creationComplete fires.

The default value is null.


Implementation
    public function get topLevelCompassContainer():CompassContainer
westTopLevelDropTargetproperty 
public var westTopLevelDropTarget:TopLevelDropTarget

Method Detail
compassContainerHandler()method
protected function compassContainerHandler(event:Event):void

Handles events on the CompassContainer.

Parameters

event:Event — the Event that triggered the handler

dockingHandler()method 
protected function dockingHandler(event:MouseEvent):void

Handles docking operations for the dragged region.

Fired continously while a region that is a child of this DockingCompassContainer is being dragged.

Parameters

event:MouseEvent — the MouseEvent associated with the check

dragDrop()method 
public function dragDrop(draggedRegion:CompassRegionContainer, hoveredRegion:CompassRegionContainer, regionDropQuadrant:String = null, topLevelQuadrant:String = null):void

Called when a region drag is dropped.

Parameters

draggedRegion:CompassRegionContainer — the CompassRegionContainer being dragged
 
hoveredRegion:CompassRegionContainer — the docking CompassRegionContainer region currently hovered
 
regionDropQuadrant:String (default = null) — the region quadrant to dock too
 
topLevelQuadrant:String (default = null) — the top level quadrant to dock too

dragEnd()method 
public function dragEnd():void

Called when a drag operation ends.

dragEnter()method 
public function dragEnter(event:DockingCompassContainerEvent):void

Called when a drag operation enters the entire DockingCompassContainer.

See the dragRegionEnter method for the handler when a drag operation enters a particular region of the DockingCompassContainer.

Change the docking properties of the event to change allowed region docking.

Parameters

event:DockingCompassContainerEvent — the DockingCompassContainerEvent

dragExit()method 
public function dragExit():void

Called when a drag operation exits the entire DockingCompassContainer.

dragMove()method 
public function dragMove(hoveredRegion:CompassRegionContainer, originatingDockingCompassContainer:DockingCompassContainer):void

Called when a drag operation moves over the DockingCompassContainer.

Parameters

hoveredRegion:CompassRegionContainer — the CompassRegionContainer region currently hovered
 
originatingDockingCompassContainer:DockingCompassContainer — the DockingCompassContainer that originated the drag

dragRegionEnter()method 
public function dragRegionEnter(hoveredRegion:CompassRegionContainer, event:DockingCompassContainerEvent):void

Called when a region drag enters a docking container region.

See the dragEnter method for the handler when a drag operation enters the entire DockingCompassContainer.

Change the docking properties of the event to change allowed region docking.

Parameters

hoveredRegion:CompassRegionContainer — the docking UIComponent region currently hovered
 
event:DockingCompassContainerEvent — the DockingCompassContainerEvent

dragRegionExit()method 
public function dragRegionExit():void

Called when a drag operations exits a docking region.

See the dragExit method for the handler when a drag operation exits the entire DockingCompassContainer.

drawDropIndicator()method 
protected function drawDropIndicator(location:String, region:UIComponent, originatingDockingCompassContainer:DockingCompassContainer):void

Draw an indicator when hovering over a top level drop target or a region drop target.

Parameters

location:String — the quadrant hovered
 
region:UIComponent — the UIComponent region hovered
 
originatingDockingCompassContainer:DockingCompassContainer — the DockingCompassContainer that originated the drag

getHoveredRegionDropTarget()method 
protected function getHoveredRegionDropTarget():String

Return the region drop target hovered (if any).

Returns
String — the CompassQuadrant string describing the hovered region (if any)
getHoveredTopLevelRegionDropTarget()method 
protected function getHoveredTopLevelRegionDropTarget():String

Check if any top level drop targets are hovered over.

Returns
String — the CompassQuadrant string describing the hovered region (if any)
removeRegionDropTargets()method 
protected function removeRegionDropTargets():void

Remove the region drop target instance.

removeTopLevelDropTargets()method 
protected function removeTopLevelDropTargets():void

Remove the top level drop targets.

Event Detail
dragDropComplete Event
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drop is completed and after the dragged region has been added to the drop region.

Applies to drops to the top level and regions of the top level container. See the "dropType" property of the event.

dragDropStarting Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drop is initiated, assuming it was not cancelled in the "dragEnter" event.

Cancel to prevent the drop.

dragEnd Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drag ends, regardless if a drop occurred or not.

dragEnter Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drag enters a DockingCompassContainer.

Cancel to prevent the user from dropping on the entered container. When the event is cancelled, the drag will not end, only the entered target DockingCompassContainer cannot be dropped on. When cancelled, not only will the drop not be allowed, but no drop indicators will be displayed.

This event only applies when dragging over an entire DockingCompassContainer. For enter events for regions of the container, see the "dragRegionEnter" event.

dragExit Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drag leaves a DockingCompassContainer.

This event only applies when dragging out of an entire DockingCompassContainer. For exit events for regions of the container, see the "dragRegionExit" event.

dragRegionEnter Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drag enters another region of a DockingCompassContainer.

Cancel to prevent the user from dropping on the entered container. When the event is cancelled, the drag will not end, only the entered target region cannot be dropped unto. When cancelled, not only will the drop not be allowed, but no drop indicators will be displayed.

This event only applies when dragging over an regions elements. For enter events for the top level, entire DockingCompassContainer, see the "dragEnter" event.

dragRegionExit Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a drag leaves a region of the CompassRegionContainer.

Cancel to prevent the user from dropping on the entered container. When the event is cancelled, the drag will not end, only the entered target region cannot be dropped unto. When cancelled, not only will the drop not be allowed, but no drop indicators will be displayed.

This event only applies when exiting a region element. For exit events for the entire DockingCompassContainer, see the "dragRegionExit" event.

dragStart Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a region begins dragging.

dragStarting Event  
Event Object Type: ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent
DockingCompassContainerEvent.type property = ardisia.components.dockingCompassContainer.events.DockingCompassContainerEvent

Dispatched when a region is about to begin dragging.

Cancel to prevent the drag.