xforms简介_XForms简介

最新推荐文章于 2024-05-14 20:21:49 发布

cuyi7076

最新推荐文章于 2024-05-14 20:21:49 发布

阅读量661

点赞数

文章标签：大数据 python java html js ViewUI

原文链接：https://www.ibm.com/developerworks/xml/library/x-xformsintro1/index.html

版权

xforms简介

XFormsSwift发展起来，它通过使用扩展程序或插件，以及通过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的成熟，由Web站点提供的数据输入表单变得越来越复杂。

如今，您可以轻松地找到极其复杂的表格，尤其是在电子商务网站或论坛上。这些可以是在服务器上运行PHP或Java™代码的前端，也可以是在浏览器中运行JavaScript的前端，从而使用Ajax技术将其结果发送到服务器。

不幸的是，HTML的表单是由将表示和内容混合在一起的元素创建的。从草率的基于演示文稿HTML过渡到将文档结构与格式元素混合在一起，再到清洁用CSS样式化的XHTML，您需要一种将表单的数据和行为与其演示文稿分离的方法。

Web表单呢？

Web Forms 2.0（请参阅参考资料部分中的链接）建立在HTML的现有表单功能的基础上，添加了XForms中的许多功能，但是采用了一种更简单，向后兼容的方法。正在进行将XForms和Web Forms合并为即将到来的XHTML 2.0规范的单个部分的运动。

进入浏览器

已经讨论了多年的XForms标准已经得到相当多的应用程序的支持（如果安装了XForms扩展，则包括Firefox，Mozilla和Seamonkey），并且该标准旨在替代XML混乱的XML。形式。

其他流行的Web浏览器支持通过插件的XForms（如formsPlayer的Internet Explorer 6，可从相关主题）。任何支持标准的浏览器也可以使用FormFaces，这是一个纯JavaScript XForms实现，可将XForms与客户端系统上的标准HTML控件进行相互转换。此外，诸如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表单

当您在图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方法，并命名它提交以供以后使用。
现在，表单的表示元素（用于文本输入字段的<xf:input>和用于提交按钮的<xf:submit> ）仅是表示元素，指示表单字段在呈现的页面中应显示的位置和方式。它们引用回<xf:model>元素中声明的<xf:model> 。

这是XForms版本的外观（请参见图2）。稍后将介绍针对Firefox的XForms扩展的安装。

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

形式看起来完全一样！通过使用XForms而不是传统HTML表单，您绝对不会损失任何东西，并且您已经获得了使用XML数据模型的所有优点。

设置以查看XForms

如果您已经下载了示例归档文件（位于“可下载的资源”部分），则可能已经注意到您的浏览器无法正确显示XForms版本（请参见图3）。

图3.不支持XForms的浏览器上的简单XForms页面

直到你最喜欢的Web浏览器提供内置的XForms的支持，你将不得不使用的XForms实现之一（见中列出的XForms的网站相关主题）。让我们快速看一下安装最便捷的实现之一Mozilla扩展。由于此功能适用于当前版本的Mozilla，Firefox和Seamonkey，因此您甚至不必安装或切换浏览器！您还将看到安装Internet Explorer 6插件。

将XForms扩展添加到Firefox

在Firefox中，拉起Mozilla XForms Project页面（请参阅参考资料）。单击“最新版本”标题下的下载页面链接。

XForms项目的下载页面将警告您该插件尚未为最终用户准备，然后为您提供指向实际下载页面的链接。单击该按钮，然后单击“ 立即安装”链接。

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

Firefox显示一个警告对话框（请参见图4）。单击立即安装按钮以下载并安装XForms扩展。重新启动Firefox以将其激活（请参见图5）。

图5.重新启动以激活您的新扩展

重新启动浏览器后，您可以加载前面看过的简单XForms示例。这次，您实际上将看到正确呈现的XForms元素！

将XForms插件添加到Internet Explorer 6

上了FormsPlayer网页（请参阅相关信息中的链接），单击链接免费下载FP访问注册页面。输入您的电子邮件地址和其他数据，然后单击Install FormsPlayer链接以下载并安装插件。

IE加载插件存档时，它将在有关ActiveX控件的URL下显示警告。单击此警告，然后选择“ 安装ActiveX控件” 。 IE将下载并安装formsPlayer。弹出IE的“安全性”警告时，单击“ 安装”以继续进行安装。

一旦安装了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带给您的浏览器的有趣功能之一就是能够将表单的内容（字段中的任何数据以及数据模型中存储的任何“隐藏”数据）保存到文件中。通过使用put方法提供其他<xf:submission>元素，可以将该数据作为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属性），而该根又包含表单所需的数据，即在表格中向下引用的<query> 。表单的<xf:input>元素。在此<query>元素中找到的数据是默认查询字符串，并且在呈现时将显示在<xf:input>元素中。

接下来，有一个<xf:bind>元素，它使<query>数据成为必需。如果<query>为空，则<xf:submit>按钮将不执行任何操作。

最后，您在<xf:model>中添加了两个新的<xf:submission>操作，这些操作使您可以将数据保存到文件中（通过put方法）并从文件中加载，而无需重新加载整个页面（使用get方法； replace="instance"属性仅重新加载数据模型实例）。

在页面底部，又添加了两个<xf:submit>元素，以便您可以保存和加载数据。

图6显示了Firefox现在的外观。请注意，如何使用数据模型实例中包含的默认值以及新的“保存”和“加载”按钮来填充“查找”字段。

图6.新的和改进的表单

如果此时单击Save按钮，则将在/ tmp目录中获得一个名为XFormsQuery.xml的文件，其中包含数据模型实例（请参见清单4）。要测试“加载”功能，请更改“查找”字符串，然后单击“ 加载” ；您的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>

有一些用于控制输出的选项，但这里没有使用任何选项。在任何情况下， Save和Load功能都可以运行，而无需任何脚本。