Goozo 首页 » DockableFlex

DockableFlex
Intruction
DockableFlex
Download
Documents
Contact

Features
drag and drop tab buttons
drag and drop panels
multi-depth dock
float panels
close child
group
auto remove useless components

Samples
DockablePanel
FloatPanel
closable child
group
style

 

Demo


Intruction
DockableFlex

DockableFlex is an open source component library based on Adobe Flex 3.
It provides basic dock support for the Panel Component.

Download

The source code is available on Google Code
The swc library can also be found at the Download page.

Documents

Click here to view the Class Reference of DockableFlex.

Contact

If you have any question. Please post it in my Google Group:
http://groups.google.com/group/dockableflex



Features
drag and drop tab buttons

You can drag a tab button in a tabnavigator and drop it on another panel. The red rectangle shows the position and size of the panel that will be created.

You can also drop it into the tab bar of another tabnavigator, or drop it into its original tab bar to change the order of the tabs.


     

drag and drop panels

You can drag the title bar of a panel and drop it to another position.

You can also drop it into the tab bar of another tabnavigator, by doing this, you can put every tab-child in the panel to another tabnavigator.


     

multi-depth dock

The drop accepter will search its parent (or parent of parent, etc..) to find a suitable place to put the panel. The closer the drop point is to the border, the deeper it will search.








float panels

Drop the tab button or the panel at some empty place will convert it to a float panel.

A float panel can be moved by dragging its title bar, or resized by dragging its bottom right corner.
Dragging the title bar of a float panel won't provide any dockable function. But dragging the tab button in the float panel still works.


     

close child

If the selected child of the tabnavigator is closable, the close button will appear. And you can use this button to close the child.




group

Each tabnavigator has an ID. If two tabnavigator have different ID, their children can not be drag and drop into each other.
The default ID is "".




auto remove useless components

If a tabnavigator has no child, it will remove itself. Thus, its parent panel will also be removed.

And if there is only one child after removing a child in a DockableDividedBox, The DockableDividedBox itself will be removed, and its child will be add to its parent.



Samples
DockablePanel

Just try dragging and dropping these panels and tab buttons

See the sample
View the source code
Download the sample and the source code

tips: The application should contain at least one DockablePanel which is neither closable nor floatable.

FloatPanel

If you want to have a float panel at startup, you can put it in the mxml. It's better not to put it inside a DockableDividedBox, instead, let it be a sibling of the toplevel DockableDividedBox.

See the sample
View the source code
Download the sample and the source code

closable child

In this sample, you can close the children by click the close button of the panel

See the sample
View the source code
Download the sample and the source code

group

In this sample, children in group A and group B can not be merged together

See the sample
View the source code
Download the sample and the source code

style

You can change the skin of the panels, tabnavigators and the hint rectangle.

See the sample
View the source code
Download the sample and the source code

note: the osx theme file is downloaded from scale nine


Powered by © 2007-2010, Rinick