级别: 中级 Steve K Speicher (sspeiche@us.ibm.com), 资深软件工程师, IBM
2007 年 11 月 05 日 了解如何安排和编写 XHTML 和 XForms 文档,让 XForms 应用程序的最终用户获得最佳体验。
简介
XForms 的目的是嵌入到其他标记语言中。应用最广,同时也是本文主要讨论的,是用在 XHTML 中。为保证在不同的浏览器上获得流畅的体验,比如 Microsoft® 的 Internet Explorer、Mozilla 的 Firefox、X-Smiles 和 Opera 等,XHTML 文档必须遵循一定的规则。撰写本文的时候,只有一种桌面浏览器为 XForms 提供原生支持,即 X-Smiles。因此,浏览器需要一个增件(add-on),或者有时候叫做插件,来处理 XForms 内容。还有一些方法将 XForms 标记转换成现有浏览器广泛支持的 ECMAScript 和
HTML。更多信息请参阅 参考资料。
尽管本文希望提供一种适用各种不同配置的解决方案,但是具体的情况和配置各不相同,难以完全覆盖。随着新版本的浏览器和 XForms 处理程序的发布,以及对标准支持程度的变化,本文所述的解决方案可能不再适用。应对这种情况的方法是通过某种方式将变化隔离起来,以将变化局部化。
什么是 XForms?
W3C 针对表单数据的表示和采集提出了 XForms 标准。如 W3C Recommendation 中所述,XForms 的目的是成为 “下一代 Web 表单”。和现有的 HTML 表单相比,XForms 有许多突出的优点。正如 Recommendation中所说的,“通过将传统的 XHTML 表单分成三部分 —— XForms 模型、实例数据和用户界面,从而把表示从内容中分离出来、提高重用性和实现强类型,可以减少和服务器通信的次数、提供设备独立性,并减少脚本的使用”。
XForms 文档有一个数据模型,包含一个或多个 XML 实例文档。表单操纵这些实例文档,并负责将 XML 提交到后端系统。
2006 年 3 月,XForms 1.0 规范第二版的发布是 XForms 的一个重要里程碑。
服务内容准则
在 Web 服务器上布置需要处理的表单文档时需要考虑一些因素。这直接依赖于具体的部署环境。下表列举了一些可能的配置:
表 1. 一些浏览器和 XForms 处理程序选项
| 浏览器 | XForms 处理程序 |
|---|
| Mozilla Firefox | Mozilla XForms FormFace | | Microsoft Internet Explorer | formPlayer MozzIE FormFaces | | X-Smiles | N/A | | Opera | FormFaces | | Apple Safari | FormFaces |
由上表可知,根据配置的不同情况可能非常复杂。当然也可使用 Chiba 这样的服务器端处理程序,这种处理程序适合上述所有浏览器平台。这里有意省略了支持的操作系统,那是另一方面的问题了。
不同的配置各有优缺点。本文不打算讨论这些问题,可根据自己的具体要求决定。本文主要讨论如何编写可用于上表列出大多数配置的 XHTML + XForms 内容。
本文假设采用下列部署:
- 带有 Mozilla XForms 的 Mozilla Firefox
- 带有 formsPlayer 的 Microsoft Internet Explorer
- X-Smiles
- 其他的浏览器都使用 FormFaces
为了保证正常运行,服务器端还有两点要求:
- Firefox 要求提供的服务内容其 HTTP 响应头部的内容类型必须包含一个
application/xhtml+xml 值。从技术上讲,就是需要一种能够调用其 “标准” 呈现模式的内容类型。关于 Firefox 呈现的更多信息请参阅 参考资料。
- Internet Explorer 要求服务内容的 HTTP 响应头部中的
Content-type 包含
text/html 或 application/xhtml+xml。关于 Internet Explorer 对内容类型的处理的更多信息,请参阅 参考资料。
免责声明:不同版本的 Internet Explorer 可能有不同的配置参数,很可能有一些配置不能工作。详情参阅 参考资料。
为了让 Apache Tomcat 这样的 Web 服务器支持此类内容,只需要将 web.xml 配置文件更新为如下内容:
清单 1. Apache Tomcat web.xml 配置文件
<mime-mapping>
<extension>html</extension>
<mime-type>application/xhtml+xml</mime-type>
</mime-mapping> |
设置 Content-type 头部还有很多方法,和具体的 Web 服务器有关。要修改 Java™ Servlet 的头部,需要:
清单 2. Java Servlet 设置 HTTP 头部 Content-type
protected void doPost(HttpServletRequest request,
HttpServletResponse response) throws ServletException, IOException {
// Logic to determine which content type goes here...
response.setContentType("application/xhtml+xml");
} |
为了更好地理解不同配置和需求,表 2 列出了服务的内容:
表 2. HTTP Content-type 头部设置
| 客户机 | 内容类型 |
|---|
| Firefox + Moz XForms | application/xhtml+xml application/xml application/___+xml (any +xml) | | IE + formsPlayer | formPlayer MozzIE FormFaces | | IE + MozzIE | application/xhtml+xml | | X-Smiles | application/xhtml+xml | | Opera + FormFaces | text/html application/xhtml application/xml application/___+xml (any +xml) | | Safari + FormFaces | text/html application/xhtml application/xml application/___+xml (any +xml) |
内容编辑准则
准则 1:使用 XHTML 名称空间作为默认名称空间
如果准备使用安装 formsPlayer 或 FormFaces 这类增件的 Microsoft Internet Explorer,编写时需要以 XHTML 名称空间作为默认的 XML 名称空间。为什么?Internet Explorer 不支持
XHTML,但是只要保证使用合法的 HTML 标签名并且没有 XML 名称空间前缀,就能够使用 HTML 处理程序。清单 3 给出了一个例子。
清单 3. 使用默认 XML 名称空间的 XHTML
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
...more namespace declarations go here...>
<head>
...head contents go here...
</head>
<body>
...body contents go here...
</body>
</html> |
提示:使用模式验证器(schema validator)和支持模式的编辑器很容易编写结构良好并且有效的 XHTML+XForms 内容。更多信息请参阅 参考资料。
准则 2:为 XForms 实例添加 XML 名称空间声明
由于在 HTML 中使用 XML 的一些限制,必须在 XForms 实例元素上重复声明某些名称空间。具体情况取决于使用的特性和实例使用的名称空间。即 XML 实例使用的名称空间、XSI 前缀(XML Schema 实例)和 XSD 前缀(XML Schema)。表单出现问题的时候一定要想到这一点。
XForms 处理程序的激活与安装
这一节给出一段简单的 ECMAScript 代码,可用于 XHTML 文件中执行适当的检查和进行定义好的动作。脚本文件名为 xforms-check.js。利用它可以简化表单代码的编写。只需要遵循本文列出的准则并把这段 脚本 包含到文档中即可。
前面的脚本经过修改后就变成了:
清单 4. 带有浏览器检查的 XHTML
#
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml"
...more namespace declarations go here....>
<head>
<script src="xforms-check.js"></script>
...more head content go here...
</head>
<body>
...body contents go here..
</body>
</html> |
注意:深入分析这段客户端 ECMAScript 之前,首先说明它如何确定使用的浏览器。大多数站点都提供了脚本或者准则来确定浏览器。下面的脚本采用了一种非常简单的方法识别浏览器,方法就是测试 navigator.appName。
现在看看各种不同的浏览器如何激活处理程序。在有些情况下,如果没有安装插件,我们还要讨论如何安装。
Mozilla Firefox
首先看看 Mozilla Firefox。需要以下部分:
清单 5. 检查 Firefox 浏览器
if (isFirefox()) {
if (hasMozXForms()) { message('Firefox: XForms add-on is installed'); return; }
var xpi ='';
var rel = '0.8';
var relName='Mozilla XForms ' + rel + ' Release Extension';
var relURL='...';
if (navigator.platform == 'Win32') {
xpi={relName : relURL + '_win.xpi'};
} else if (navigator.platform == 'Linux') {
xpi={relName : relURL + '_linux.xpi'};
} else if (navigator.platform == 'MacOSX') {
xpi={relName : relURL + 'macosx.xpi'};
}
/* If appropriate platform, start the installer. Let the
installer handle browser version checks. */
if (xpi != '') {
message('Firefox: Installing XForms add-on...');
InstallTrigger.install(xpi);
} else {
alert('Firefox: Mozilla XForms not available for your browser platform');
} |
首先对 Firefox 执行浏览器测试,然后检查是否安装了 Mozilla XForms 增件。如果已经安装则返回,否则调用适当的 XForms 插件 XPI 的安装程序。
Microsoft Internet Explorer
接下来检查 Internet Explorer 并启用 formsPlayer,代码如下:
清单 6. Internet Explorer 浏览器检查
} else if (isIE()) {
var useFormsPlayer = 1;
if (useFormsPlayer) {
/* No need to test for formsPlayer, below code will handle */
var classId="CLSID:4D0ABA11-C5F0-4478-991A-375C4B648F58";
var fpCab="http://www.formsplayer.com/download/download/cab/formsPlayer.cab";
document.write('<object classid="'+classId+
'" height="0" id="formsPlayer"'+
'width="0" codebase="'+fpCab+
'" ><b>formsPlayer has failed to load!'+
' Please check your installation.</b></object>'+
'<?import namespace="xforms"'+
' implementation="#formsPlayer"?>');
message('IE: Enabling formsPlayer,'+
' may see additional messages if installation is needed.');
} else {
...
} |
激活 formsPlayer 必须使用 <object> 把 CLSID 连接到本地 Windows® 注册表中的应用程序。我们可以通过引用 formPlayer 打包文件来自动安装该插件。
启用 formsPlayer 的操作说明请参阅 参考资料。
Opera 和 Safari
按照上述配置表,浏览器 Opera 和 Safari 都使用 FormFaces。为此,首先检查 appName 然后在 HTML DOM 中包含
formsfaces.js 实现。将对 xforms-check.js 的引用换成对 FormFaces.js 的引用。下面的清单说明了如何动态添加 <script> 实现这一功能:
清单 7. Opera 和 Safari 浏览器检查
} else if (isOpera()
||
isSafari()) {
message('Opera/Safari: Enabling FormFaces');
var script = document.createElement('script');
script.src = 'FormFaces/formfaces.js'; /* Wherever FormFaces is installed */
script.type = 'text/javascript';
var head = document.getElementsByTagName('head')[0];
head.appendChild(script); |
X-Smiles
因为 X-Smiles 本身支持 XForms,默认情况下通知用户或者执行其他正确的动作:
清单 8. X-Smiles 浏览器检查
} else if (isXSmiles()) {
message('XSmiles: Builtin XForms support, no action taken.'); |
alphaWorks XML Forms 生成器
如果使用过 IBM® alphaWork 工具集,就会理解本文中提到的 “Convert for XForms
Renderer->” 动作是什么了。它可以修改默认名称空间、删除名称空间前缀并添加 “xforms-check.js” 脚本。该工具也非常适合开发 XForms 应用程序。更多信息请参阅 参考资料。
结束语
本文说明了只要在编辑和部署的时候采取一定的步骤,就可以让基于 XForms 的网页不但能够在不同的浏览器上工作,而且可在必要的时候安装相关插件。
也许将来有一天这些浏览器本身都支持 XForms 和 XHTML,从而大大简化了最终用户对这类 Web 应用程序的使用。
下载 | 描述 | 名字 | 大小 | 下载方法 |
|---|
| XHTML, XForms, and JavaScript simple sample | cross_browser_xforms.zip | 3KB | HTTP |
|---|
参考资料 学习
获得产品和技术
讨论
关于作者  | |  | Steve Speicher 是一位从事新标准研究的 IBM 高级软件工程师,复合 XML 文档工具箱(Compound XML Document Toolkit)的首席开发人员。Speicher 先生是 W3C Compound Document Formats (CDF) 工作组的成员,他利用模型驱动的开发(MDD)来改进标准的开发。以前他曾经在 Rational 部门和 IBM 内部工具部门研究 “构建” 和软件配置管理(SCM)工具。 |
对本文的评价
|