Vaadin

You can set the two components with the dedicated setFirstComponent() and setSecondComponent() methods, or with the regular addComponent() method.

SplitPanel splitpanel = new SplitPanel();
// Set the orientation.
splitpanel.setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);
// Put two components in the container.
splitpanel.setFirstComponent(new Label("Left Panel"));
splitpanel.setSecondComponent(new Label("Right Panel"));

A split bar that divides the two panels is enabled by default. The user can drag the bar with mouse to change the split position. To disable the bar, lock the split position with setLocked(true).

The following example shows how you can create a layout with two nested SplitPanel components (one of which has a locked split position):

// A top-level panel to put everything in.
Panel panel = new Panel("Nested SplitPanels");
// Allow it to shrink to the size of the contained SplitPanel.
panel.setSizeUndefined();
// Have a vertical SplitPanel as the main component.
SplitPanel vertical = new SplitPanel();
panel.addComponent(vertical);
// Set the size of the SplitPanel rather than the containing Panel,
// because then we know how much space we have for the panels.
vertical.setHeight("150px");
vertical.setWidth("250px");
// Set the split position to 50 pixels, which is more than
// enough height for the Label in the upper panel.
vertical.setSplitPosition(50, SplitPanel.UNITS_PIXELS);
// Put a label in the upper panel.
vertical.addComponent(new Label("The contents of the upper area."));
// Put a horizontal SplitPanel in the lower area.
SplitPanel horizontal = new SplitPanel();
horizontal.setOrientation(SplitPanel.ORIENTATION_HORIZONTAL);
horizontal.setSplitPosition(65); // percent
vertical.addComponent(horizontal);
// The lower SplitPanel is locked, so the user cannot move
// the split position.
horizontal.setLocked(true);
// Component in the left panel:
horizontal.addComponent(new Label("Lower left area. "+
              "The text on the left wraps around as needed."));
// Component in the right panel:
horizontal.addComponent(new Label("Lower right area. "+
              "The text on the right also wraps around."));