开发 IBM Lotus Domino Web 2.0 客户机

什么是 Web 2.0？

Web 2.0 这个术语是由 Tim O'Reilly 在 2005 年的一次会议上引入的。这个术语代表了下一代 Web 应用程序，这些程序采用了正确的 Web 设计原则构建并且利用了 HTTP 的简单性。一些常见的 Web 2.0 应用程序包括 Google AdSense、Flickr 和博客。从那时起，便对这个术语进行了概括，目的是形成一种 Web 应用程序的概念和趋势。其核心前提是这些 Web 应用程序将 Internet 用作它们的平台并将功能作为服务公开，这些服务是根据用户或其他应用程序（换句话说，这些应用程序使用这些服务）的需要提供的，以便向用户提供有意义的、内容丰富的应用程序。支持 Web 2.0 的应用程序的技术和概念如下：

• 最新的 Web 浏览器（Mozilla Firefox、Microsoft Internet Explorer 7 等等）
• AJAX
• JavaScript
• DHTML
• REST（REpresentational State Transfer，一种 Web 本身所基于的架构样式）

JavaScript：选中的语言

随着 Web 2.0 风格的应用程序的普及，JavaScript 发挥了重要的作用。由于 JavaScript 是灵活的脚本语言，而且几乎能被所有 Web 浏览器解析，因此，可以对其进行扩展以包括面向对象的结构，而且也可以用来构建复杂的 Web 应用程序。我们可以将 JavaScript 函数用作对象、方法以及传统过程函数。您将看到如何在平面式 HTML 上采用 JavaScript 实现 MVC (Model View Controller) 模式。

回页首

关于此应用程序

Lotus Domino 的 Web 2.0 客户机由一个 HTML 文件和支持脚本、图像以及样式表组成。最好使用 Mozilla Firefox 查看此应用程序。本文使用 Firefox 作为浏览器平台。

图 1 显示了应用程序的主页面。这是用户在自己的浏览器中打开 Web 2.0 客户机之后首先看到的屏幕。

图 1. Lotus Domino 的 Web 2.0 客户机

可以单击 Read Documents 或 Create Documents 链接。单击 Read Documents 之后，会看到一个类似于图 2 的屏幕。在我们的示例中，显示 Contacts 数据库（基于 Lotus Notes Personal Address Book 模板的数据库）中的姓名和电子邮件地址。

图 2. Read Documents 视图

此时，可以单击 Create Document 或单击其中一个条目查看更多详细信息。让我们单击视图中的第一个条目。出现图 3 ，其中显示 Contacts 数据库中的关键文档字段。

图 3. 联系信息

在左侧提供了一个微型导航视图，其中有姓名清单。可以选择单击微型导航视图中的一个条目来查看此文档的详细信息，或者通过单击 Edit 图标编辑显示的文档。然后，便可以编辑此文档，单击 Save 图标可保存更改。也可以通过单击 Close 或者单击其他任何链接来取消更改。

如果想创建一个文档，则单击菜单中的 Create Document 图标。这会弹出一个空白的表可用来创建新的文档（参见图 4）。可以在其中输入必要的详细信息并单击 Save 以创建新的文档。

图 4. 创建联系信息文档

应用程序中的文件

Lotus Domino 的 Web 2.0 客户机由一个 HTML 页面和 JavaScript 支持文件组成，它们用于完成用户执行的各种操作。由级联样式表 (CSS) 和图像控制显示。图 5 显示了各种文件之间的关系。dxl.html 文件是一个平面式的 HTML 文件，它使用 style.css 格式化内容的表现形式，使用 dojo.js、controller.js 和 model.js 执行任务。

图 5. 文件关系

所有这些文件都位于 ...data/domino/html 目录下一个名为 web2.0 的目录中。托管的 Domino 服务器在 Microsoft Windows XP 上运行 V7.0.1。出于这里的应用程序的需要，服务器还支持基本的 Web 身份验证。如果想启用基于会话的身份验证，请参阅本文中后面的“部署”一节以获得所需步骤。

除此之外，还会使用 “访问 Notes/Domino 数据的定制 DXL 框架” 文章中介绍的 DXL 代理并将其导入到 Contacts 数据库中。

设计原则

由于 JavaScript 有助于过程式编程，因此，可以使用传统方法来构造构建应用程序所需的各种函数。但是，它不容易维护。因而，您会希望构建应用程序就如同使用自己喜爱的 Web 应用程序服务器（J2EE、Microsoft .NET、PHP 等等）构建一个三层的 Web 应用程序一样。这意味着需要保持关注点分离，并且需要在部署单元内像调用一样分组。实际上，可以通过对瘦 Web 应用程序应用 Model View Controller 设计原则来实现这些目标。

您可能还希望能够尽可能多地坚持 DRY（不要重复自己）这个原则。为了实现这个目标，可以使用 JavaScript 的闭包功能，该功能允许将函数视为数据来创建类和对象。然后，可以定义要使用的类和对象，采用的方法与我们在 JSR-168 portlet 示例（请参阅文章 “为 Domino 构建 JSR 168 门户应用程序” ）中使用的方法基本相同。

回页首

表示设计

现在，来看看如何使用 MVC 构建简单的 Web 应用程序。图 6 显示了相关的对象、它们公开的方法以及它们所属的部署单元。

此视图由主页 (dxl.html) 处理；它还具有 helper 函数以及用于维护信息的全局变量。主要视图组件如下：

• Menu 类：显示 Read/Create Documents 的菜单项。
• mainView 类：以表格格式处理 Domino 视图信息的显示。
• miniView 类：在文档显示模式时处理导航视图的显示以便快速访问文档。
• doc 类：处理 Domino 文档信息的显示并提供进行编辑、创建和保存的选项。

模型由模型 JavaScript 文件 (model.js) 中的代码处理。它定义的主类为 people（包含来自 Domino 视图的信息）和 person（包含有关 Domino 联系信息文档的信息）。

控制器由控制器 JavaScript 文件 (controller.js) 处理，并且包含执行其工作所使用的几种方法和属性。此类的主要方法为 action，它基于用户执行的操作处理视图中应显示的相应信息。控制器还使用 Ajax 调用访问相应的 Domino 资源、填充相应的 model 对象并且将其传递给视图进行显示。反过来，视图初始化控制器的实例并且指派所有操作和决定。

注意：理想情况下，可以将数据访问逻辑分隔到它自己的部署单元中并且保持控制器没有被混杂。但是，为了简单起见，我们选择将其组合。作为练习，您可以对代码进行重构以将数据访问函数分离到单独的文件中。

图 6. 设计

一些常见过程的流程如图 7 中所示。

图 7. 流程表

回页首

相关代码

这里不再详细介绍整个应用程序，而只关注一下应用程序的突出点以及如何实现 MVC 模式的部分。

按顺序引用外部的 JS 文件

首先，dxl.html 文件以优先顺序加载 JavaScript 文件：

<script type="text/javascript" src="controller.js"></script>
<script type="text/javascript" src="model.js"></script>
<script type="text/javascript" src="dojo.js"></script>

建立关键的全局对象

下一步，应用程序将控制器对象作为全局变量进行实例化。这对设计非常关键，原因是用户执行的每个视图操作都被发送到该控制器进行处理。出于管理的目的（如查看字段中更改的值），应用程序还建立了其他全局对象。代码传递在此局部网页中引用的控件的字符串值，以便在其显示视图对象时控制器对象可以引用该值。

<script language="JAVASCRIPT">
var html_control = new control("html_control");

将表示组件封装为 JavaScript 对象

表示组件作为 JavaScript 对象实现，由控制器对象进行初始化。view/presentation 对象引用在上一步 ("html_control") 中创建的控制器对象名称。

function mainView(ob,controller){
 ....
 this.show=function(...){

 };
 this.hide=function(...){
 ...
 };
}
function miniView(ob,controller){
...
..
}
function doc(ob,controller){
...
..
}

表示组件由 controller.js 中的控制对象实例化。

function control(str){
...
 this.mainview = new mainView(this.ob,this);
 this.doc = new doc(this.ob,this);
 this.miniview = new miniView(this.ob,this);
...
}

使用浏览器 DOM 维护有关此元素的上下文

对于所有可操作的项目使用 <div> 标记。利用可用的 DOM 属性传送上下文并将其作为用户执行操作的一部分进行传递。在我们的示例中，我们已经将文档 UNID 定义为名称属性值以传送关于此元素的上下文。

<tr><td><a href="#" id="display_doc" name="'
+u.unids[x]+'" onclick="'+controller.varname+'
.action(this)">'+u.names[x]+'</a></td></tr>';

将视图中的所有操作发送给控制器

将应用程序中的任何链接或可操作的功能发送给向其自身传递引用的控制器。

<!--the view previous icon on the view page-->
<input type="image" src="prev.gif" id="view_prev" 
onclick="'+controller.varname+'.action(this)"/>';
<!-- the link in the view to show the doc details-->

<a href="#" id="display_doc" name="'+u.unids[x]+'" 
onclick="'+controller.varname+'.action(this)">'
+u.names[x]+'</a>

根据动作和上下文作出所有决定并集中控制器中的逻辑。

执行动作时所需的核心逻辑作为控制对象的一部分被封装到 action JavaScript 函数中。switch/case 语句用于指派正确的函数。

function control(str){
....
..
 this.action = function(u){
  if(u.id==''){u.id='menu_read';};
  switch(u.id){
   case("menu_read"):
    {
     this.menu.move();
     this.startdoc='1';
     this.serialize(this.viewurl
(this.startdoc,this.displaycount),
this.showMainView, this.mainview);
     this.miniview.hide();
    }
   break;
   case("display_doc"):
    {
	// get doc details and redirect 
	// to appropriate display
    ...
    }
   break;
   case("view_prev"):
    {
	// get next set of view entries 
	// and show it in display
    ...
    }
   break;
   ... 
  ... 
 };
}

定义可重新使用的对象，用于描述 Notes 视图和 Notes 文档

model.js 文件包含作为 JavaScript 函数实现的两个对象：person 用于文档，people 用于视图。表示 (dxl.html) 只处理这些域对象。控制器（控制函数）负责将 Domino 服务器中的 XML/DXL 序列化为正确的值对象，反之亦然。

//People
function people(){
 this.unids=[];
 this.names=[];
 this.emails=[];
}

//Person
function person(){
 this.firstname='';
 this.lastname='';
 this.officecity='';
 this.officestate='';
 this.unid='';
 this.jobtitle='';
 this.companyname='';
 this.mailaddress='';
}

将 Ajax 调用指派给库/工具包

这里我们不需实现自定义的 Ajax 控件，使用 Dojo 工具包 [http://dojotoolkit.org/] 就可以了。这些调用被封装在属于控制对象的 JavaScript 函数中。

this.serialize =function(url, fn, fn1){
  dojo.io.bind({url: url,
    load: function(type,data,evt){fn(data, fn1);},
    error: function(type,error){alert
    ("reached in error"+error.toSource());},
    mimetype: "text/xml"
  });
};

此处将其他 JavaScript 函数作为参数传递给 serialize 方法，此方法设置为在状态更改的情况下被调用。在前述的这个代码片段中，完成加载之后，从服务器返回的 XML 在 data 对象中被引用，此对象作为参数发送给最初传递的函数。这样有助于重新使用。可以使用相同的 serialize 方法显示主视图（显示姓名和电子邮件这两列）以及在查看文档详细信息时用于访问文档的微型导航视图。

回页首

安全性

正如您在下一节中将看到的，需要确保为 Domino 服务器上托管此应用程序的文件夹指定了足够的权限。此外，根据用户的权限对 Domino 数据库执行操作（创建、读、编辑）。因此，访问此应用程序的用户组应该在数据库 ACL 中具有相应的权限以执行必要的功能。与任何其他 Web 应用程序一样，如果用户的机器的安全性受到威胁的话，最好结束浏览器会话以规避将来的安全隐患。

回页首

部署到服务器并进行测试

使用以下提示将 Web 2.0 客户机部署到 Lotus Domino 7 服务器：

• 拥有一个基于 Notes Personal Address Book 模板且能正常工作的 Contacts 数据库。
• 确保将 ACL 设置为允许测试用户创建/编辑文档以及读取视图。
• 安装第一篇文章中的 LotusScript 代理并确保它们由授权的 Agent Signer 签名。
• 将本文中的文件解压缩到 ...data/domino/html 目录中。确保文件位于 html 目录下名为 web2.0 的文件夹中。
• 打开 controller.js 文件并将 control 函数中名为 this.dominourl 的变量编辑为 Domino 服务器的正确的 URL。
  
  注意：如果对 Web 登录启用了基于会话的身份验证，则应该使用正确的完全合格的主机名作为字符串的一部分。此外，如果 Domino 服务器正在侦听某个端口，而不是 80 端口，则还应该确保指定正确的端口。
  
  
• 对新创建的 web2.0 目录建立文件保护。在 File Protection 文档的 Basics 附签上，接受默认的选项并修改 access control 列表以确保将 domino/html/web2.0 目录指定为 Path。在 Access Control 附签上，确保 "Current access control list" 包括 No Access for Anonymous 和 POST and Get for Default（参见图 8）。

图 8. Access Control 附签

总共就这些。现在您便可以测试应用程序了。步骤如下：

• 打开 Mozilla Firefox。
• 访问 URL：http://your dominourl/web2.0/dxl.html。
• 登录之后，应该能够访问此应用程序。

回页首

使之适合您自己的 Domino 应用程序

根据以下指导调整 Web 2.0 客户机使之适合您可能有的任何自定义的 Domino 数据库：

• 编辑 model.js 中的 models 对象以反映您的应用程序所代表的域。例如，假设此应用程序是一个订购系统。如果您具有显示订单的 Domino 视图并且文档名为 order detail，则您很可能就会有一个名为 Orders 的 collection 对象和一个名为 OrderDetails 的 document 对象。
• 编辑 controller.js 中的控件代码以映射正确的 URL，编辑在 showMainView 和 showMiniView 函数中显示的您所想要的视图列映射。
• 最后，编辑 mainView、miniView 以及 dxl.html 文件中的 doc 对象以反映来自第一项的 models 对象中的字段。

回页首

结束语

至此，您已经了解了如何利用在第一篇文章中介绍的 DXL 框架构建 Web 2.0 风格的应用程序以使其位于 Domino 数据库的前端。您可以使用 Dojo 工具包的 UI 实用工具或任何其他 DHTML 方法使表示形式更加丰富。您还了解了如何使用关注点分离和最佳重用的设计模式构造 Web 应用程序。您可以仔细地阅读代码并且通过编辑 model.js、controller.js 和 dxl.html 文件使该应用程序适用于特定的数据库或其他 Domino 应用程序。