6.6. Panel

// Create a panel with a caption.
final Panel panel = new Panel("Contact Information");
panel.addStyleName("panelexample");

// The width of a Panel is 100% by default, make it
// shrink to fit the contents.
panel.setWidth(Sizeable.SIZE_UNDEFINED, 0);

// Create a layout inside the panel, and have some margin around it.
final FormLayout form = new FormLayout();
form.setMargin(true);

// Add some components
form.addComponent(new TextField("Name"));
form.addComponent(new TextField("Email"));

// Set the layout as the root layout of the panel
panel.setLayout(form);

CSS Style Rules

.i-panel {}
.i-panel-caption {}
.i-panel-nocaption {}
.i-panel-content {}
.i-panel-deco {}

The entire panel has i-panel style. A panel consists of three parts: the caption, content, and bottom decorations (shadow). These can be styled with i-panel-caption, i-panel-content, and i-panel-deco, respectively. If the panel has no caption, the caption element will have the style i-panel-nocaption.

The light style for the Panel is a predefined style that has now borders or border decorations for the panel. You enable it simply by adding the light style name for the panel, as is done in the example below.

The light style is typical when using a Panel as the root layout of a window or some similar layout, as in the example below.

// Have a window with a SplitPanel.
final Window window = new Window("Window with a Light Panel");
window.setWidth("400px");
window.setHeight("200px");
final SplitPanel splitter = new SplitPanel(SplitPanel.ORIENTATION_HORIZONTAL);
window.setLayout(splitter);

// Create a panel with a caption.
final Panel light = new Panel("Light Panel");
light.setSizeFull();

// The "light" style is a predefined style without borders.
light.addStyleName("light");

light.addComponent(new Label("The light Panel has no borders."));
light.getLayout().setMargin(true);

// The Panel will act as a "caption" of the left panel in SplitPanel.
splitter.addComponent(light);
splitter.setSplitPosition(250, Sizeable.UNITS_PIXELS);

main.addWindow(window);