首页 | 新闻 | 新品 | 文库 | 方案 | 视频 | 下载 | 商城 | 开发板 | 数据中心 | 座谈新版 | 培训 | 工具 | 博客 | 论坛 | 百科 | GEC | 活动 | 主题月 | 电子展
返回列表 回复 发帖

使用 Vaadin 实现全堆栈 Java Web 开发(5)

使用 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 个内置主题,您可以随时在它们之间切换。这些内置主题是    valoreindeerchameleonruno。在    WebContent/themes/declarativeui/declarativeui.scss    中进行查找。更改在该文件末尾处指定的主题值可以更改应用程序使用的主题。
您可轻松地在   中查找几乎无限多种现成的      Vaadin。
返回列表