内容


实现 HTML 表单的协作体验

使用 WebSphere 的 Communications Enabled Applications Feature Pack 创建协作和动态 HTML 表单

Comments

简介

如果您正在使用 web 与客户交互,您可能正在寻找提高在线用户的满意度的方法。提高用户满意度的一些常见方法是:提高页面响应性,生成直观和富于表现力的界面,以及创建一致的站点布局。这些因素对用户满意度很重要,但还有其他一些值得考虑的因素,比如交流和协作。您可以通过支持一个更具协作性的体验来提高您的 web 站点的用户满意度。协作功能将支持您的用户执行以下操作:

  • 与其他用户共同浏览您的站点;
  • 通过单击一个 web 页面中嵌入的按钮来呼叫一个客户服务代表;
  • 与客户服务代表协作在提交前确保 Web 表单的准确性和完整性。

您可以使用 WebSphere Application Server Communications Enabled Feature Pack 提供这种类型的协作功能。这个特性包包含可用于嵌入点击呼叫、共同浏览和双向表单功能的 Dojo 小部件。这些函数的用例几乎没有限制。

在本文中,我们将探索这样一个场景:实现三个小部件,以支持一个客户服务代表来帮助一个用户,该用户正在尝试完成并提交一个在线表单。

场景

假设您正在负责虚拟的 Acme Insurance Company 的网站。Acme 想利用 WebSphere Application Server CEA Feature Pack 来快速有效地连接客户服务代表和在填写一份新的索赔申请单时遇到问题的客户。

本文将指导您逐步完成使用 WebSphere CEA Feature Pack 来创建一个解决方案的流程。您将把以下功能添加到 Acme 的在线索赔创建流程:

  • 单击新索赔表单上的一个按钮呼叫一位客户服务代表。
  • 单击一个按钮启动一个会话,客户和客户服务代表可以在这个会话中查看索赔表单数据并与之交互。
  • 将客户开始填写的索赔表单中的数据自动复制到由客户和客户服务代表共同浏览的索赔表单。
  • 在双向表单上协作时,控制可以看见和操作的数据。

下一小节将检查初始索赔表单,并解释如何在那个表单上直接嵌入点击呼叫功能。

添加点击呼叫功能

对于这个场景,您将处理一个现有表单 claimform.html ,您的客户使用这个表单来在线提交新索赔请求。

图 1. claimform.html 页面
一个表单,要求填写姓名、政策编号、事故等相关信息。
一个表单,要求填写姓名、政策编号、事故等相关信息。

此时,这个表单非常基础。客户登录,完成必要的索赔信息,然后通过单击 Submit Claim 将表单提交给 Acme 进行处理。

假设您的客户在填写这份索赔表单时遇到一个问题。也许他们忘记了他们的保单编号,或者他们想准确了解索赔金额中应该包含哪些项目。现在,他们不得不停止在线工作,查询求助电话号码,然后拨打电话。客户不得不在这些任务上耗费时间,甚至可能完全重新开始创建索赔创建流程。这可能会导致客户不满意,甚至可能会导致客户流失。如果客户不离开索赔创建表单就能够拨打客户服务代表的电话的话,那么客户就会感到更方便,并能节约一些时间。

这个场景非常适合使用 WebSphere CEA ClickToCall 小部件。您可以将该小部件直接嵌入 claimform.html 页面中,从而允许您的客户不离开页面或停止索赔创建流程即可拨打客户服务代表的电话。

您需要对 HTML 代码进行两处小更改。首先,添加必要的导入语句,导入 WebSphere CEA Feature Pack 为 ClickToCall 小部件提供的 JavaScript 和 CSS 文件,如清单 1 所示。

清单 1. claimform.html 页面的导入
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
  djconfig="parseOnLoad: true, isDebug: false">
</script>
                
<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/dojo/resources/dojo.css";
      @import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");

</script>

必要的 CSS 和 JavaScript 文件包含进来以后,通过使用清单 2 中的 HTML 代码在表单表中添加另一行来添加 ClickToCall 小部件。

清单 2. ClickToCall 小部件的 HTML 声明
<tr>
   <td>
      <div ceadojoType="cea.widget.ClickToCall"      
           widgetNumber="sip:CSR@localhost">
      </div>
   </td>
</tr>

清单 2 中的示例在 div 元素中声明 ClickToCall 小部件,在 widgetNumber 属性中将目标 Session Initiation Protocol (SIP) URI 设置为 CSR@localhost。添加清单 1 和清单 2 中的 HTML 和 JavaScript 代码更新 claimform.html 页面,如图 2 所示。

图 2. 更新后的 claimform.html page
与图 1 相同的表单,添加了一个 Call me 按钮。
与图 1 相同的表单,添加了一个 Call me 按钮。

现在,用户可以通过输入客户服务代表的电话号码并单击 Call Me 按钮来启动与该客户服务代表的联系。ClickToCall 小部件的 widgetNumber 属性中的 SIP URI 标明的电话将得到通知,并执行一个对用户输入的号码的呼叫。

添加共同浏览和双向表单

考虑下面这种情况:一个用户开始填写一个索赔表单,但不能定位他们的保单编号。他们可以使用这个新的 ClickToCall 小部件来呼叫一位客户服务代表。验证这个客户的身份之后,客户服务代表可以查询该保单编号并将其告知该用户。这种方法的确比不使用 ClickToCall 小部件的方法更简单,但还不够理想。客户服务代表必须通过电话读出长长的保单编号,用户必须收听并在表单域中输入该编号信息。在这种信息中继过程中,可能出现错误;保单编号域中可能会出现错误的数据。

如果用户和客户服务代表能够联合浏览新的索赔创建表单并与之交互的话,那么那将是一个更好的体验。这样,客户服务代表就可以在 HTML 表单中直接提供帮助,而不必在电话上交换信息。您可以使用几个附加小部件来实现这个功能。

要支持共同浏览功能,第一步是支持 ClickToCall 小部件,这个小部件已经嵌入到 claimform.html 页面中。您还需要更新 claimform.html 页面中的 CSS 导入,如清单 3 所示。

清单 3. 更新后的 claimform.html 页面的导入
<style type="text/css">
    @import "ceadojo/dijit/themes/tundra/tundra.css";
    @import "ceadojo/dojo/resources/dojo.css";
    @import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
	@import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
	@import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");
</script>

此时,您添加三个新属性到现有的 ClickToCall 小部件声明中,如清单 4 所示。

清单 4. 更新后的 ClickToCall 小部件
<tr>
   <td>
      <div ceadojoType="cea.widget.ClickToCall"      
           widgetNumber="sip:CSR@localhost" 
           enableCollaboration="true"  
           canControlCollaboration="true"           
           defaultCollaborationUri="collabform.html">
      </div>
   </td>
</tr>

enableCollaboration 属性设置为 true,表明将共同浏览功能包含为 ClickToCall 小部件的一部分。canControlCollaboration 属性设置为 true,意味着客户能够控制这些共同浏览功能,如果客户服务代表选择授予他们这种控制权的话。最后,defaultCollaborationUri 属性值标明将在共同浏览会话中载入的初始页面。

在讨论 collabform.html 页面之前,需要了解一些关于如何联合使用 ClickToCall 小部件和共同浏览功能的重点。要启动与客户的共同浏览会话,客户服务代表可以访问的一个页面必须有一种方法来监听进入的呼叫并发起这样的会话。CEA Feature Pack 的 CallNotification 小部件就提供这种功能。

一个包含 CallNotification 的单独页面 csrhome.html 负责监听来自客户的呼叫并提供与该客户共同浏览索赔创建表单的功能。与前面使用的小部件类似,需要导入必要的 CSS 文件,如清单 5 所示。

清单 5. CallNotification 小部件的导入
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
	djconfig="parseOnLoad: true, isDebug: false">
</script>

<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/cea/widget/CallNotification/CallNotification.css";
      @import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
      @import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

上述导入完成后,您在页面上的一个表格中声明一个 CallNotification 小部件。

清单 6. CallNotification 小部件声明
<table cellspacing="25" cellpadding="25" class="formContent">
   <tr><th style="font-weight:bold;font-size:large">Acme Insurance Claim 
        Hotline
       </th>
   </tr>
   <tr>
      <td><div ceadojoType="cea.widget.CallNotification" 
               widgetNumber="sip:CSR@localhost"   
               enableCollaboration="true" 
               canControlCollaboration="true" 
               defaultCollaborationUri="collabform.html"></div>
      </td>
   </tr>
</table>

这些 CallNotification 小部件属性与 claimform.html 页面中的 ClickToCall 小部件的属性一样。这里,widgetNumber 属性值标明小部件将监听呼叫的号码。sip:CSR@localhost 电话的接入呼叫(在客户使用 ClickToCall 小部件时发生)导致这个 CallNotification 小部件的通知。同样,必要的协作属性被定义,defaultCollaborationUri 的值等于在 claimform.html 页面中的 ClickToCall 小部件中设置的值。新的 csrhome.html 页面现在应该显示这个小部件,如图 3 所示。

图 3. claimform.html 页面中的 CallNotification 小部件
显示一个电话、两个人和断开连接的图标的区域。

在启动 CallNotification 小部件以便其积极监听接入的呼叫之前,需要创建 collabform.html 页面,ClickToCall 和 CallNotification 小部件都在它们的 defaultCollaborationUri 属性中引用该页面。

新的 collabform.html 页面将包含一个表单,它是原始 claimform.html 页面上的原始表单副本,包含其中的每个域。在这个新页面上,您将使用 TwoWayForm 小部件而不是常规 HTML 表单。同样,首先需要为该页面导入必要的 CSS 和 JavaScript 文件。

清单 7. collabform.html 页面的导入
<script type="text/javascript" src="ceadojo/dojo/dojo.js"
	djconfig="parseOnLoad: true, isDebug: false"></script>

<style type="text/css">
      @import "ceadojo/dijit/themes/tundra/tundra.css";
      @import "ceadojo/dojo/resources/dojo.css";
      @import "ceadojo/cea/widget/TwoWayForm/TwoWayForm.css";
</style>

<script>
   ceadojo.require("dijit.form.TextBox");
   ceadojo.require("dijit.form.SimpleTextarea");
</script>

将 claimform.html 页面的主体区域中的 HTML 复制到 collabform.html 页面的主体区域中。改变表单元素并指定一个值为 cea.widget.TwoWayFormceadojoType 元素,如清单 8 所示。

清单 8. 声明 TwoWayForm 小部件
<form id="claimReqForm" ceadojoType="cea.widget.TwoWayForm"  
      style="background-color:rgb(223,223,223)">

除了上述小更改之外,复制的 HTML 的惟一更改是删除 ClickToCall 小部件。但是,对于这个示例,这个更改不是必须的,因为我们在一个共同浏览会话上下文中只使用这个特殊页面。如果您要查看 collabform.html 页面,您看到的输出将与 图 1 完全相同。

您几乎已经准备好测试这个索赔申请表单的初始呼叫和共同浏览流了。但在此之前,您需要配置必要的电话组件来执行应用程序测试。 对于这个示例,您可以从 CEA Feature Pack 的 Info Center 获取相关说明。本文中的示例是在 sip:CSR@localhost 注册一个电话,在 sip:Customer@localhost 注册了另一个电话。

测试共同浏览功能

当电话基础设施就位后,加载 csrhome.html 页面并通过单击 Start call notification 图标来激活 CallNotification 小部件。该小部件的状态更改为表明 CallNotification 小部件可用并正在等待接入的呼叫,如图 4 所示。

图 4. 启动 CallNotification 小部件
一个窗口,显示一些电话图标,电话图标下面的方框中显示。

这个示例打开一个单独的浏览器。(CEA Feature Pack 使用 cookies 来存储会话状态,因此必须是单独的浏览器 — 而不是一个浏览器中的单独窗口。)下一步是打开 claimform.html 页面。假定用户启动索赔创建流程,先输入一个姓名, 然后发现自己需要帮助。他们输入 sip:Customer@localhost 作为客户的号码,并单击 Call Me。这发起一个对 sip:CSR@localhost 电话的呼叫,如果收到应答,这个呼叫将发起一个对 sip:Customer@localhost 电话的回复呼叫。当电话接通时,您将看到 claimform.html 页面中的 ClickToCall 小部件的状态被更新,如图 5 所示。

图 5. ClickToCall 小部件的连接状态
屏幕显示连接到 sip:Customer@localhost 以及断开连接和共同浏览图标。
屏幕显示连接到 sip:Customer@localhost 以及断开连接和共同浏览图标。

打开 csrhome.html 页面,您将看到 CallNotifcation 小部件类似的状态更新,如图 6 所示。

图 6. CallNotification 小部件的连接状态
屏幕显示连接到 sip:CSR@localhost 以及断开连接和共同浏览按钮。

要启动共同浏览会话,单击 ClickToCall 和 CallNotification 小部件上的 co-browse 按钮。在每个浏览器中,一个模式窗口打开,collabform.html 页面出现在窗格中。

图 7. 共同浏览会话的模式窗口
包含需要填写的事故信息域的屏幕。
包含需要填写的事故信息域的屏幕。

要开始会话,客户服务代表(他已从 CallNotification 小部件打开共同浏览会话)拥有会话的控制权。您可以通过在客户服务代表的窗口中的 Policy number 域中输入一个值来测试双向表单功能。您应该能够看到相同的值出现在客户的共同浏览会话的相同域中。

图 8. 双向表单数据传输
包含几个事故域以及一个输入了一个保单编号的高亮域的部分屏幕。
包含几个事故域以及一个输入了一个保单编号的高亮域的部分屏幕。

既然政策编号是正确的,客户可以返回去输入其他索赔数据。如图 8 所示,客户输入的数据高亮显示在客户服务代表的窗口中。两个用户可以同时在表单中的数据上协作,而不必来回授予控制权。

保护双向表单中的机密信息

许多在线表单都包含机密信息,比如社会保险号、信用卡号、或家庭住址。您可以创建这样一个双向表单:只有交互中的一个用户能够访问表单数据。在这个示例索赔创建表单中,要保护隐私,允许客户服务代表看到事故中的另一方的姓名也许是不明智的。您可以使用 TwoWayForm 小部件中的元素的两个特殊属性来确保只有客户能够提供和阅读事故中的另一方的姓名。

在一个 HTML 编辑器中打开 collabform.html 页面并定位标签为 “Name of other party” 的域的输入域。清单 9 展示了原始声明。

清单 9. name of other party 输入的原始声明
<input type="text" ceadojoType="dijit.form.TextBox" id="otherName"   
           name="otherName"></input>

要确保只有客户能够编辑这个输入元素的值并在客户服务代表的窗口中屏蔽该值,要使用 ceaCollabWriteAccess 属性和 ceaCollabFilter 属性。

清单 10. 控制读写权限
<input type="text" ceaCollabWriteAccess="reader" 
       ceaCollabFilter="default" ceadojoType="dijit.form.TextBox" 
       id="otherName" name="otherName"></input>

ceaCollabWriteAccess 属性设置为 reader 表明只有会话中的读者能够编辑这个输入元素的值。在本例中,客户是读者。而发起会话的客户服务代表则是写入者。ceaCollabFilter 属性中的默认值导致在写入者(本例中为客户服务代表)的窗口中屏蔽这个输入值。图 9 展示了结果。

图 9. 客户服务代表窗口中的屏蔽值
事故表单,其中高亮显示的 Name of other party 域显示为星号。
事故表单,其中高亮显示的 Name of other party 域显示为星号。

ceaCollabFilter 属性的默认值表明您想使用默认的屏蔽功能,图 9 显示,该功能使用一串 * 替换这个输入元素的内容 。如果需要,您可以提供自己的自定义屏蔽功能。为此,您将指定一个函数的名称为 ceaCollabFilter 属性的值。这个函数接受一个字符串参数(该域的原始值),并返回该值的一个屏蔽版本。

传输数据到共同浏览表单

假设一个客户在开始填充索赔创建表单中的数据之后遇到一个问题。然后,他使用点击呼叫和共同浏览功能从一位客户服务代表那里寻求帮助。现在的情况是,用户输入的表单数据并 会在共同浏览会话启动时自动传输到表单。客户不得不在共同浏览会话中在索赔表单中重新输入信息。显然,这很不方便。幸运的是,您可以通过扩展几个小部件,确保信息从原始索赔创建表单复制到共同浏览会话中的双向表单,从而避免给您的用户带来不便。

要提供在索赔创建共同浏览会话开始时复制表单数据所需的函数,需要完成以下步骤:

  1. 创建一个新模块。

    创建一个新的文件夹结构来容纳应用程序中扩展的工件。

  2. 修改 ClickToCall 小部件模板。

    修改 ClickToCall 小部件的模板来包含一个属性,标明用于从中复制元素的表单。

  3. 修改 ClickToCall 小部件的 JavaScript。

    修改 ClickToCall 小部件的 JavaScript 来反映它的新包名并引用新的 CollaborationDialog 小部件。

    提供搜集 claimform.html 页面上的所有表单元素及其值,并使它们对 CollaborationDialog 小部件可用的函数。

  4. 修改 CollaborationDialog 小部件的 JavaScript。

    添加一个函数来设置客户和客户服务代表的共同浏览会话中的 collabform.html 页面的索赔创建表单元素的值。这些值来自由扩展的 ClickToCall 小部件复制和传递给 CollaborationDialog 小部件的元素。

  5. 更新 claimform.html 页面。

    更新 claimform.html 页面以使用新扩展的小部件。

创建一个新模块

首先,需要扩展 ClickToCall 小部件,从 claimform.html 页面中的表单搜集所有元素及其值。在应用程序中创建一个新文件夹结构,向其复制您正在修改的 3 个 JavaScript 文件:

  • ceadojo/cea/widget/CollaborationDialog.js
  • ceadojo/cea/widget/ClickToCall.js
  • ceadojo/cea/widget/ClickToCall/ClickToCall.html

这个新文件夹结构拥有一个根文件夹 acme,子文件夹布局模拟 WebSphere CEA Feature Pack 提供的 cea 模块的布局。参见图 10。

图 10. 扩展的文件夹结构
显示 ceadojo 目录结构的屏幕。

修改 ClickToCall 小部件模板

为了最大化重用和灵活性的好处,需要在 ClickToCall 小部件的 HTML 声明中声明源表单(从中复制元素的表单)的名称。将 sourceForm 属性添加到 ClickToCall 小部件的模板,并使该属性的值对 ClickToCall 小部件可用。在 ceadojo/acme/widget/ClickToCall/ClickToCall.html 文件中,您将看到一个元素,它的 dojoAttachPointcollaborationDialog。这个元素包含一些属性定义,比如 enableCollaborationcanControlCollaboration,这些属性都可用于 ClickToCall 和 CollaborationDialog 小部件。添加新的 sourceForm 属性,如清单 11 所示。

清单 11. 更新 ClickToCall 小部件的模板
<div
    dojoAttachPoint="collaborationDialog" 
dojoType="acme.widget.CollaborationDialog" sourceForm="${sourceForm}"
canControlCollaboration="${canControlCollaboration}"
defaultCollaborationUri="${defaultCollaborationUri}"
highlightElementList="${highlightElementList}"
isHighlightableCallback="${isHighlightableCallback}"
isClickableCallback="${isClickableCallback}"
sendPageUrlRewriteCallback="${sendPageUrlRewriteCallback}">
</div>

除了定义新的 sourceFrom 属性外,注意上述代码还将 dojoType 更改为引用 acme.widget.CollaborationDialog 小部件。当您完成更改时,这将是扩展的 CollaborationDialog 小部件的名称,因此现在尽管继续进行更新,以便扩展的 ClickToCall 小部件利用新函数。这只是 ClickToCall 小部件的模板需要的两个更改。下一步是修改小部件的 JavaScript。

修改 ClickToCall 小部件的 JavaScript

在 ceadojo/acme/widget/ClickToCall.js 的源代码中,您将修改几个声明语句和一个 require 语句。更新这些声明,声明 acme.widget.ClickToCall 以替代 cea.widget.ClickToCall,更新 CollaborationDialog 的 require 语句以引用 acme.widget.CollaborationDialog,如清单 12 所示。

清单 12. 更新后的 ClickToCall 小部件声明语句
dojo.provide("acme.widget.ClickToCall");
dojo.require("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],

在 dojo.declare 语句中,将基础小部件的值更改为 cea.widget.ClickToCall。您可以移除许多其他 require 语句,因为您正从这个基础小部件扩展。

您需要对 ClickToCall JavaScript 源代码中的变量进行一些更改,目的是确保新的小部件指向您在上一步中创建的修改后的模板。为 sourceForm 属性添加一个变量。

清单 13. 修改 ClickToCall 小部件变量
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],
{
   templateString : null,
   templatePath: dojo.moduleUrl("acme.widget",               
                                "ClickToCall/ClickToCall.html"),
   sourceForm: "",

要指向新模板,将 templateString 值设置为 null 并声明一个 templatePath 变量,该变量引用修改后的 HTML 模板文件。上述代码还创建一个 sourceForm 变量来容纳新模板中定义的 sourceForm 属性的值。

对 ClickToCall 小部件的源代码的最后更改是从指定表单收集元素,并使它们可用于 CollaborationDialog 小部件实例。添加一个名为 getSourceFormElements 的函数以从 sourceForm 属性标明的表单检索元素,并在 CollaborationDialog 小部件实例上设置它们。此后,修改 ClickToCall 小部件的现有 cobrowse 函数以调用新函数。新扩展的 ClickToCall 小部件的完整源代码如清单 14 所示。

清单 14. 修改后的 ClickToCall 小部件的完整源代码
dojo.provide("acme.widget.ClickToCall");
dojo.require("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.ClickToCall", [ cea.widget.ClickToCall ],
	{
		templateString : null,
		templatePath: dojo.moduleUrl("acme.widget", 
                "ClickToCall/ClickToCall.html"),
		sourceForm: "",
		getSourceFormElements : function() {
	         var sourceFormObj = dojo.byId(this.sourceForm);
		   this.collaborationDialog.sourceFormElements = 
               sourceFormObj.elements;
	      },
		cobrowse : function() {
	         this.getSourceFormElements();
		   this.collaborationDialog.openCollaborationDialog();
		}
       }
);

剩余的函数声明被移除了,因为您可以简单地从 cea.widget.ClickToCall 基出小部件继承它们。

修改 CollaborationDialog 小部件 JavaScript

当您完成对 ClickToCall 小部件的更改后,可以对 CollaborationDialog 小部件的 JavaScript 进行必要的更改。与上面的扩展的 ClickToCall 小部件一样,首先对源代码的声明和变量部分进行更改。将您正在声明的小部件的名称修改为 acme.widget.CollaborationDialog,并更改基础小部件列表以包含 cea.widget.CollaborationDialog

声明 sourceFormElementssourceForm 变量。扩展后的 ClickToCall 小部件引用 sourceFormElements;稍后您将使用 sourceForm 变量。与 CallNotification 小部件一样,sourceForm 变量的初始值来自用户使用 HTML 声明 ClickToCall 小部件时的 sourceForm 属性的值。

清单 15. 扩展的 CollaborationDialog 小部件的声明
dojo.provide("acme.widget.CollaborationDialog");
dojo.declare("acme.widget.CollaborationDialog",           
[cea.widget.CollaborationDialog ],
{
sourceFormElements : null,
sourceForm : “”,

添加一个名为 setTargetFormElements 的新方法,该方法包含将值从 claimform.html 页面中的原始表单复制到 collabform.html 中的双向表单的逻辑。

清单 16. 将值传输到目标表单
setTargetFormElements : function() {
   dojo.withDoc(this.collaborationDialogContentPane.domNode.contentWindow.document, 
      function() {
         if(this.sourceFormElements != null) {
            var matchedCount = 0;
	        for(ct=0; ct < this.sourceFormElements.length; ct++) {
		var sourceElement = this.sourceFormElements[ct];
		var currElement = dojo.byId(sourceElement.id);
		if(currElement != null) {
		    if(currElement.options && sourceElement.options) {
			for(optCt=0; optCt < sourceElement.options.length; optCt++) {
			    if(sourceElement.options[optCt].selected) {
			        currElement.options[optCt].selected = true;
				window.top._ceaTwoWayForm._widgetHandlers
				[currElement.id]._changedByUser = true;
				window.top._ceaTwoWayForm._widgetHandlers
				[currElement.id]._handleOnChange(currElement.value);
				matchedCount++;
				break;
			    }
			}
		     }
		     else if(sourceElement.value != ""){
		        console.log(sourceElement);
			currElement.value = sourceElement.value;
			window.top._ceaTwoWayForm._widgetHandlers[currElement.id].
			_changedByUser = true;
			window.top._ceaTwoWayForm._widgetHandlers[currElement.id].
			_handleOnChange(currElement.value);
										
		     }
		 }
	  }
	}
    }, this);
},

setTargetFormElements 利用 dojo.withDoc 函数,以便能够与共同浏览会话的窗口中包含的 DOM 进行交互。因此,示例中的这个函数能够与 collabform.html 页面中的元素交互。setTargetFormElements 函数循环 sourceFormElements 数组中的每个元素,对于每一个元素,尝试在当前文档(collabform.html 页面)中找到一个带有匹配 ID 的元素。找到适当的值之后,代码使用 TwoWayForm 小部件实例的小部件句柄触发一个更改事件。

您需要做的就是确保表单在客户的共同浏览会话中出现之前调用这个新函数。您可以在现有 openCollaborationDialog 函数中插入一个调用,如清单 17 所示。

清单 17. 更新后的 openCollaborationDialog 方法
openCollaborationDialog : function() {
   this.setTargetFormElements();
   this.inherited(arguments);
}

其他方法都被移除,因为扩展的小部件从 cea.widget.CollaborationDialog 基础小部件继承它们。

对 claimform.html 页面进行一些更新,以包含新的 ClickToCall 小部件,并通过关联包含新的 CollaborationDialog 小部件。要实现这一点,只需更新 dojo require 语句和 CSS 导入,如清单 18 所示。

清单 18. 更新后的 claimform.html 导入
 <style type="text/css">
@import "ceadojo/dijit/themes/tundra/tundra.css";
@import "ceadojo/dojo/resources/dojo.css";
@import "ceadojo/cea/widget/ClickToCall/ClickToCall.css";
@import "ceadojo/cea/widget/Cobrowse/Cobrowse.css";
@import "ceadojo/cea/widget/CollaborationDialog/CollaborationDialog.css";
</style>

<script>
ceadojo.registerModulePath("acme","../acme");
ceadojo.require("dijit.form.TextBox");
ceadojo.require("dijit.form.SimpleTextarea");
ceadojo.require("dijit.form.ComboBox");
ceadojo.require("acme.widget.ClickToCall");
</script>

当您打包这些更改并重新部署应用程序后,可以验证新功能。启动 claimform.html 页面,输入一个索赔者姓名、事故日期和事件、警察报告编号、以及其他一些信息,如图 11 所示。

图 11. 客户索赔创建表单
屏幕显示完成的事故信息域。
屏幕显示完成的事故信息域。

假定此时您需要一位客户服务代表的帮助,因此您单击 Call 按钮。连接建立后,客户服务代表认为最好进入一个共同浏览会话来解决这个问题。当共同浏览窗口打开时,您看到您在 claimform.html 页面中输入的信息自动传输到共同浏览会话中的 collabform.html 页面中。

图 12. 在共同浏览会话中填充的索赔创建表单
屏幕显示完成的事故信息域。
屏幕显示完成的事故信息域。

由于 清单 16 中的代码手动发出 onChange 事件,初始表单中的信息无需额外修改就传输到客户和客户服务代表的共同浏览窗口。

结束语

WebSphere CEA Feature Pack 的 Dojo 小部件提供能够极大加强您的在线应用程序的交流和协作功能的能力。您可以将这些开箱即用的小部件嵌入您的现有或新应用程序,以支持点击呼叫、共同浏览和双向表单交互。如果这些开箱即用功能不能满足您的需要,您可以使用 Dojo 基础来满足您的应用程序需要的定制功能。如果您认为自己的 Web 应用程序能够从增强的交流和协作获益,那么就仔细看看 WebSphere CEA Feature Pack 吧。


下载资源


相关主题


评论

添加或订阅评论,请先登录注册

static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=Web development, WebSphere
ArticleID=659864
ArticleTitle=实现 HTML 表单的协作体验
publish-date=05192011