将主视图连接到Java

将组件导出到Java
向Grid添加数据
启用过滤

当您使用 Designer 构建视图时，每个视图主要有两个文件：main-view.ts 和 MainView.java。

main-view.ts 是模板文件，您在其中布局组件并定义所有静态内容。MainView.java 是使用模板的 Java 类，用于添加 UI 逻辑，并配置所有动态部分。此文件是模板的伴随文件。

在本教程早期创建视图时，您已在 New Vaadin 10+ Design 对话框中勾选了 Create Java Companion file 选项。这就是为什么自动生成了 MainView.java 和 ContactForm.java 文件的原因。在 Designer 模板中不可视地看到您添加到视图中的 Java 代码，但在运行应用程序时会使用它。

对于主视图，您需要在伴随文件中完成一些任务：

将数据加载到 grid 中。
根据文本字段过滤数据。
当用户在 grid 中选择一行时，填充联系表单。
使用 Add contact 按钮添加新联系人。

对于联系表单，您也需要完成以下几项任务：

将字段绑定到主视图提供的联系对象。
实现保存、删除和关闭按钮。

首先，您需要将数据加载到 grid 中。

将组件导出到Java

首先，您需要将需要数据或交互逻辑的组件导出到 Java。为此，您需要告诉 Designer 哪些组件需要从 Java 代码访问。对于主视图而言，您需要 grid 用于显示数据、文本字段用于过滤数据，以及按钮用于添加新联系人。

在 Designer 中，打开 main-view.ts。然后选择“Filter by name…”文本字段。在属性视图中，打开 attributes 面板，找到 id 属性，并将文本字段的 id 设置为 filterText。这是伴随 Java 文件中组件将使用的名称。

在大纲（outline）视图中，将鼠标放置在被选中的组件 vaadin-text-field 上，并点击右侧行内显示的图标。此操作允许您将组件连接到Java，使得Java代码可以访问该字段。

对下列组件重复以上过程 — 选择相应组件，并点击对应的图标：

vaadin-button：将 id 属性设置为 addContactButton。
vaadin-grid：将 id 属性设置为 grid。
contact-form：将 id 属性设置为 contactForm。

现在所有这些字段都应该可以从 Java 代码访问。为了验证这一点，打开类文件 src/main/java/com.example.application.MainView。

Source code

MainView.java
@Tag("main-view")
@JsModule("./src/views/main-view.ts")
@Route("")
public class MainView extends LitTemplate {

    @Id("filterText") 1
    private TextField filterText; 2
    @Id("addContactButton")
    private Button addContactButton; 3
    @Id("grid")
    private Grid grid; 4
    @Id("contactForm")
    private ContactForm contactForm; 5

    public MainView() {
    }

}

使用 @Id("identifier") 注解将字段连接到模板。
文本字段使用的标识符是 filterText。
按钮使用的标识符是 addContactButton。
grid 使用的标识符是 grid。
联系表单使用的标识符是 contactForm。

向Grid添加数据

接下来，您需要从后端加载数据，并在 grid 中显示。首先需要配置列。对于每个联系人，您要显示其姓名、姓氏、电子邮箱、公司和状态。

通过在构造函数中添加后端服务作为参数，我们利用 Spring 的依赖注入获得了该服务。当 MainView 创建时，Spring 会自动传入服务实例。

修改 MainView 如下：

Source code

MainView.java
@Tag("main-view")
@JsModule("./src/views/main-view.ts")
@Route("")
public class MainView extends LitTemplate {

    @Id("filterText")
    private TextField filterText;
    @Id("addContactButton")
    private Button addContactButton;
    @Id("grid")
    private Grid<Contact> grid; 1
    @Id("contactForm")
    private ContactForm contactForm;

    ContactRepository contactRepository; 2

    public MainView(ContactRepository contactRepository) {  3
        this.contactRepository = contactRepository;

        grid.addColumn(Contact::getFirstName).setHeader("First name"); 4
        grid.addColumn(Contact::getLastName).setHeader("Last name");
        grid.addColumn(Contact::getEmail).setHeader("Email");
        grid.addColumn(Contact::getCompany).setHeader("Company");
        grid.addColumn(Contact::getStatus).setHeader("Status");
        grid.getColumns().forEach(col -> col.setAutoWidth(true)); 5
        updateList();
    }

    private void updateList() {
        grid.setItems(contactRepository.findAll());  6
    }

}

将 bean 类型作为 grid 的类型参数。
创建用于保存服务实例以备后续访问的字段。
使用自动装配，当视图被创建时，Spring 传入服务。
在 grid 中添加并配置列。
配置列大小，使所有列根据内容自动调整宽度。
从服务获取项目并传递给 grid。

接下来，运行应用程序，或者如果应用程序已运行则重启它。

刷新 http://localhost:8080/ 的浏览器页签。grid现在显示了服务中的联系人。

启用过滤

当用户在过滤文本字段中键入值时，我们希望基于姓名和姓氏过滤 grid 数据。为此，您需要给过滤文本字段添加值变化监听器，将输入的值传递给联系人服务。

Source code

MainView.java
@Tag("main-view")
@JsModule("./src/views/main-view.ts")
@Route("")
public class MainView extends LitTemplate {

    // 字段已省略
    ...

    public MainView(ContactRepository contactRepository) {
        this.contactRepository = contactRepository;

        grid.addColumn(Contact::getFirstName).setHeader("First name");
        grid.addColumn(Contact::getLastName).setHeader("Last name");
        grid.addColumn(Contact::getEmail).setHeader("Email");
        grid.addColumn(Contact::getCompany).setHeader("Company");
        grid.addColumn(Contact::getStatus).setHeader("Status");
        grid.getColumns().forEach(col -> col.setAutoWidth(true));
        updateList();

        filterText.setValueChangeMode(ValueChangeMode.LAZY); 1
        filterText.addValueChangeListener(e -> updateList()); 2
    }

    private void updateList() {
        String filterValue = filterText.getValue();
        if (filterValue == null || filterValue.isBlank()) {
            grid.setItems(contactRepository.findAll());
        } else {
            grid.setItems(contactRepository.findByFirstNameOrLastNameContainsIgnoreCase(filterValue, filterValue)); 3
        }
    }
}

将文本字段的值变化模式设置为延迟模式，因此不会在每次按键时查询数据库。
为文本字段添加值变化监听器，以便 grid 在值更新时刷新数据。
如果存在过滤字段值，则调用方法 findByFirstNameOrLastNameContainsIgnoreCase()，检索姓名或姓氏中包含传入字符串的记录。

运行应用程序。现在在文本字段中输入姓名即可对grid进行搜索过滤。

继续下一页将您的 Contact Form 连接到 Java：连接 Contact Form。

71BC5FBE-F6AE-428E-A683-F2EE46551A49

Docs

Docs

将主视图连接到Java

将组件导出到Java

向Grid添加数据

启用过滤