Versions Compared

Old Version 8

changes.mady.by.user Antti Kallio

Saved on

compared with

New Version Current

changes.mady.by.user Antti Kallio

Saved on

Key

  • This line was added.
  • This line was removed.
  • Formatting was changed.
Note

This article is about an upcoming feature. It is available from server version 3.11 on.

Web Themes are a way to customise the layout and styling of end-user visible web pages hosted on the Service. These include pages such as:

...

Web themes replaces the “Branding Styles” (Platform - Branding: Styles) by providing similar functionality. “Branding styles” allows injection of CSS rules into the page. Web themes allows this as well. Using both at the same time is not recommended. Most existing “Branding Styles” rules can be used as-is in a web theme.

...

Examples of some common elements:

Element

Java component

Description

<vaadin-vertical-layout>
</vaadin-vertical-layout>

VerticalLayout

Contains other components, displays them on top of each other.

<vaadin-horizontal-layout>
</vaadin-horizontal-layout>

HorizontalLayout

Contains other components, displays them on one row.

<vaadin-css-layout>
</vaadin-css-layout>

CssLayout

Simple layout which converts to a <DIV> element in final HTML. This allows more configuration is CSS rules.

<vaadin-text-field />

TextField

Single-line text field

<vaadin-text-area />

TextArea

Multiline text field

<vaadin-check-box />

CheckBox

Checkbox field

<vaadin-button />

Button

A push button

<vaadin-label />

Label

A text label.

<vaadin-link />

Link

Clickable link

<vaadin-image />

Image

Image display

Built-in Vaadin components are named as described in Vaadin 8 documentation. Custom components will have custom prefixes.

...

Examples of common attributes used in layouts:

Attribute

Value

Description

_id

Component field name.

Must match the name of the component field in the associated Java class.

id

Unique name within page.

Translates into “id” attribute in final HTML

style-name

One or more CSS style names separated with space.

Translates into “class” attribute in final HTML.

width and height

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

width-full and height-full

No value

Same as width=”100%” or height=”100%”

margin

“true” or “false”

Enables or disables built-in margin in VerticalLayout or HorizontalLayout.

spacing

“true” or “false”

Enables or disables built-in spacing between sub-components in VerticalLayout or HorizontalLayout.

:top, :middle, :bottom, :left, :center, :right

No value

Sets the alignment of a component in it’s parent layout.

responsive

No value

Enables the responsiveness in components

plain-text

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.