XForms 入门简介,第 1 部分: 新的 Web 表单标准

XForms 是下一代基于 Web 的数据处理技术。它用 XML 数据模型和表示元素代替了传统的 HTML 表单。本系列文章有三个部分,介绍了 XForms 及其功能,内容包括基本的 XForms 模型和表单、各种不同类型的控件、基本和高级表单提交技术。本文是此系列文章的第一部分,将主要介绍 XForms 到底是如何工作的,说明如何在 Firefox 和 Microsoft® Internet Explorer 中建立 XForms 以便可以查看 XForms 示例。

Chris Herborth (chrish@pobox.com), 自由作家, Freelancer

Photo of Chris HerborthChris Herborth 是一位广受好评的高级技术作家,有超过 10 年的操作系统和编程方面的写作经验。Chris 业余时间喜欢陪他的儿子 Alex 玩耍或与妻子 Lynette 闲逛,其余时间都在进行设计、写作或研究(玩)视频游戏。



2006 年 12 月 29 日

简介

XForms 发展势头迅猛,普通浏览器通过扩展或插件来支持它,此外还有 IBM® Workplace Forms 之类的技术(请参见参考资料部分)。它的灵活和强大对 Web 开发人员很有吸引力,内存占用少和客户端处理又让系统管理员十分感兴趣。W3C 正在审查 XForms 1.1 工作草案文档(1.0 是正式的 Internet 推荐标准,和 XHTML、PNG 以及 CSS 的地位相同),IBM 目前带头致力于把那些竞争的基于 XML 的表单标准与 XForms 的特性和功能结合起来。

本文回顾了表单从简单文本搜索到目前的交互式杰作的演化历史,探讨了 Web 表单的未来 —— XForms。此外,还介绍了 XForms 的独到之处,并引导读者设置适当的环境,为第 2 部分做好准备。

继续阅读本文就会看到如何用简单 XForms 表单代替简单 HTML 表单,如何利用 XForms 的功能将表单数据保存到本地文件(然后再加载)。

如果想试验本文中讨论的 XHTML 和 XForms 文档,请参考下载部分中给出的压缩包。其中包括将在本文中看到的文件,如果想自己体验 XForms 的话,可以此为起点。

另外,还需要安装 XForms 扩展以便在 Firefox、Internet Explorer、Seamonkey 或 Mozilla 的当前版本中直接查看 XForms 文档。如果还没有安装这些非常优秀的、标准兼容的浏览器,最好马上装一个。


为何使用 XForms?

在讨论 XForms 之前,首先简要回顾一下表单的历史。

在万维网历史的早期,使用简单的文本输入表单向运行在服务器上的 CGI 程序发送请求,为那些勇于向未知领域探索的先驱者增加了一些交互性。随着 Web 日趋成熟,网站上提供的数据输入表单越来越复杂。

现在很容易找到极其复杂的表单,特别是在电子商务网站或论坛上。这些可能是运行在服务器上的 PHP 或 Java™ 代码的前端,也可能是在浏览器中运行的 JavaScript,用 Ajax 技术把结果发送给服务器。

不幸的是,HTML 表单是由混合了表示和内容的元素创建的。从混合了文档结构和格式元素的基于表示的松散的 HTML 转变为用 CSS 样式化的清晰的 XHTML ,需要一种方式把表单数据及行为与表示分离开来。

什么是 Web Forms?

Web Forms 2.0(请参阅参考资料部分的链接)建立在 HTML 现有的表单功能基础上,并增加了 XForms 中的很多特性,但是它采用了一种更简单、更强调向后兼容的方法。现在有这样一种倾向:在未来的 XHTML 2.0 中将 XForms 和 Web Forms 结合起来作为单独的一个部分。

进入浏览器

现在已讨论了数年的 XForms 标准得到了不少应用程序的支持(包括 Firefox、Mozilla 以及 Seamonkey,但需要安装 XForms 扩展),并将成为 HTML 表单的 XML 替代品。

其他流行的 Web 浏览器通过插件支持 XForms(比如 Internet Explorer 6 的 formsPlayer,参考资料中提供了下载链接)。任何支持标准的浏览器还可以使用 FormFaces,一种在客户系统上对 XForms 和标准 HTML 控件进行来回转换的纯 JavaScript XForms 实现。此外,一些重要的产品如 IBM Workplace Forms 也实现了 XForms。

表单数据模型(数据提交时的行为、初始值等)和表示分离开来。同一种表示可以根据样式表或者适合用户浏览器的需求而做不同的解释。比方说,移动电话上的浏览器可能采用不同的技术显示控件;对移动电话用户而言,菜单和列表比弹出式选择框更方便。


XForms 是如何工作的

我们来看一个简单的 HTML 表单,它向本地机器上假想的查询引擎提交一个搜索字符串(如清单 1 所示)。要注意,这里实际上是 XHTML 而非 HTML 4.01,XForms 需要有效的 XML 文档(比如 XHTML),很快您就会看到 XForms 版。此外,可能还需要修改 URL 以便在您的环境中能正常工作。

清单 1. 简单 HTML 表单(simple.xhtml)
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Search Form</title>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<form action="http://localhost/imaginary-search-engine" method="get">
    <p>
    Find: <input type="text" name="query"/>
    <input type="submit" value="Search"/>
    </p>
</form>
</body>
</html>

为了便于查看,清单 1 给出的是标准的、100% 有效的 XHTML Strict。<form> 部分用粗体突出显示。

在目前典型的 Web 浏览器中呈现时,这段 XHTML 看起来很熟悉,可能有点原始(图 1)。

图 1. Firefox 呈现的简单 HTML 表单
Firefox 呈现的简单 HTML 表单

在图 1 中的字段输入一些文本并单击按钮之后,编码成 URL 的数据被发送到假想的搜索引擎:http://localhost/imaginary-search-engine?query=whatever-you-entered

清单 2 显示了 XForms 版,不同之处已经标了出来。

清单 2. 简单 XForms 表单
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form v2</title>
<xf:model>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.
</p>

<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit 
submission="submit-search"><xf:label>Search</xf:label></xf:submit>
</p>
</body>
</html>

这里有三处主要的变化:

  • xf:”名称空间用于增加 XForms 规范中的元素。
  • <head> 中增加了 <xf:model> 元素,该元素声明了一个 <xf:submission>。这样就把动作(假想的搜索引擎)绑定到了 get 方法,并将其命名为 submit-search 以便后面使用。
  • 表单的表示元素(文本输入字段 <xf:input> 和提交按钮 <xf:submit>)现在变成了单纯的表示元素,规定表单字段出现在呈现页面中的何处以及如何出现。它们引用了前面声明的 <xf:model> 元素。

XForms 版的显示结果如图 2 所示。后面再介绍如何安装 Firefox 的 XForms 扩展。

图 2. Firefox 呈现的简单 XForms 表单
Firefox 呈现的简单 XForms 表单

表单看起来完全相同!使用 XForms 而不是传统的 HTML 表单不旦没有任何损失,而且还获得了使用 XML 数据模型的全部好处。


设置查看 XForms 的环境

如果下载了例子文件(请参阅下载部分),应该注意到浏览器不能正确显示 XForms 版(如图 3 所示)。

图 3. 没有 XForms 支持的浏览器中显示的简单 XForms 页面
没有 XForms 支持的浏览器中显示的简单 XForms 页面

除非您喜欢的 Web 浏览器提供了内置的 XForms 支持,否则必须使用一种 XForms 实现(请参阅参考资料中列出的 XForms Web 站点)。我们来看看如何安装一种最便捷的实现 —— Mozilla 扩展。由于它适用于现有版本的 Mozilla、Firefox 和 Seamonkey,甚至连安装或者切换浏览器都不需要!后面还要说明如何安装 Internet Explorer 6 插件。

为 Firefox 增加 XForms 扩展

在 Firefox 中打开 Mozilla XForms Project 页面(请参阅参考资料)。单击可以在 Latest Release 标题下找到的下载页面链接。

XForms Project 的下载页面会警告说该插件还不能用于最终用户,然后就给会出真正的下载页面的链接。单击它,然后单击 Install Now 链接。

图 4. Firefox 关于安装扩展的标准警告
Firefox 关于安装扩展的标准警告

Firefox 显示了一个警告框(如图 4 所示),单击 Install Now 按钮下载并安装 XForms 扩展。重新启动 Firefox 来激活它(如图 5 所示)。

图 5. 重新启动来激活新安装的扩展
重新启动来激活新安装的扩展

重新启动浏览器后,就可以打开前面看到的简单 XForms 的例子,这一次才会真正看到正确呈现的 XForms 元素!

为 Internet Explorer 6 添加 XForms 插件

从 formsPlayer 网页(参见参考资料中的链接)单击 Download fP for free 链接访问注册页。输入电子邮件地址和其他数据,单击 Install formsPlayer 链接下载并安装该插件。

IE 加载插件时会在这个 ActiveX 控件的 URL 下面显示一条警告信息。单击该警告,然后选择 Install ActiveX Control。IE 就会下载并安装 formsPlayer。弹出 IE 的安全警告时单击 Install 继续安装。

formsPlayer 安装后就会重定向到一个页面,其中包含几个例子的链接。查看其中的任何一个来检查安装是否成功。


一个表单,多种表示

由于 XForms 文档中数据模型和表示分开,用户浏览器可以使用最合理、最有效的方式呈现表单元素。

比方说,如果要求用户从列表中选择一项,Web 浏览器可以用标准的单选按钮组来表示列表。而在移动电话的浏览器上,同一个列表可以呈现为一个弹出菜单,因为它更容易使用电话的方向轮来浏览。

不需要任何特殊的 CSS 或者 JavaScript 来检查用户的浏览器(这是很多网站容易犯的一个错误),它是由浏览器的 XForms 实现自动处理的。普通的 HTML 表单很难实现这种适应性,因为数据和表示紧密地联系在一起。

由于 XForms 模型是 XML,也可使用 XSLT 或 JavaScript(通过 DOM)之类的技术用所喜欢的任何接口来表示此模型,比如为没有 XForms 支持的用户提供普通 HTML 或 XHTML,或者专有的 GUI 。

与 XML 的紧密集成

XForms 文档必须是有效的 XML(如 XHTML)。数据模型的实例(用于提供默认值等,请参阅本系列的后续文章)是 XML 文档。甚至可以从位于用户机器或者服务器上的外部 XML 文件中加载数据模型实例。

这种与 XML 的紧密结合使得很容易把 XForms 数据和其他支持 XML 输入输出的技术结合起来,比如数据库,而不需要在数据库和表示给用户的表单之间增加脚本。

离线保存表单和延后提交

XForms 为浏览器带来的最有趣的特性之一是将表单内容(字段中的所有数据,以及存储在数据模型型中的“隐藏”数据)保存到文件中。通过新增的 <xf:submission> 元素和 put 方法,可以将这些数据作为 XML 文件保存到本地文件系统或者服务器上。以后可以重新加载进来并在原来的地方继续,不需要使用任何额外的脚本或者数据库访问。

这里还说明了 XForms 的另一个优点,一个表单可以有任意多个提交动作(如清单 3 所示)。在 HTML 中每个表单只能有一个动作。

清单 3. 为表单增加数据存储和加载
<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
    xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Search Form v3</title>
<xf:model>
    <xf:instance>
        <data xmlns="">
            <query>Enter your search string here.</query>
        </data>
    </xf:instance>
    <xf:bind nodeset="query" required="true()"/>
    <xf:submission action="http://localhost/imaginary-search-engine" 
        method="get" id="submit-search"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="put" id="save-search" replace="none"/>
    <xf:submission action="file:///tmp/XFormsQuery.xml"
        method="get" id="load-search" replace="instance"/>
</xf:model>
</head>
<body>
<h1>Search Form</h1>

<p>
Enter a search string, then click the Search button.  
You can also save your search string for later.
</p>

<p>
<xf:input ref="query"><xf:label>Find:</xf:label></xf:input>
<xf:submit 
submission="submit-search"><xf:label>Search</xf:label></xf:submit>
</p>
<p>
<xf:submit 
submission="save-search"><xf:label>Save</xf:label></xf:submit>
<xf:submit 
submission="load-search"><xf:label>Load</xf:label></xf:submit>
</p>
</body>
</html>

和上一个 XForms 试验的区别同样用粗体字标了出来。我们来详细讨论一下这些变化。

首先增加了一个数据模型实例(在 <xf:instance> 元素中)。其中包括数据的根(被适当地命名为 <data>,要注意这里需要空的 xmlns 属性),这个元素中又包含表单所需要的数据,表单后面 <xf:input> 元素引用的 <query>。该 <query> 元素中的数据是默认的查询字符串,当被呈现时,显示于 <xf:input> 元素之中。

然后,有一个 <xf:bind> 元素,它使 <query> 数据变成必须的;如果 <query> 为空,<xf:submit> 按钮将什么也不做。

最后,为 <xf:model> 增加了两个新的 <xf:submission> 动作,从而能够将数据保存到文件(通过 put 方法)然后从文件中加载进来而不需要重新加载整个页面(使用 get 方法,replace="instance" 属性只重新加载数据模型实例)。

页面的下方增加了两个 <xf:submit> 元素,用于保存和加载数据。

图 6 显示了 Firefox 中的呈现结果。要注意 Find 字段中填充了包含在数据模型实例中的默认值以及新增加的 Save 和 Load 按钮。

图 6. 改进的新表单
改进的新表单

现在如果单击 Save 按钮,在 /tmp 目录中将看到一个名为 XFormsQuery.xml 的文件,其中包含数据模型实例(如清单 4 所示)。为了测试 Loading 功能,修改 Find 字符串后单击 Load,将看到 Find 字符串又改成了原来的那个,它是从 /tmp 中的 XFormsQuery.xml 文件加载的。

清单 4. 保存的数据模型实例
chrish@dhcp1 [531]$ cat XFormsQuery.xml 
<?xml version="1.0" encoding="UTF-8"?>
<data xmlns:xf="http://www.w3.org/2002/xforms">
            <query>Enter your search string here.</query>
        </data>

控制输出有很多方法,不过这里都没有使用。在任何情况下,SaveLoad 函数都能工作,不需要任何脚本。


结束语

XForms 在表单数据模型及其表示之间增加了一层新的、功能强大的抽象,并提供了在多个不同提交动作之间使用一个表单的能力。XForms 元素还能验证数据,而与 XML 的密切结合则让您能够直接处理来自其他任何能识别 XML 的应用程序的数据。在 XForms 中保存表单数据供日后使用也很容易。

第 2 部分将介绍如何创建基本的 XForms 模型和表单,请继续关注。


下载

描述名字大小
第 1 部分示例代码xforms1.zip2KB

参考资料

学习

获得产品和技术

讨论

条评论

developerWorks: 登录

标有星(*)号的字段是必填字段。


需要一个 IBM ID?
忘记 IBM ID?


忘记密码?
更改您的密码

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件

 


在您首次登录 developerWorks 时,会为您创建一份个人概要。您的个人概要中的信息(您的姓名、国家/地区,以及公司名称)是公开显示的,而且会随着您发布的任何内容一起显示,除非您选择隐藏您的公司名称。您可以随时更新您的 IBM 帐户。

所有提交的信息确保安全。

选择您的昵称



当您初次登录到 developerWorks 时,将会为您创建一份概要信息,您需要指定一个昵称。您的昵称将和您在 developerWorks 发布的内容显示在一起。

昵称长度在 3 至 31 个字符之间。 您的昵称在 developerWorks 社区中必须是唯一的,并且出于隐私保护的原因,不能是您的电子邮件地址。

标有星(*)号的字段是必填字段。

(昵称长度在 3 至 31 个字符之间)

单击提交则表示您同意developerWorks 的条款和条件。 查看条款和条件.

 


所有提交的信息确保安全。


static.content.url=http://www.ibm.com/developerworks/js/artrating/
SITE_ID=10
Zone=XML
ArticleID=186241
ArticleTitle=XForms 入门简介,第 1 部分: 新的 Web 表单标准
publish-date=12292006