Understanding dock area child sizing

Introduction

The dock area component is a container, just as any container needs sizing rules this component is no different. When a dock pane is dropped into a dock area, the dock pane will get sized using the dock area's child sizing.

Imagine you had a dock area where it's width is set to 250 pixels. You then have a dock pane that has had it's width set to 100% to fill the dock area. If the dock pane is loaded into the dock area at runtime, it will be sized just as any child component of a container would, it's width would stretch to 250 pixels minus padding.

Confusion might come into play when the dock pane is undocked and becomes a floating popUp. The default behavior of a dock pane when it becomes floating is as follows;

• Remove the pane from it's dock area.
• Add the dock pane into the PopUpManager.
• Set the dock pane's position based off the mouse x and y of the drop.
• Set the dock pane's width and height to NaN, this resets it's dimensions to it's measured width and height .

Resetting to NaN

Why do we reset the width and height to NaN?

When setting the width and height to NaN, we reinitialize the dock pane to it's measured size. This is the easiest way to circumvent bugs you as the application developer might run into. This component leaves the task of adjusting sizes to you in the dockComplete and floatComplete events of the DockPaneFX.

There are to many possibilities to run through when sizing components. This is one area that needs to be adjusted by the developer. If you are fine with the measured sizes of a popUp (your dock pane component), this will not affect you.

Events to size in

The two events you are going to want to know are the DockEvent.DOCK_COMPLETE and the DockEvent.FLOAT_COMPLETE event.

dockComplete

The dockComplete event is dispatched when the dock pane's isDocked property switches from false to true. This is when the dock pane is dropped into a dock area component.

private function dockCompleteHandler(event:DockEvent):void
{
	var initiator:IDockAreaClient = event.dockInitiator;
	var pane:IPane = IPane(initiator);
 
	pane.percentWidth = 100;
}

In the code example above, the dock pane once docked, has it's percentWidth set back to 100 which then stretches it to fit in the dock area.

floatComplete

The floatComplete event is dispatched when the dock pane's isDocked property switches from true to false. This is when the dock pane is dropped onto the application's stage where a dock area and another popUp do not exist.

private function floatCompleteHandler(event:DockEvent):void
{
	var initiator:IDockAreaClient = event.dockInitiator;
	var pane:IPane = IPane(initiator);
 
	pane.width = 300;
	pane.height = 300;
}

In the code example above, the dock pane once floating, has it's width and height set to 300 pixels. This overrides the NaN operation because that value was set prior to this event being dispatched.

Conclusion

It is very easy to control the sizing of your dock pane's once you know what events to use to do it. Remember these events, dockComplete and floatComplete are listened to by the DockPaneFX component.