WEB开发网
开发学院网页设计JavaScript 使用 JavaScript 让 XForms 变得更健壮 阅读

使用 JavaScript 让 XForms 变得更健壮

 2010-09-14 13:05:10 来源:WEB开发网   
核心提示:本文示例源代码或素材下载 先决条件本文只基于 XForms 和 JavaScript,针对安装在 Mozilla Firefox 2.0 之上的 Mozilla XForms 插件 进行测试,使用 JavaScript 让 XForms 变得更健壮,使用的是标准的 XForms 和 JavaScript,因此应

本文示例源代码或素材下载

先决条件

本文只基于 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 id="my-model" xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms">
      <xf:instance id="my-data" src="my-data.xml" xmlns=""/>
      <xf:bind calculate="sum(../Item/Amount)" nodeset="/Data/Total"/>
      <xf:submission action="my-data.xml" id="update-from-local-file"
instance="my-data" method="get" replace="instance"/>
      <xf:submission action="my-data.xml" id="view-xml-instance"
method="get"/>
      <xf:submission action="my-data.xml" id="save-to-local-file"
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 id="repeatItem" nodeset="Item"
xmlns="http://www.w3.org/1999/xhtml">
        <xf:input class="item-description" id="description-input"
ref="Description" xmlns="http://www.w3.org/1999/xhtml">
          <xf:label/>
        </xf:input>
        <xf:input class="item-amount" ref="Amount"
xmlns="http://www.w3.org/1999/xhtml">
          <xf:label/>
        </xf:input>
      </xf:repeat>
      <xhtml:div id="sum">
      <xf:output ref="/Data/Total" xmlns="http://www.w3.org/1999/xhtml">
        <xf:label/>
      </xf:output>
      </xhtml:div>
      <xf:trigger id="insertbutton" 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 id="delete" 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>

1 2 3 4 5 6  下一页

Tags:使用 JavaScript XForms

编辑录入:爽爽 [复制链接] [打 印]
赞助商链接