6.7. 

The SplitPanel is a container that divides up available space for two components and optionally allows changing the relative sizes each of the components. It can be oriented to divide the available space horizontally or vertically.

A simple layout with two nested splitpanels (one of which has a locked split position) can be created as follows:

// a top level panel for borders
Panel panel = new Panel("Nested SplitPanels");
panel.setSizeUndefined();

// First a vertical SplitPanel as the main component
SplitPanel vert = new SplitPanel();
vert.setHeight("150px");
vert.setWidth("250px");
// vert.setOrientation(SplitPanel.ORIENTATION_VERTICAL); // default
vert.setSplitPosition(50, SplitPanel.UNITS_PIXELS);

// add a label to the upper area
vert.addComponent(new Label("The contents of the upper area."));

panel.addComponent(vert);

// Add a horizontal SplitPanel to the lower area
SplitPanel horiz = new SplitPanel();
horiz.setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);
horiz.setSplitPosition(65); // percent
// the lower split panel is locked
// i.e. the user cannot move the split location
horiz.setLocked(true);
vert.addComponent(horiz);

// left component:
horiz.addComponent(new Label("Lower left area. The text on the left wraps around as needed."));

// right component:
horiz.addComponent(new Label("Lower right area. The text on the right also wraps around."));

Figure 6.7. A Layout With Nested SplitPanels

.i-splitpanel-horizontal {}
.i-splitpanel-hsplitter {}
.i-splitpanel-hsplitter-locked {}

.i-splitpanel-vertical {}
.i-splitpanel-vsplitter {}
.i-splitpanel-vsplitter-locked {}

.i-splitpanel-first-container {}
.i-splitpanel-second-container {}