Vaadin Designer 1.2 - responsive templates user guide

Vaadin Designer 1.2 comes with four new design templates for creating responsive web applications. This short tutorial covers each template and describes why and how to use them.

For the templates to function properly, your project needs to have a theme folder. The theme needs to extend the Valo theme. If you don't have a theme folder, the templates don't look right and the responsive features don't work, either. Customizing the theme used in the templates is easy, because it's based on the Valo theme variables. Colors are calculated from $v-background-color. Paddings and margins are calculated from $v-font-size. In addition to the Valo variables, the new templates have a few custom style names and conventions you should use to achieve the desired result. I'll cover style names and conventions for each template separately.

Application Menu template

Application Menu is meant to be used for the main layout of your application. It consists of a menu layout and a content area layout. The menu layout is called menu and you can add menu buttons in design time or add them dynamically in Java code. The buttons have borderless style from the Valo theme. The content area is made of three nested layouts. You can add your own content in the layout named content.

Important style names and hierarchy in Application Menu

Style Name

Component Type

Details

content

CssLayout

Outer layout for the application view content area.

 

CssLayout

Direct child of content layout. In place for having padding present.

content-section

CssLayout

Inner layout for the application view content area.

padding-left

CssLayout

Adds left padding to content-section layout and/or content-section's wrapper layout : "content-section padding-left".

padding-top

CssLayout

Adds top padding to content-section layout and/or content-section's wrapper layout : "content-section padding-top".

padding-right

CssLayout

Adds right padding to content-section layout and/or content-section's wrapper layout : "content-section padding-right".

padding-bottom

CssLayout

Adds bottom padding to content-section layout and/or content-section's wrapper layout : "content-section padding-bottom".

padding

CssLayout

Adds horizontal and vertical padding to content-section layout and/or content-section's wrapper layout : "content-section padding".

 

Tile Layout template

Tile Layout is a template for creating dashboard style views or any other views where you need flowing column based layouting. For each row and column, you need to have specific layout hierarchy and style names, described in the table below.

Important style names and hierarchy in Tile Layout

Style Name

Component Type

Details

row

CssLayout

Outer layout for each row. Can be left out only if the row is full size (style full).

tile

CssLayout

Layout for each column in a row, even if there is only one full size column.

full

CssLayout

Layout for a full size row. The only tile column that doesn't need to be wrapped with row layout. Combined with tile style: "tile full".

one-quarter

CssLayout

Tile taking 1/4 of width of a row. Combined with tile style: "tile one-quarter".

one-third

CssLayout

Tile taking 1/3 of width of a row. Combined with tile style: "tile one-third".

half

CssLayout

Tile taking 1/2 of width of a row. Combined with tile style: "tile half".

two-thirds

CssLayout

Tile taking 2/3 of width of a row. Combined with tile style: "tile two-thirds".

tile-content

CssLayout

Layout wrapping the content of a tile. Direct child of the tile layout. Can be combined with padding style.

padding-left

CssLayout

Adds left padding to tile content layout: "tile-content padding-left".

padding-top

CssLayout

Adds top padding to tile content layout: "tile-content padding-top".

padding-right

CssLayout

Adds right padding to tile content layout: "tile-content padding-right".

padding-bottom

CssLayout

Adds bottom padding to tile content layout: "tile-content padding-bottom".

padding

CssLayout

Adds vertical and horizontal padding to tile-content: "tile-content padding".

title

Label

Optional title label of a tile.

 

Data Grid With Editor template

Data Grid With Editor is a very simple template for creating a data grid view with an editor for items. The view has a Grid with a search field and an editor form. You add the logic of binding data and hiding/showing the form in grid row select in your Java code.

Important style names and hierarchy in Data Grid With Editor

Style Name

Layout Type

Details

inspect

VerticalLayout

Outer layout having the form and its action buttons.

edit

CssLayout

Direct child layout of inspect layout. Wraps the form field sections.

section

CssLayout

Each form field should be wrapped with this CssLayout.

half

CssLayout

This optional style name is set by default in the template. It is combined with section style e.g. "section half". Allows the fields to be shown in two columns under the grid in narrower screen sizes.

 

Responsive Form template

Responsive Form is a template creating good-looking forms that adapt to different screen sizes.

Important style names and hierarchy in Responsive Form

Style Name

Layout Type

Details

form-section

CssLayout

Outer layout style name. Adds horizontal borders to the section. If the layout has a caption, it is displayed on top of the border.

caption-left

CssLayout

Optional style name, which can be combined with form-section e.g. "form-section caption-left". Displays form field captions on the left instead of on top of a field.

input-group

CssLayout

Style name of one or more layouts as direct children of form-section.

input-wrapper

CssLayout

Style name of one or more layouts as direct children of input-group. Input wrapper ensures that all the components inside the wrapper flow together to a new row, if needed. Even if you only have one field, put it into an input wrapper.

 

This covers all the new templates in Vaadin Designer 1.2. I hope you can get started with this tutorial. If you have any suggestions or questions, put those into the forum thread available here.

See more tutorials