Dock Spawn

Dock Spawn is a web based dock layout engine that aids in creating flexible user interfaces by enabling panels to be docked on the screen similar to Visual Studio IDE

View Demo View on GitHub Download

#image_gallery_ide_caption Tabbed interface

Docking

Create complex layout through code or during runtime by docking panels on the screen.

Floating Dialogs

Create floating dialog boxes by undocking a panel. Floating dialog boxes could be dragged/resized

Tabbed Panels

Dock panels within other existing panels to place them in a tab control. Tabs can be undocked back into floating dialogs



Demos


 

Integrated Development Environment

The sample demonstrates an IDE user interface. An example of subclassing a panel to add custom behaviour to the editor control is also shown

Launch


Integration


Dock Spawn is written in Dart. Start by importing the dock-spawn library into your project

#import('../dock_spawn/dock_spawn.dart');

Create a dock manager DIV element in the html page. This div would be converted to a dock manager, which would enable panels to be docked on to it. There is no restriction on the size of this div. It could take up the entire screen or have a fixed size

dockManager = new DockManager(query("#my_dock_manager"));
dockManager.initialize();

Existing elements in the DOM can be converted to Dock Panels which would enable them to be docked on to the dock manager created above. A dock panel wraps the provided content element around a frame with a title bar and a close button.

var solution = new PanelContainer(query("#solution_window"), dockManager);
var output = new PanelContainer(query("#output_window"), dockManager);
// ...

Now that the panels are created, dock them on the dock manager. Initially, the dock manager contains a docked view, called the Document Manager which is the central area of the dock manager. Get a reference to the document manager node

DockNode documentNode = dockManager.context.model.documentManagerNode;

Using this as a point of reference, lets dock the Solution Explorer to the left, taking up 20% of the space

DockNode solutionNode = dockManager.dockLeft(documentNode, solution, 0.20);

Dock the outline node inside the Solution Explorer (fill mode) to create a tabbed interface with these two panels

DockNode outlineNode = dockManager.dockFill(solutionNode, outline);

Notice the first argument in dockFill method is solutionNode, indicating that this is relative to the Solution Explorer. This way, a dock hierarchy of arbitrary complexity can be created.

DockNode editor1Node = dockManager.dockFill(documentNode, editor1);
Its a good idea to dock dominant panels (e.g. the Editor panel in an IDE) in the Document Node with fill mode so that the documents are displayed as tabs in the document manager

During runtime, dock panels can be undocked from their positions into floating dialog boxes, which can be dragged/resized and docked in another location

// Convert a div to a dock manager.  Panels can then be docked on to it
dockManager = new DockManager(query("#my_dock_manager"));
dockManager.initialize();

// Let the dock manager element fill in the entire screen
window.on.resize.add(onResized);
onResized(null);

// Convert existing elements on the page into "Panels". 
// They can then be docked on to the dock manager 
// Panels get a titlebar and a close button, and can also be 
// converted to a floating dialog box which can be dragged / resized 
var solution = new PanelContainer(query("#solution_window"), dockManager);
var output = new PanelContainer(query("#output_window"), dockManager);
var properties = new PanelContainer(query("#properties_window"), dockManager);
var toolbox = new PanelContainer(query("#toolbox_window"), dockManager);
var outline = new PanelContainer(query("#outline_window"), dockManager);
var problems = new PanelContainer(query("#problems_window"), dockManager);
var editor1 = new PanelContainer(query("#editor1_window"), dockManager);
var editor2 = new PanelContainer(query("#editor2_window"), dockManager);

// Dock the panels on the dock manager
DockNode documentNode = dockManager.context.model.documentManagerNode;
DockNode solutionNode = dockManager.dockLeft(documentNode, solution, 0.20);
DockNode outlineNode = dockManager.dockFill(solutionNode, outline);
DockNode propertiesNode = dockManager.dockDown(outlineNode, properties, 0.6);
DockNode outputNode = dockManager.dockDown(documentNode, output, 0.4);
DockNode problemsNode = dockManager.dockRight(outputNode, problems, 0.40);
DockNode toolboxNode = dockManager.dockRight(documentNode, toolbox, 0.20);

DockNode editor1Node = dockManager.dockFill(documentNode, editor1);
DockNode editor2Node = dockManager.dockFill(documentNode, editor2);


License


Dock Spawn is an open source software released under the MIT License. Refer MIT-License.txt for more details