使用 Visual XForms Designer 开发表单

领测软件测试网 2006 年 3 月，万维网联盟（W3C）发布了 XForms 1.0 规范的第二版。不久，IBM alphaWorks 推出新一轮的免费工具推动 XForms 文档的开发。这些工具中最新的是 Visual XForms Designer，能够以可视化的形式构造表单。Visual XForms Designer 与 Eclipse 结合在一起，具有常见的 Eclipse 结构，比如一个透视图、一组视图和带有选项板驱动设计画布的编辑器。本文带领您快速地了解 Visual XForms Designer。了解该工具对于 XForms 表单开发主要阶段的促进：定义数据、创建用户界面控件、提交方式设计、测试完成的表单。

什么是 XForms？

W3C 为满足表示和收集表单数据的需要开发了 XForms 标准。如 W3C 推荐标准中所述，XForms 的目标是成为 “下一代 Web 表单”。与现有的 HTML 表单技术相比，XForms 具有一些特殊的优点。如推荐标准本身所声明的那样，“通过将传统 XHTML 表单分解成三部分：XForms 模型、实例数据和用户界面，将表示与内容分离，支持重用和强类型化，从而减少了与服务器通信的次数，提供了设备独立性，降低了对脚本的需求。”

XForms 文档有一个数据模型，包含一个或多个 XML 实例文档。表单操纵这些实例文档，并负责将 XML 提交到后端系统。

随着 2006 年 3 月 14 日 XForms 1.0 规范第二版的发布，XForms 到达了一个重要的里程碑。此后不久 alphaWorks 就提供了 Visual XForms Designer。

从何处获取 Visual XForms Designer？

可以从 IBM alphaWorks（参见 参考资料）上找到安装说明。要查看使用 Eclipse 自带的安装/升级机制获取 Visual XForms Designer 的详细说明，请单击下载选项卡。

Visual XForms Designer 需要 Eclipse 3.1、Eclipse Web Tools 1.0（参见 参考资料），在 1.5-level Java™ Runtime Environment (JRE) 上运行。

创建新的 XForms 文档

我们使用 Visual XForms Designer 建立一个新的表单。创建新的 XForms 文档，选择 Excelpse 标准 New 向导中的 New XForms Document 菜单项（如 图 1 所示）。

图 1. 新建 XForms 文档

确定新建文档的保存位置后，Visual XForms Designer 编辑器就会打开一个新的空白文档。如果还不在 Visual XForms Designer 透视图中，编辑器将提示您切换到那里。进入该透视图后，可以看到如 图 2 所示的 Eclipse 布局。

图 2. Visual XForms Designer 透视图

现在可以建立文档了。创建 XForms 文档一般至少需要三个阶段：

1. 定义实例数据
2. 创建输入控件并将其绑定到实例数据
3. 规定表单向后端系统的提交

本文下面三小节将介绍如何使用 Visual XForms Designer 来执行这些任务。最后介绍如何用呈现环境测试表单。

创建实例数据

创建 XForms 文档时，一般首先要定义数据模型。数据模型包括后面绑定到用户界面控件的实例数据。

XForms 模型中的实例文档就是一个 XML 文档。与任何 XML 文档一样，该实例可以有 XML Schema 的支持，也可以没有，XML Schema 定义了允许的结构。

在 Visual XForms Designer 中，可以用几种不同的方式定义表单的实例数据。首先，可以从 XML Schema 定义创建一个 XML 实例文档。在 Visual XForms Designer 中，有一个 Enclosures 视图（如 图 3 所示）允许导入外部文档，包括 XML Schema 文档。选择 Enclose Schema File 菜单项后，可以选择需要的 XML Schema 文件，使其能够被 Visual XForms Designer 访问。

图 3. Enclosures 视图

使用 Visual XForms Designer Instance 视图（如 图 4 所示）创建和操纵实例文档。一旦装入了 Schema 文件，就可以创建符合该 Schema 的实例文档，单击 Instance 视图菜单条左侧第二个按钮。得到的实例文档对应于模式中声明的每个元素和属性都有相应的元素和属性。

图 4. Instance 视图

创建表单实例数据的第二种方式是使用文件系统中已经存在的 XML 文档。同样，在 Enclosures 视图（如 图 3 所示）中提供了这种功能。要装入实例文档，右击 XForms Instance 类别下的模型并选择 Enclose XML File。装入实例之后，Instance 视图中就能看到其元素和属性，在这里可以根据需要修改实例文档。

创建实例数据的第三种方式是用老办法：建立一个空白实例，然后手工编辑。Instance 视图允许创建新实例，增加和删除元素或属性，改变元素和属性名，删除元素和属性节点，重命名和为其赋值。只要右击需要处理的节点即可看到这些选项（如 图 5 所示）。

图 5. Instance 视图中操纵实例数据的选项

如果需要用更高级的 XForms 结构（比如数据绑定）来充实表单的数据模型，可以在 XForms 视图中完成。本文后面讨论如何定义表单提交的时候将进一步介绍 XForms 视图。

创建数据输入控件

定义实例数据的时候，就进入了创建表单至关重要的第一步。但是，没有允许用户输入数据的控件（如按钮、输入字段和下拉选择框）的表单还不是真正的表单。

Visual XForms Designer 提供了多种方式定义实例数据，与此类似，它也提供了创建输入控件的多种方式。创建控件最直接的方式就是从编辑器的设计选项板（如 图 6 所示）中选择一个控件并拖放到画布上。

图 6. 画布和选项板

选项板包括丰富的 XForms 控件创建选项，从分支和重复这样的流控制，到 XForms 输入和文本区域这样的简单控件。但是，用这种方式在画布上增加控件后，还有一项任务没完成：将输入控件和实例文档中的数据联系起来。这项工作可以在 Properties 视图中完成，只要为相关的属性提供一个值。另一种办法是从 Instance 视图中选择一个节点，直接拖到控件上。将数据拖到控件上之后，它就与那个数据联系在一起了。

创建控件更简单的办法是从实例数据中选择节点，拖放到设计画布的空白区域。拖过去以后，Visual XForms Designer 就会自动创建绑定到所选数据节点的输入控件，一步就能完成。

创建提交控件

定义实例数据、创建输入字段并绑定到数据之后还有一项工作：规定表单数据向后端系统的提交方式。现在，对于 Visual XForms Designer 提供多种定义提交和为用户启动提交创建按钮的方式，您应该不会感到吃惊了吧。

在 XForms 中，提交 是一个抽象的可重用的概念。就是说，提交定义了要提交的内容、提交的目的地以及提交的方法。然后可以将提交捆绑到一个按钮（XForms 中的触发器），从而能够根据特定的用户动作来启动。

创建用户能够触发的提交需要分两步：声明提交并定义其参数，将其连接到用户动作。

在 Visual XForms Designer 中，XForms 视图允许将提交和数据模型关联在一起。然后，可用标准的 Eclipse Properties 视图定义提交的内容、目标和方式，如 图 7 所示。

图 7. 定义提交属性

创建提交后，只需要将提交节点拖放到画布上。拖过去后，Visual XForms Designer 就会创建 XForms Submit 控件，当用户按下时就会激活关联的提交（如 图 8 所示）。

图 8. 带有 Submit 控件的完整表单

Visual XForms Designer 也把 XForms Submit 控件放在了选项板上。可以使用选项板添加 Submit 控件，但是此后必须将其连接到提交对象。要创建这种联系，需要在 Submit 控件的 id 属性中指定提交的惟一标识符。

测试表单

完成表单后，最后一步就是用实际的 XForms 呈现环境测试它。有多种不同的 XForms 呈现工具（参见 参考资料）。其中一些工具需要表单文档采用特殊的格式，其他则没有任何要求。幸运的是，Visual XForms Designer 包含有将文档转化成几种呈现工具之一所需格式的实用程序（如 图 9 所示）。

图 9. 转换选项

Visual XForms Designer 还提供了一组菜单项用本地机器上已经安装和配置的呈现工具呈现表单（如 图 10 所示）。

图 10. 呈现选项

 

最后，图 11 显示了 Mozilla Firefox 中呈现的一个简单表单，它使用了 Mozilla XForms 插件。

图 11. 呈现的表单

学到了什么？

通过本文，您看到了 Visual XForms Designer 对表单开发主要阶段的支持：数据定义、控件创建、提交创建和测试。希望这种表单开发方式能够突出 XForms 标准最引人注目的一个方面：清晰地划分模型和视图。您看到了首先解决数据实例（模型）创建，然后作为补充在此基础上解决用户界面控件（视图）创建问题的好处。

同时，您也了解了 Visual XForms 编辑器的设计画布和选项卡，以及提供的很多视图：Enclosures、Instance、XForms 和 Properties 视图。还看到了针对特定呈现工具的转换工具，以及在呈现工具中测试表单的设施。

还有什么需要学习的？

当然，Visual XForms Designer 还有更多的功能。熟悉它的最佳办法就是安装到机器上自己试验。可以从 IBM alphaWorks 安装 Visual XForms Designer（参见 参考资料）。

设计器在 Excelipse 帮助系统中提供了完善的文档。其中包括帮助您入门的动画教程，从创建到测试的一步一步的详细说明。

最后，与大部分 alphaWorks 软件一样，Visual XForms Designer 也有自己的论坛，可用于分享您的问题和建议。在这里还可以找到一些相关的 alphaWorks 工具：XML Forms Generator 和 Compound XML Document Toolkit。放手创建您自己的 XForms 吧。

延伸阅读

文章来源于领测软件测试网 https://www.ltesting.net/