DockAreaFX 1.x :: In depth

The DockAreaFX set is a new product that is well worth a look.

We have added the ResizeDockAreaFX component that uses a Fireworks style open and close resize bar. This bar can close and open the dockarea with a click of it's toggle button or drag and resize the dock area! The bar placement can be set from top, left, right and bottom. This means the dock area can open and close from all 4 layout positions. The bar is also fully stylable with open and close transition styles.

Main Features

DockAreaFX

This image is taken from the ThemedDockTaskList.mxml included in the product's example project and is also covered in the Help Books section of the web site.

Important Notes:

• The example uses a custom theme to create an OS look and feel. You could adjust this to any style and skin combination thinkable.
• The DockTaskListFX component is used as the content holder within the DockPaneFX drag initiator. (The DockTaskListFX is a subclass of the TaskListFX component).
• The task list component is specially designed to size it's parent when opening and closing (with or without a tween).
• The task list component also uses a custom title bar that allows for a drag handle, alternate minimize button position, title and a menu popup button located on the right hand side of the title bar.
• The DockPaneFX drag initiators can be placed in any container at startup or a DockAreaFX component.
• The DockPaneFX drag initiators can be dropped on the Application or into a DockAreaFX container. These two actions constitute a dock or float operation. The DockPaneFX's isDocked property is updated just before the operation completes and the component's default action has run.
• The DockAreaFX drop target containers can have layouts of absolute, vertical, horizontal and flow. Each of these layouts have specially placed drop indicators relative to it's children. The dock areas can also drag a bounding box around the full container (skinnable and stylable).
• The DockPaneFX is completely resizable when in it's float state(isDocked == false) and when the DockTaskListFX is used, resizes vertically. Also note that when a DockPaneFX is closed (isOpen == false), it's resize is limited to left and right.
• The Colors pane is being dropped into a vertical DockAreaFX component.

The image above now shows the DockPaneFX dropped into the DockAreaFX component at index 1. You can see that when a pane's isDocked property is set to false, the default action is to hide the border and title bar. The dock pane also takes care of taking it out of the popUp state and then adding itself into the drop target component.

This image is taken from the ApplicationExample.mxml included in the product's example project and is also covered in the Help Books section of the web site. This example shows you the different ways the DockPaneFX and DockAreaFX components can be implemented.

Important Notes:

• There are different types of containers;
  • The Panel Dock Area allows for any shape and size boxes or containers (DockPaneFX)to be dropped in and taken out.
  • The Horizontal Dock Area allows for horizontal flow positioning and will only allow hToolBar(dockData) to be dropped into it. You can specify any type of dockData you wish with each DockPaneFX component to use when the dockAreaInitialize event is broadcast from the DockAreaFX component. This all happens before the dock area accepts the dragEnter event.
  • The dock area located on the right side is a vertical dock area that only accepts vToolBar(dockData) to be dropped into it.
  • The TabNavigator holds dock areas that only accept panel(dockData) to be dropped into it. The left Panel Dock Area dock area tests this dockData as well.
  • The Toolbar Four has been dragged out of the Horizontal Dock Area and is in the float state(isDocked == false).
  • The Floating Panel One has been dragged out of the Panel Dock Area and is in the float state(isDocked == false).
  • At any time you can disable dragging, application dropping or dock area dropping.
  • You can also hide the drag handle once the pane has been dropped onto the Application(float).
  • At every stage in the drag and drop operation you are also given events that can be canceld.

The image above now shows the completed drop operation of the Floating Panel One. Notice that the title bar and border have been hidden.

Main Features

• Complete container drag and drop implementation.
• Events dispatched through the whole drag and drop operation to be modified or canceled.
• Custom drag initiation from the IDockAreaClient.doDrag() interface. This means that you can hide the default drag handle and initiate a drag operation on a DockPaneFX from anywhere in your application as long as it has a source MouseEvent.
• Completely skinnable and customizable styles and styleNames. The possibilities are to numerous to list here so please check out the Help Books or ASDoc documentation for API's, styles and events.
• Supported from a solid base framework that all teo components derive from. These DockAreaFX inherits the LayoutContainerFX and the DockPaneFX inherits the PaneFX, both classes have been around the block with the RotatingLisFX, TaksPaneFX etc.
• The ITitleBarControl interface just gets stronger with multiple layouts of buttons, skins, events and styles.
• Custom bounding box and drop proxy skins, colors and thicknesses for the DockAreaFX component.
• You worry about the high level application design and we worry about the low level component interface.

Conclusion

The DockAreaFX set capitalizes on Teoti Graphix, LLC's expanding teo component framework and reuses the powerful pane and bar classes along with the solid interfaces of these classes.

There is a multitude of possibilities waiting around the corner. If you have questions be sure to ask on the Ask Before You Buy forums and get prompt answers.

If this component interests you, you might also take a look at the TaskPaneFX SWC component set and RotatingListFX component. In the help books of the task pane or rotating list you can apply the same styling methodology to this component set.

Make sure to check out the live swf examples to get a clear picture of what this component can do.