在 Lotus Domino Designer 中利用 XPages 的威力

第 4 页，共 10 页 文档选项 讨论 样例代码 对本教程的评价 帮助我们改进这些内容

添加 XPage 前端

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

定义应用程序用户界面

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

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

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

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

回页首

主页面预览

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

该主页面布局基于为 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）。

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

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

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

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

					
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 开发人员那样，经常进行“保存、切换、预览”重复性操作。

从 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）。

修改类型编辑框控件对象，设置默认值为 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）。

该动作将 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 属性。

回页首

	第 4 页，共 10 页