6.5. FormLayout
FormLayout container is the default content
layout of a Form. It lays out components (form
fields) and their captions in two columns, with optional indicators
for required fields and for errors that can be shown for each field.
A Form handles additional layout elements
itself, including a caption, a form description, a form error indicator,
a footer that is often used for buttons and a border. For more
information on these, see Section 5.17, “Form”.
The field captions can have an icon in addition to the text.
// A FormLayout used outside the context of a Form
FormLayout fl = new FormLayout();
// make the FormLayout shrink to its contents
fl.setSizeUndefined();
TextField tf = new TextField("A Field");
fl.addComponent(tf);
TextField tf2 = new TextField("Another Field");
fl.addComponent(tf2);
// mark the first field as required
tf.setRequired(true);
// set an error message for the second field
tf2.setComponentError(new UserError("This is the error indicator of a Field."));
The resulting layout will look as follows.
CSS Style Rules
.i-formlayout {}
.i-formlayout .i-caption {}
.i-formlayout-contentcell {}
.i-formlayout-captioncell {}
.i-formlayout-errorcell {}
.i-formlayout-row {}
.i-formlayout-firstrow {}
.i-formlayout-lastrow {}
.i-formlayout .i-required-field-indicator {}
.i-formlayout-captioncell .i-caption .i-required-field-indicator {}
.i-formlayout-cell .i-errorindicator {}
.i-formlayout-error-indicator .i-errorindicator {}
/* See the general layout margin and spacing rules for more on these */
.i-formlayout-spacing .i-formlayout-row .i-formlayout-captioncell {}
.i-formlayout-margin-top .i-formlayout-firstrow .i-formlayout-captioncell {}
.i-formlayout-margin-bottom .i-formlayout-lastrow .i-formlayout-captioncell {}
The entire FormLayout has i-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 i-formlayout-captioncell,
i-formlayout-errorcell, and
i-formlayout-contentcell, respectively.
While the error indicator is shown as a separate column, the indicator for
required fields is currently shown as a part of the caption column.
For more information on setting margins and spacing, see also Section 6.10.3, “Layout Cell Spacing” and Section 6.10.4, “Layout Margins”.