Managing Layout

6.1. Overview

The user interface components in Vaadin can roughly be divided in two groups: components that the user can interact with and layout components for placing the other components to specific places in the user interface. The layout components are identical in their purpose to layout managers in regular desktop frameworks for Java and you can use plain Java to accomplish sophisticated component layouting.

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

//Set the root layout for the UI VerticalLayout content = new VerticalLayout(); setContent(content);

//Add the topmost component.

content.addComponent(new Label("The Ultimate Cat Finder"));

// Add a horizontal layout for the bottom part. HorizontalLayout bottom = new HorizontalLayout(); content.addComponent(bottom);

bottom.addComponent(new Tree("Major Planets and Their Moons")); bottom.addComponent(new Panel());

...

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 Section 6.13, “Layout Formatting”, while the layout component specific settings are described in connection with the component.

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 Chapter 8,

Themes

You can see the finished version of the above example in Figure 6.1, “Layout Example”.

Managing Layout

Figure 6.1. Layout Example

The alternative for using layout components is to use the special CustomLayout that allows using HTML templates. This way, you can let the web page designers take responsibility of component layouting using their own set of tools.What you lose is the ability to manage the layout dynamically.

The Visual Editor

While you can always program the layout by hand, the Vaadin plugin for the Eclipse IDE includes a visual (WYSIWYG) editor that you can use to create user interfaces visually. The editor generates the code that creates the user interface and is useful for rapid application development and prototyping. It is especially helpful when you are still learning the framework, as the generated code, which is designed to be as reusable as possible, also works as an example of how you create user interfaces with Vaadin. You can find more about the editor in Chapter 7, Visual User Interface Design with Eclipse.

6.2. Window and Panel Content

The Window and its superclass Panel have a single content component. The content is usually a layout component, but any component is allowed.

// Set the root content for the UI TabSheet tabsheet = new TabSheet(); setContent(tabsheet);

The size of the root layout is the default size of the particular layout component, for example, a VerticalLayout has 100% width and undefined height by default. In many applications, you want to use the full area of the browser view. Setting the components contained inside the root layout to full size is not enough, and would actually lead to an invalid state if the height of the root layout is undefined.

//This is actually the default. main.setContent(new VerticalLayout());

//Set the size of the root layout to full width and height.