Vaadin 7 Cookbook: Take the shortcut to developing rich internet applications in pure Java. Vaadin makes it easy and this cookbook makes it easier still with its practical recipes and straightforward approach.

Layout management in Vaadin is a direct successor of the web-based concept for separation of content and appearance, and of the Java Abstract Windowing Toolkit (AWT) solution for binding the layout and user interface components into objects in programs. Vaadin layout components allow us to position our UI components on the screen in a hierarchical fashion, much as in conventional Java UI toolkits such as AWT, Swing, or SWT (Standard Widget Toolkit). This chapter describes a few of the practical concepts in the Vaadin framework. Layouting is comprehensive and could be published in a separate book. A lot of technical details are described in the Vaadin book on the web page: https://vaadin.com/book/vaadin7/-/page/layout.html.

In a more complex layout, it is better to let the user adjust it. If we want to use a more flexible layout, we can use split panels. This recipe is about creating a complex layout with different components, for example, menu, editor, properties view, and Help view.

When we work on a complex web application, we need to cooperate with more people in the team. UX or graphic designers design layouts and for them it is more natural to design layouts using HTML and CSS. In such cases, we can use Custom layout that is described in the HTML template.

In some cases, we need to control the CSS style of components programmatically. For example, when we want to create a cloud of the most searched terms or tags in our application, we need to change the size of each tag according to the number of searches. We'll use the CSS layout in that case. Our tag cloud will look like the following screenshot:

Another nice feature of the CSS layout is that components are wrapped when they reach the width of the layout. This feature can be used to create layouts for small displays, for example, mobile phones or some tablets. We will create a simple layout with a header, two menus, and content in the middle of them.

As we can see in the following screenshot, if the user opens our application on a wide screen, components are displayed side by side. Except the header that takes up the whole width of the page.

If the user opens our application on a narrow screen, for example, on a mobile device, then all components will be aligned into the one column.

If we have an application that works with bigger UI groups, it's nice to separate them with tabs. For example, we want to show different screens for our Contractors, Customers, Employees, and Help pages. The following screenshot shows the initial page of our application. We can see that the Home screen corresponds to the URL.

And if the user clicks on another tab, the URL has changed.

Vaadin 7 has introduced a new capability for easy creation of bookmarkable applications with back and forward button support: the Navigator.

We will see how to use the Navigator class and what is needed to get it working. Navigator works with views, layouts that implement the View interface.

We are going to make an application with two views. We will be able to navigate between these two views with the back and forward buttons or make a bookmark.

The first view will be the welcome view, which we map to an empty URL fragment, so it becomes accessible at http://localhost:8080 address.

When a user clicks on the Open new Orders button, the orders view is displayed with the orders URL fragment.

Aligning components is easy in Vaadin. We can align them on the left, on the right, on the top, on the bottom, and also center them vertically or horizontally. In this recipe, we will create a demo application in which we can see how aligning works. We will create three buttons in three different positions, as we can see in the following screenshot:

Imagine that we need to create an editor for the UI design. What is it usually composed of? It's usually composed of the toolbar, editor, and a collection of components. In this recipe, we will create a UI collection of components. When we work with many components, it is good to group them by types. For grouping, we use the Accordion layout.

Each layout has a different wrap behavior. If we want to try this behavior for ourselves, we will have to create a simple demo. In this demo, we can drag-and-drop components between the four different layouts. We can also change the size of each layout by moving the separator and watch how components are wrapped. If the line cannot be wrapped, a scroll bar appears.

If the basic layouts offered by Vaadin limit us, and we want to create some other special crazy layout, we can use AbsoluteLayout. There are no limits in this layout. We can insert components into any place we want. In this recipe, we will create a demo of a custom layout, Circle layout. There are also some reasons not to use AbsoluteLayout. They are described in the There's more... section at the end of this recipe.