Understanding the dock area resizeBar

Introduction

The dock area component introduces a familiar concept into Flex, the closable docking area. There are some notable rules to pay attention to when using this functionality of the dock area container.

• The dock area is not a DividedBox.
• The dock area sizes just like an ordinary container minus two rules when resizing with the resizeBar.
  • The default dock area implementation is to set the width or height back to percentages once a resizeBar operation has been completed.

What, not a DividedBox ?

Yes, the DockAreaFX is not a DividedBox, this means when you have more than one dock area component in an HBox or VBox and resize the width or height using the resizeBar, the dock area will not respond the same way as a DividedBox proportions it's children. Since the parent of the two or more dock areas is a Box, normal sizing rules apply. This means there is a possibility of getting a scroll bar in the parent Box when the resize creates a dock area larger than the allocated space.

Resetting percentages

When you are using the left or right reiszeBarPlacement and set the dock area's height to 100%, the dock area will honor this percentage after a resizeBar operation completes.

When you are using the top or bottom reiszeBarPlacement and set the dock area's width to 100%, the dock area will honor this percentage after a resizeBar operation completes.

This resetting type behavior is due to the resizing operation sets an explicit width or height. After the resizeBar operation has completed, the container needs to have it's percentages reset due to setting width or height sets the dock area's percentWidth and percentHeight to NaN.

The resizeBar

The resizeBar plays the role of resizing the dock area with the mouse. The resizeBar also opens and closes the container with transitions using it's toggle button.

The properties relevant to the resizeBar;

• isOpen
• resizeBarPlacement
• resizeBarRenderer
• showResizeBar

The styles relevant to the resizeBar;

• horizontalResizeBarStyleNames
• verticalResizeBarStyleName
• resizBarStyleName
• insetResizeBar
• resizeBarGap
• resizeBarThickness
• openDuration
• openEasingFunction
• closeDuration
• closeEasingFunction