32.md

# Vaadin `Button`教程

> 原文： [http://zetcode.com/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 组件的用法。 当我们单击按钮组件时，将显示一个通知窗口。

```java
$ 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`

```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 页面的某些部分。

```java
@Theme("mytheme")

```

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

```java
@Title("Vaadin Button")

```

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

```java
HorizontalLayout layout = new HorizontalLayout();

```

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

```java
Button button = new Button("Button");

```

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

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

```

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

```java
layout.addComponents(button);

```

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

```java
layout.setMargin(true);

```

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

```java
setContent(layout);

```

最后，将布局添加到 UI。

```java
@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/checkbox/)， [Vaadin DateField 教程](/vaadin/datefield/)， [Vaadin ComboBox 教程](/vaadin/combobox/)， [Vaadin TextArea 教程](/vaadin/textarea/)， [Vaadin 滑块教程](/vaadin/slider/)， [Java 教程](/lang/java/)。