跳轉至內容

XForms/引用專案

來自華夏公益教科書

您希望將表單與一組專案關聯。一旦引用了專案,就不應該再次引用它。

例如,如果您有一個編輯任務的表單,您可能希望將特定任務與一個或多個專案關聯。一旦將專案與任務關聯,您希望將其從可以與其關聯的候選專案列表中刪除。

將此視覺化的方法是想象一個集合分為兩個不同的子集:選定專案和未選定專案。當一個專案從未選定專案集中移到選定專案集中時,它必須先新增到新集中,然後從舊集中刪除。

此示例使用 repeat 和 switch/case 的組合。當前引用的專案在重複迴圈中列出。名為“新增引用”的按鈕使用 toggle 函式來顯示未選定專案的列表。當您選擇一個專案時,它會被新增到選定列表中。

示例程式

[編輯 | 編輯原始碼]
<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>Form References</title>
       <style type="text/css">
          @namespace xf url("http://www.w3.org/2002/xforms");
          body {font-family:Helvetica, sans-serif}
       </style>
       <xf:model>
          <xf:instance xmlns="" id="unreferenced-items">
            <data>
               <reference>
                   <reference-id>1</reference-id>
                   <reference-name>Reference 1</reference-name>
               </reference>
               <reference>
                   <reference-id>2</reference-id>
                   <reference-name>Reference 2</reference-name>
               </reference>
               <reference>
                   <reference-id>3</reference-id>
                   <reference-name>Reference 3</reference-name>
               </reference>
                <reference>
                   <reference-id>7</reference-id>
                   <reference-name>Reference 7</reference-name>
               </reference>
                <reference>
                   <reference-id>8</reference-id>
                   <reference-name>Reference 8</reference-name>
               </reference>
                <reference>
                   <reference-id>9</reference-id>
                   <reference-name>Reference 9</reference-name>
               </reference>
            </data>
          </xf:instance>
          <xf:instance xmlns="" id="referenced-items">
            <data>
               <reference>
                   <reference-id>4</reference-id>
                   <reference-name>Reference 4</reference-name>
               </reference>
                <reference>
                   <reference-id>5</reference-id>
                   <reference-name>Reference 5</reference-name>
               </reference>
                <reference>
                   <reference-id>6</reference-id>
                   <reference-name>Reference 6</reference-name>
               </reference>
            </data>
          </xf:instance>
       </xf:model>
    </head>
    <body>
       <h3>Demonstration of Referencing External Items in an XForms Application</h3>
      <xf:group class="group-label">
          <xf:label>Currently Referenced Items:</xf:label>
           <xf:repeat nodeset="instance('referenced-items')/reference">
              <xf:output ref="reference-name"/>
           </xf:repeat>
           <xf:switch>
           <xf:case id="init">
              <xf:trigger>
                  <xf:label>Add Reference</xf:label>
                  <xf:toggle case="add-reference" ev:event="DOMActivate"/>
              </xf:trigger>
                 <xf:input ref="my-element">
                    <xf:label>Reference Name: </xf:label>
                 </xf:input>
             </xf:case>
             <xf:case id="add-reference">
                 <xf:label>Un-Referenced Items:</xf:label>
                 <xf:repeat nodeset="instance('unreferenced-items')/reference" id="unreferenced-item-repeat">
                  <xf:trigger>
                     <xf:label><xf:output ref="reference-name"/></xf:label>
                     <xf:action ev:event="DOMActivate">
                        <xf:insert nodeset="instance('referenced-items')/reference" at="last()" position="after"/>
                        <xf:setvalue 
                           ref="instance('referenced-items')/reference[last()]/reference-name" 
                           value=" instance('unreferenced-items')/reference[index('unreferenced-item-repeat')]/reference-name "/>
                           <xf:setvalue 
                           ref="instance('referenced-items')/reference[last()]/reference-id" 
                           value=" instance('unreferenced-items')/reference[index('unreferenced-item-repeat')]/reference-id "/>
                        <xf:delete nodeset="instance('unreferenced-items')/reference" at="index('unreferenced-item-repeat')"/>
                     </xf:action>
                  </xf:trigger>
                 </xf:repeat>
             </xf:case>
             </xf:switch>
         </xf:group>
    </body>
</html>

未引用的專案不會顯示,除非使用者選擇“新增引用”觸發器。當用戶選擇新增引用觸發器時,會顯示當前未引用的專案的列表。

當用戶選擇未引用專案的觸發器時,一個新專案會被新增到引用專案列表的末尾,並從未引用專案列表中刪除。

這種模式可以在許多示例中使用。例如,當您建立自定義報告時,會向您顯示要顯示的列列表。這些列要麼在顯示列表中引用,要麼沒有引用。

使用者介面有時會並排顯示這些列表。這可以透過向每個組新增一個類,並使用 CSS 並排顯示這些列表來實現。

此示例的一個問題是無法在專案移動到新列表後將它們放置在正確的順序。希望 XForms 的未來版本將支援此功能。


下一頁: 動態選擇列表 | 上一頁: 幻燈片
主頁: XForms
華夏公益教科書