Time for action – the main layout

Let's start by coding the main layout using our well known friend VerticalLayout and the new guy HorizontalLayout:

1. Create a new Vaadin project. For this example, we will use layout-framework as project name and LayoutFrameworkUI as the UI class.

2. Create a new Java class MainLayout.

3. Let MainLayout extend VerticalLayout:

   public class MainLayout extends VerticalLayout {
   
   }

4. Add layouts for upper and lower sections of MainLayout:

   public class MainLayout extends VerticalLayout {
   
     private VerticalLayout upperSection = new VerticalLayout();
     private HorizontalLayout lowerSection = new     HorizontalLayout();
     private VerticalLayout menuLayout = new VerticalLayout();
     private VerticalLayout contentLayout = new VerticalLayout();
     
   }

5. Add the following default constructor for MainLayout:

   public MainLayout() {
     upperSection.addComponent(new Label("Header"));
     menuSection.addComponent(new Label("Menu"));
     contentSection.addComponent(new Label("Content"));
     
     lowerSection...