任何一种表单技术若只能将已有书面形式的表单照搬到计算机屏幕上,很容易就会被遗弃。而 IBM Workplace Forms 则能提供比“简单照搬”要多得多的功能和价值。没错,书面形式的表单确实可以被转换为对等的在线表单,但这仅仅是个开始。
Workplace Forms 采用内部逻辑和内部数据模型。该逻辑封装了一些特定的规则,因而可以防止用户输入不正确的信息,甚至还可以通过根据需要打开和关闭表单的一部分来指导用户完成填写表单的全过程。内部数据模型使集成更为容易。此数据模型是单根的 XML 片段,只要是格式良好的 XML,这个 XML 片段就可以遵循任何模式或标准。这意味着可以将数据直接从 XML 数据库或其他 XML 系统移到 Workplace Forms 表单中来,而且还可以再移回去。
本文假设您以前对 Workplace Forms 没有任何了解。但若想跟随我们一同构建一个简单的示例表单,您将需要安装 IBM Workplace Forms Designer V2.6.1 和 IBM Workplace Forms Viewer V2.6.1。可以通过 developerWorks 获得 Workplace Forms Designer 和 Viewer 的试用版本。
创建新表单时,首先必须决定是遵循以表单为中心的设计方法还是遵循以数据为中心的设计方法。例如,如果需要基于现有书面形式的表单开始设计,您不妨使用以表单为中心的方法,具体做法一般是首先复制现有表单的外观,然后设计一个数据模型与之相匹配。相反,如果需要从数据集(比如在数据库中必须完成的字段)开始,则最好首先设计数据模型,然后再创建表单布局。Workplace Forms Designer 包含很多功能,不管您使用哪种方法,这些功能对您都会有所帮助。
在本文中,我们采用以数据为中心的方法。首先从定义所需数据集的模式开始,然后创建一个数据模型来反映这个模式,最后基于该数据模型设计表单。具体步骤如下:
- 创建新的 XForms 表单。
- 创建 XForms 数据实例。
- 创建标签。
- 创建输入控件。
- 对齐项目。
- 创建 XForms 表。
- 为表设置计算公式。
- 为按钮添加图像。
- 创建 XForms 提交。
- 设置数据约束。
- 创建本地化表单。
要创建新的 Workplace Forms 表单,请遵循以下步骤:
- 在 Workplace Forms Designer 中,单击 Workbench 图标以打开 Designer 透视图。
- 在 Navigator 视图中右键单击项目(如果无现有项目,则创建一个新项目),然后选择 New - New Workplace Form。这会打开 New Workplace Form 对话框(参见图 1)。注意,FormsProject 文件夹被默认选中。
- 在 File name 字段中,键入 PurchaseOrder,然后单击 Next。
图 1. New Workplace Form 对话框
- 打开 Choose Template 对话框(参见图 2),在这个对话框中可以为表单选择一个模板。模板是创建表单的起点。可以使用各种各样的模板,选择一个模板开始之后,可以进行任意更改,包括改变模板自身的外观。
- 对于本文,我们从一个完全空白的表单开始,从头创建整个设计。选择 Default Empty Form – XForms 模板,然后单击 Finish。
图 2. Choose Template 对话框
现在,您会拥有一个空白的工作区,可以在这个工作区上创建表单。在 XForms 视图中,有这样一个模型(参见图 3),该模型将所有数据都存储在表单中(就像一个小型的数据库一样)。当选择 XForms 模板时会自动创建这个模型。
图 3. XForms 模型
提示:可以通过在 XForms 视图中添加一个模型将不支持 XForms 的标准 XFDL 表单转换为支持 XForms 的表单。要向 XFDL 表单中添加 XForms 模型,需转到 XForms 视图,右键单击 No Model Exists,然后选择 Add XForms Support。
XForms 模型将数据放置在数据实例中,数据实例是表单内数据的逻辑组合。例如,如果表单要与两个后台系统集成,则可以创建两个实例,每个实例特定于具体的系统。
每个数据模型必须包含一个或多个数据实例。Instance 视图具有四个按钮命令,可以使用这些命令来创建实例,如表 1 中所示。
表 1. Instance 图标
|
| 从当前文档创建实例。基于已经添加到表单的各项生成实例。 |
|
| 创建空实例。创建一个空的数据实例。 |
|
| 从模式中创建实例。从附带的模式中创建数据实例。数据实例基于模式并且符合模式所指定的布局。 |
|
| 从 WSDL 消息中创建实例。从 Web 服务描述语言 (WSDL) 消息中创建数据实例。 |
在这个例子中,我们向您介绍如何从模式中创建数据实例。这不仅仅会创建一个与模式相匹配的数据实例,而且还会创建一个实例用来针对该模式验证用户在完成此表单过程中的输入。要达到此目的,请遵循以下步骤:
- 在 Enclosures 视图中,展开 Schema 选项。
- 右键单击 Model:Default,然后选择 Enclose Schema File。
- 浏览到包含模式文件的目录(在本文的 下载部分 提供了名为 purchaseOrder.xsd 的示例模式文件),然后单击 Open。在 Enclosures 视图中,可以看到已经附上一个模式(参见图 4)。
图 4. 模型中的模式文件
- 在 Instance 视图中,单击 XSD 图标即可从模式中生成实例(有关图标,请参见表 1)。
- 在 Instance 视图中选择根节点 <instance>(参见图 5)。注意,它的属性显示在 Properties 视图中。在当前这个视图中,将 ID 更改为 poInstance。
提示:从模式中生成数据实例之后,不能使用 Instance 视图来修改这个实例。之所以这样,是为了防止以有悖于模式的某种方式意外更改实例。但是,如果确实需要更改,可以在 Source 视图中进行。例如,若想向实例中添加示例数据,这种方式就会派上用场。
图 5. 从模式中创建的新实例
标签用于在表单上显示标题和说明。当用户正在填写表单时,标签既不接受输入,也不接收聚焦。在 Workplace Forms 中有两种样式的标签:
- 标签项:表单上的一个单独的小部件,它类似于字段或者弹出列表。
- 标签属性:可以将这些属性看作是内置的标签,可以将它们添加到任何小部件(如字段或复选框)的左上部。
一般来说,单独的标签项使用的频率更高,原因是它们可对应于表单上的其他项出现在表单的任何位置;它们并不局限于项目的左上部。
标签项有两种:XFDL 标签和 XForms 标签。这两种标签之间的惟一区别是 XForms 标签链接到数据模型并从数据实例的节点上获得内容。
在我们的表单中,我们按照如下方式开始使用 XFDL 标签项:
- 在 Standard Library 调色板中,单击 Label (Output) 旁边的下拉按钮,然后选择 Label (Non-XForms)。
- 单击工作区以添加标签。
- 双击工作区上的标签并将其值更改为 Make Purchase Order。
- 在 Properties 视图中,展开 Appearance 部分(参见图 6)并更改以下设置:
- 通过单击 “. . .” 按钮并完成打开的对话框将 fontinfo 设置为 12 pt Arial (bold)。
- 通过在字段中键入值将 fontcolor 设置为十六进制值 #006699。
提示:在 Properties 视图中,已经修改的属性由蓝色的圆表示(参见图 6)。可以单击蓝色的圆将属性重置为它的默认值(由白色的圆表示)。
图 6. 更改标签的外观
注意:可以使用颜色的名称、颜色的 RGB 值或者颜色的十六进制值来指定颜色。透明颜色意味着未指定任何颜色,与页面的背景颜色相同。
- 在工作区上添加 Store Information、Supplier Information 和 Items for Purchase 标签,如图 7 所示。选择工作区上的每个标签,拖动边缘以调整标签的大小并在 Properties 视图中更改它们的外观设置,如下所示:
- 将 justify 设置为 center。
- 将 fontinfo 设置为 10 pt Arial (bold)。
- 将 fontcolor 设置为 white。
- 将 bgcolor 设置为十六进制的值 #8080FF。
图 7. 表单中的标签
提示:可以使用复制和粘贴功能创建相同样式(字体颜色、背景颜色和字体大小)的标签。例如,可以设置好 Store Information 标签并将其复制来创建 Supplier Information 和 Items for Purchase 标签。这之后,只需更改其值及大小。
字段是用于收集用户的输入。当用户填写表单时,字段接收聚焦,通常用户在字段中输入数据。
在 Workplace Forms Designer 中可以使用几种类型的字段。前三种字段链接到数据模型并且只出现在 XForms 表单中,而最后一种既可以出现在 XForms 表单中,也可以出现在 XFDL 表单中:
- Input:允许单行输入。
- TextArea:允许两行或多行输入。该字段仅用于 XForms。
- Secret:工作方式类似于 password 字段。键入到字段中的所有字符都显示为单一字符,如星号 (*)。该字段仅用于 XForms。
- Non-XForms:这是一个标准的 XFDL 字段。它的行为类似于前面的任何一种字段类型,但是它并不链接到 XForms 数据模型。
创建字段的方法也有两种。如果采用以表单为中心的设计方式,则可以通过单击调色板上的 Field 按钮向表单中添加字段。如果采用以数据为中心的设计方式,则可以将数据元素从 Instance 视图中拖动到调色板上。Workplace Forms Designer 自动创建 Input 字段以表示该数据元素。
由于我们采用的是以数据为中心的设计方式,因此,可以按照如下方式从数据模型中拖动:
- 从 Instance 视图中,打开 <store> 节点并将 <id> 节点拖动到工作区上。这样便创建了一个具有设计工作区上的匹配标签的字段,而且该字段也会被自动绑定到实例中的 <id> 节点。
- 单击工作区上的 Date 字段并检查 Properties 视图。当展开 XForms(输入)部分时,将看到 ref 使用 XPath 表达式指向数据实例中的 id 元素(参见图 8)。
图 8. 使用 XPath 表达式将输入字段与数据实例绑定在一起
- 单击工作区上的 Date 字段并检查 Instance 视图。如果单击工具栏中的 “Show bound instance elements” 按钮,则 <id> 节点旁边的括号内出现数字 1,这表示该节点已绑定到工作区上的一个项目。
提示:还可以使用菜单命令 View - Highlight Items with XForms Binds 或 Workplace Forms Designer 主工具栏中的 “Highlight Items with XForms Binds” 按钮来高亮显示与数据实例元素相关联的 XForms 项目。该按钮是一个三向开关;它可以高亮显示绑定到数据模型的项目、未绑定到数据模型的项目或者无项目。
- 对于以下数据元素重复上面的步骤:
- <store> 下的其他元素
- <supplier> 下的所有元素
- <totalPrice> 元素
- 按下 Ctrl 键并选择工作区上输入字段前面的标签。在 Properties 视图中,将 fontinfo 属性更改为 8 pt Arial (bold)。
- 将字段的大小重新调整为适当的大小。完成之后,表单外观应该类似于图 9。
图 9. 表单中的输入字段
可以拖放已经放置在表单上的任何项目使其左右移动。但是,如果要手动将它们排列正确仍然很困难。Workplace Forms Designer 包含一组对齐工具,这些工具可以帮助您排列表单上的项目。
有两种类型的对齐:
- 绝对对齐:将项目放置在页面上的固定位置。这种类型的对齐使用 x、y 坐标系来指定项目应该放置的位置。如果表单布局不随用户输入改变,则应使用绝对定位。
- 相对对齐:将项目放置在与表单上的锚定项相对的位置,而不是放置在绝对位置。当移动锚定项时,位置与其相对的所有项目也都跟着移动。如果表单极为动态,则应使用相对定位。例如,放置在表下面的那些项目通常需要使用相对定位,原因是用户可能经常会向表中添加行,这样表就会变长。
绝对对齐很容易使用,应该作为默认选择。相对对齐相对较难,原因是它取决于表单的构建顺序。构建顺序即项目在表单的 Outline 视图中出现的顺序(它反映了表单的 XFDL 源代码中项目的顺序)。项目只能与在构建顺序中出现在它们之前的锚定项相对对齐。
由于绝对对齐非常简单,因此,此处我们使用相对对齐以便您能更好地了解它:
- 单击工作区上的 Store Information 标签,按下 Ctrl 键,然后单击 Make Purchase Order 标签。
现在,两个项目都已高亮显示,其中一个项目被黑色的矩形包围,而另一项目则被中空的矩形包围。具有黑色矩形的项目被视为锚定项并只能最后单击。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Below。
注意到 Store Information 标签已被放置在 Make Purchase Order 标签下面。默认情况下,这种类型的对齐在项目之间放置三个像素的间隔。此外,还注意到 Store Information 标签的左边缘已与锚定项的左边缘对齐。
- 单击工作区上的 Supplier Information 标签,按下 Ctrl 键,单击 Store Information 标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align After。
Supplier Information 标签已放置在 Store Information 标签之后,并且它们之间有三个像素的间隔,Supplier Information 标签的顶部边缘已与锚定项的顶部边缘对齐。
- 单击 Store Information 标签的 ID 字段,按下 Ctrl 键,单击 Store Information 标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Below。
- 再次右键单击任何一个项目,然后选择 Relative Align - Relatively Align Right to Right 以对齐这两个项目。
提示:可以对项目应用任何数量的相对定位说明。这些说明始终按照被应用的顺序进行处理。可以在 Properties 视图中的 itemlocation 设置中检查此顺序。
- 使用相对定位对齐工作区上的其他字段,如图 10 所示。对于垂直箭头使用 below,对于水平箭头使用 after。
图 10. 相对对齐表单中的项目
- 单击工作区上的 Items for Purchase 标签,按下 Ctrl 键,单击 Store Information 标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Below。
正如所预料的一样,这会使项目之间出现三个像素的间隔。为了扩大这个间隔,选择 Items for Purchase 标签并按下键盘上的向下箭头键将该项目移动到它的正确位置。
提示:要使项目一次移动一个像素,则选择该项目并按下键盘上的箭头键。这个过程称为“微移”。
- 将 Make Purchase Order 标签移动到工作区上的另一个位置。可以看到所有其他项目(除了 Total Price 标签和字段之外)的位置也都相应地改变了。
- 选择 View - Show Grid 以显示网格,它可以帮助您对齐表单上的项目和确保间隔统一。
- 选择 View - Show Rulers 以启用标尺和参考线。它们可以帮助您测量屏幕上的表单项目。
现在,让我们创建一个 XForms 表以为用户提供输入多个项目的界面。遵循以下步骤进行操作:
- 在 Standard Library 调色板中,单击 Table (Repeat) 旁边的下拉按钮并选择 Table (Repeat) By Wizard。
- 单击想要在其中添加表的工作区;出现 Table Wizard 对话框。
- 选择 Advanced Setup (using existing data) 选项,然后单击 Next。
- 在 Instance 列中,选择 poInstance;在 Instance Data 列中,选择项目节点(参见图 11),然后单击 Next。
图 11. 为表选择 Instance Data
- 要配置这些列,单击 Display Columns 列中的每个项目(参见图 12)并进行以下更改:
- Display As:为除了 Subtotal 之外的所有元素选择 Text (read/write)。将 subtotal 设置为 Text (read)。这样便为每个读/写元素创建了输入字段并且为 subtotal 创建了一个标签。
- Include Header:确保选中该选项;它向表的每个列中添加一个标题。
- Header:输入列标题名称。在这个例子中,将 id 元素的标题设置为 ID。将要成为标题名称的其他元素名称的首字母要大写。
- Width (Pixels):使除了 ID 列之外的每个列的宽度为 100 个像素。对于 ID 列将宽度设置为 50(像素)。
- Show Border:打开除了 Subtotal 之外的所有列的边框。我们建议您对 Text (read) 元素关闭边框。
图 12. 为表配置列
- 单击 Next。
- 选择 Insert New Row Button 和 Remove Button on Each Row,清除所有其他选项,然后单击 Finish。
- 选择包含表的窗格,按下 Ctrl 键,单击 Items for Purchase 标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Below。它的外观类似于图 13。
图 13. 将由向导创建的表与标签对齐
可以向表中添加计算公式,Quantity 乘以 Price 可得 Subtotal,然后将所有小计加起来可获得总价格。要达到此目的,有两个表向导可用(一个用于行操作,一个用于列操作)。
让我们从行开始:
- 在 Outline 视图中,选择 TABLE1_TABLE,右键单击元素,选择 Wizards - Table Row Operation Wizard。
- 选择计算公式的目标 (ITEM5),然后单击 Next(参见图 14)。
图 14. 在行操作向导中选择目标项
- 将公式设置为 ITEM3 和 ITEM4 的乘积 (*),然后单击 Finish。
- 在 Outline 视图中,再次右键单击 TABLE1_TABLE,然后选择 Wizards - Table Column Summation Wizard。
- 在向导的第 1 步中,选择 TOTALPRICE1 字段,然后单击 Next。
- 在第 2 步中,选择 ITEM5 作为总和的列,然后单击 Finish。
- 在 XForms 视图中,注意到已经通过表向导将两个 XForms 绑定添加到表单中。这些绑定执行 Subtotal 和 Totalprice 字段的计算公式(参见图 15)。
图 15. 由表计算公式向导创建的 XForms 绑定
- 要对齐表中的项目,选择工作区上的加号 (+) 按钮,按下 Ctrl 键,然后单击表。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Below。Insert Row 按钮被移动到表的下面。
- 在 Outline 视图中,按下 Ctrl 键并选择 TOTALPRICE1 和 TOTALPRICE_LABEL1 元素。
- 将它们拖放到 TABLE1_PANE 元素内的 ADD 元素的下面。
- 由于当用户添加行时,表会展开,因此应该相对于表调整 Total Price 标签和字段的位置,以便当表增加时它们也跟着移动。选择工作区上的 Total Price 输入字段,按下 Ctrl 键,然后单击表。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Below。
- 选择 Total Price 输入字段,按下 Ctrl 键,然后单击 Subtotal 列标题标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Right to Right。
当预览表单以检查计算时,可以看到 Subtotal 和 Total Price 的输入字段包含字母 NaN,这表示这个字段不是数字。之所以会出现这个问题是由于字段是空的,因此实际上进行的计算是零乘零(或者空集乘空集)。如果填写所有 Quantity 和 Price 字段,则会看到正确计算出的小计和总价(参见图 16)。
图 16. 预览表单以验证计算
现在,可以向 Delete Row 和 Insert Row 按钮添加图像以使它们看起来更有吸引力。当向表单添加图像时,必须首先将图像文件放置在表单中。向表单添加图像之后,可以将任何按钮或标签项目链接到该图像以显示图像。
- 在 Enclosures 视图中,展开 Data,右键单击 PAGE1,然后选择 Enclose File。
- 浏览到在 下载 部分中提供的 Add 按钮图像。选择该文件并单击 Open。
- 重复以上步骤以附加 Delete 按钮图像(也在 下载 部分中)。注意到现在 Enclosures 视图包含了已经添加的图像文件。
- 在 Enclosures 视图中,拖动 add1 图像并将其放置在工作区的 Add 按钮上。放大该按钮的尺寸可以看到按钮现在已显示图像。
- 对于 delete1 图像和 delete 按钮重复上面的步骤。
- 默认情况下,如果图像比按钮小,图像的大小会重新调整以适合并充满该按钮。现在我们需要将按钮上的图像居中。要达到此目的,选择工作区上的 Add 按钮。在 Properties 视图中,单击 Menu 按钮,然后选择 Show Advanced Properties(参见图 17)。
图 17. Properties 视图中的 Show Advanced Properties
- 在 Properties 视图中,展开 Appearance。将 imagemode 设置为 clip,这会使按钮上的图像位置居中。此外,将 border 设置为 off,并且将 bgcolor 设置为 transparent。
- 对于 Delete 按钮重复以上步骤,预览表单可以看到新的图像(参见图 18)。
图 18. 预览表单以查看图像按钮
提交是一组规则,它定义提交什么表单数据、如何提交数据以及数据提交的位置。Workplace Forms 支持两种类型的提交:
- XFDL 提交:这类提交通常向处理应用程序提交完整的表单。这类提交可以过滤表单的各个部分(如果需要的话),可以作为 HTML 数据而不是 XFDL 数据提交表单。但是,它们更常用于提交整个 XFDL 表单。
- XForms 提交:这类提交并不提交表单的 XFDL 元素。它们只提交数据模型或者其中的一部分。如果想直接向处理应用程序提交数据或者想进行填充中的调用,这将非常有用,填充中的调用在用户使用表单时将数据返回给表单(非常类似于 Web 服务调用)。
现在,让我们向表单中添加 XForms 提交。要达到此目的,需要定义一组提交规则,然后创建触发提交的按钮:
- 在 XForms 视图中,右键单击 Model: Default,然后选择 Create Submission。
注意,尽管有时也会存在多个模型(很异常的情况),但 XForms 提交只能应用于表单中的一个数据模型。
- 在 XForms 视图中,选择提交。现在 Properties 视图会显示该提交的属性。
- 将提交设置为将 XForms 数据模型写入磁盘上的文件中。一般地,我们会将提交设置为转到处理表单的 URL,但是将其写入磁盘可以让我们能够查看正常提交的数据。在 Properties 视图(参见图 19)中,展开 XForms 部分并进行以下更改:
- Method:选择 put。这样便可以将数据保存到本地的文件系统中。
- Replace:设置数据模型中由响应数据代替的部分。由于不希望有任何响应,因此选择 none。
- Action:使用以下格式:file:\\<folder>\<file name> 输入目标文件的完整路径。
图 19. 设置 XForms 提交的属性
提示:Workplace Forms Viewer 对在本地文件系统上写入数据的位置有限制。这是一个类似于 Java sandbox 的安全措施,Java sandbox 防止表单覆盖重要的文件。只能将表单写入包含表单的文件夹或者写入此文件夹中的一个子文件夹。例如,如果 XFDL 表单位于 C:\Workplace Forms\FormsProject\ 目录中,则可以将数据写入 file:\\C:\Workplace Forms\FormsProject\temp.xml。如果从网站打开表单,而不是从本地文件系统打开表单,则根本不能写入文件,原因是表单在本地文件系统上没有父文件夹。
- 在 XForms 视图中,将提交节点拖放到工作区上以创建一个绑定到提交的新按钮。单击该按钮可以触发刚刚定义的提交。
- 在 Properties 视图中更改按钮的外观如下:
- Justify:center
- Fontinfo:9 pt Arial (bold)
- Fontcolor:white
- Bgcolor:#8080FF
- 选择该按钮,按下 Ctrl 键,然后选择 Make Purchase Order 标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Bottom to Bottom。该按钮移动以使它的底部边缘与标签对齐。
- 选择该按钮,按下 Ctrl 键,然后选择 Supplier Information 标签。
- 右键单击任何一个项目,然后选择 Relative Align - Relatively Align Right to Right。该按钮移动以使它的右边缘与标签对齐(参见图 20)。
图 20. 更改 XForms 提交按钮的位置
- 当预览表单时,为必填字段输入值,然后单击 Submit 按钮。打开写入磁盘的文件并检查它包含的数据(参见图 21)。注意它如何与表单中的数据模型相匹配。
图 21. 由 put 提交保存的数据
当用户打开表单时,所有必填的输入项都具有特殊的背景颜色。可以将该颜色设置为您喜欢的颜色,默认颜色为黄色,表示该字段是必填字段。如果用户想跳过必填的输入项,则会出现一条错误消息。默认的错误消息会警告用户“该条目无效,请重试”。
如果预览所设计的表单,可以看到 Quantity 和 Price 输入字段具有黄色的背景。默认情况下,从模式中生成的所有元素都是必填的。但是,由于模式接受空值作为字符串的有效输入,因此,在表单中字符串类型的元素并不显示为必填的。
提示:可以通过启用 XFDL 格式选项中的必填选项或在 XForms 绑定中将必要选项设置为 true() 来使字符串字段成为必填字段。可以通过为模式中的该元素添加 nillable="true" 属性来将其他数据类型设置为非必填项。
现在,设置 store ID 和 supplier ID 字段以使这两个字段不接受空值。当然,您可以通过向 XForms 模型中添加模式约束来实现这个目的,不过,我们更想说明如何使用约束设置来设置字段的数据约束以及在输入无效时如何更改默认的错误消息:
- 选择存储信息的 ID 字段。
- 在 Properties 视图中,展开 Format、format、constraints 并将 mandatory 设置为 on。
- 展开 patterns 并单击 <empty> value。注意到出现一个下拉列表和一个 Add 按钮。
- 单击 Add 按钮以在 Pattern 节点下添加一个新模式。将这个新模式节点的值设置为 ID([0-9]{6})。该模式是一个正则表达式,它表示可接受的 store ID 的值应该以 ID 开头,后面紧跟着六位数字。
提示:所有约束和显示模式都由正则表达式来设置。如果重复使用特定的约束(例如,对于电话号码字段),最好将该项保存为定制对象以便可以轻松重建它。这样您就不必每次都要重新键入正则表达式。
- 最后,设置在输入无效时显示的错误消息:除了消息属性之外,还要输入消息 “The acceptable value should begin with 'ID' followed by six digits.”。
- 重复前面的步骤为 Supplier ID 输入字段设置约束。
预览表单以查看效果;它的外观应该类似于图 22。
图 22. 预览表单以验证数据约束
不同的语言环境常常使用不同的符号来表达一些常见概念,如货币、小数和分组分隔符、数学符号等。而且,大多数语言环境还会以不同的方式来表示日期和时间。为了确保表单正确地显示这些信息,应该将表单进行本地化以适合当地的语言环境(国家和语言)。IBM Workplace Forms 提供对不同语言环境的支持,这意味着每个表单都可针对特定的语言环境设计。
按照以下步骤将表单本地化为不同的语言:
- 在工作区上的表中选择 Quantity 输入字段。
- 在 Properties 视图中,展开 Format、format、datatype 并将其值更改为 integer。
- 选择表中的 Price 输入字段。
- 在 Properties 视图中,展开 Format、format、datatype 并将其值更改为 currency。使用相同的方法将 Subtotal 和 Total Price 字段的 datatype 更改为 currency。
- 在工作区上创建一个非 XForms 标签,并使该标签置于 Make Purchase Order 标签的后面。
- 接下来,单击刚刚创建的标签并在 Properties 视图中将它的值、数据类型和表示形式更改如下:
- Value:20061001
- Datatype:date
- Pattern:EEEE, MMMM d, yyyy
当预览表单时,由于该表单还尚无语言环境设置,因此默认为 en-US 语言。日期标签的格式应该为:Sunday, October 1, 2006。
- 在 Quantity 和 Price 输入字段中输入数字值。可以看到现在已经将美元符号添加到价格、小计和总和中。
- 通过 xml:lang 属性来确认语言环境支持。该属性已被添加到表单的 XFDL 标记中,表示表单是为哪种语言环境设计的。打开表单编辑器的 Source 面板并将值为 fr-FR 的 xml:lang 属性添加到 XFDL 标记中(参见图 23)。这样便将表单的语言环境设置为 French France。
图 23. 为表单设置语言环境
当预览表单时,注意到现在日期是 French 形式的,货币值用欧元来表示而且千和小数的位置各具不同的分隔符,如图 24 所示。
图 24. French 语言环境中的数字和货币
IBM Workplace Forms Designer 是一个拖放式的设计程序,它使表单设计人员能够创建非常详细、功能非常强大的 XFDL 表单。Workplace Forms Designer V2.6.1 基于开源 Eclipse Workbench 技术并可与 IBM Workplace Forms Viewer V2.6.1 结合使用。开发人员可使用 Workplace Forms Designer 构建表单,再使用 Workplace Forms Viewer 检查表单的外观、布局和逻辑。
本文为您提供了 Workplace Forms Designer 的一些基础知识,并带您亲历了利用 XForms 开放标准进行表单设计的全过程。
| 描述 | 名字 | 大小 | 下载方法 |
|---|---|---|---|
| 本文的示例表单 | forms-creation.ZIP | 6 KB | HTTP |
学习
- 您可以参阅本文在 developerWorks 全球网站上的 英文原文。
-
IBM Workplace Forms V2.6.1 Information Roadmap
-
Workplace Forms 产品文档页面
- developerWorks Workplace 白皮书 “IBM Workplace Forms 简介”
获得产品和技术
- 从 developerWorks 上下载 Workplace Forms Designer 和 Workplace Forms Viewer 的试用版。
讨论
- 参与论坛讨论。
- 阅读 John Boyer 在 developerWorks 上的 blog:Workplace Forms and Next Generation Web Applications。