Hi,

Back from the lab and we have a great component release, the DockAreaFX.

Product Page

Update, New Product

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

The DockAreaFX is a very powerful, extendable and simple to use drag and drop container set. The set consists of the DockAreaFX that serves as the drop container and the DockPaneFX that acts as the drag initiator container. Along with these two components, the TitleBarFX and DockTaskListFX are also included to serve as a jump start for more complicated drag and drop set ups.

We have added the ResizeDockAreaFX component that uses a Fire Works 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.

Information sources

• Online Help Book
• ASDoc Documentation
• Technical Forum
• Ask Before You Buy
• SWF Examples

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 entry was posted on Tuesday, November 6th, 2007 at 12:57 pm and is filed under flex2, components, releases. You can follow any responses to this entry through the RSS 2.0 feed. You can leave a response, or trackback from your own site.