# Vaadin 框架介紹 > 原文： [http://zetcode.com/vaadin/intro/](http://zetcode.com/vaadin/intro/) 本教程介紹 Vaadin Web 框架。 ## Vaadin 框架 Vaadin 是用于構建單頁 Web 應用的流行 Java 框架。 它由一家專門從事富 Internet 應用設計和開發的芬蘭公司開發。 估計有 15 萬開發者使用 Vaadin。 它的開發始于 2002 年。 ## Vaadin 框架特性 以下是 Vaadin 特性的列表： * 這是一個 Java Web 框架 * 概念上類似于 Java Swing * 允許構建不帶 HTML 和 JavaScript 的 Web 應用 * 基于 Java Servlet 構建 * 包含大量組件和窗口 * 提供可定制的外觀 * 在客戶端和服務器之間使用異步消息 * 使用服務器端編程模型 * 具有 Eclipse，NetBeans 和 IntelliJ 的插件 * 使用 Google Web Toolkit 呈現結果網頁 * 提升代碼質量和安全性 ## Vaadin NetBeans NetBeans 包含一個用于創建 Vaadin 應用的插件。 我們轉到工具/插件并安裝 Vaadin 插件。 然后，我們重新啟動 NetBeans。  圖：Vaadin 新項目 安裝 Vaadin 插件后，NetBeans 中將出現一個新的 Vaadin 項目類別。 要創建一個新的 Vaadin 項目，我們轉到`File / New Project / Vaadin`并選擇`Vaadin Web Application Project`。 ## Vaadin 簡單示例 以下是一個簡單的 Vaadin 應用，該應用使用 Vaadin `Label`組件顯示文本。 ```java $ tree . ├── nb-configuration.xml ├── pom.xml ├── README.md └── src └── main ├── java │ └── com │ └── zetcode │ └── simple │ └── MyUI.java ├── resources │ └── README └── webapp ├── META-INF │ └── context.xml └── VAADIN └── themes └── mytheme ├── addons.scss ├── favicon.ico ├── mytheme.scss └── styles.scss ``` 這是 Vaadin Web 應用的項目結構。 請注意為我們自動創建的主題。 `MyUI.java` ```java package com.zetcode.simple; import javax.servlet.annotation.WebServlet; import com.vaadin.annotations.Theme; import com.vaadin.annotations.VaadinServletConfiguration; import com.vaadin.server.VaadinRequest; import com.vaadin.server.VaadinServlet; import com.vaadin.ui.Label; import com.vaadin.ui.UI; import com.vaadin.ui.VerticalLayout; @Theme("mytheme") public class MyUI extends UI { @Override protected void init(VaadinRequest vaadinRequest) { VerticalLayout layout = new VerticalLayout(); Label lbl = new Label("Simple example"); lbl.setDescription("This is a Label component"); layout.addComponents(lbl); 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 VerticalLayout layout = new VerticalLayout(); ``` Vaadin 中的組件放置在布局管理器中。 `VerticalLayout`將組件放在一列中。 由于我們只有一個`Label`組件，因此選擇哪個布局管理器都沒關系。 ```java Label lbl = new Label("Simple example"); ``` 創建了一個新的`Label`組件。 標簽顯示不可編輯的文本。 ```java lbl.setDescription("This is a Label component"); ``` 通過`setDescription()`方法，我們為標簽組件添加了一個工具提示。 ```java layout.addComponents(lbl); ``` 標簽通過`addComponents()`方法添加到布局中。 ```java setContent(layout); ``` 最后，使用`setContent()`將布局添加到 UI。 ```java @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true) @VaadinServletConfiguration(ui = MyUI.class, productionMode = false) public static class MyUIServlet extends VaadinServlet { } ``` 從此代碼摘錄中可以看到，Vaadin 框架是基于 Java Servlet 技術構建的。  圖：Vaadin `Label` 在屏幕截圖中，我們可以看到`Label`組件及其工具提示。 在本教程中，我們介紹了 Vaadin 框架。 您可能也對相關教程感興趣： [Vaadin `Button`教程](/vaadin/button/)， [Vaadin `CheckBox`教程](/vaadin/checkbox/)， [Vaadin `ComboBox`教程](/vaadin/combobox/)， [Vaadin `TextArea`教程](/vaadin/textarea/)， [Vaadin 滑塊教程](/vaadin/slider/)， [Java 教程](/lang/java/)。