Managing Layout

/* Overall style of field rows. */

.v-formlayout-row {}

.v-formlayout-firstrow {}

.v-formlayout-lastrow {}

/* Required field indicator. */

.v-formlayout .v-required-field-indicator {}

.v-formlayout-captioncell .v-caption

.v-required-field-indicator {}

/* Error indicator. */

.v-formlayout-cell .v-errorindicator {}

.v-formlayout-error-indicator .v-errorindicator {}

The top-level element of FormLayout has the v-formlayout style. The layout is tabular with three columns: the caption column, the error indicator column, and the field column. These can be styled with v-formlayout-captioncell, v-formlayout-errorcell, and v-formlayout-contentcell, respectively. While the error indicator is shown as a dedicated column, the indicator for required fields is currently shown as a part of the caption column.

For information on setting margins and spacing, see also Section 6.13.3, “Layout Cell Spacing” and Section 6.13.4, “Layout Margins”.

6.6. Panel

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.

Panel panel = new Panel("Astronomy Panel"); panel.addStyleName("mypanelexample"); panel.setSizeUndefined(); // Shrink to fit content layout.addComponent(panel);

// Create the content

FormLayout content = new FormLayout(); content.addStyleName("mypanelcontent"); content.addComponent(new TextField("Participant")); content.addComponent(new TextField("Organization")); content.setSizeUndefined(); // Shrink to fit content.setMargin(true);

panel.setContent(content);

The resulting layout is shown in Figure 6.7, “A Panel”.

184

Panel

Managing Layout

Figure 6.7. A Panel

6.6.1. 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.

//Display an image stored in theme Image image = new Image(null,

new ThemeResource("img/Ripley_Scroll-300px.jpg"));

//To enable scrollbars, the size of the panel content

//must not be relative to the panel size image.setSizeUndefined(); // Actually the default

//The panel will give it scrollbars.

Panel panel = new Panel("Scroll"); panel.setWidth("300px"); panel.setHeight("300px"); panel.setContent(image);

layout.addComponent(panel);

The result is shown in Figure 6.8, “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.

Scrolling the Panel Content

185