Vaadin `Button`教程

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

Vaadin Button教程显示了如何使用 Vaadin Button组件。 Vaadin 按钮示例显示一个小的通知窗口。

Vaadin

Vaadin 是用于构建单页 Web 应用的流行 Java 框架。

Vaadin Button

Button用于触发某些动作。 当用户单击按钮时，会触发Button.ClickEvent。 通过onClick()或addClickListener()方法添加了按钮事件处理器。

Vaadin Button示例

以下程序演示了 Vaadin Button组件的用法。 当我们单击按钮组件时，将显示一个通知窗口。

$ tree
.
├── nb-configuration.xml
├── pom.xml
├── README.md
└── src
    ├── main
    │   ├── java
    │   │   └── com
    │   │       └── zetcode
    │   │           └── vaadinbuttonex
    │   │               └── MyUI.java
    │   └── webapp
    │       ├── META-INF
    │       │   └── context.xml
    │       ├── VAADIN
    │       │   └── themes
    │       │       └── mytheme
    │       │           ├── addons.scss
    │       │           ├── favicon.ico
    │       │           ├── mytheme.scss
    │       │           └── styles.scss
    │       └── WEB-INF
    └── test
        └── java

这是 Vaadin Web 应用的项目结构。 该项目是在 NetBeans 中创建的。 在 NetBeans 中，我们需要安装 NetBeans Vaadin 插件，然后创建一个新的 Vaadin Web 应用项目。 我们将使用MyUI.java文件。

MyUI.java

package com.zetcode.vaadinbuttonex;
import javax.servlet.annotation.WebServlet;
import com.vaadin.annotations.Theme;
import com.vaadin.annotations.Title;
import com.vaadin.annotations.VaadinServletConfiguration;
import com.vaadin.server.VaadinRequest;
import com.vaadin.server.VaadinServlet;
import com.vaadin.ui.Button;
import com.vaadin.ui.HorizontalLayout;
import com.vaadin.ui.Notification;
import com.vaadin.ui.UI;
@Theme("mytheme")
@Title("Vaadin Button")
public class MyUI extends UI {
    @Override
    protected void init(VaadinRequest vaadinRequest) {
        HorizontalLayout layout = new HorizontalLayout();
        Button button = new Button("Button");
        button.addClickListener(e -> {
            Notification.show("Button clicked");
        });
        layout.addComponents(button);
        layout.setMargin(true);
        setContent(layout);
    }
    @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
    @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
    public static class MyUIServlet extends VaadinServlet {
    }
}

MyUI是应用入口点。 UI 可以表示浏览器窗口（或选项卡），也可以表示嵌入 Vaadin 应用的 HTML 页面的某些部分。

@Theme("mytheme")

使用@Theme批注，我们指定应用的主题。 系统会自动为我们创建一个默认的mytheme。

@Title("Vaadin Button")

使用@Title批注，设置浏览器窗口的标题。

HorizontalLayout layout = new HorizontalLayout();

Vaadin 中的组件放置在布局管理器中。 HorizontalLayout将组件连续放置。 由于我们只有一个Button组件，因此选择哪个布局管理器都没关系。

Button button = new Button("Button");

创建了一个新的Button组件。 将按钮的标签指定为参数。

button.addClickListener(e -> {
    Notification.show("Button clicked");
});

addClickListener()方法添加了按钮事件处理器。 在方法的主体中，我们称为Notification.show()，它在页面中间显示一个小的通知窗口。

layout.addComponents(button);

使用addComponents()方法将按钮添加到布局。

layout.setMargin(true);

使用setMargin()方法，我们在按钮组件周围创建了一些边距。

setContent(layout);

最后，将布局添加到 UI。

@WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
@VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
public static class MyUIServlet extends VaadinServlet {
}

从此代码摘录中可以看到，Vaadin 框架是基于 Java Servlet 技术构建的。

在本教程中，我们展示了如何使用 Vaadin Button组件。 您可能也对相关教程感兴趣： Vaadin CheckBox教程， Vaadin DateField教程， Vaadin ComboBox教程， Vaadin TextArea教程， Vaadin 滑块教程， Java 教程。