Overview

Layout example

You start by creating a content layout for the UI and then add other layout components hierarchically, and finally the interaction components as the leaves of the component tree.

Layout schematic

Let us look at building a bit simplified version of the layout in Layout example:

Java

HTML

  <vaadin-label>The Ultimate Cat Finder</vaadin-label>
    <vaadin-tree caption="Possible Places"/>
  </vaadin-horizontal-layout>

You will usually need to tune the layout components a bit by setting sizes, expansion ratios, alignments, spacings, and so on. The general settings are described in .

Layouts are coupled with themes that specify various layout features, such as backgrounds, borders, text alignment, and so on. Definition and use of themes is described in “Themes”.