跳转至内容

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
华夏公益教科书