先决条件
本文只基于 XForms 和 JavaScript。针对安装在 Mozilla Firefox 2.0 之上的 Mozilla XForms 插件 进行测试。使用的是标准的 XForms 和 JavaScript，因此应该在这两个标准技术的其他实现上运行。没有使用服务器端的技术。
典型的表示例
我们来看一个典型的 XForms 示例。它展示了如何创建表示 XML 文档中重复节点的表。尤其展示了如何使用 XForms 执行聚集计算以及如何使用 XForms 添加或删除模型数据的节点，同步地自动保存视图。查看清单 1 中的完整源代码。
清单 1. 典型的 XForms 表示例
<?xml version="1.0" encoding="UTF-8"?>
<xhtml:html xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xforms="http://www.w3.org/2002/xforms"
xmlns:xhtml="http://www.w3.org/1999/xhtml"
xmlns:xsd="http://www.w3.org/2001/XMLSchema">
<xhtml:head>
<xhtml:title>Demonstration of table with
column total</xhtml:title>
<xf:model xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<xf:instance src="my-data.xml" xmlns=""/>
<xf:bind calculate="sum(../Item/Amount)" nodeset="/Data/Total"/>
<xf:submission action="my-data.xml"
instance="my-data" method="get" replace="instance"/>
<xf:submission action="my-data.xml"
method="get"/>
<xf:submission action="my-data.xml"
method="put"/>
</xf:model>
</xhtml:head>
<xhtml:body>
<xf:group ref="/Data" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
<xf:label/>
<xf:repeat nodeset="Item"
xmlns="http://www.w3.org/1999/xhtml">
<xf:input_blank" href="http://www.cuoxin.com">item-description"
ref="Description" xmlns="http://www.w3.org/1999/xhtml">
<xf:label/>
</xf:input>
<xf:input_blank" href="http://www.cuoxin.com">item-amount" ref="Amount"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label/>
</xf:input>
</xf:repeat>
<xhtml:div>
<xf:output ref="/Data/Total" xmlns="http://www.w3.org/1999/xhtml">
<xf:label/>
</xf:output>
</xhtml:div>
<xf:trigger xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Add Item</xf:label>
<xf:action ev:event="DOMActivate">
<xf:insert at="last()" nodeset="Item[last()]"
position="after"/>
<xf:setvalue ref="Item[last()]/Description" value="''"/>
<xf:setvalue ref="Item[last()]/Amount" value="0"/>
<xf:setfocus control="description-input"/>
</xf:action>
</xf:trigger>
<xf:trigger xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Delete Item</xf:label>
<xf:delete at="index('repeatItem')" ev:event="DOMActivate"
nodeset="Item[index('repeatItem')]"/>
</xf:trigger>
<xf:submit submission="update-from-local-file"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Reload</xf:label>
</xf:submit>
<xf:submit submission="save-to-local-file"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label>Save</xf:label>
</xf:submit>
<xf:submit submission="view-xml-instance"
xmlns="http://www.w3.org/1999/xhtml">
<xf:label>View XML Instance</xf:label>
</xf:submit>
</xf:group>
</xhtml:body>
</xhtml:html>
您可能注意到了，在源代码中模型中的数据来自外部 XML 文件。该文件如清单 2 所示。
清单 2. 示例的 XML 数据
<?xml version="1.0" encoding="UTF-8"?>
<Data>
<Item>
<Description>Furniture</Description>
<Amount>1000</Amount>
</Item>
<Item>
<Description>Dock</Description>
<Amount>2000</Amount>
</Item>
<Item>
<Description>Boat</Description>
<Amount>3000</Amount>
</Item>
<Item>
<Description>Lawn equipment</Description>
<Amount>4000</Amount>
</Item>
<Item>
<Description>Hot tub</Description>
<Amount>5000</Amount>
</Item>
<Total>15000</Total>
</Data>
