Widgets

Splitter Widget

The splitter widget separates two elements by a moveable bar, either vertically or horizontally. It is the same one used by docker to organize the layout of all docked panels.

To use it, you will need an element that will contain it. This element should be added to your layout and will mark the size and location of the splitter area.
Note: Some limitations exist with iFrames. Even if the container element is partially hidden beyond the bounds of the panel layout, the iFrame itself will not be occluded.
Troubleshooting: If the widget does not appear correctly, double check and make sure your container element has been positioned and sized properly according to your browser.

var $container = $('<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;"></div>');
myPanel.layout().addItem($container);

var splitter = new wcSplitter($container, myPanel, wcDocker.ORIENTATION.HORIZONTAL);
splitter.initLayouts();

Once you have created your splitter widget, you'll want to fill each side with content.

// Horizontal splitters have a pane on the left and right.
var leftLayout = splitter.left();
var rightLayout = splitter.right();

// Vertical splitters have a pane on the top and bottom.
var topLayout = splitter.top();
var rightLayout = splitter.bottom();

Once you have the layout of the pane you want, you can add items to it like you would any panel.

leftLayout.addItem(domNode);

The orientation of a splitter can also be changed at any time by using the wcSplitter.orientation() function.


Tab Widget

The tab frame widget allows you to separate multiple 'pages' of content into tabbed items, much like how panels become stacked.

To use it, you will need an element that will contain it. This element should be added to your layout and will mark the size and location of the tabbed area.
Troubleshooting: If the widget does not appear correctly, double check and make sure your container element has been positioned and sized properly according to your browser.

var $container = $('<div style="width:100%;height:100%;"></div>');
myPanel.layout().addItem($container);

var tabFrame = new wcTabFrame($container, myPanel);

Of course, you'll want to add tabs to your tabbed frame and fill them with content...

var tabLayout = tabFrame.addTab('First Tab');
tabLayout.addItem(domNode);

iFrame Widget

The iFrame widget makes it easier to include an iFrame element into your panel. Because an iFrame's contents is cleared whenever it is moved in the DOM heirarchy (and changing a panels docking position causes DOM movement), special care must be taken when using them.

To use it, you will need an element that will contain it. This element should be added to your layout and will mark the size and location of the iFrame area.
Note: Some limitations exist with iFrames. Even if the container element is partially hidden beyond the bounds of the panel layout, the iFrame itself will not be occluded.
Troubleshooting: If the widget does not appear correctly, double check and make sure your container element has been positioned and sized properly according to your browser.

var $container = $('<div style="position:absolute;top:0px;left:0px;right:0px;bottom:0px;"></div>');
myPanel.layout().addItem($container);

var iFrame = new wcIFrame($container, myPanel);

And fill its contents...

iFrame.openURL('http://www.example.com');
// Or...
iFrame.openHTML('<span>Hello World!</span>');

Or for some even more control, you can access the window object within the frame directly.

var frameWindow = iFrame.window();

Go back to the Tips and Tricks tutorial.