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

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

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

Vaadin 的声明性 UI您可以在一个特殊格式的 HTML Vaadin 设计文档中指定所有组件及其包含关系，而不是采用一次编写一行的方式使用 Java 编程语言构造 UI。Vaadin 可以阅读此 HTML 文档，并为您一次生成整个 UI。
此外，一个可视的拖放式 Vaadin 设计器工具也可用于创作 UI 设计文档，无需编写一行 Java 代码或 HTML。图 8 显示了使用中的设计器。
图 8. Vaadin 的可视拖放式 UI 设计器

对于 UI 设计人员和应用程序开发人员相互独立工作的商店，此功能可能特别适用。
下一个示例创建了与 article-viewer 应用程序完全相同的 UI，但现在使用的是一个声明性的 HTML 设计文档而不是 Java 代码来指定 UI。
将 DeclarativeUI.zip 项目导入到 Eclipse 中，并检查 ArticleViewer.html 设计文档，如清单 3 所示。此 Vaadin HTML 设计文档指定了 UI 和布局。将此代码与清单 2 中的代码进行比较，查看二者的相似之处。
清单 3. Vaadin HTML 设计文档

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

<!DOCTYPE html>
<html>
<head>
  <meta charset="UTF-8" name="design-properties" ...
</head>
<body>
  <v-vertical-layout size-full="true">
   <v-horizontal-layout size-full="true">
      <v-table _id="table" caption="Select article"
         width-auto height-full>

      </v-table>
      <v-embedded _id='e' caption="Article view"
      source="http://www.ibm.com/"
      size-full :expand>

   </v-horizontal-layout>
  </v-vertical-layout>
</body>
</html>

自定义组件基于 ArticleViewer.html 设计文档读取和实现 UI 的代码位于 ArticleViewDesign.java（一个自定义组件）中。这个类也是用数据填充表和挂起事件处理程序的地方。清单 4 显示了如何操作。
清单 4. 使用一个声明性 UI 设计文档进行处理

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

public ArticleViewDesign() {
   Design.read("ArticleViewer.html", this);

   table.addContainerProperty("Year", String.class, null);
   table.addContainerProperty("Article",  String.class, null);

   int i  = 1;
   for (Object[] row: listdata ) {
      table.addItem(getRowData(row), i++);

   }
   table.setSelectable(true);
   table.setImmediate(true);
   e.setType(Embedded.TYPE_BROWSER);
   e.setSource(new ExternalResource(getURL(listdata[0])));
   table.addItemClickListener(new ItemClickListener(){

      @Override
      public void itemClick(ItemClickEvent event) {
         // TODO Auto-generated method stub
         System.out.println("ID is " + event.getItemId());
         e.setSource(new ExternalResource(getURL(listdata
            [Integer.parseInt(event.getItemId().toString()) - 1])));

      }

   });
}

实例化自定义的 ArticleView 组件，并通过 DeclarativeUI Java 类将其嵌入到 UI 中，这个 Java 类还扩展了 com.vaadin.ui.UI，而且包含一个 VaadinServlet，就像其他示例一样。清单 5 显示了 DeclarativeUI.java。
清单 5. 集成自定义组件的 UI 创建类

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

public class DeclarativeUI extends UI {

@WebServlet(value = "/*", asyncSupported = true)
@VaadinServletConfiguration(productionMode = false, ui =
   DeclarativeUI.class)
public static class Servlet extends VaadinServlet {
}

@Override
protected void init(VaadinRequest request) {

   setContent(new ArticleViewDesign());

}
}

使用 Vaadin 主题立即更改应用程序的外观您会注意到，编程版本和声明性版本的应用程序的外观是不同的，因为这两个版本都使用了主题。主题是用于自定义应用程序外观的 CSS 或 Sass 代码，可从独立于应用程序代码的其余部分进行使用。
Vaadin 提供了 4 个内置主题，您可以随时在它们之间切换。这些内置主题是 valo、reindeer、chameleon 和 runo。在 WebContent/themes/declarativeui/declarativeui.scss 中进行查找。更改在该文件末尾处指定的主题值可以更改应用程序使用的主题。
您可轻松地在中查找几乎无限多种现成的 Vaadin。

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