mg不朽情缘在线玩

書名： Vaadin 7 UI Design By Example：Beginner’s Guide
作者名： Alejandro Duarte
本章字數： 271字
更新時間： 2021-08-13 16:17:43

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):

官术网_书友最值得收藏!

Vaadin 7 UI Design By Example：Beginner’s Guide

Time for action – the main layout

What just happened?

Note