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