使用 Vaadin 实现全堆栈 Java Web 开发（4）
|
- UID
- 1066743
|
使用 Vaadin 实现全堆栈 Java Web 开发（4）
构成更复杂的组件下一个例子中，会从示例代码中加载 ArticleViewer.zip 项目文件（参见 ）。图 6 显示了此示例中的 Vaadin 组件的组成部分。
图 6. article-viewer 应用程序中的 Vaadin 组件的组成部分 在图 6 中，VerticalLayout 包含 HorizontalLayout。该 HorizontalLayout 由左边的 Table 组件和右边的 Embedded 组件填充。
图 7 显示了 article-viewer 应用程序的 UI。该应用程序包括一个 Vaadin 表，在表的左边显示了一个文章列表和这些文章的出版年份。用户可以从列表中选择任何文章，以获取该文章并将其显示在右侧的一个 Embedded（浏览器）Vaadin 组件中。
图 7. 运行中的 article-viewer 应用程序
您会发现 ArticleViewer 类中的代码，该代码的组织结构和由 VaadinServlet 服务的方式与第一个示例中的代码（在该类的 init() 方法中创建 UI 的代码）相同，如清单 2 所示。
清单 2. article-viewer 应用程序的代码 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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
| @Override
protected void init(VaadinRequest request) {
final VerticalLayout layout = new VerticalLayout();
layout.setMargin(true);
setContent(layout);
HorizontalLayout horiz = new HorizontalLayout();
horiz.addStyleName("outlined");
Table table = new Table("Select article");
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);
horiz.setSizeFull(); horiz.addComponent(table);
final Embedded e = new Embedded("Article view", new ExternalResource(
getURL(listdata[0])));
e.setAlternateText("Article View");
e.setType(Embedded.TYPE_BROWSER);
e.setSizeFull();
horiz.addComponent(e);
horiz.setExpandRatio(e, 1);
table.addItemClickListener(new ItemClickListener(){
@Override
public void itemClick(ItemClickEvent event) {
e.setSource(new ExternalResource(getURL(listdata
[Integer.parseInt(event.getItemId().toString()) - 1])));
}
});
layout.setSizeFull();
layout.addComponent(horiz);
layout.setExpandRatio(horiz, 1);
}
|
演示快捷方式为了简化示例代码，我将数据设置和播种（seeding）细节放在相同的 UI 类中。事实上，重构它们并将它们分离到单独的类中是有一定道理的。
在清单 2 的代码中，行的选择是由 ItemClickEvent 侦听器处理的。在这种情况下，该处理程序会发现与被单击文章有关联的 URL，并设置 Embedded 组件的 source 属性，让文章得以显示。
还要注意的是，在清单 2 中，通过迭代 listdata 元素组成的一个数组来填充表数据。这使得我们的代码变得既简短又简单。相同的 Vaadin Table 元素也支持数据绑定，支持您将表数据绑定到后端数据库内容。 |
|
|
|
|
|
