自定义用于由 WebSphere 提供支持的业务空间的 HTMLDojo 表单.docx

1、自定义用于由 WebSphere 提供支持的业务空间的 HTMLDojo 表单2009 年 1 月 14 日IBM WebSphere Process Server V6.1.2 具有一个称为“由 WebSphere 提供支持的业务空间”的新组件，此组件弥补了 Web 2.0 和以人为中心的业务流程管理（business process management，BPM）之间的差距。使用业务空间，您可以通过使用多个小部件在单个 Web 前端中联合 WebSphere Process Server、WebSphere Business Monitor 和其他产品的功能，从而创建 Web 2.0 应用

2、程序。要在业务空间中显示人工任务，您可以在 WebSphere Integration Developer 中生成用户界面，从而产生 HTML-Dojo 表单，该表单可能不会马上就适合您的需要。本文描述如何在调整业务集成解决方案时自定义 HTML-Dojo 表单，并用简短的示例演示常见的修改。来自 IBM WebSphere Developer Technical Journal。引言通过业务空间，用户可以使用需要人工交互的业务流程，这些人工交互被建模为人工任务。对于每个任务，人工任务编辑器中的客户端设置将引用某个 用户界面。该用户界面将显示出来，以便用户能够与每个任务交互。IBM Lotus

3、 Forms 和 HTML-Dojo 表单均受支持，但是就本文的范围而言，我们将把重点放在 HTML-Dojo 表单上。要了解这个用于人工任务的用户界面如何工作，它能够帮助您理解人工任务的一些方面。人工任务向运行时环境公开一个由输入和输出消息组成的界面。在业务空间中，可以通过三种模式显示人工任务。在第一种模式（本文将其称为发起）中，用户希望通过人工任务启动某个流程，并通过输入初始数据然后提交数据来实现这一点。要处理某人已经开始处理的人工任务，用户将在第二种模式下工作，本文将该模式称为编辑模式。此人工任务可能已经分配给该用户，或者该用户可能已申领了此任务。业务用户必须读取输入消息，然后输入正确的

4、输出消息。当用户希望查看某个人工任务的状态或已完成的另一个人工任务的结果时，他或她将在第三种模式中工作，本文将其称为查看模式。在查看模式下，用户不输入信息；他或她仅读取输入消息和输出消息。下面我们将阐述每种操作模式下的不同可视化需求。在发起模式下，用户仅在输入消息中输入所需的信息。在此模式下，用户无法在输出消息中查看或 输入数据。在编辑模式下，用户可以同时查看输入和输出消息。但是在此模式下，用户不能更改输入消息所交付的信息。在查看模式下，用户查看每种类型的消息的 信息，但是不能改动该信息。输入字段在缺省情况下是锁定的。 下图对不同的模式进行了总结。图 1. 发起、编辑和查看模式总结人工任务的输

5、入和输出可以具有相同的消息类型。例如，用户可能希望审阅输入数据，将审阅并且可能更改后的数据复制到审阅流程的输出表单中。在 此情况下，将以更方便于用户使用 HTML-Dojo 表单的方式处理消息。通过预填充可以省去将所有输入数据复制到输出表单所需的时间和精力。查看模式也是如此；业务用户只需输入与发起任务时相同的数据。区 别在于编辑模式。用户认为自己是在任务的发起者使用的相同表单中工作，因为用户界面看起来相同，并且已经包含用户将要更新的数据。为了实现此用户界面，将 不显示任何单独的输入和输出消息。相反，输入表单将隐藏，其数据将用于预填充输出表单。下图总结了在人工任务具有相同的输入和输出消息时如何显

6、示用户界 面。图 2. 总结在人工任务具有相同的输入和输出消息时如何显示用户界面先决条件要使用业务空间，您需要安装： WebSphere Integration Developer V6.1.2 WebSphere Process Server V6.1.2回页首了解生成的 HTML正如我们在前面描述的，每个人工任务包括输入和输出消息，HTML 表单也必须反映这些消息。因此，生成的 HTML 页面包含一个用于输入消息的部分，以及另一个用于输出消息的部分。这些消息部分从 Dojo 小部件编译而来，那些 Dojo 小部件用于显示用户与之交互的输入元素。两个部分都包装在 元素中。此外，WebSphe

7、re Integration Developer 中生成的 HTML 页面包含围绕表单的 元素，以及级联样式表（cascading style sheet，CSS）定义。下图描绘了所生成的 HTML-Dojo 表单：图 3. 生成的 HTML-Dojo 表单由于所有生成的页面使用相同的 CSS 类，除非使用带自定义 CSS 类的额外 元素，否则一个文件中的更改将影响业务空间中的所有 HTML 页面。使用额外的 元素，您可以指定仅处理该范围中的元素的 CSS 选择器。业务空间向 元素分配不同的 CSS 样式，具体取决于表单的显示模式（发起、编辑或查看）；因此，一定不能删除 元素。类名称是模式名称

8、 init、edit 和 view。使用 元素，可以对消息的显示方式进行控制。下面的代码示例显示了三个 CSS 定义：清单 1. 三个 CSS 定义 .http_/myNameSpace .init div.businessObject visibility :collapse; display: none; .http_/myNameSpace .edit div.businessObject .http_/myNameSpace .view div.businessObject color: gray; 每个定义的第一行包括三个选择器，这些选择器减少了受影响的元素的数量。第一个选择器 .h

9、ttp_/myNameSpace 是围绕 元素的类，此选择器将选择缩小到包括在该 元素中的元素，因此排除了业务空间中不属于此 HTML 表单一部分的所有元素。第二个选择器 .init、.edit 或 .view 指定此 CSS 定义在其中有效的操作模式。第三个选择器 div.businessObject 是表单中包括的一个 元素的示例类，该元素具有类 businessObject。此选择器可以是表单中您希望为其定义 CSS 的任何其他元素。这些选择器在业务空间中以不同的方式定义样式。 如果 节点具有类 init，则具有类 businessObject 的 元素将不可见。如果在编辑模式下显示 ，

10、则表单具有类 edit，因此将显示该元素。在查看模式下， 具有类 view， 元素将可见，尽管文本将是灰色的。 要了解的下一个重要概念是如何在消息字段的基础上构造消息。下面的文本是所生成的 Dojo 小部件定义示例的大致情况：清单 2. 表明生成的 Dojo 小部件定义示例的大致情况的文本除了典型的 HTML-Dojo 属性外，此小部件定义还包含自定义属性，每个自定义属性在业务空间中具有各自的语义。下表包含这些属性及其用法的摘要。表 1. 属性及其用法摘要属性语义namename 属性将 元素绑定到输入消息的某个元素。该绑定将在类似于 Xpath 的语句中指定，该语句引用此输入字段所表示的特定

11、消息部分。注意：如果更改这些语句，在表单基础上创建消息时将会发生运行时错误。sdoMessageTypesdoMessageType 属性指定该小部件是属于输入还是输出消息。此属性是根据当前模式启用或禁用表单元素所必需的。其值可以是 input 或 output。requiredrequired 属性指定该小部件是否包含必填字段。如果将 required 属性设置为 true，则用户在输入有效数据之前将无法提交表单。 sdoPrepopulationsdoPrepopulation 属性指定使用输入消息的值预填充小部件的值，从而省去用户将每个值从输入表单复制到输出表单的工作。如果人工任务的输入

12、和输出使用完全相同的消息类型，则 会自动将消息内容生成到 HTML 表单中。您只能对属于输出消息的小部件使用 sdoPrepopulation 属性，然后只能在用户处于编辑模式时使用此属性。该绑定被指定为类似于 XPath 的语句。回页首了解加载过程当用户使用人工任务时，业务空间将加载在人工任务的客户端设置中指定的 HTML-Dojo 表单。加载该页面后，将对原始 HTML 代码进行预处理，其中包括设置 节点的类属性以及其他操作。取决于页面的显示模式，该值将设置为 init、edit 或 view。然后将准备好的 HTML 代码添加到 DOM 树，从而触发 Dojo 解析器呈现页面的新片段。然

13、后，如果是在编辑或查看模式下打开页面，则业务空间将加载输入和输出消息。如果消息不为空，则将内容添加到页面上的 Dojo 小部件。请注意，输入和输出的 Dojo 小部件将根据 HTML 页面的显示模式被启用或禁用。但是，如果业务用户刚申领了某个任务，则他不可能已经为输出消息输入了任何数据。在此情况下，业务空间将接收到空消息，并将输入消息中的值复制到 Dojo 小部件，同时将匹配值放在 sdoPrepopulation 属性中。 下面我们将介绍一个示例场景，稍后我们将使用此场景来演示 HTML 表单的典型自定义。回页首示例场景假设您希望修改用于审批传入资金转帐的人工任务的用户界面。图 4 显示了此

14、人工任务中的 approveTransfer 操作。图 4. 人工任务的 approveTransfer 操作图 5 显示了三个业务对象：ApprovalRequest、BankTransferInformation 和 Remark。BankTransferInformation 是 ApprovalRequest 业务对象的子业务对象，其中包含描述转帐详细信息的字段（例如是谁转出的，以及谁是受益人）和元数据（例如接收时间和电话号码以及电子邮件地址）。 PhoneNumber 字段或 EmailAddress 字段存储联系人详细信息，具体取决于请求的接收方式。带 Remark 类型的子业务对

15、象的附加数组存储处理该转帐的员工的意见。图 5. ApprovalRequest、BankTransferInformation 和 Remark 业务对象常见用法大多数自定义都不需要关于业务空间的特殊知识，只需具备 Web 开发经验即可，因此我们将把重点放在某些可能由于业务空间处理 HTML 页面的方式而引起的问题上。 只要将更改限制到 body 标记或 CSS 定义之间的内容，大多数在典型 HTML 页面中有效的自定义也将在业务空间中有效。这些标记之外的所有其他更改将被忽略。最典型的自定义是重命名输入元素标签，因为那些名称最初是从业务对象派生而来的，因此可能不是您希望向业务用户公开的名称。

16、通过使用文本或 HTML 编辑器编辑 HTML 文件并更改 label 标签之间的值，您可以重命名输入元素标签。此外，通过 img 标记并使用绝对或相对 URL 来引用文件，您还可以包括图像。使用相对 URL 将使开发 HTML 页面变得更加容易，因为您可以在 WebSphere Integration Developer 中测试页面。此外，您可以将样式表外部化，当所有人工任务表单应该具有共同的外观时，这是非常有用的。与更改每个文件中的 CSS 不同，您可以从页面中删除现有的 CSS，将该 CSS 替换为如下引用公共样式表 style.css 的 import 语句： import style

17、.css;下面的示例说明了如何处理自定义，在典型的 HTML 表单中，您将以不同的方式处理这些自定义。示例 1：删除或隐藏字段假设您希望从生成的 HTML 表单中删除 EmailAddress 字段，因为对于通过电话接收的转帐，银行希望将此字段保留为空。在典型的 HTML 表单中，您将从生成的 HTML 中删除 EmailAddress 字段，无论是直接从源代码中将其删除，还是通过使用某个可视化工具，例如 WebSphere Integration Developer 包括的 Page Designer。业务对象中的对应字段将自动设置为空。但是，当某个输入字段是必需的，或者由于该字段是必需的而

18、应该设置为缺省值时，您不应该删除该字段。相反，您必须隐藏特定的字段类型，并设置 其 value 属性。由于除 type、name 和 value 以外的属性仅在显示字段时使用，因此所需的 HTML 标记非常短：在此例中，尽管提交了值“no address provided”，但是 EmailAddress 字段未显示出来。示例 2：预填充假设您希望将预填充的字段手动改进后再填充到生成的 HTML 表单中。缺省情况下，当界面包含的输入和输出的业务对象类型相同时，将启用预填充。在其他情况下，例如当输入为输出的子业务对象时，则不会触发预填充。因此，您必须手动添加预填充。ApproveTransfer

19、 界面就是这样一种情况。BankTransferInformation 输入业务对象是 ApprovalRequest 输出业务对象的子业务对象（请参见图 5）。因此，通过按照下面的段落中描述的步骤操作，您可以使用输入业务对象中的值预填充此子业务对象的所有字段。正如前面提到过的， 标记的 sdoPrepopulation 属性确定应该使用输入消息的哪个部分来初始化字段的值。在此例中，您希望使用输入消息中的对应值填充 BankTransferInformation 子业务对象的 Amount 字段。要实现这一点，可以通过搜索 XPath 表达式 /output/Transfer/Amount，从

20、而查找您想要的字段的 标记。然后，将 sdoPrepopulation 属性更改为指向输入消息的正确部分的 XPath。在此例中，该值为 /input/Amount。更新后的 HTML 部分类似如下：清单 3. 更新后的 HTML如果不确定正确的 XPath，可以在生成的 HTML 文件的输入部分中进行查找。该部分包含输入业务对象的每个字段的 元素，这些元素使用正确的 XPath 语句作为其 name 属性的值。示例 3：更改输入字段的顺序所生成的页面上的输入字段的顺序取决于在业务对象定义中定义对应字段的顺序。由于这些字段通常是任意排序的，没有考虑到适用性，您可能希望对输入字段重新排序，以更好

21、地适应用户的需要。正如前面提到的，您可以通过编辑 HTML 和 CSS 来完全自定义 HTML-Dojo 表单的外观；但是，编辑生成的 HTML 源代码将使结果文件与业务空间不兼容。由于使用表单中的数据来生成业务对象的过程依赖字段的顺序，一定不能更改 HTML 中的输入元素的顺序。因此，可以使用带相对定位的自定义 CSS 类重新排列输入字段。 在下面的示例中，插入了两个新的 CSS 类 fromAccount 和 amount，以定义 40 个像素的相对偏移，这是两个连续行的大致距离。fromAccount 类的元素将向下移动 40 个像素，amount 的元素将向上移动，从而切换这些类的垂直

22、位置。要切换某个输入字段及其标签，可以将这两个 CSS 类分配给该字段和标签，如下面的 HTML 源代码所示：清单 4. HTML 代码显示了如何将 CSS 类分配给字段和标签 . .fromAccount position:relative; top: 40px; .amount position:relative; top: -40px; . input FromAccount * Amount * .示例 4：使用数组容器正如前面提到的，BankTransferInformation 业务对象可以具有多个 Remark 业务对象作为其子业务对象。业务空间通过使用 Dojo 小部件 bpc

23、.widgets.FormArrayContainer 支持此场景，该小部件包含子业务对象的输入元素，并允许您多次添加输入元素。检查生成的源代码，您可以看到以下行：清单 5. 生成的源代码 Remarks+ - . . 要进行自定义的重要元素是带 arrayTemplate 类的 元素。当您单击加号 (+) 时，内部的 HTML 代码将复制到新的 元素中，该元素将作为新的子业务对象添加到 FormArrayContainer，这样您就可以自定义该 HTML，前提是要满足前面的示例中描述的限制。 示例 5：更改输入字段小部件WebSphere Integration Developer 为业务对象的每个字段选择最适合的 Dojo 小部件，具体取决于数据类型。在某些情况下，这些自动选择的小部件并不适合您的要求。幸运的是，只要这些小部件是以下网站上