XForms 基础 (2)

设置控件的值

表单中另一个常见的功能是设置值,通常在第一次加载表单的时候设置,不过有时候也在使用表单的过程中。我们看看在 XForms 表单中如何实现。

使用初始值

我们已经看到添加到表单控件中的信息如何被添加到实例中。事实上这种交换是双向的。添加到实例中的信息也会添加到表单控件中(如清单 9 所示)。

清单 9. 实例中的信息

...<xforms:model id="model_composers"><xforms:instance xmlns=""><composers> <composer> <name>Wolfgang Amadeus Mozart</name> <genre>C</genre> <accessibility>9</accessibility> <difficulty>9</difficulty> <totalscore>18</totalscore> <examples> <example>A little night music</example> <example>Twinkle, twinkle, little star</example> <example>Don Giovanni</example> </examples> </composer></composers></xforms:instance><xforms:submission id="submit_model_composers" action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/></xforms:model>...


这里看到的信息可能和表单中原来包含的有点儿不同,但是如果打开表单就会在页面上看到(如图 9 所示)。

图 9. 实例中的数据
实例中的数据

因此放在实例中的任何内容都会反映到控件上,反之亦然。但是 XForms 还提供了另一种选择来建立这种联系。

绑定数据

到目前为止,我们只看到了如何引用实例中的某个节点。XForms 还允许明确地 “绑定” 到特定节点集。比方说,可以创建一个 ID 来引用某个节点(如清单 10 所示)。

清单 10. 建立绑定

<?xml version="1.0" encoding="ASCII"?><html xmlns="http://www.w3.org/1999/xhtml" xmlns:xforms="http://www.w3.org/2002/XForms"><head><title>Describe a composer</title><xforms:model id="model_composers"> <xforms:instance xmlns="">... </xforms:instance> <xforms:submission id="submit_model_composers" action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/> <xforms:bind id="total" nodeset="/composers/composer/totalscore"/></xforms:model></head><body><xforms:input ref="/composers/composer/name"> <xforms:label>Name: </xforms:label></xforms:input>...<xforms:range start="-10.0" end="10.0" step="0.5"  ref="/composers/composer/difficulty"> <xforms:label>Difficulty: <br /></xforms:label></xforms:range><br /> <br /><xforms:input bind="total"> <xforms:label>Totalscore: </xforms:label></xforms:input><br /><xforms:repeat...


要注意,Totalscore 控件并没有引用哪个节点而是通过 ID 值来发现某个节点。表单在模型中定义了绑定本身。这样在打开表单的时候,XForms 就知道到哪里取得 Totalscore 值(如图 10 所示)。

图 10. 使用绑定的值
使用绑定的值

对于抽象表单来说这种能力很有用;比方说,在很大的表单中可以为每个数据建立绑定,然后只要修改每个绑定的节点集就可以改变实例的结构,而不需要修改整个表单。

使用计算得到的值

不过,绑定最大的价值可能在于能够建立计算值。比方说,可以在创建 Totalscore 的时候自动添加可访问性和难度值(如清单 11 所示)。

清单 11. 创建计算值

...</xforms:instance> <xforms:submission id="submit_model_composers" action="http://XFormstest.org/cgi-bin/showinstance.sh" method="post"/>  <xforms:bind id="total" nodeset="/composers/composer/totalscore"  calculate="/composers/composer/accessibility +  /composers/composer/difficulty"/></xforms:model>...

提交表单

我们已经看到,XForms 表单的典型提交方式是将整个实例发送到服务器。但情况并非一定如此。




    回页首


提交表单的一部分

XForms 提交的一种变化是只提交实例的一部分。比如,可以告诉表单只提交 example 元素(如清单 12 所示)。

清单 12. 仅提交 example

... </examples> </composer> </composers> </xforms:instance>  <xforms:submission id="submit_model_composers"  ref="/composers/composer/examples" action="http://localhost/XForms.php" method="post"/>  <xforms:bind id="total" nodeset="/composers/composer/totalscore"  calculate="/composers/composer/accessibility +  /composers/composer/difficulty" /></xforms:model>...


现在提交表单就会发现实例中只有 ref 属性所指定的那一部分被提交了(如图 12 所示)。

图 12. 提交实例的一部分
提交实例的一部分

另替换实例的一部分

和一般 HTML 表单相比,XForms 的一大优点是能够以 XML 的形式发送提交数据和接收返回的数据,然后再将其添加到实例以及页面上已有的控件中。要注意,除非修改浏览器的安全特性,否则响应必须来自和最初下载表单相同的域名。比方说,如果下载页面 http://www.nicholaschase.com/composers.xhtml 并希望用返回的提交填充表单实例,那么提交 URL 最好以 http://www.nicholaschase 开始。这就意味着不能本地加载表单。本文示例表单中包含的 PHP 脚本仅仅返回数据。可用其来测试本节中的例子。

让表单替换实例而不是页面只需要在提交中增加一个属性(如清单 13 所示)。

清单 13. 替换实例

... </xforms:instance>  <xforms:submission id="submit_model_composers"  ref="/composers/composer/examples" replace="instance" action="http://localhost/XForms.php" method="post"/>  <xforms:bind id="total" nodeset="/composers/composer/totalscore"  calculate="/composers/composer/accessibility +  /composers/composer/difficulty" /></xforms:model></head><body>...<br /><xforms:repeat id="repeat_example_model_composers" nodeset="/composers/composer/examples/example"> <xforms:input ref="."> <xforms:label>Example: </xforms:label> </xforms:input></xforms:repeat><xforms:repeat id="repeat_example_model_composers" nodeset="/examples/example"> <xforms:input ref="."> <xforms:label>Submitted Example: </xforms:label> </xforms:input></xforms:repeat><xforms:submit submission="submit_model_composers"> <xforms:label>Submit</xforms:label></xforms:submit></body></html>


要注意新增加的第二个 repeat 元素,只有当文档中存在 /examples/example 节点时才会出现。因此第一次加载文档时不会出现,只有在提交之后才会看到(如图 13 所示)。

图 13. 提交后的实例
提交后的实例

结束之前还有一点需要知道。一种变化形式是提交实例但不替换整个页面。
回到基础:传统的 Web 表单

现在我们看到了 XForms 和 HTML 表单的诸多区别,但是如果希望使用 XForms 表单但向老式的脚本提交,那么怎么办?所幸的是,要求 XForms 按照原来的名-值对样式提交数据很简单(如清单 14 所示)。

清单 14. 提交传统数据

...<xforms:model id="model_composers"> <xforms:instance id="instance_model_composers" src="composer.xml"/>  <xforms:submission id="submit_model_composers"  action="http://localhost/XForms.php" method="get" encoding="application/x-www-form-urlencoded"/>  <xforms:bind id="total" nodeset="/composers/composer/totalscore"  calculate="/composers/composer/accessibility +  /composers/composer/difficulty" /></xforms:model>...


要注意,这里再次使用了 GET 而不是 POST 方法,因为这样可以告诉 XForms 将数据放在 URL 本身而不是请求中。此外,encoding 属性说明要建立名-值对。这样在提交表单的时候,就会看到页面上没有任何信息 —— 增加一条简单的输出语句来避免错误,但是信息出现在 URL 中(如图 14 所示)。

图 14. 提交 GET 请求
提交 GET 请求

如果查看实际的数据,就会发现数据都在那儿,只不过以 “扁平” 的形式存在;没有复制原来的 XML 层次结构的机制(如清单 15 所示)。

清单 15. URL 请求

http://localhost/XForms.php?name=Wolfgang+Amadeus+Mozart;genre=C;accessibility=9;difficulty=9;totalscore=18;example=A+little+night+music;example=Twinkle%2C+twinkle%2C+little+star;example=Don+Giovanni


要注意每个名-值对之间用分号(;)分隔。可以用 separator 属性将分隔符改为 “与” 符号(&)。
结束语

到现在您应该能够创建简单的和比较复杂的 XForms 表单了。这些表单接收和存储的数据都依赖于 XML “实例” 的结构,但是也可以模拟 HTML 表单中很多常见的功能。XForms 表单增强了交互性,数据与表示的分离使其能够用于多种设备。此后您应该能够知道利用这些功能创建更有意义的表单时需要做什么。
<完>


现在在打开表单的时候,就会发现可访问性或难度值的变化会自动改变 Totalscore 值
  • 1
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值