Creating an adjustable layout using split panels

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.

How to do it...

Carry out the following steps to create an adjustable layout:

1. We create a simple Vaadin project with the main UI class called, for example, Demo:

   public class Demo extends UI {…}

2. Our application will be based on split panels. As a main panel, we use HorizontaSplitPanel. This panel is divided into two areas. The first is on the left side, the second is on right the side.

   public class AdjustableLayout extends HorizontalSplitPanel {…}

3. In the constructor, we set the properties of this main panel. On the left side we insert the main menu, on the right side we insert the other content. The left area will take 10 percent of the whole panel. And with the setSizeFull() method,...