XForms/输出和链接
外观
< XForms
您希望在表单的部分中显示一组重复的 URL。每个 URL 都是通过连接一个基本 URL 和一个 URL 参数创建的。
在 XForms 应用程序中,等效于 HTML 锚标签 (<a>) 的是 <xf:load> 元素。
如果在网页中,您希望输出显示如下
<div class="links">
<a href="http://www.example.com/myservice.xq?id=1">One</a>
<a href="http://www.example.com/myservice.xq?id=2">Two</a>
<a href="http://www.example.com/myservice.xq?id=3">Three</a>
</div>
在 XForms 应用程序中,每个锚将是 xf:load。
您的输入实例类似于以下内容
<xf:instance id="link-items" xmlns="">
<data>
<item>
<id>1<id>
<label>One</label>
</item>
<item>
<id>2<id>
<label>Two</label>
</item>
<item>
<id>3<id>
<label>Three</label>
</item>
</data>
</xf:instance>
使用 XForms,无法使用 output、value 和 concat 的组合在 repeat 内创建动态链接。这也将影响通知用户正在离开表单的能力。
有两种方法可以显示链接列表。两者都使用一个带有关闭按钮外观的触发器。第一个使用 load,在设置临时实例后。第二个使用 submit/submission 组合。
您还可以使用 load 元素作为元素。
<xf:instance id="URL-container" xmlns="">
<URL/>
</xf:instance>
<!-- ... -->
<xf:trigger appearance="minimal">
<xf:label>One</xf:label>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('URL-container')"
value="concat('http://www.example.com/my-view.xq?id=', id)"/>
<xf:load ref="instance('URL-container')"/>
</xf:action>
</xf:trigger>
<xf:instance>
以下程序在水平行中显示链接列表。每个链接都有一个标签和一个从实例文档中提取的 URL 后缀。
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xf="http://www.w3.org/2002/xforms">
<head>
<title>Displaying Links in an XForms Application</title>
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family:Helvetica, sans-serif}
.links xf|repeat * {display: inline;}
.url {color: blue; text-decoration:underline; margin: 0 2px;}
</style>
<xf:model>
<xf:instance xmlns="" id="links">
<data>
<link>
<label>XForms</label>
<wikipedia-id>XForms</wikipedia-id>
</link>
<link>
<label>XQuery</label>
<wikipedia-id>XQuery</wikipedia-id>
</link>
<link>
<label>XSLT</label>
<wikipedia-id>XSL Transformations</wikipedia-id>
</link>
<link>
<label>XML Database</label>
<wikipedia-id>XML_database</wikipedia-id>
</link>
<link>
<label>Declarative Programming</label>
<wikipedia-id>Declarative_programming</wikipedia-id>
</link>
<link>
<label>Functional Programming</label>
<wikipedia-id>Functional_programming</wikipedia-id>
</link>
</data>
</xf:instance>
<xf:instance id="URL-container" xmlns="">
<URL />
</xf:instance>
</xf:model>
</head>
<body>
<h3>Displaying Links in an XForms Application</h3>
<div class="links">
<xf:repeat nodeset="instance('links')/link" id="link-repeat">
<xf:trigger submission="replace-form-with" appearance="minimal" class="url">
<xf:label>
<xf:output ref="label" />
</xf:label>
<xf:hint>
<xf:output ref="wikipedia-id" />
</xf:hint>
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('URL-container')" value="concat('http://en.wikipedia.org/wiki/', instance('links')/link[index('link-repeat')]/wikipedia-id)" />
<xf:load ref="instance('URL-container')" />
</xf:action>
</xf:trigger>
</xf:repeat>
</div>
</body>
</html>
此解决方案由 John Clark 于 2008 年 2 月 27 日发布到 Mozilla XForms 开发新闻组。
作为一种替代策略,您可以使用带有 replace="all" 属性的 submission 语句替换表单。然后,您可以使用 appearance="minimal" 样式化提交按钮,使按钮看起来像链接。
<style type="text/css">
@namespace xf url("http://www.w3.org/2002/xforms");
.url {color: blue; text-decoration:underline; margin: 0 2px;}
</style>
...
<xf:submission id="replace-form-with" method="get"
ref="instance('link-items')/item[index('link-repeat')]/id"
action="http://www.example.com/my-view.xq"
replace="all" />
...
<xf:repeat nodeset="instance('link-items')/item" id="link-repeat">
<xf:submit submission="replace-form-with" appearance="minimal" class="url">
<xf:label><xf:output ref="label"/></xf:label>
</xf:submit>
此解决方案相对于使用标准链接的唯一缺点是 URL 不会显示在状态栏中。可以通过在标签中使用 xf:hint 元素来缓解此问题。当用户将鼠标悬停在链接上时,此文本将显示。
此方法还允许您中断提交,检查实例数据中的更改,并在卸载表单之前显示警告消息。