Getting Started

wcDocker (Web Cabin Docker) is a page layout framework that allows users to organize an array-able list of panel types in almost any configuration. Panels can be docked beside other panels, floating on their own, resized, moved, duplicated, and removed at will by the user. It is a powerful library for use as an IDE or a visual data management interface.


Begin by including the necessary dependencies.


You can use bower for easy installation using the Node Package Manager

{@lang bash}npm install -g bower
bower install wcDocker

Once installed, all of the source files will now be located in the bower_components folder and ready to link into your project.

You can also download the source and link them directly.

Basic Implementation

{@lang xml}<link rel='stylesheet' type='text/css' href='bower_components/jQuery-contextMenu/src/jquery.contextMenu.css'/>
<link rel='stylesheet' type='text/css' href='bower_components/font-awesome/css/font-awesome.css'/>

<script src='bower_components/jquery/dist/jquery.min.js'></script>
<script src='bower_components/jQuery-contextMenu/src/jquery.contextMenu.js'></script>
<script src='bower_components/jQuery-contextMenu/src/jquery.ui.position.js'></script>

Also include the wcDocker library files as well...

{@lang xml}<link rel="stylesheet" type="text/css" href="bower_components/wcDocker/Build/wcDocker.min.css"/>

<script src="bower_components/wcDocker/Build/wcDocker.min.js"></script>

Once the dependencies have been included, start by creating an instance of the main docker and assign it a DOM container (this should be done after the document has finished loading). Typically this would be the document body element, but there is no restriction if you want to use a smaller area instead. Multiple dockers can be used, however, that feature is not currently supported and may not work properly.

$(document).ready(function() {
  var myDocker = new wcDocker(document.body, {
    themePath: 'My/themes/folder'

Notice the themePath, if your theme CSS files are not in the default 'Themes' folder, you will need to tell docker about the new path or it will not be able to initialize the default theme.

Once the docker instance is made, you will need to register the panel types that will become the contents of your layout. A panel is an individual dockable window, generally designed to serve a single purpose.

myDocker.registerPanelType('Some type name', {
  onCreate: function(myPanel, options) {...},
  options: {'some optional object': 'that will be passed to the create function above'}

Once a panel is registered, any time an instance of it is created, the onCreate handler will be invoked allowing you to initialize the contents of your panel.

To do this, you will need to use the layout object found inside the panel.

myPanel.layout().addItem(domNode, x, y, width, height);

Additionally, you can assign various starting properties of the panel here, such as the desired size, or size constraints...

myPanel.initSize(200, 200);
myPanel.minSize(100, 100);

Once you have registered the panels that you want, if they are not private, the user will be able to create them whenever they wish. However, it is recommended that you initialize docker with a default arrangement of panels, to make it easier for the users to get started.

// Put Panel1 into the docking layout, since it is the first panel,
// it will always fill the entire area regardless of what docking
// position you request.
var panel1 = myDocker.addPanel('Panel1', wcDocker.DOCK.LEFT);

// Once we added a panel, we can use it as a target for another panel.
myDocker.addPanel('Panel2', wcDocker.DOCK.BOTTOM, panel1);

// The panel itself may have an initial size, but you may want more
// control over that.
myDocker.addPanel('Panel3', wcDocker.DOCK.RIGHT, null, {w:200, h:200});

See wcDocker.DOCK for a list of all available docking positions.

Continue to the Tips and Tricks tutorial.