...
Some built-in customer specific CSS rules are no longer available. They must be implemented as Web Themes to keep the existing style.
Web theme
...
contents
A web theme can contain several alternative layouts for various pages, a default style, and several additional alternative styles. Web themes are given a name. Changing the name of an existing web theme does not affect selections.
Layouts
Some layouts contain components whose content will be other layouts. For example, the login view has a “base” layout which contains a dynamically changing internal section which may contain the “enter username and password” layout or other layouts.
...
The layouts are defined as HTML documents. The content must be compatible with Vaadin 8 Designer. Additional documentation is found at the Vaadin 8 documentation site.
They layout document is structured as a description of Vaadin components. The selection of layout components is open for selection, except for the root component which must remain the same as in built-in default layouts. This is usually a <vaadin-vertical-layout>.
The layout document can include <html>, <head>, <body> elements or those can be skipped. They should not be needed unless mapping of custom components is needed. This is done in the <head> section.
The layout must include all the components the related Java class expects. If any are missing, the layout cannot be used correctly. In this situation the built-in layout is loaded instead, but the web page may appear or be functionally broken until this situation is corrected. The mapping between a layout component description and the Java class is done with the “_id” attributes. The name of these attributes must match (case sensitive).
Component types must match Java class component types. In some cases the Java class may support multiple alternative component types, but it is safest to copy what is in the default layout.
Elements
Examples of some common elements:
Element | Java component | Description |
|---|---|---|
| VerticalLayout | Contains other components, displays them on top of each other. |
| HorizontalLayout | Contains other components, displays them on one row. |
| CssLayout | Simple layout which converts to a <DIV> element in final HTML. This allows more configuration is CSS rules. |
| TextField | Single-line text field |
| TextArea | Multiline text field |
| CheckBox | Checkbox field |
| Button | A push button |
| Label | A text label. |
| Link | Clickable link |
| Image | Image display |
Built-in Vaadin components are named as described in Vaadin 8 documentation. Custom components will have custom prefixes.
Attributes
Examples of common attributes used in layouts:
Attribute | Value | Description |
|---|---|---|
| Component field name. | Must match the name of the component field in the associated Java class. |
| Unique name within page. | Translates into “id” attribute in final HTML |
| One or more CSS style names separated with space. | Translates into “class” attribute in final HTML. |
| “100%” or “100px” or other supported width/height value | Sets the width or height in the Java component. Translates to inline CSS in final HTML. |
| No value | Same as |
| “true” or “false” | Enables or disables built-in margin in VerticalLayout or HorizontalLayout. |
| “true” or “false” | Enables or disables built-in spacing between sub-components in VerticalLayout or HorizontalLayout. |
| No value | Sets the alignment of a component in it’s parent layout. |
| No value | Enables the responsiveness in components |
| No value | Displayed text is escaped instead of being interpreted as HTML. Used in Buttons, Labels. |
Stylesheet structure
Stylesheets are normal CSS documents. They are injected into the <head> section of the web page.