在 Lotus Domino Designer 中利用 XPages 的威力

如何让 Domino 应用程序支持 Web 2.0

XPages 是 Domino Web 开发人员的技术工具箱中最近新增的一项技术,可以说是到目前为止最强大、最革命性的一项技术。利用 XPages 可以实现以前认为在 Domino 应用程序开发环境中无法实现的功能。有了 XPages,可以很容易地在现有应用程序中创建 Web 2.0 用户体验。为了证实 XPages 的威力,本教程向大家介绍如何让个人地址簿 Domino 应用程序模板支持 Web 2.0。

Chris Toohey, 首席解决方案架构师, Clearframe

作为 DominoGuru.com(这是一个以 Lotus Notes/Domino 为主题的“技巧与提示”网站和博客)大家熟悉的开发人员和网络管理员,Chris Toohey 是 Clearframe 的首席解决方案架构师,专长是将 IBM Lotus Notes/Domino 与其他企业级解决方案集成。自从 1998 年进入 IT 行业以来,Chris 以其不同寻常的方法、前卫的思想,以及独到的分析并用标新立异的解决方案解决特定的问题,为自己赢得了专家的称谓,同时赢得了大量忠实的客户。



2009 年 3 月 24 日

开始之前

本教程针对的是有经验的 Domino Web 应用程序开发人员,他们是最新接触 XPages,并最希望了解 Domino Web 环境的这一增强可以为现有 Domino 应用程序做些什么的人群。尽管本教程只介绍几个基本的 XPage 开发主题,但是要涉及到一些常见的 Domino Web 应用程序开发技术。

关于本教程

XPage 功能是最新的 Domino Browser Client 设计元素。利用 XPages,Domino Web 应用程序开发人员既可以扩展当前 IBM® Lotus® Notes 和 Domino 应用程序的功能及终端用户体验,也可以快速创建全新的富 Web 应用程序 —— 并且全都遵循当前 Web 开发标准。XPages 是通过 Java™Server Faces (JSF) 技术交付的,为新手和经验丰富的 Web 应用程序开发人员都提供了几乎无限制的数据结构和功能,这些以前在 Lotus Notes 和 Domino 应用程序中是不可得到的。

XPages 的优点之一是,开发人员永远不需要真正理解 JSF 技术,就可以利用它们的优势。JSF 用我们 Domino 开发人员理解的术语来说,就相当于一个定制类呈现引擎。它解释开发人员提供的标签,基于与 JSF 定制类库匹配的预定义呈现逻辑,评估所需的最终结果。

为了更好地证实 XPages 的威力,本教程用到了 Domino 自带的个人地址簿模板。显然,个人地址簿模板并不设计为以 Web 浏览器客户端作为主要用户。但是这个模板非常适合作为本教程的例子。

尽管个人地址簿模板不只是存储联系人和联系人组信息,但是本教程只关注该应用程序模板的这两个方面。具体来说,将会使用 XPages 来提供一个基于 Web 2.0 的联系人和联系人组管理模块以及进入个人地址簿模板的导航入口点。

本教程包括以下内容:

  • XPage Domino 设计元素概述
  • 创建一个能够工作的、View 类型的示例 XPage
  • 创建一个能够工作的、NotesDocument 类型的示例 XPage
  • 创建一个多用途的、功能完全的 XPage,在单个 XPage 内同时显示 View 类型的和 Document 类型的 XPage 对象

前提条件

如果您不熟悉 Lotus® Domino Server 8.5 Public Beta、Lotus Notes 和 Domino Designer in Eclipse Client 安装过程及所需的附加信息,请在继续阅读之前,使用您的 IBM ID 和密码(或者完成简单的注册),查看针对您的特定环境的 版本说明

系统需求

XPages 功能需要 Domino HTTP Server 和 Domino JSF,它们可在 Domino Designer in Eclipse 8.5 Client 中得到。下载以下软件:

对于本教程,可以使用打包在 Lotus Notes 8.5 Public Beta 中的个人地址簿模板 (pernames.ntf),或者像前面提到过的一样,使用任何 Lotus Notes Client Release 6.5 或更高版本。该模板将用作我们要用 XPages 来增强的 Domino 应用程序模板。您要在自己的 Domino Application Server 的上创建一个新的个人地址簿实例,以便您在家里完成本教程中详细讨论的修改。


构建一个 View 类型的 XPage

我们首先从个人地址簿模板取出联系人。本节创建第一个 XPage,用于显示个人地址簿应用程序中 People 视图的内容。

第一个 XPage

本教程的构建部分开始于创建一个新的 XPage,这会打开图 1 所示的 New XPage 窗口。这个 XPage 用于显示个人地址簿应用程序中的联系人,带有各种 Web 2.0 友好的控件和功能。应用程序开发中的第一个程序通常命名为“Hello World”,但是这里的第一个 XPage 命名为“Contacts”,原因有二:

  1. 不是作为例子来开发。而是有一个预定的需求:让现有的、可以工作的、功能完善的 Domino 应用程序支持 Web 2.0。
  2. 您很快就会注意到,针对 XPages 存在着一些命名方案的限制,比如说不能让 XPage 的名称中包含空格,如图 1 所示。
图 1.New XPage 窗口
New XPage 窗口

在 New XPage 窗口单击 OK,就会在其 Design 视图中出现一个空白 XPage。

大多数所见即所得的内容编辑器,尤其是 HTML 编辑器,都向开发人员提供所见即所得编辑器内容的源代码视图。XPages 也提供该选项,让开发人员可以在设计视图和源代码视图之间任意切换(参见图 2)。

图 2. Design 和 Source 面板切换
Design 和 Source 面板切换

对于本教程来说,不会花太多的时间在 Source 视图中,相反,将在 Rational Application Developer 友好的 Design 视图中完成所有设计更改。但是对于那些感兴趣的人来说,很容易切换到 Source 视图,查看已经为空白 XPage 生成的标签(参见图 3)。

图 3. Source 视图中为空白 XPage 生成的标签
Source 视图中为空白 XPage 生成的标签

可以看到,XPages 的 design 选项卡生成定制模式 XML,JSF 最终用其来在网络上呈现 XPages。

创建数据源

如果您的 Domino 应用程序具有一个视图或表单设计元素,您就差不多快有自己的数据源了。碰巧,个人地址簿模板具有几个视图和表单可供选择,所以下面我们来定义数据源。

  1. 在默认透视图中(Domino Designer in Eclipse 称之为布局),数据源可通过 Domino Designer on Eclipse 右侧栏中的 Data 选项卡(Data 调板)来定义(参见图 4)。
    图 4. 通过 Data 选项卡定义数据源
    通过 Data 选项卡定义数据源
  2. 一旦进入 Data 调板,就可以从所提供的下拉列表中选择一种数据源;但是因为这是第一个 XPage,所以需要定义第一个数据源。为此,从图 5所示的下拉菜单选择 Define Data Source
    图 5. 从下拉菜单定义数据源
    从下拉菜单定义数据源
  3. 这会打开 Define Data Source 窗口。在 Data source 列表中可以看到两个选项:Domino View 和 Domino Document。本教程中将要定义几个不同的数据源,但是对于本节,选择 Domino View
    图 6. 打开 define data source 窗口
    打开 define data source 窗口
  4. 一旦从 Define Data Source 窗口选择了 Domino View,窗口就更改为 Domino 视图特定的 data source 窗口,如图 7 所示。在这里,可以从所选的 Domino 应用程序(对于本教程,仍然保持为个人地址簿应用程序)选择一个视图。
    图 7. Domino 视图特定的 data source 窗口
    Domino 视图特定的 data source 窗口
  5. 定义好 Domino 视图设计元素之后,当然就可以重命名数据源了,但是对于本教程来说,保留默认的名称。因此,数据源名称保持为“people”。选择 OK。Define Data Source 窗口处理和创建在 Data 调板中指定的数据源,按照字母顺序列出每个数据源对象(参见图 8)。
    图 8. 按照字母顺序列出的数据源对象
    按照字母顺序列出的数据源对象

利用数据源创建 XPage viewPanels

既然有了自己的 People 数据源,下面就开始填充 contacts XPage。

  1. 选择数据源对象(Windows OS 上使用 Ctrl 键选择多个对象),并将它们拖放到 XPage 上(参见图 9)。
    图 9. 将数据源对象拖放到 XPage 上
    将数据源对象拖放到 XPage 上
  2. 选择以下数据源对象,对应于个人地址簿应用程序的 People 视图:
    • Name
    • Email
    • Phone
    • Company
    • Modified
    • Category
  3. 既然已经将数据源对象拖放到 contacts XPage,就可以看到,每个数据源对象都在类似于 Domino 视图的 XPages viewPanel 中创建了一列(一个 XPages viewColumn)。修改这个 viewPanel,以达到所需的结果(参见图 10)。
    图 10. 未排序的数据源对象
    每个数据源对象都创建了一列
    注意,数据源对象 viewColumns 保持按照字母顺序排序。为了匹配个人地址簿应用程序的 People 视图,重新排列这些 viewColumns,以便它们与 People 视图的顺序相符。
  4. 切换到 XPage Source 视图,因为 XPage viewPanel 和 viewColumns 很容易通过其 XML 结构修改,并且您可以立即重命名元素 ID。使用 Outline 调板(位于默认 Domino Designer in Eclipse 透视图的左下部分)来拖放,并通过树状对象和元素结构来重新排列 viewColumns(参见图 11)。
    图 11. Outline 面板和对象布置
    Outline 面板和对象布置

重新排列这些 viewColumns 之后,马上就可以看出 contacts XPage 与基于 People 视图的 viewPanel 之间的类似之处(参见图 12)。

图 12. 排序后的数据源对象
排序后的数据源对象

注意:如果希望保持表样结构,那么重新排列时既选中列标题,又选中列。

为了重复个人地址簿应用程序用户体验,修改特定的 XPage viewPanel 属性和特性。

XPage viewPanel 属性

XPage viewPanel 属性可用于设置包含在呈现集合中的 NotesDocuments(或 Domino Application 数据记录)的最大数量。viewPanel 属性也指定 XPage 数据源,定义 viewPager 位置,以及控制其他 viewPanel 设置。本教程将介绍如何修改几个 viewPanel 属性。图 13 展示了 viewPanel 属性,底部是 Maximum rows per page 首选项。

图 13. viewPanel 属性 —— maximum rows per page
viewPanel 属性 —— maximum rows per page

Maximum rows per page 值跟很多其他 XPage 属性值一样,可以设置为静态值或计算值,但是本教程将 maximum rows per page 值设置为 10。

联系人预览

既然已经在 viewPanel 中重新排列了 viewColumns 以匹配个人地址簿应用程序中的 People 视图,并且更新了 viewPanel 属性,下面就来看呈现在 Web 浏览器中的 People 视图,如图 14 所示。

图 14. 标准的 People 视图预览
标准的 People 视图预览

毫无疑问,视图的功能正常,但是默认的 Domino Design Element Web 浏览器客户端呈现达不到大多数用户目前期待的功能和样式方面的体验。图 15 显示了 contacts XPage 到目前为止的样子。

图 15. Contacts XPage 预览
Contacts XPage 预览

鉴于我们除了拖放了一些数据源对象到 XPage 上,其他什么也没做,该视图看起来已经够好的了,是吧?但是问题是,尽管可以看到 People 视图的内容,却不能对它们进行任何操作。我们需要在第一个 viewColumn 内容中创建一个链接,用于打开给定的 NotesDocument,这是下一节要介绍的任务。

定义 viewColumn 动作和高级属性

正如前面提到的,目前 contacts XPage 的 viewColumn 还不允许打开 NotesDocument。考虑将 Name viewColumn 的内容更改为一个可点击的链接,点击它将会以只读模式打开给定的 NotesDocument。从 Name viewColumn 的视图列属性中选择几个配置选项。

viewColumn 属性位于默认 Domino Designer on Eclipse 透视图底部的属性区域,并在 viewColumn 突出显示时变得可用。

图 16. viewColumn 属性 —— column display properties
viewColumn 属性 —— column cisplay properties

要控制允许您为集合中特定项打开 NotesDocument 的 viewColumn 属性,选中 Show values in this column as links。一旦选中,就可以指定 NotesDocument 的编辑状态,选择当通过该 viewColumn 中生成的链接打开时 NotesDocuments 是处于编辑模式还是阅读模式。视图列属性还允许您指定静态和计算风格的 viewColumn 信息、内容类型声明以及其他此类 viewColumn 属性。

XPage pager

XPages 中的 pager 是用于数据源集合导航的控件。这些 pager 控件允许特定的 viewPanel 导航、基于 Ajax 的集合导航以及自定义的 pager 类型。对于这里的 contacts XPage,我们将要配置 top 和 bottom 两个 pager,都使用一个有助于集合分页的预设主题,并支持基于 Ajax 的集合导航。

在 viewPanel 中选择 top pager,将显示 pager 首选项,位于默认透视图中 Domino Designer on Eclipse 客户端的底部。选择 Sample 4 作为 pager 样式,选中 Partial Refresh,这将允许您进行基于 AJAX 的集合导航、设置对齐,以及指定该 pager 将刷新 viewPanel(即 viewPanel1)的内容。

图 17. XPage pager 属性
XPage pager 属性

设置好 pager 首选项之后,Design viewPanel 就会显示一个示例 pager(参见图 18)。

图 18. XPage pager Design 面板预览
XPage pager design 面板预览

已经向 viewPanel 的页眉和页脚添加了 pager,下面我们来看一下 Contacts XPage,如图 19 所示。

图 19. XPage pager 浏览器预览
XPage pager 浏览器预览

第一个 XPage 错误

如果现在点击 Name viewColumn(前面已经指定为打开 NotesDocuments 的链接),那么将会得到如图 20 所示的错误消息。

图 20. XPage 错误示例
XPage 错误示例

viewColumn 链接的 URL 语法如下:http://server/pnab.nsf/$$OpenDominoDocument.xsp?databaseName=pnab.nsf& documentId=9D6&action=editDocument

尽管这个错误消息可能会让您认为存在一个与 pnab.nsf 有关的问题(这是示例个人地址簿应用程序的 OS 级别的名称),但是实际并不是这样的。将重点放在错误消息的第一行。为了阐述产生这个错误并导致您不能打开所请求的 NotesDocument 的实际问题,将 URL 更改为:http://server/pnab.nsf/$$OpenDominoDocument.xsp?documentId=9D6&action=editDocument

在上面的 URL 中,去掉了查询字符串中的 databaseName 属性和值。

这个修改后的请求 URL 产生的错误消息告诉您,JSF(XPage 呈现引擎)不能定位 XPage 以呈现 NotesDocument(参见图 21)。

图 21. XPage 错误示例 —— 修改后的 URL 命令
XPage 错误示例 —— 修改后的 URL 命令

要解决这个问题,只需创建一个 XPage,用来呈现 NotesDocument。此时一定要考虑到现在是处于 XPages 环境中,而不是在标准的 Domino Design Element 环境中。因为只定义了一个 View XPage,所以没有 NotesDocument XPage 来显示所请求的 NotesDocument。下一节就来创建这个 NotesDocument XPage。


构建 NotesDocument 类型的 XPage

前一节中我们创建了一个简单的 Domino View XPage,它允许我们在个人地址簿应用程序中阅读和分页 Domino 数据。本节我们将创建一个简单的 Domino Document XPage,用来呈现单个的 NotesDocument 内容以及发起基于 XPage 的用户界面与 Domino 数据之间的功能交互,在 Domino View XPage 和 Domino Document XPage 之间创建一个链接。

Domino Document 数据源

我们首先创建一个新的叫做 Person 的 XPage,以开始构建 NotesDocument XPage,用来从 Contacts XPage 呈现 NotesDocuments。遵循在 Contacts XPage 上创建 viewPanel 时相同的 Define Data Source 窗口提示,马上定义一个 Document 数据源。

图 22. Define data source 窗口 —— Domino document
Define data source 窗口 —— Domino document

当选择 Domino Document 时,注意针对 NotesDocument 的创建、修改和只读呈现,分别提供了不同的选项集合。将数据源名称更改为 Person,选择 Person Domino 表单设计元素,并将 Create document 选项更改为 Open document

一旦从数据源窗口更改了这些选项并选择 OK,就会在 Data 面板中看到匹配 person 表单的 NotesItems 的所有数据源对象。该选项让我们可以包含来自 people XPage 中 NotesDocument 的任何 NotesItem 值。

XPage 数据对象表

对于本例来说,保持 people XPage 相对简单,最初只包含以下数据源对象:

  • FirstName
  • LastName
  • MailAddress
  • OfficePhoneNumber
  • CompanyName
  • Categories

选择以上数据源对象,并使用它们来填充 Person XPage,通过拖放的方式创建一个 XPage 数据对象表。XPage 数据对象表对于 NotesDocument,就像 XPage viewPanel 对于 NotesView,并且为所添加的每一个数据源对象呈现一个“标签和编辑框”控件组合(参见图 23)。

图 23. XPage 数据对象表示例
XPage 数据对象表示例

跟 XPage viewPanel 一样,表行最初是按字母顺序列出的,需要按照更标准、更具逻辑性的顺序重新排列。同样,跟 viewPanel 中一样,这很容易在 Source 视图中或者通过 Outline 面板做到。

重新排列表行之后,添加一个 Edit 按钮控件,以便可以在 XPage-rendered NotesDocument 的只读和可编辑状态之间切换。要对只读和可编辑状态使用同一个 XPage,可修改按钮控件的动作及其标签。

向 XPage 数据对象表添加按钮控件

至此,通过拖放功能,为 viewPanels 和 Tables 创建了 XPage 数据对象,其实一直关注的都是 Data 面板。但是,Control 面板(位于 Domino Designer on Eclipse 默认 Eclipse 透视图中 Data 面板旁边的右侧栏面板上),包含各种用于 XPages 中可用的内容管理功能的控件。从 Control 面板,或者从 Create\Other Menu 选项,向表单添加一个简单的按钮控件。一旦添加到 XPage,我们就可以通过按钮控件属性来编辑按钮控件的标签及其功能参数(参见图 24)。

图 24. 按钮控件对象属性
按钮控件对象属性

如图 24 所示,从这里可以更改按钮控件实例名、标签和按钮类型。对于本教程,将按钮控件更改为一个 submit 按钮,更改它的名称、标签及按钮类型,以满足自己的特定需要。

使用 Person XPage

通过在 viewPanel 中设置 view 属性(参见图 25),再一次对 contacts XPage 进行一项首选项修改,以允许它利用 person XPage 呈现 NotesDocument 请求。

图 25. viewPanel view 属性
viewPanel view 属性

通过将 pageName 选项(名为 At runtime, open selected document using)设置为 Person,现在可以看到 person XPage 发挥作用了。为此,只要打开 contacts XPage,并在特定于想要打开的 NotesDocument 的 name viewColumn 中的值上点击即可(参见图 26)。

图 26. 针对 NotesDocument 编辑模式呈现的 Person XPage
针对 NotesDocument 编辑模式呈现的 Person XPage

现在已经可以用编辑模式在 XPages 中打开 NotesDocuments 了,下面就来为 person XPage 配置提交后的重定向。在非 XPages Domino Web 开发中,这通常通过 $$Return 预留 FIELD 来处理。但是,该功能可直接从 person XPage 首选项进行配置,如图 27 所示。

图 27. XPage submission redirection 选项
XPage Submission Redirection 选项

通过设置 navigationRules 首选项,在成功提交或取消时重定向到 contacts XPage,现在具有了联系人导航和 person NotesDocument 管理的功能完善的 XPages 表示。但是 XPage 功能的这个例子实际上回避了这样一个问题:“现在我可以用常规 Domino Web 开发做到这一点,为何还要选择使用 XPages 呢?”下一节将会回答这个问题。


添加 XPage 前端

到目前为止,我们已经回顾了一些非常基本的 XPage 例子,即为基于 Domino View 和 Domino Document 的数据源呈现数据对象。本节将使用这些技术,并结合一些新的控件对象,为基于 Domino Web 的个人 Web 应用程序创建一个功能完善的 XPage 前端,从而允许新 Web 2.0 应用程序的用户输入他们自己的联系人信息。

定义应用程序用户界面

现在已经超越了对个人地址簿应用程序中现有的功能进行简单的重现,下面我们使用 XPages 提供的更为高级的特性和功能,来创建一个简单却有用的基于 Web 的前端。

首先定义具有预期最终效果的基于 XPages 的用户界面:

  • 一个简单的主页面,在列表中显示匹配 people 视图的联系人信息
  • 在视图中包含每个联系人的 ContactPhoto
  • 带有确认提示的多文档删除
  • 不用到表的基于 CSS 的布局
  • 简单的联系人表单,用于进行快速的联系人输入

下一节介绍如何使用 XPages,以便用户体验感觉像应用程序。

主页面预览

这可能会被认为是欺骗,但是我将在您开始构建任何主页面之前展示最终效果,能够看到自己正在构建的东西让您可以更好地设想整个架构过程(参见图 28)。

图 28. Index XPage 主页面预览
Index XPage 主页面预览

该主页面布局基于为 1024x768 分辨率显示器设计的一种“fixed-layout”。

样式和布局

为了构建主页面,创建一个新的名为 index 的 XPage。

创建一个名为 main.css 的新样式表资源,用于控制基于 CSS 的布局以及 index XPage 的整个设计和呈现。保持这些设计元素(即 index XPage 和 main.css 样式表)在 Domino Designer on Eclipse 客户端打开,因为稍后将为本教程的其余部分处理它们。

要向 index XPage 添加样式表,可使用 Add Style Sheet to Page 窗口,该窗口位于 XPage properties 面板的 resources 部分(参见图 29)。

图 29. XPage Add Style Sheet 窗口
XPage Add Style Sheet 窗口

另外,也可以直接通过图 30 所示的 source 面板添加样式表。

图 30. XPage 样式表包含标签
XPage 样式表包含标签

从这里,创建 DIV 控件对象。这些 DIV 控件对象(或者 DIVs)在运行时呈现为 HTML DIV 元素,并用于基于 CSS 的布局的构造。一旦对 source 面板比较熟悉了,再加上 XPages source 面板提前键入功能的帮助,添加 DIV 控件对象就像在您喜欢的文本编辑器中编写标签一样容易(参见图 31)。

图 31. DIV 控件对象标签示例
DIV 控件对象标签示例

另外,也可以从 Domino Designer on Eclipse 客户端中对象的 properties 面板修改这些控件对象属性,如 All Properties 部分中的图 32 所示。

图 32. ID 和对应的 styleClass
ID 和对应的 styleClass

向 index XPage 添加了 DIV 控件对象之后,再应用 main.css 样式表中的一些基本布局样式。我们从一些非常标准的 CSS 开始,如清单 1 所示。

清单 1. 标准的 CSS
body {  
background-color: #666;  
margin: 0px;  
padding: 0px;  
text-align: center;  
}  
div.maincontainer {  
width: 1000px;  
margin: 0px auto;  
background-color: #fff;  
}  
div.maincontainer div.mainbody div.navigator {  
float: left;  
clear: left;  
width: 250px;  
}  
div.maincontainer div.mainbody div.content {  
margin-left: 270px;  
width: 725px;  
clear: right;  
}

Domino Designer on Eclipse 中 XPages 最有用的特性之一是,CSS 在 Design 面板中的实时呈现。该特性允许我们调整和修改 DIV Container Objects 的布局,以满足特定应用程序的需要。不再需要像对样式和布局设计使用 CSS 的 Domino 开发人员那样,经常进行“保存、切换、预览”重复性操作。

图 33. Index XPage 主页面 —— Design 面板预览
Index XPage 主页面 —— Design 面板预览

从 index XPage 捕获的这个 design 面板展示了实时应用的基于 CSS 的布局。main.css 样式表使用标准 CSS 布局技巧的组合,让用户界面显示出“列”形式的外观。

New_Contact XPage

我们需要创建 person XPage 的一个副本,因为要修改这个 XPage 的设计,以满足特定的主页面需求。尽管这里可以使用 person XPage,但是我们想要保留这些示例,以作参考。创建一个新的 XPage,命名为 New_Contact,并复制以下数据源元素:

  • Type
  • FirstName
  • LastName
  • MailAddress
  • OfficePhoneNumber
  • CompanyName
  • Categories

添加完成后,创建一个名为 submitbutton 的简单的按钮控件对象。在 Button Properties 面板中,设置选项,并将 Button type 属性(值)设置为 Submit(参见图 34)。

图 34. 按钮控件对象属性
按钮控件对象属性

修改类型编辑框控件对象,设置默认值为 Person,就像 people 视图的 view 选择公式需要 Type NotesItem 等于“Person”一样。在 Edit Box Properties 面板的 data 部分修改默认值属性 (defaultValue)。

有了 New_Contact XPage,下面就可以将它包含在主页面中了。

用 Include Page 嵌套 XPages

XPages 既可充当表单,又可充当子表单设计元素,因为一个 XPage 可插入到另一个 XPage 中,这个特性允许在 XPage 开发中创建可重用的组件。使用这个 XPage 特性,在主页面上创建一个简化的嵌入式“New Contact”表单。

将光标放置在 navigator DIV 控件对象中,并从 Domino Designer on Eclipse application 菜单选择 Create\Container Controls\Include Page,从 Select Page 窗口选择 New_Contact XPage(参见图 35)。

图 35. XPage Include Page 窗口
XPage Include Page 窗口

该动作将 New_Contact XPage 嵌套在 navigator DIV 控件对象中。

另外,也可使用 controls 面板将 Include Page 控件对象拖放到 XPages 上,或者切换到 Source 面板并添加以下标签:<xp:include pageName="/New_Contact.xsp" id="include1"></xp:include>

再访 People 视图

在本教程前面,我们回顾了 viewPanel 简单的创建过程,其中定义了基于 Domino View 的数据源作为 People 视图,从而允许我们在 Contacts XPage 中显示 viewColumn 信息。但是 index XPage 要求我们创建两个附加的 viewColumns,其中包含当前不存在于 People 视图中的信息和功能。

我们需要创建的这两个附加的 viewColumns 是:

  1. 一个针对多文档处理的复选框选择,在本例中名为(简单的)viewColumn1。
  2. 一个显示每个联系人 ContactPhoto 图像的列,在本例中名为 viewColumn_Avatar。

因为我们对创建 viewPanels以及插入和布置 viewColumns 已经相当熟悉了,所以下面只给出主要步骤:

在 index XPage 上创建一个新的名为 viewbody_Contacts 的 viewPanel,并设置表 1中所示的以下 viewPanel 属性。

表 1. viewPanel 属性
ID:viewbody_Contacts
pageName:/Person.xsp
rows:10
value (Data Source):people
var (variable):entry

添加多文档删除

基于前面定义的主页面需求,我们想要能够选择单个或多个文档以便删除。为此,只需在 viewbody_Contacts viewPanel 的第一个 viewColumn 中使用复选框,并在嵌入式的 Image Resource 上使用一个简单的点击事件动作即可。这完美地阐释了 XPages 有多么强大,以及会节省 Domino Web 应用程序开发人员多少时间。太简单了,而 XPages 又使得这两项处理相当地强大!

在 viewColumns 中启用复选框

利用 viewColumn1 构建这个 Multiple Document Deletions Engine

要在 viewColumns 中启用复选框,可在 viewColumn Properties 面板的 View Column 部分修改 Column Display 属性(参见图 36),以便只显示 Check Box (showCheckBox = true)。

图 36. 通过 column display 属性设置的 Check box viewColumn 安排
通过 column display 属性设置的 Check box viewColumn 安排

该选项可在 All Properties 部分设置,也可在 source 面板中设置。

向图像资源添加动作

现在每个 viewColumn 项都有了复选框,下面给 XPage 上的元素或对象分配一个动作。添加一个简单的 Image Resource,并为该 Image Resource 定义一个动作。

从 Controls 面板拖放,或者从 Domino Designer on Eclipse Application 菜单选择,或者在 Source 面板中使用标签,以便在 XPage 上包含一个 Image Resource。Controls 面板或 Domino Designer on Eclipse application 菜单提供一个 Select Image 窗口,可从中选择 trash.gif Image Resource(参见图 37)。

图 37. Insert Image Resource 窗口
Insert Image Resource 窗口

一旦图像资源包含到 XPage 上,就可以通过 Events 面板添加 Event Action 了,Events 面板位于 Domino Designer on Eclipse 默认透视图的底部(参见图 38)。

图 38. Object Events 属性面板
Object events 属性面板

从图 38 可以看到,我们可以为给定的事件(在本例中是点击 Image Resource)添加动作。当从 Events 面板选择 Add Action 时,会出现 Edit Simple Action 窗口(参见图 39)。

图 39. Simple Action 窗口 —— Delete Selected Documents
Simple Action 窗口 —— Delete Selected Documents

这里的操作很简单,只要选择 Action 类别、Action(可以发现已经定义了 Delete Selected Documents!),将该动作绑定到 viewPanel,甚至定义确认提示文本。

一旦完成这一修改并构建了自己的 index XPage,就可以马上开始选择多个文档,点击垃圾桶图标,删除所选择的文档了。

viewColumn 内容的编程

针对 viewbody_Contacts viewPanel 的第二个需求是,显示个人地址簿应用程序中列出的联系人的 ContactPhoto。修改 viewColumn_Avatar 以显示 ContactPhoto,并添加一个 Event 动作以编辑模式打开给定的项(类似于所定义的 viewColumn_Name 链接动作)。

最初为 viewbody_Contacts viewPanel 定义了一个变量,具体来说是为 viewPanel 中的每个 NotesDocument 项定义 entry 作为变量名。现在使用该变量声明来获得有关 NotesDocument 项的信息,同时与标签结合使用,为每个 NotesDocument 项呈现一个简单的上下文敏感的 IMG 元素。

一旦选择了 viewColumn_Avatar,就可以定义它的 Column Display 属性,以将它的值呈现为 HTML (contentType = HTML)。然后可通过 All Properties 部分,选择它的 Data value (value),以使用 Computed 值(参见图 40)。

图 40. viewColumn computed value 属性
viewColumn computed value 属性

该动作引出脚本编辑器窗口(参见图 41),在该窗口中可使用 entry 变量获得当前 NotesDocument DocumentUniqueID 上的句柄 Database FilePath,并使用这些值来创建每个项的 IMG 元素。

图 41. XPage 脚本编辑器窗口
XPage 脚本编辑器窗口

这是一个非常简单的例子,展示了 XPages 中的技术和功能有多么简单。NotesDocument 上的句柄是该 NotesDocument 的任何 NotesItems、属性或任何信息的入口点。注意这些信息如何在运行时用于交付一些真正高级的功能。再次来看图 42中所示的完成的 Web 2.0 应用程序。

图 42. 完成的 index XPage 主页面示例
完成的 index XPage 主页面示例

构建和查看主页面现在会呈现预览结果:一个简单的 New Contact 表单,就在 Contacts 视图的旁边。这虽然是一个简化的 Person XPage,但是也提供多文档删除功能和单个文档编辑功能。

当然,这些例子也可以扩展,以允许附加的数据维护功能。但是主页面提供一个基于 XPage 的 Domino Web 应用程序用户界面的示例实现,功能完善。

最后要提醒一下。尽管本教程中没有介绍,但是在使用这里创建的这类例子之前,需要修改 Application Control List (ACL),以便:

  • 禁用匿名访问
  • 添加带有作者、编辑和删除权利的单个或成组的文档
  • 给每个用户功能需求分配适当的访问控制角色。

结束语

如果还不是很明白,请 下载 personaladdress.zip,其中包含完成的个人地址簿应用程序,已经在 XPages 的帮助下,修改成了 Web 2.0 应用程序。

查看整个示例应用程序,注意到其他 Control Object 类型包括:computed fields、paragraphs 和通过 Source 面板直接输入的 HTML 标签。所以对它进行仔细研究,好好玩味这个个人地址簿应用程序。XPages 是一种新技术,掌握它的最佳方式就是亲自使用!

在接下来的几个月,将会看到由 IBM Business Partners 和 Lotus Development Community 发布的 IBM Lotus Notes/Domino 8.5 版本的此类应用程序。


下载

描述名字大小
personal address book source codepersonaladdress.zip1.1 MB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Lotus
ArticleID=377993
ArticleTitle=在 Lotus Domino Designer 中利用 XPages 的威力
publish-date=03242009