使用 Vaadin 实现全堆栈 Java Web 开发（3）

look_w

创建并运行您的第一个 Vaadin 应用程序 按照以下步骤在 Eclipse 中创建 Vaadin starter 应用程序：

• 选择 File > New > Other > Vaadin > Vaadin 7 Project，如图 3 所示。
  
  图 3. 在 Eclipse 中创建一个 Vaadin 项目
• 将您的项目命名为 FirstProject，然后选择Project > Build                              Project。如果您使用的是 JDK 1.7，那么您可能需要调整 Eclipse 项目的某些方面，使之包含 Java 1.7 而不是                              1.8。
• 突出显示 Enterprise Explorer 窗格中的项目，右键单击它，选择 Run As > Run on                                server，然后选择 Tomcat 8 服务器来运行您的应用程序。

在创建项目时，会生产一个应用程序和两个 Vaadin 组件：VerticalLayout 和 Button。图 4                                  显示了运行中的应用程序。每次单击用户界面中的按钮时，都会创建一个新的 Vaadin Label 组件。这个简单的应用程序非常适合用来了解 Vaadin                                  开发的雏形。
图 4. 通过向导生成的 Vaadin starter 应用程序
组件的组成部分图 5 显示了组件的组成部分。一个 VerticalLayout 包含一个按钮。在单击 Click Me                                    button 时，可以创建一个或多个 Label 并将它们添加到 VerticalLayout 中。
图 5. 组件的组成部分清单 1 显示了图 5 中用线圈出的代码。
清单 1. 已生成的 skeletal                                      应用程序中的代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20

public class FirstprojectUI extends UI { @WebServlet(value = "/*", asyncSupported = true) @VaadinServletConfiguration(productionMode = false, ui = FirstprojectUI.class) public static class Servlet extends VaadinServlet {     } protected void init(VaadinRequest request) {    final VerticalLayout layout = new VerticalLayout();    layout.setMargin(true);    setContent(layout);    Button button = new Button("Click Me");    button.addClickListener(new Button.ClickListener() {       public void buttonClick(ClickEvent event) {          layout.addComponent(new Label("Thank you for clicking"));       }    });    layout.addComponent(button); }

您在扩展了抽象的 com.vaadin.ui.UI 类的一个或多个类中构建您的 UI。用户界面是在 init()  方法中创建的。请注意，Servlet 类周围的 @WebServlet 注释（来自  com.vaadin.server.VaadinServlet）将服务于您创建的用户界面并管理它。
Vaadin 中的事件处理在清单 1 中，button.addClickListener() 添加了一个对按钮单击的回调。在这种情况下，该按钮上的单击侦听器只会创建一个新的    Label 组件和消息 "Thank you for clicking" ，并将它们添加到    VerticalLayout 组件。"Thank you for clicking" 的每一个新行都会出现在现有标签的下面。
下一个示例会更加深入，需要一些更复杂的 Vaadin 组件，但操作基本上仍与第一个示例相同。