Vaadin 7 UI Design By Example Beginner's Guide

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 ...