Vaadin-核心元素 - 芒果文档

📌 相关文章

📜 Vaadin-核心元素

📅 最后修改于: 2020-10-19 04:17:09 🧑 作者: Mango

到目前为止，您已经了解了Vaadin的不同组成部分。在本章中，您将了解Vaadin作为其库的一部分提供的不同核心组件。 Vaadin核心组件易于使用，易于理解并且与任何现代浏览器兼容。

组合框

组合框是一个选择组件，不仅可以帮助用户从下拉菜单中进行选择，还可以帮助开发人员为特定字段创建下拉菜单。下面显示的示例说明了如何创建组合框。在这里，我们将使用Vaadin组合框填充“行星历史”。

package com.example.myapplication;

public class Planet {
   
   private int id;
   private String name;
   
   public Planet(){}
   public Planet(int i, String name){
      this.id = i;
      this.name = name;
   }
   public int getId() {
      return id;
   }
   public void setId(int id) {
      this.id = id;
   }
   public String getName() {
      return name;
   }
   public void setName(String name) {
      this.name = name; 6. Vaadin – Core Elements
   }
}

观察下面显示的代码，并相应地更新MyUI.java类。

package com.example.myapplication;

import java.util.ArrayList;
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.data.TreeData;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.ComboBox;
import com.vaadin.ui.Component;
import com.vaadin.ui.Label;
import com.vaadin.ui.MenuBar;
import com.vaadin.ui.MenuBar.MenuItem;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      //VerticalLayout layout = new VerticalLayout();
      // List of planets
      List planets = new ArrayList();
      planets.add(new Planet(1, "Mercury"));
      planets.add(new Planet(2, "Venus"));
      planets.add(new Planet(3, "Earth"));
      ComboBox select =
      new ComboBox<>("Select or Add a Planet");
      select.setItems(planets);
      
      // Use the name property for item captions
      select.setItemCaptionGenerator(Planet::getName);
      
      //layout.addComponent(select);
      setContent(select);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

上面给出的代码将在浏览器中产生以下输出。

上下文菜单

上下文菜单是帮助开发人员在浏览器中表示依赖列表的功能。但是，此功能在Vaadin 8的最新版本中已被弃用。请注意，您可以使用菜单栏选项执行相同的操作。如果要在应用程序中使用相同的代码，则可以使用如下所示的代码。请注意，您需要使用npm目录安装聚合物，并在html代码中使用相同的聚合物。


   
   
   This paragraph has the context menu provided in the above template.
   Another paragraph with the context menu that can be opened with right click or with long touch.

由于这是基于Java的教程，因此我们建议您使用菜单栏选项来学习Vaadin上下文菜单。

日期选择器

日期选择器是Vaadin支持的另一个组件，可帮助开发人员轻松创建网站。以下代码显示了如何在Vaadin UI中创建日期选择器。请注意，在Vaadin 8的最新版本中已弃用了此功能，因此我们需要使用Java date对象来填充date字段。但是，如果您正在使用Vaadin Web项目，则仍然可以使用它。

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
import java.time.LocalDate;
import java.util.Arrays;
import java.util.List;
import java.util.Locale;

import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.data.TreeData;
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.Alignment;
import com.vaadin.ui.Button;
import com.vaadin.ui.CustomLayout;
import com.vaadin.ui.DateField;
import com.vaadin.ui.FormLayout;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.HorizontalSplitPanel;
import com.vaadin.ui.Label;

import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      final VerticalLayout hLayout = new VerticalLayout();
      Label l1 = new Label("Enter today's Date\n",ContentMode.PREFORMATTED);
      DateField date = new DateField();
      date.setValue(LocalDate.now());
      date.setLocale(new Locale("en","IND"));
      hLayout.addComponents(l1,date);
      hLayout.setComponentAlignment(l1,Alignment.BOTTOM_CENTER);
      hLayout.setComponentAlignment(date,Alignment.BOTTOM_CENTER);
      setContent(hLayout); 
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

运行上面给出的代码时，您可以找到以下输出，如下所示：

Vaadin日期选择器

您还可以直接使用Java中的Vaadin日期选择器类，如下所示，这也将在浏览器中产生相同的结果。

DatePicker datePicker = new DatePicker();

请注意，要使用DatePicker类，您需要使用Vaadin V 3.0，但我们正在使用Vaadin 8。

数据网格

数据网格意味着传递数据列表。它的行为类似于浏览器中的树。以下示例显示了网格的工作方式。

创建一个如下所示的类，并将其命名为MyCharArray.java。

package com.TutorialsMy.myApp;

public class MyCharArray { 
   private String c;
   
   public String getC() {
      return c;
   }
   public void setC(String c) {
      this.c = c;
   }
   
   public MyCharArray(){} 
   public MyCharArray(String ch){
      this.c = ch;
   }
}

接下来，修改MyUI.java类，如下所示-

package com.TutorialsMy.myApp;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
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.data.TreeData;

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.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      VerticalLayout layout = new VerticalLayout();
      
      List values = Arrays.asList(
      new MyCharArray("First Value"),
      new MyCharArray("Second Value"),
      new MyCharArray("thired Value"));
      
      final Grid grid = new Grid<>("My Table");
      grid.setItems(values);
      grid.addColumn(MyCharArray::getC).setCaption("Value");
      layout.addComponent(grid);
      setContent(layout);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

现在，运行上面的代码，您可以在浏览器中看到以下输出。

Vaadin数据网格

分割版面

Vaadin提供了许多根据开发人员的选择来设计网页的工具。使用拆分布局，我们可以根据选择自定义整个屏幕。以下示例显示了使用Vaadin核心组件拆分布局的不同选项。

如下所示修改MyUI.java-

package com.TutorialsMy.myApp;
import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
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.HorizontalSplitPanel;
import com.vaadin.ui.Label;
import com.vaadin.ui.Notification;
import com.vaadin.ui.Panel;

import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.Tree;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.VerticalSplitPanel;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      // A 400x250 pixels size layout
      Panel panel = new Panel("Split Panel example");
      Panel ex = new Panel("My Splitpanel- horizontal ");
      
      // Have a horizontal split panel as its content
      HorizontalSplitPanel hsplit = new HorizontalSplitPanel();
      hsplit.addComponent(ex);
      panel.setContent(hsplit);
      setContent(hsplit);
      
      /* Panel ex1 = new Panel("My Splitpanel- vertical ");
      // Have a horizontal split panel as its content
      VerticalSplitPanel vsplit = new VerticalSplitPanel();
      hsplit.addComponent(ex1);
      panel.setContent(vsplit);
      setContent(vsplit);*/
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

同样，您可以垂直分割窗口。当您运行上面的代码时，它将在浏览器中产生以下输出。

Vaadin拆分布局

上载

上载内容将帮助用户将文件上载到服务器。它具有两种不同的模式，即立即模式和非立即模式，由Vaadin核心框架控制。在即时模式下，上载将显示文件名输入框和用于选择文件的按钮。在非立即模式下，用户需要使用上载按钮触发上载。

以下示例显示了这两种上传模式-

Vaadin两种上传模式

图标

Vaadin具有内置的图标，可以用作一般用途。这些图标比图像具有许多优势。它们减少了代码大小，并使编译速度更快。以下示例显示了如何在Vaadin中使用它。

如下所示更新您的MyUI.java类。

package com.TutorialsMy.myApp;

import java.io.File;
import java.io.FileOutputStream;
import java.io.OutputStream;
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.Notification;
import com.vaadin.ui.Panel;
import com.vaadin.ui.TabSheet;
import com.vaadin.ui.TextField;
import com.vaadin.ui.UI;
import com.vaadin.ui.Upload;
import com.vaadin.ui.Upload.Receiver;
import com.vaadin.ui.VerticalLayout;
import com.vaadin.ui.Window;

@Theme("mytheme")
public class MyUI extends UI {
   
   @Override
   protected void init(VaadinRequest vaadinRequest) {
      
      // A 400x250 pixels size layout
      VerticalLayout content = new VerticalLayout();
      Panel p = new Panel("Example of Vaadin Upload-");
      TextField name = new TextField("Name");
      name.setIcon(VaadinIcons.USER);
      content.addComponent(name);
      
      // Button allows specifying icon resource in constructor
      Button ok = new Button("OK", VaadinIcons.CHECK);
      content.addComponent(ok);
      setContent(content);
   }
   @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
   @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
   public static class MyUIServlet extends VaadinServlet {}
}

这段代码将在浏览器中运行，并在浏览器中产生以下输出-

Vaadin图标