O'Reilly logo

Vaadin 7 UI Design By Example Beginner's Guide by Alejandro Duarte

Stay ahead with the world's most comprehensive technology and business learning platform.

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, tutorials, and more.

Start Free Trial

No credit card required

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

With Safari, you learn the way you learn best. Get unlimited access to videos, live online training, learning paths, books, interactive tutorials, and more.

Start Free Trial

No credit card required