XPages 开发实践:开发通用的 Tree View 定制控件

作者:詹 永华, 软件工程师, IBM 中国软件开发中心 WPLC
杨 志磊, 高级软件工程师, IBM 中国软件开发中心 WPLC
张 世佳, 软件工程师, IBM 中国软件开发中心 WPLC

本文详细介绍了如何使用 Lotus® Domino Designer 8.5 中的 XPages 开发一个通用的 Tree View 风格定制控件,用来展现 Domino 视图的层次结构。通过本文,读者可以应用新一代的 XPages 技术,在基于 Domino 的 Web 应用中开发灵活、可复用的用户定制控件,并且能够了解 XPages 是如何方便地应用 Dojo 工具包 和 JavaScript. 类库。

背景简介

这个部分将会对本文中所使用的相关技术做简要的介绍。读者如需了解更详细的内容,可以访问 IBM 或相关组织的网站。

Lotus 软件试用下载

立即下载最新版本的 IBM Lotus Notes 和 Domino 试用软件,尝试利用 XPage 技术开发第一个 Domino Web 2.0 应用程序。

  • 试用版下载:Lotus Domino 8.5

  • 试用版下载:IBM Lotus Notes 8.5 和 Domino Designer 8.5

XPages:Domino 8.5 强大的 Web 设计元素

XPages 是 IBM Lotus Domino 8.5 中新增的一个功能强大的设计元素,可以充分利用它为我们的项目呈现 Web 客户端用户界面。XPages 利用一种新的 JSF(Java Server Face) 呈现引擎,与传统的 Domino Web 开发相比较,XPages 无疑是一个强大的 Web 设计元素。

Domino 8.5 为用户提供了集成 Eclipse IDE 的可视化开发环境。使用 XPages 开发基于 Domino 的 Web 应用,可以获得“所见即所得”的用户体验。对 XPages 中的每一个页面、控件、对象,我们都可以直接以可视化的方式修改它们的属性,并且即时预览;相应的,对象所支持的事件,XPages 也提供了分门别类的向导,帮助用户编辑和管理事件的响应脚本。

XPages 更大的优势体现在对 Domino 数据库的数据绑定。我们可以为每一个页面或者内嵌面板创建一个“数据源”,这个数据源可以是 Domino 数据库的一个文档或视图。然后,通过简单的操作就可以将数据源中的数据,如文档域值,动态绑定到 Web 页面的对象上。当然,通过编写脚本,我们还可以对数据计算处理之后再将其与页面元素绑定。

不仅仅是这样,对于习惯了开发 Agent 来操作 Domino 数据的用户来说,XPages 提供了灵活的可编程性和可扩展性。用户可以通过集成的 Eclipse IDE 开发自己的 Java 函数库,然后使用 XPages 支持的服务器端 JavaScript. 来调用这些 Java 函数,为客户端生成用户想要的数据。

在本文中,我们介绍了如何应用 XPages 和 Domino 包含的 Dojo 1.1.1 工具包开发一个通用的 XPages 定制控件,使用 Dojo 的 Tree Widget 来展现传统 Domino 视图的层次关系。在介绍方法的过程中,相信用户可以领略到前述 XPages 的强大功能和灵活性。

Domino 视图

Domino 视图是文档集合的列表,它丰富的层次结构和表现力使它成为 Domino 数据库浏览的强大工具。与文档一样,Domino 视图既支持 Notes 客户端的访问方式,也支持 Web 浏览方式。(在 Designer 中打开“视图 > AllExpences”,在工具栏中选择“在 Web 浏览器中预览”。)缺省的 Web 视图已经远不能满足 Web 2.0 用户的需求。更不方便的是,它的数据源和页面格式完全决定于数据库中已有的视图, 用户不能做灵活定制。于是很多 Domino Web 应用开发人员都会选择开发自己的 Web 视图,在传统的 Domino Web 开发中,这并不是一件容易的事情。

Dojo 和 dijit.Tree

Domino 中提供了 Dojo 工具包,可以在服务器的(C:\IBM\Lotus)\Domino\data\domino\js\ 目录下找到它。在 XPages 中使用 Dojo toolkit,我们可以轻松地为 XPage 页面加入 Web 2.0 元素,如 Widget、动画等等。

Dojo 是一个强大的面向对象、开源的 JavaScript. 工具库。Dojo 为 Web 应用的开发提供了大量基于 DHTML、CSS 和 JavaScript. 等技术的客户端组件。Dojo 项目开发的最初目标是解决开发 DHTML 应用程序遇到的那些长期存在的历史问题。 如:跨浏览器问题。所以使用 Dojo,更容易使您的 Web 页面具有动态能力,或在任何稳健的支持 JavaScript. 语言的环境中发挥作用。而 Dojo 在代码质量、运行性能以及文档支持等方面在同类的开发项目中都可说是首屈一指。本文中将会应用的 dijit.Tree 对象就是 Dojo 中用来显示树状层次结构的 Widget。它使用的数据源是 JSON 格式的数据。

JSON

JSON(JavaScript. Object Notation) 是一种轻量级的数据交换格式。易于人阅读和编写。同时也易于机器解析和生成。它基于 JavaScript. 的一个子集。

JSON 对象是一个无序的“‘名称 / 值’对”集合。一个对象以“{”开始,以“}”结束。每个“名称”后跟一个“:”,“‘名称 / 值’对”之间使用“,”分隔。JSON 数组是值(value)的有序集合。一个数组以“[”开始,“]”结束。值之间使用“,”分隔。JSON 值(value)可以是双引号括起来的字符串(String)、数值 (number)、true、false、null、对象 (object) 或者数组 (array)。这些结构是可以嵌套的。

系统框架和方法

在开始所有的步骤之前,我们有必要先总体介绍一下本章中涉及的 XPages 元素和它们的关系。如服务器端 / 客户端 JavaScript、Java 类、CSS 的开发和使用等等。

图 1,服务器端的 Domino 数据库设计元素和客户端 Web 页面运行时的元素被列举了出来。XPage 页面中的 DIV 对象将被解析成客户端的 Dojo 对象。由图示,我们也可以清楚地看到关于它的数据(1),动作(2)和外观(3)的定义。


图 1. 系统框架

Dojo 对象

在 XPage 页面中,我们定义一个 DIV 映射相应的 Dojo 对象。主要有两种方法可以将 DIV 和 Dojo 对象进行绑定。

其一,在 DIV 中直接使用‘ dojotype ’属性定义 Dojo 对象类型,如下例定义了一个 dijit.Tree 对象,也就是我们通常说的 Dojo Tree Widget。


清单 1. 定义 dojo 对象

				 
dojoType="dijit.Tree" id="mytree" model="continentModel" showRoot="false">

其二,在 XPges 页面中指定 DIV 的 id,然后使用客户端 JavaScript. 在页面加载时通过对象 id 实现动态绑定,如下例将一个 jox.charting.Chart2D 对象绑定到了一个 DIV 对象上。


清单 2. 动态绑定 dojo 对象

				 

                    

你可能感兴趣的:(javascript,json,java,ViewUI)