电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛

标题: 使用 Vaadin 实现全堆栈 Java Web 开发（3） [打印本页]

作者: look_w 时间: 2018-11-14 18:51 标题: 使用 Vaadin 实现全堆栈 Java Web 开发（3）

创建并运行您的第一个 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 组件，但操作基本上仍与第一个示例相同。

欢迎光临电子技术论坛_中国专业的电子工程师学习交流社区-中电网技术论坛 (http://bbs.eccn.com/)