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

要了解的下一个重要概念是如何在消息字段的基础上构造消息。

下面的文本是所生成的Dojo小部件定义示例的大致情况：

清单2.表明生成的Dojo小部件定义示例的大致情况的文本

dojoType="dijit.form.ValidationTextBox"regExp=".*"

id="http_//myNameSpace"sdoMessageType="output"

sdoPrepopulation="/input1/foo/bar"required="true"

class="fieldInput"/>

除了典型的HTML-Dojo属性外，此小部件定义还包含自定义属性，每个自定义属性在业务空间中具有各自的语义。

下表包含这些属性及其用法的摘要。

表1.属性及其用法摘要

属性

语义

name

name属性将元素绑定到输入消息的某个元素。

该绑定将在类似于Xpath的语句中指定，该语句引用此输入字段所表示的特定消息部分。

注意：

如果更改这些语句，在表单基础上创建消息时将会发生运行时错误。

sdoMessageType

sdoMessageType属性指定该小部件是属于输入还是输出消息。

此属性是根据当前模式启用或禁用表单元素所必需的。

其值可以是input或output。

required

required属性指定该小部件是否包含必填字段。

如果将required属性设置为true，则用户在输入有效数据之前将无法提交表单。

sdoPrepopulation

sdoPrepopulation属性指定使用输入消息的值预填充小部件的值，从而省去用户将每个值从输入表单复制到输出表单的工作。

如果人工任务的输入和输出使用完全相同的消息类型，则会自动将消息内容生成到HTML表单中。

您只能对属于输出消息的小部件使用sdoPrepopulation属性，然后只能在用户处于编辑模式时使用此属性。

该绑定被指定为类似于XPath的语句。

回页首

了解加载过程

当用户使用人工任务时，业务空间将加载在人工任务的客户端设置中指定的HTML-Dojo表单。

加载该页面后，将对原始HTML代码进行预处理，其中包括设置节点的类属性以及其他操作。

取决于页面的显示模式，该值将设置为init、edit或view。

然后将准备好的HTML代码添加到DOM树，从而触发Dojo解析器呈现页面的新片段。

然后，如果是在编辑或查看模式下打开页面，则业务空间将加载输入和输出消息。

如果消息不为空，则将内容添加到页面上的Dojo小部件。

请注意，输入和输出的Dojo小部件将根据HTML页面的显示模式被启用或禁用。

但是，如果业务用户刚申领了某个任务，则他不可能已经为输出消息输入了任何数据。

在此情况下，业务空间将接收到空消息，并将输入消息中的值复制到Dojo小部件，同时将匹配值放在sdoPrepopulation属性中。

下面我们将介绍一个示例场景，稍后我们将使用此场景来演示HTML表单的典型自定义。

回页首

示例场景

假设您希望修改用于审批传入资金转帐的人工任务的用户界面。

图4显示了此人工任务中的approveTransfer操作。

图4.人工任务的approveTransfer操作

图5显示了三个业务对象：

ApprovalRequest、BankTransferInformation和Remark。

BankTransferInformation是ApprovalRequest业务对象的子业务对象，其中包含描述转帐详细信息的字段（例如是谁转出的，以及谁是受益人）和元数据（例如接收时间和电话号码以及电子邮件地址）。

PhoneNumber字段或EmailAddress字段存储联系人详细信息，具体取决于请求的接收方式。

带Remark类型的子业务对象的附加数组存储处理该转帐的员工的意见。

图5.ApprovalRequest、BankTransferInformation和Remark业务对象

常见用法

大多数自定义都不需要关于业务空间的特殊知识，只需具备Web开发经验即可，因此我们将把重点放在某些可能由于业务空间处理HTML页面的方式而引起的问题上。

只要将更改限制到body标记或CSS定义之间的内容，大多数在典型HTML页面中有效的自定义也将在业务空间中有效。

这些标记之外的所有其他更改将被忽略。

最典型的自定义是重命名输入元素标签，因为那些名称最初是从业务对象派生而来的，因此可能不是您希望向业务用户公开的名称。

通过使用文本或HTML编辑器编辑HTML文件并更改label标签之间的值，您可以重命名输入元素标签。

此外，通过img标记并使用绝对或相对URL来引用文件，您还可以包括图像。

使用相对URL将使开发HTML页面变得更加容易，因为您可以在WebSphereIntegrationDeveloper中测试页面。

此外，您可以将样式表外部化，当所有人工任务表单应该具有共同的外观时，这是非常有用的。

与更改每个文件中的CSS不同，您可以从页面中删除现有的CSS，将该CSS替换为如下引用公共样式表style.css的import语句：

@import"style.css";

下面的示例说明了如何处理自定义，在典型的HTML表单中，您将以不同的方式处理这些自定义。

示例1：

删除或隐藏字段

假设您希望从生成的HTML表单中删除EmailAddress字段，因为对于通过电话接收的转帐，银行希望将此字段保留为空。

在典型的HTML表单中，您将从生成的HTML中删除EmailAddress字段，无论是直接从源代码中将其删除，还是通过使用某个可视化工具，例如WebSphereIntegrationDeveloper包括的PageDesigner。

业务对象中的对应字段将自动设置为空。

但是，当某个输入字段是必需的，或者由于该字段是必需的而应该设置为缺省值时，您不应该删除该字段。

相反，您必须隐藏特定的字段类型，并设置其value属性。

由于除type、name和value以外的属性仅在显示字段时使用，因此所需的HTML标记非常短：

value="noaddressprovided"/>

在此例中，尽管提交了值“noaddressprovided”，但是EmailAddress字段未显示出来。

示例2：

预填充

假设您希望将预填充的字段手动改进后再填充到生成的HTML表单中。

缺省情况下，当界面包含的输入和输出的业务对象类型相同时，将启用预填充。

在其他情况下，例如当输入为输出的子业务对象时，则不会触发预填充。

因此，您必须手动添加预填充。

ApproveTransfer界面就是这样一种情况。

BankTransferInformation输入业务对象是ApprovalRequest输出业务对象的子业务对象（请参见图5）。

因此，通过按照下面的段落中描述的步骤操作，您可以使用输入业务对象中的值预填充此子业务对象的所有字段。

正如前面提到过的，标记的sdoPrepopulation属性确定应该使用输入消息的哪个部分来初始化字段的值。

在此例中，您希望使用输入消息中的对应值填充BankTransferInformation子业务对象的Amount字段。

要实现这一点，可以通过搜索XPath表达式/output/Transfer/Amount，从而查找您想要的字段的标记。

然后，将sdoPrepopulation属性更改为指向输入消息的正确部分的XPath。

在此例中，该值为/input/Amount。

更新后的HTML部分类似如下：

清单3.更新后的HTML

dojoType="dijit.form.ValidationTextBox"regExp="\d*（[.|,]\d*）?

"

sdoMessageType="output"required="true"class="fieldInput"

sdoPrepopulation="/input/Amount"/>

如果不确定正确的XPath，可以在生成的HTML文件的输入部分中进行查找。

该部分包含输入业务对象的每个字段的元素，这些元素使用正确的XPath语句作为其name属性的值。

示例3：

更改输入字段的顺序

所生成的页面上的输入字段的顺序取决于在业务对象定义中定义对应字段的顺序。

由于这些字段通常是任意排序的，没有考虑到适用性，您可能希望对输入字段重新排序，以更好地适应用户的需要。

正如前面提到的，您可以通过编辑HTML和CSS来完全自定义HTML-Dojo表单的外观；但是，编辑生成的HTML源代码将使结果文件与业务空间不兼容。

由于使用表单中的数据来生成业务对象的过程依赖字段的顺序，一定不能更改HTML中的输入元素的顺序。

因此，可以使用带相对定位的自定义CSS类重新排列输入字段。

在下面的示例中，插入了两个新的CSS类fromAccount和amount，以定义40个像素的相对偏移，这是两个连续行的大致距离。

fromAccount类的元素将向下移动40个像素，amount的元素将向上移动，从而切换这些类的垂直位置。

要切换某个输入字段及其标签，可以将这两个CSS类分配给该字段和标签，如下面的HTML源代码所示：

清单4.HTML代码显示了如何将CSS类分配给字段和标签

...

.fromAccount{

position:

relative;

top:

40px;

}

.amount{

position:

relative;

top:

-40px;

}

...

SDOMaxOccurrence="1">

input

FromAccount*

dojoType="dijit.form.NumberTextBox"id="http___…WidgetID"

constraints="{min:

-2147483648,max:

2147483647,places:

0}"

sdoMessageType="input"sdoPrepopulation=""required=

"true"class="fieldInput"/>