HTML CSS JAVASCRIPT JQUERY AI PHP SQL EXCEL LINUX C# C++ C PYTHON JAVA 教程库 参考手册 技术文章 测验 练习 HOWTO FAQ
❮ Vaadin 核心元素 Vaadin 主题 ❯

Vaadin - 布局组件

布局组件用作占位符，用于保存和表示前端的数据。在本章中，我们将了解 VAADIN 的不同类型的布局组件。

垂直和水平布局

垂直和水平布局是有序布局，可帮助用户以垂直或水平方式呈现数据。到目前为止，我们在之前的许多示例中都使用过这个概念。以下示例将向您展示如何在 Vaadin 应用程序中使用它。

package com.TutorialsMy.myApp;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      Label l1 = new Label("Your Name-
",ContentMode.PREFORMATTED);
      Label l2 = new Label("Your Address-
",ContentMode.PREFORMATTED);
      Label l3 = new Label("Your Postal code-
",ContentMode.PREFORMATTED);
      final VerticalLayout vLayout = new VerticalLayout();
      final HorizontalLayout hLayout = new HorizontalLayout();
      vLayout.setDescription("This is a example of vertical layout");
      vLayout.addComponents(l1,l2,l3);;
      //hLayout.setDescription("This is example of Horizontal layout");
      // hLayout.addComponents(l1,l2,l3);
      setContent(vLayout);
      //setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

此代码将在浏览器中产生以下输出。

Vaadin Vertical Layout

当我们使用水平布局而不是垂直布局时，同一段代码将在浏览器中产生以下输出。

Vaadin Horizo​​ntal Layout

Grid

Grid 是 Vaadin 的另一个组件，用户可以使用它在浏览器中表示表格数据。在本节中，我们将了解 Grid 及其用法。

首先创建一个名为"Person"的类。

package com.TutorialsMy.myApp;

public class Person {
   private String name;
   private int number;
   public Person(){}
   public Person(String string, int i) {
      
      // TODO Auto-generated constructor stub
      this.name = string;
      this.number =i;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name;
   }
   public int getNumber() {
      return number;
   }
   public void setNumber(int number) {
      this.number = number;
   }
}

现在，在 MyUI.java 类中添加以下代码 −

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      HorizontalLayout hLayout = new HorizontalLayout();
      
      // Have some data
      List<Person> people = Arrays.asList(
      new Person("First Boy", 98),
      new Person("Second Boy", 99),
      new Person("Thired Boy", 57));
      
      // Create a grid bound to the list
      Grid<Person> grid = new Grid<>();
      grid.setItems(people);
      grid.addColumn(Person::getName).setCaption("Name");
      grid.addColumn(Person::getNumber).setCaption("Number in Examination");
      hLayout.addComponent(grid);
      setContent(hLayout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

完成这两个步骤后，编译并运行它们。您可以在浏览器中观察以下输出 −

Vaadin Grid

表单布局

表单布局是 Vaadin 的另一个组件，它帮助我们以两种不同的列格式表示数据。它看起来就像一个表单。在本节中，您将了解有关此布局的更多信息。

编辑您的 MyUI.java 文件，如下所示 −

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      FormLayout form = new FormLayout();
      TextField tf1 = new TextField("Name");
      tf1.setIcon(VaadinIcons.USER);
      tf1.setRequiredIndicatorVisible(true);
      form.addComponent(tf1);
      TextField tf2 = new TextField("Street address");
      tf2.setIcon(VaadinIcons.ROAD);
      form.addComponent(tf2);
      TextField tf3 = new TextField("Postal code");
      tf3.setIcon(VaadinIcons.ENVELOPE);
      form.addComponent(tf3);
      
      // normally comes from validation by Binder
      tf3.setComponentError(new UserError("Doh!"));
      setContent(form);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

当您编译并运行上述代码时，它将在浏览器中呈现以下输出 −

VaadinForm Layout

Panel

Panel 是一个带有边框的单个组件容器。它为表单布局提供了更多功能。在下面的示例中，我们将了解如何在 Vaadin 中使用面板。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      HorizontalLayout layout = new HorizontalLayout();
      Panel panel = new Panel("Panel Example ");
      panel.addStyleName("mypanelexample");
      panel.setSizeUndefined(); // Shrink to fit content
      layout.addComponent(panel);
      
      // Create the content
      FormLayout content = new FormLayout();
      content.addStyleName("mypanelcontent");
      content.addComponent(new TextField("Name"));
      content.addComponent(new TextField("Password"));
      content.setSizeUndefined(); // Shrink to fit
      content.setMargin(true);
      panel.setContent(content);
      setContent(panel);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

运行上述代码时，浏览器中将显示以下输出

Vaadin Panel

子窗口

子窗口是活动浏览器内的浮动面板。这允许用户将内容分隔到不同的窗口中。与其他布局组件一样，它也由运行时 Vaadin Html 代码控制。在下面的示例中，我们将看到子窗口面板的工作原理。

按如下所示更改您的 MYUI 代码。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
        setContent(new Label("Sub Window"));
        
        // 创建子窗口并设置内容
        Window subWindow = new Window("~~~~~~~~子窗口示例~~~~~~~");
        VerticalLayout subContent = new VerticalLayout();
        subWindow.setContent(subContent);
        
        // 在其中放入一些组件
        subContent.addComponent(new Label("这是窗口内的新标签"));
        subContent.addComponent(new Button("Click Me :)"));
        
        // 将其置于浏览器窗口的中心
        subWindow.center();
        
        // 在 UI 中打开它
        addWindow(subWindow);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

编译并运行上述代码后，您将在浏览器中获得以下输出。

Vaadin Sub Window

标签页

标签页是一个多组件容器，允许使用标签在组件之间切换。所有标签都组织为标签页顶部的标签栏。以下代码向您展示了如何使用 Vaadin 标签页。

请修改您的 MyUI.java 类，如下所示。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;import com.vaadin.annotations.Theme;

import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
        TabSheet tabsheet = new TabSheet();
        VerticalLayout layout = new VerticalLayout();
        la​​yout.addComponent(tabsheet);
        
        // 创建第一个选项卡
        VerticalLayout tab1 = new VerticalLayout();
        tab1.addComponent(new Label("Eaxmple of Train"));
        tab1.setCaption("Train");
        tabsheet.addTab(tab1).setIcon(VaadinIcons.TRAIN);;
        
        // 此选项卡从组件标题中获取其标题
        VerticalLayout tab2 = new VerticalLayout();
        tab2.addComponent(new Label("Example of Plane"));
        tab2.setCaption("Plane");
        tabsheet.addTab(tab2).setIcon(VaadinIcons.AIRPLANE);
        setContent(layout);
   } 
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

运行上述代码时，您可以在浏览器中看到以下输出。请注意，您可以根据选项卡标题中的选择在火车和飞机之间切换。

Vaadin Tab Sheet

绝对布局

绝对布局允许您以任意方式将内容放置在可选位置。以下代码是绝对用法的示例。

更新 MyUI.java 类，如下所示。

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
        // 400x250 像素大小的布局
        AbsoluteLayout layout = new AbsoluteLayout();
        la​​yout.setWidth("400px");
        la​​yout.setHeight("200px");
        
        // 具有左上角坐标的组件
        TextField text = new TextField("绝对布局示例");
        la​​yout.addComponent(text, "left: 50px; top: 50px;");
        setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

执行上述代码时，您可以在浏览器中看到以下输出 −

Vaadin Absolute Layout

自定义布局

自定义布局是一种可以根据您的要求自定义的布局，因此得名。以下示例展示了如何为我们的应用程序创建一个自定义布局。

更改 MyUI.java 类，如下所示 −

package com.TutorialsMy.myApp;

import java.util.Arrays;
import java.util.List;
import javax.servlet.annotation.WebServlet;

import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.icons.VaadinIcons;
import com.vaadin.server.UserError;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.shared.ui.ContentMode;

import com.vaadin.ui.AbsoluteLayout;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Label;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
        // 400x250 像素大小的布局
        Panel loginPanel = new Panel("Login");
        CustomLayout content = new CustomLayout("layoutname");
        content.setSizeUndefined();
        loginPanel.setContent(content);
        loginPanel.setSizeUndefined();
        
        // 模板中提供了字段的标题，因此没有标题
        content.addComponent(new TextField(), "username");
        content.addComponent(new TextField(), "password");
        content.addComponent(new Button("Login"), "okbutton");
        
        //content.addComponent(loginPanel
        setContent(loginPanel);
        setContent(content);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

运行上述代码后，您可以在浏览器中看到以下输出 −

Vaadin Custom Layout
❮ Vaadin 核心元素 Vaadin 主题 ❯