实现 HTML 表单的协作体验（1）

look_w

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

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

本文假定您对 WebSphere CEA Feature Pack 中的小部件有基本了解。参阅 “” 了解更多信息。

您可以使用 WebSphere Application                Server Communications Enabled Feature Pack 提供这种类型的协作功能。这个特性包包含可用于嵌入点击呼叫、共同浏览和双向表单功能的 Dojo 小部件。这些函数的用例几乎没有限制。
在本文中，我们将探索这样一个场景：实现三个小部件，以支持一个客户服务代表来帮助一个用户，该用户正在尝试完成并提交一个在线表单。
场景假设您正在负责虚拟的 Acme Insurance Company 的网站。Acme 想利用 WebSphere Application Server CEA Feature Pack 来快速有效地连接客户服务代表和在填写一份新的索赔申请单时遇到问题的客户。
如果您想要使您的网站更具协作性，但目前没有 WebSphere Application Server，请试用 。

本文将指导您逐步完成使用 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 页面的导入

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15

<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 声明

1 2 3 4 5 6 7

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