原文: 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 框架介绍 - 图1

图:Vaadin 新项目

安装 Vaadin 插件后,NetBeans 中将出现一个新的 Vaadin 项目类别。 要创建一个新的 Vaadin 项目,我们转到File / New Project / Vaadin并选择Vaadin Web Application Project

Vaadin 简单示例

以下是一个简单的 Vaadin 应用,该应用使用 Vaadin Label组件显示文本。

  1. $ tree
  2. .
  3. ├── nb-configuration.xml
  4. ├── pom.xml
  5. ├── README.md
  6. └── src
  7. └── main
  8. ├── java
  9. └── com
  10. └── zetcode
  11. └── simple
  12. └── MyUI.java
  13. ├── resources
  14. └── README
  15. └── webapp
  16. ├── META-INF
  17. └── context.xml
  18. └── VAADIN
  19. └── themes
  20. └── mytheme
  21. ├── addons.scss
  22. ├── favicon.ico
  23. ├── mytheme.scss
  24. └── styles.scss

这是 Vaadin Web 应用的项目结构。 请注意为我们自动创建的主题。

MyUI.java

  1. package com.zetcode.simple;
  2. import javax.servlet.annotation.WebServlet;
  3. import com.vaadin.annotations.Theme;
  4. import com.vaadin.annotations.VaadinServletConfiguration;
  5. import com.vaadin.server.VaadinRequest;
  6. import com.vaadin.server.VaadinServlet;
  7. import com.vaadin.ui.Label;
  8. import com.vaadin.ui.UI;
  9. import com.vaadin.ui.VerticalLayout;
  10. @Theme("mytheme")
  11. public class MyUI extends UI {
  12. @Override
  13. protected void init(VaadinRequest vaadinRequest) {
  14. VerticalLayout layout = new VerticalLayout();
  15. Label lbl = new Label("Simple example");
  16. lbl.setDescription("This is a Label component");
  17. layout.addComponents(lbl);
  18. setContent(layout);
  19. }
  20. @WebServlet(urlPatterns = "/*", name = "MyUIServlet", asyncSupported = true)
  21. @VaadinServletConfiguration(ui = MyUI.class, productionMode = false)
  22. public static class MyUIServlet extends VaadinServlet {
  23. }
  24. }

MyUI是应用入口点。 UI 可以是浏览器窗口(或选项卡),也可以是嵌入 Vaadin 应用的 HTML 页面的一部分。

  1. @Theme("mytheme")

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

  1. VerticalLayout layout = new VerticalLayout();

Vaadin 中的组件放置在布局管理器中。 VerticalLayout将组件放在一列中。 由于我们只有一个Label组件,因此选择哪个布局管理器都没关系。

  1. Label lbl = new Label("Simple example");

创建了一个新的Label组件。 标签显示不可编辑的文本。

  1. lbl.setDescription("This is a Label component");

通过setDescription()方法,我们为标签组件添加了一个工具提示。

  1. layout.addComponents(lbl);

标签通过addComponents()方法添加到布局中。

  1. setContent(layout);

最后,使用setContent()将布局添加到 UI。

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

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

Vaadin 框架介绍 - 图2

图:Vaadin Label

在屏幕截图中,我们可以看到Label组件及其工具提示。

在本教程中,我们介绍了 Vaadin 框架。 您可能也对相关教程感兴趣: Vaadin Button教程Vaadin CheckBox教程Vaadin ComboBox教程Vaadin TextArea教程Vaadin 滑块教程Java 教程