Vaadin 简介

        Vaadin 是一种 Java Web 应用程序的开发框架, 其设计目标是便利地创建和维护高质量的 Web UI 应用程序. Vaadin 支持两种不同的开发模式: 服务器端开发和客户端开发. 服务器端开发方式是这二者中更为强大的一种. 它能帮助开发者忘记 Web 程序的各种实现细节, 使得 Web 应用程序的开发变得就象过去使用便利的Java开发工具(如AWT, Swing, SWT)来开发桌面应用程序一样, 甚至更简单.

     

   "Vaadin 应用程序架构” 描述了使用 Vaadin 开发的 Web 应用程序的基本架构. 服务器端应用程序的架构包括 服务器端框架, 和 客户端引擎. 客户端引擎以 JavaScript 代码的形式在浏览器内运行, 它负责呈现 UI , 并把用户操作发送到服务器端. 应用程序的 UI 逻辑则以 Java Servlet 的形式在 Java 应用程序服务器内运行.

        Vaadin 框架将 UI 组件和它的具体呈现非常清楚地分离为不同的部分, 因此允许我们分别开发这两部分. 它的方案是使用 theme, theme 使用 CSS 和 HTML 页面模板(可选)来控制 UI 组件的具体呈现. Vaadin 提供了非常完善的默认 theme, 所以我们通常并不需要做太多的定制, 但只要需要, 我们总是可以自由地定制 UI 组件的外观.

---

遵照软件业的悠久传统, 在学习一个新的开发框架时, 先来写写著名的 "Hello World!". 首先, 我们使用最基本的服务器端 API.

import com.vaadin.server.VaadinRequest;
import com.vaadin.ui.Label;
import com.vaadin.ui.UI;

@Title("My UI")
@Theme("valo")
public class HelloWorld extends UI {
    @Override
    protected void init(VaadinRequest request) {
        // Create the content root layout for the UI
        VerticalLayout content = new VerticalLayout();
        setContent(content);

        // Display the greeting
        content.addComponent(new Label("Hello World!"));

        // Have a clickable button        
        content.addComponent(new Button("Push Me!",
            new ClickListener() {
                @Override
                public void buttonClick(ClickEvent e) {
                    Notification.show("Pushed!");
                }
            }));
    }

}

源代码解释：一个 Vaadin 应用程序包含一个或多个 UI, UI 由 com.vaadin.ui.UI 类继承而来. 一个 UI 就是 Vaadin 应用程序运行时所在的 Web 页面的一部分. 在同一页面中, 一个应用程序也可以包含多个 UI, 在 portal 中更是如此, 在浏览器的不同窗口或不同 tab 中当然也是如此. 一个 UI 会关联到一个用户 session, 而 session 会为每一个使用这个应用程序的用户单独创建. 在我们的 Hello World UI 中, 当用户访问页面时会发生对应用程序的初次访问, 此时 session 就被创建出来, init() 方法就在这个时候被调用。

以上代码中的按钮及其监听事件部分可以简写为：（使用lambda表达式）

content.addComponent(new Button("Push Me!",
    event -> Notification.show("Pushed!")));

如果要开发一个纯客户端应用程序, 你可以非常简单地输出 Hello World 文字, 而且开发语言仍然使用 Java, 如下:

public class HelloWorld implements EntryPoint {
    @Override
    public void onModuleLoad() {
        RootPanel.get().add(new Label("Hello, world!"));
    }

}

这个例子中我们没有设置页面标题, 因为标题通常由上述代码执行时所在的 HTML 页面来定义. 这个应用程序将被 Vaadin 客户端编译器 (或者 GWT 编译器)编译为 JavaScript. 这种方法通常用来开发客户端 widget, 然后供服务器端 Vaadin 应用程序使用。