The layout of an application is built hierarchically from layout components, or more generally component containers, with the actual interaction components as the leaf nodes of the component tree.
You start by creating a root layout for the main window and set it with setContent(), unless you use the default, and then add the other layout components hierarchically with addComponent().
The margin of layout components is controlled with the margin property, which you can set with setMargin(). Once enabled, the HTML element of the layout will contain an inner element with <layoutclass>-margin style, for example, v-verticallayout-margin for a VerticalLayout. You can use the padding property in CSS in a custom theme to set the width of the margin:
Some layout components allow spacing between the elements. You first need to enable spacing with setSpacing(true), which enables the <layoutclass>-spacing-on style for the layout, for example, v-gridlayout-spacing-on for GridLayout. You can then set the amount of spacing in CSS in a custom theme with the padding-top property for vertical and padding-left for horizontal spacing, for example as follows:
padding-left: 50px; /* Horizontal spacing */
padding-top: 100px; /* Vertical spacing */
When a layout cell is larger than a contained component, the component can be aligned within the cell with the setComponentAlignment() method as in the example below:
VerticalLayout layout = new VerticalLayout();
Button button = new Button(“My Button”);
The CustomLayout component allows the use of a HTML template that contains location tags for components, such as <div location=”hello”>. The components are inserted in the location elements with the addComponent() method as shown below:
CustomLayout layout = new CustomLayout(“mylayout”);
layout.addComponent(new Button(“Hello”), “hello”);
The layout name in the constructor refers to a corresponding .html file in the layouts subfolder in the theme folder, in the above example layouts/mylayout.html. See Figure 5 for the location of the layout template.