基于 XPages 的 Web 2.0 应用开发技巧(1)

look_w

认识 Lotus Notes 和 XPages自从 IBM Lotus Notes/Domino 8.5 为 Lotus Domino 程序开发人员提供 XPages Web 2.0 开发技术以来，这项技术已经使用的越来越广泛，深受 Lotus Domino Web 2.0 应用开发人员的喜爱。XPages 是一项全新的技术，与以往的发行版本相比，它提供了更加方便快捷、更加灵活、效率更加的 Lotus Domino 应用程序开发方式。如果读者希望对 XPages 有更加深入、全面细致的了解，建议阅读 ， 等 XPages 相关技术文章。
作为基于 Lotus Domino/Notes 的 Web 2.0 解决方案，XPages 对 Ajax 有很好的支持，这体现在 Xpages 提供 ClientSide JavaScript 和 ServerSide JavaScript 供开发人员进行 Ajax 应用开发。不论是在客户端还是在服务器端，任意事件都支持 JavaScript，例如，在 XPage 中，我们可以使用 JavaScript 来计算某个 ComputedField 的值。另外，我们可以使用 JavaScript 获取和设置 XPage 中控件的属性以及值。本文接下来将会对 XPages 中的 JavaScript 技术进行一个细致的讲解。
Lotus 软件试用下载立即点击下载最新版本的 IBM Lotus Notes 和 Domino 试用软件，尝试利用 XPage 结合 Servlet 技术开发第一个 Domino Web 2.0 应用程序。

• 试用版下载：
• 试用版下载：

XPages 脚本语言介绍在传统的 IBM Lotus Domino/Notes 应用中，我们使用 Formula 和 LotusScript 来进行逻辑判断、数值输入验证、数据转换处理等相关逻辑操作功能。而在 XPages 就用程序中，应用程序开发人员可以使用 JavaScript 来进行全部的业务逻辑处理，甚至使用 JavaScript 调用 Java 类来实现部分复杂的业务逻辑，XPages 中元素关系图如下：
图 1. XPages 元素关系图客户端 JavaScript 脚本一般用来操作 XPage 页面上控件的值，例如，我们可以使用如下 JavaScript 语句来设置 XPage 页面中 ID 为 comp 的控件值。
清单 1. 客户端 JavaScript 设置控件值

1 2	var editID = '#{javascript:getClientId("comp")}'; document.getElementById(editID).value = "HelloWorld";

通过函数 getClientId("textExample") 来获取 XPage 控件的客户端 ID 值（如 view:_id1:sampleComp），然后就可以设置该控件值。读者从这里可以看出，XPages 中客户端 JavaScript 语法与平时普通 HTML 所使用的 JavaScript 脚本语法并无二样。
对于上述例子，采用服务器端 JavaScript 也可以实现同样的功能。
清单 2. 服务器端 JavaScript 设置控件值

1 2	var editComponent:javax.faces.component.UIComponent = getComponent("comp"); editComponent.setValue( "HelloWorld");

通过函数 getComponent 来获取 ID 为 comp 的控件，将其转化为 JSF 控件，并通过 setValue 函数来实现控件值的设置。
那么，同为 JavaScript 脚本语言，只是一个运行于服务器端，一个运行于客户端，它们究竟有什么的区别，共同点又在哪里呢？接下来本文将要为读者详细介绍 XPages 中的这两种 JavaScript 脚本。
客户端 JavaScript 功能介绍在 XPages 中使用客户端 JavaScript 可以帮助完成一些前端的逻辑处理、用户输入验证以及信息提示的工作。在 JSP/HTML 程序开发中，开发人员喜欢用 JavaScript alert 函数实现信息提示，用 confirm 函数实现用户操作确认。在 XPages 中，也可以客户端 JavaScript 来实现同样的功能。
下面举例说明如何在 XPages 中使用客户端 JavaScript 来实现用户输入验证的功能。在此案例中，当用户点击“Save”按钮时，将会有一个操作确认框弹出让用户确认将保存操作，如果用户选择确定，则完成保存操作，否则，则取消保存操作。该验证过程采用客户端 JavaScript 实现。
清单 3.XPages 文件上传示例代码

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22

<?xml version="1.0" encoding="UTF-8"?> <xp:view xmlns:xp="http://www.ibm.com/xsp/core">       <xp:this.data>         <xp:dominoDocument var="AttachDoc" formName="Attachment">         </xp:dominoDocument>     </xp:this.data>     <xp:table style="width:100%">         <xp:tr>             <xp:td style="width:300.0px">                 <xp:label value="File to Upload:" id="label1" style="font-size:8pt">                 </xp:label>                 <xp:fileUpload id="Attachments"                     style="width:216.0px"                     value="#{AttachDoc.Attachments}">                 </xp:fileUpload>             </xp:td>             <xp:td>                 <xp:button value="Upload" id="button3"></xp:button>             </xp:td>         </xp:tr>     </xp:table> </xp:view>

在此 XPages 页面中，用户选择某个本地文件，点击”upload”时，将进行文件上传操作，接下来，为该”upload”按钮添加操作确认功能。
图 2. 按钮客户端 JavaScript 验证代码添加指示（）（查看 图 2 的清晰版本。）
在 Lotus Domino Designer 的 XPages Design 视图中，选择要进行操作确认的按钮，如图示 1 所示。在 Events 面板中选择 onclick 事件，表示用户点击该按钮进行操作时，将会有验证操作发生，如图中 2 所示。然后选择 Client 端验证，并选择在脚本编辑的模式下输入如下操作确认验证代码，如图中 3,4 所示。
清单 4. 客户端 JavaScript 操作验证代码片段

1 2 3 4 5

if(confirm('Are you sure you want to upload?')){     return true; } else {     return false; }

该段代码如果效果如下图所示，当用户“确定”操作时，将执行”upload”按钮所绑定的事件，若点击“取消”，则取消当前操作。
图 3. 客户端验证效果图读到这里，有 WEB 开发经验的读者可能会意识到，XPages 中的客户端 JavaScript 的语法以及使用方式与传统的 JSP/HTML 开发中 JavaScript 的用法是类似的。对，确实是这样，XPages 客户端 JavaScript 与标准的 JavaScript 在语法上是保持一致的。事实上，XPages 还封装了 Dojo 包作为它的一个 Ajax 解决方案，对 Dojo 和 JavaScript 语法感兴趣的读者可以从本文的参考资料中获取相关的学习资料。