跳轉到內容

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
華夏公益教科書