Vaadin 7 UI Design By Example：Beginner’s Guide

上QQ阅读APP看书，第一时间看更新

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:

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

Let MainLayout extend VerticalLayout:

public class MainLayout extends VerticalLayout {

}

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();
  
}

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.addComponent(menuLayout);
  upperSection.addComponent(contentLayout);
  
  addComponent(upperSection);
  addComponent(lowerSection);
}

Change the init method in your LayoutFrameworkUI class to match this:

public class LayoutFrameworkUI extends UI {

  protected void init(VaadinRequest request) {
    setContent(new MainLayout());
  }

}

Compile, deploy, and run your application.

What just happened?

Let's get real; the application doesn't look very impressive so far:

We have created our very own layout class taking advantage of VerticalLayout. So our MainLayout is a VerticalLayout too, but now it contains a VerticalLayout for the header or upper section and a HorizontalLayout for the lower section which in turn contains a menu layout and a content layout, both using VerticalLayout. Layout, layout, layout, what a tongue-twister!

We have added some labels to see how our layout works.

Note

Note that when we add components into a HorizontalLayout they are placed from left to right.

Take a look at the components tree for MainLayout (we are showing only layout components):

本周热推：

PHP Web开发快速入门及实例精选 C#深入详解代码揭秘 R语言数据分析从入门到精通 Python游戏趣味编程