Vaadin `Grid`教程

Vaadin 框架
Vaadin Grid
Vaadin Grid示例

原文： http://zetcode.com/vaadin/grid/

在 Vaadin Grid教程中，我们学习了 Vaadin Grid组件的基础知识。 Vaadin 网格示例显示网格中来自 MySQL 数据库的数据。

Vaadin 框架

Vaadin 是一种流行的 Java Web 开发框架，用于构建单页 Web 应用。

Vaadin `Grid`

Grid组件用于显示和编辑以行和列排列的表格数据。

Vaadin `Grid`示例

以下示例演示了 Vaadin Grid组件的用法。我们从 MySQL 数据库加载数据并将其显示在Grid组件中。

NetBeans IDE 可用于轻松创建 Vaadin Web 应用。我们需要安装 NetBeans Vaadin 插件，然后创建一个新的 Vaadin Web 应用项目。

<dependency>
    <groupId>mysql</groupId>
    <artifactId>mysql-connector-java</artifactId>
    <version>5.1.42</version>
</dependency>
<dependency>
    <groupId>org.springframework</groupId>
    <artifactId>spring-jdbc</artifactId>
    <version>4.3.9.RELEASE</version>
</dependency>

我们向 POM 文件添加了两个依赖关系：MySQL 驱动程序和JdbcTemplate库。 JdbcTemplate简化了 Java 中的数据库编程。

cars_mysql.java

-- SQL for the Cars table
CREATE TABLE Cars(Id BIGINT PRIMARY KEY AUTO_INCREMENT, 
        Name VARCHAR(150), Price INTEGER);
INSERT INTO Cars(Name, Price) VALUES('Audi', 52642);
INSERT INTO Cars(Name, Price) VALUES('Mercedes', 57127);
INSERT INTO Cars(Name, Price) VALUES('Skoda', 9000);
INSERT INTO Cars(Name, Price) VALUES('Volvo', 29000);
INSERT INTO Cars(Name, Price) VALUES('Bentley', 350000);
INSERT INTO Cars(Name, Price) VALUES('Citroen', 21000);
INSERT INTO Cars(Name, Price) VALUES('Hummer', 41400);
INSERT INTO Cars(Name, Price) VALUES('Volkswagen', 21600);

这是 MySQL 数据库表的数据。

MyUI.java

package com.zetcode.main;
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.ui.Button;
import com.vaadin.ui.Grid;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.UI;
import com.vaadin.ui.VerticalLayout;
import com.zetcode.bean.Car;
import com.zetcode.service.ReadCars;
import java.util.List;
@Theme("mytheme")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        VerticalLayout vbox = new VerticalLayout();
        HorizontalLayout hbox = new HorizontalLayout();
        Grid grid = new Grid();
        grid.addColumn("Id", Long.class);
        grid.addColumn("Name", String.class);
        grid.addColumn("Price", Integer.class);
        Button loadButton = new Button("Load data");
        loadButton.addClickListener(e -> {
            grid.getContainerDataSource().removeAllItems();
            List<Car> cars = ReadCars.read();
            for (Car car : cars) {
                grid.addRow(car.getId(), car.getName(), car.getPrice());
            }
        });
        Button clearButton = new Button("Clear data");
        clearButton.addClickListener(e -> {
            grid.getContainerDataSource().removeAllItems();
        });
        vbox.addComponents(grid);
        hbox.addComponents(loadButton, clearButton);
        hbox.setSpacing(true);
        vbox.addComponent(hbox);
        vbox.setMargin(true);
        vbox.setSpacing(true);
        setContent(vbox);
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

这是MyUI类。它是应用的入口点。我们有一个Grid组件和两个按钮。一个按钮从数据库中加载数据并将其插入Grid，另一按钮从Grid中删除数据。

VerticalLayout vbox = new VerticalLayout();
HorizontalLayout hbox = new HorizontalLayout();

要创建布局，我们使用HorizontalLayout和VerticalLayout。

Grid grid = new Grid();

Grid组件已创建。

grid.addColumn("Id", Long.class);
grid.addColumn("Name", String.class);
grid.addColumn("Price", Integer.class);

使用addColumn()方法，我们向Grid添加新列。方法的第二个参数是列的日期类型。

Button loadButton = new Button("Load data");
loadButton.addClickListener(e -> {
    grid.getContainerDataSource().removeAllItems();
    List<Car> cars = ReadCars.read();
    for (Car car : cars) {
        grid.addRow(car.getId(), car.getName(), car.getPrice());
    }
});

加载按钮从数据库加载数据并将其插入Grid。数据库工作委托给ReadCars.read()方法。使用addRow()方法将新行添加到网格中。

Button clearButton = new Button("Clear data");
clearButton.addClickListener(e -> {
    grid.getContainerDataSource().removeAllItems();
});

清除按钮将从Grid中删除所有数据。 removeAllItems()方法可以完成这项工作。

vbox.addComponents(grid);
hbox.addComponents(loadButton, clearButton);

组件将添加到布局管理器。

Car.java

package com.zetcode.bean;
public class Car {
    private Long id;
    private String name;
    private int price;
    public Long getId() {
        return id;
    }
    public void setId(Long id) {
        this.id = id;
    }
    public String getName() {
        return name;
    }
    public void setName(String name) {
        this.name = name;
    }
    public int getPrice() {
        return price;
    }
    public void setPrice(int price) {
        this.price = price;
    }
}

这是Car bean；它包含id，name和price属性。

ReadCars.java

package com.zetcode.service;
import com.zetcode.bean.Car;
import java.sql.SQLException;
import java.util.List;
import java.util.logging.Level;
import java.util.logging.Logger;
import org.springframework.jdbc.core.BeanPropertyRowMapper;
import org.springframework.jdbc.core.JdbcTemplate;
import org.springframework.jdbc.datasource.SimpleDriverDataSource;
public class ReadCars {
    public static List<Car> read()  {
        String url = "jdbc:mysql://localhost:3306/testdb?useSSL=true";
        SimpleDriverDataSource ds = new SimpleDriverDataSource();
        try {
            ds.setDriver(new com.mysql.jdbc.Driver());
        } catch (SQLException ex) {
            Logger.getLogger(ReadCars.class.getName()).log(Level.SEVERE, null, ex);
        }
        ds.setUsername("testuser");
        ds.setPassword("test623");
        ds.setUrl(url);
        String sql = "SELECT * FROM Cars";
        JdbcTemplate jdbcTemplate = new JdbcTemplate(ds);
        List<Car> cars = jdbcTemplate.query(sql, new BeanPropertyRowMapper(Car.class));
        return cars;
    }
}

ReadCars包含连接到 MySQL 数据库并从Cars表中检索所有汽车的代码。我们使用 Spring 的JdbcTemplate来完成这项工作。

String url = "jdbc:mysql://localhost:3306/testdb?useSSL=true";

这是 MySQL 数据库的连接 URL。数据库名称为testdb。

String sql = "SELECT * FROM Cars";

该 SQL 语句从Cars表中选择所有行。

JdbcTemplate jdbcTemplate = new JdbcTemplate(ds);
List<Car> cars = jdbcTemplate.query(sql, new BeanPropertyRowMapper(Car.class));

在BeanPropertyRowMapper的帮助下，该工具自动将结果集列映射到Car类的属性，我们从Cars表中检索所有行并将其映射到Car对象的列表。

return cars;

汽车列表将返回给调用者。

Vaadin `Grid`教程 - 图1

图：Vaadin Grid

在本教程中，我们学习了 Vaadin Grid组件的基础知识。您可能也对相关教程感兴趣： Vaadin TextArea教程， Vaadin ComboBox教程， Vaadin Slider教程， Vaadin CheckBox教程， Java 教程。

Vaadin 框架

Vaadin Grid

Vaadin Grid示例

Vaadin `Grid`

Vaadin `Grid`示例