# 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/)。