跳转到内容

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,无法使用 outputvalueconcat 的组合在 repeat 内创建动态链接。这也将影响通知用户正在离开表单的能力。

有两种方法可以显示链接列表。两者都使用一个带有关闭按钮外观的触发器。第一个使用 load,在设置临时实例后。第二个使用 submit/submission 组合。

使用 load

[编辑 | 编辑源代码]

您还可以使用 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>
[编辑 | 编辑源代码]

加载 XForms 应用程序

示例程序

[编辑 | 编辑源代码]

以下程序在水平行中显示链接列表。每个链接都有一个标签和一个从实例文档中提取的 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 元素来缓解此问题。当用户将鼠标悬停在链接上时,此文本将显示。

此方法还允许您中断提交,检查实例数据中的更改,并在卸载表单之前显示警告消息。

下一页: Switch 和 Case | 上一页: 数字格式
首页: XForms
华夏公益教科书