HorizontalSplitPanel and VerticalSplitPanel

Live Demo

HorizontalSplitPanel and VerticalSplitPanel are a two-component containers that divide the available space into two areas to accomodate the two components. HorizontalSplitPanel makes the split horizontally with a vertical splitter bar, and VerticalSplitPanel vertically with a horizontal splitter bar. The user can drag the bar to adjust its position.

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

Java

  1. // Have a panel to put stuff in
  2. Panel panel = new Panel("Split Panels Inside This Panel");
  4. // Have a horizontal split panel as its content
  5. HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
  6. panel.setContent(hsplit);
  8. // Put a component in the left panel
  9. Tree tree = new Tree("Menu", TreeExample.createTreeContent());
  10. hsplit.setFirstComponent(tree);
  12. // Put a vertical split panel in the right panel
  13. VerticalSplitPanel vsplit = new VerticalSplitPanel();
  14. hsplit.setSecondComponent(vsplit);
  16. // Put other components in the right panel
  17. vsplit.addComponent(new Label("Here's the upper panel"));
  18. vsplit.addComponent(new Label("Here's the lower panel"));

See the on-line example.

The result is shown in HorizontalSplitPanel and VerticalSplitPanel. Observe that the tree is cut horizontally as it can not fit in the layout. If its height exceeds the height of the panel, a vertical scroll bar will appear automatically. If horizontal scroll bar is necessary, you could put the content in a Panel, which can have scroll bars in both directions.

splitpanel example1

HorizontalSplitPanel and VerticalSplitPanel

You can set the split position with setSplitPosition(). It accepts any units defined in the Sizeable interface, with percentual size relative to the size of the component.

Java

  1. // Have a horizontal split panel
  2. HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
  3. hsplit.setFirstComponent(new Label("75% wide panel"));
  4. hsplit.setSecondComponent(new Label("25% wide panel"));
  6. // Set the position of the splitter as percentage
  7. hsplit.setSplitPosition(75, Sizeable.UNITS_PERCENTAGE);

See the on-line example.

Another version of the setSplitPosition() method allows leaving out the unit, using the same unit as previously. The method also has versions take take a boolean parameter, reverse, which allows defining the size of the right or bottom panel instead of the left or top panel.

The split bar allows the user to adjust the split position by dragging the bar with mouse. To lock the split bar, use setLocked(true). When locked, the move handle in the middle of the bar is disabled.

Java

  1. // Lock the splitter
  2. hsplit.setLocked(true);

See the on-line example.

Setting the split position programmatically and locking the split bar is illustrated in A Layout With Nested SplitPanels.

splitpanel splitposition

A Layout With Nested SplitPanels

Notice that the size of a split panel must not be undefined in the split direction.

CSS Style Rules

CSS

  1. /* For a horizontal SplitPanel. */
  2. .v-splitpanel-horizontal {}
  3. .v-splitpanel-hsplitter {}
  4. .v-splitpanel-hsplitter-locked {}
  6. /* For a vertical SplitPanel. */
  7. .v-splitpanel-vertical {}
  8. .v-splitpanel-vsplitter {}
  9. .v-splitpanel-vsplitter-locked {}
  11. /* The two container panels. */
  12. .v-splitpanel-first-container {}  /* Top or left panel. */
  13. .v-splitpanel-second-container {} /* Bottom or right panel. */

The entire split panel has the style v-splitpanel-horizontal or v-splitpanel-vertical, depending on the panel direction. The split bar or splitter between the two content panels has either the …-splitter or …-splitter-locked style, depending on whether its position is locked or not.