Panel

Live Demo

Panel is a single-component container with a frame around the content. It has an optional caption and an icon which are handled by the panel itself, not its containing layout. The panel itself does not manage the caption of its contained component. You need to set the content with setContent().

Panel has 100% width and undefined height by default. This corresponds with the default sizing of VerticalLayout, which is perhaps most commonly used as the content of a Panel. If the width or height of a panel is undefined, the content must have a corresponding undefined or fixed size in the same direction to avoid a sizing paradox.

Java

  1. Panel panel = new Panel("Astronomer Panel");
  2. panel.addStyleName("mypanelexample");
  3. panel.setSizeUndefined(); // Shrink to fit content
  4. layout.addComponent(panel);
  6. // Create the content
  7. FormLayout content = new FormLayout();
  8. content.addStyleName("mypanelcontent");
  9. content.addComponent(new TextField("Participant"));
  10. content.addComponent(new TextField("Organization"));
  11. content.setSizeUndefined(); // Shrink to fit
  12. content.setMargin(true);
  13. panel.setContent(content);

The resulting layout is shown in A Panel.

panel

A Panel

Scrolling the Panel Content

Normally, if a panel has undefined size in a direction, as it has by default vertically, it will fit the size of the content and grow as the content grows. However, if it has a fixed or percentual size and its content becomes too big to fit in the content area, a scroll bar will appear for the particular direction. Scroll bars in a Panel are handled natively by the browser with the overflow: auto property in CSS.

In the following example, we have a 300 pixels wide and very high Image component as the panel content.

Java

  1. // Display an image stored in theme
  2. Image image = new Image(null,
  3.     new ThemeResource("img/Ripley_Scroll-300px.jpg"));
  5. // To enable scrollbars, the size of the panel content
  6. // must not be relative to the panel size
  7. image.setSizeUndefined(); // Actually the default
  9. // The panel will give it scrollbars.
  10. Panel panel = new Panel("Scroll");
  11. panel.setWidth("300px");
  12. panel.setHeight("300px");
  13. panel.setContent(image);
  15. layout.addComponent(panel);

The result is shown in Panel with Scroll Bars. Notice that also the horizontal scrollbar has appeared even though the panel has the same width as the content (300 pixels) - the 300px width for the panel includes the panel border and vertical scrollbar.

panel scrolling

Panel with Scroll Bars

Programmatic Scrolling

Panel implements the Scrollable interface to allow programmatic scrolling. You can set the scroll position in pixels with setScrollTop() and setScrollLeft(). You can also get the scroll position set previously, but scrolling the panel in the browser does not update the scroll position to the server-side.

CSS Style Rules

CSS

  1. .v-panel {}
  2. .v-panel-caption {}
  3. .v-panel-nocaption {}
  4. .v-panel-content {}
  5. .v-panel-deco {}

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

The built-in borderless style in the Valo theme has no borders or border decorations for the Panel. You can use the ValoTheme.PANEL_BORDERLESS constant to add the style to a panel.