跳转到内容

XRX/选择列表生成器

来自维基教科书,开放的书籍,开放的世界
< XRX

您希望将所有代码表存储在中心位置,并让每个表单动态地从这些代码表生成选择列表。

我们将创建一个非常简单的XML文件格式来存储所有代码。我们将每个文件存储一个代码表,然后编写一个简单的XQuery,它遍历所有这些文件以构建一个示例选择列表。此选择列表将在模型中创建一个实例以保存每个选择列表值。它还将使用列表中的第一个值填充该实例。

在我们的示例中,我们将假设一个XRX文件命名标准,例如/db/apps/app-name/code-tables/my-code-table.xml,其中每个应用程序包含其自己的代码表,以最大限度地提高应用程序在系统之间的可移植性。共享代码表的应用程序可以将这些代码表存储在以下位置:/db/shared/code-tables/my-code-table.xml

示例屏幕图像

[编辑 | 编辑源代码]
选择列表生成器的输出

XML文件格式

[编辑 | 编辑源代码]
<code-table>
    <code-table-name>PublishStatusCode</code-table-name>
    <definition>A way to classify the publishing workflow of an item.</definition>
    <items>
        <item>
            <label>Draft</label>
            <value>draft</value>
        </item>
        <item>
            <label>Under Review</label>
            <value>under-review</value>
        </item>
        <item>
            <label>Published</label>
            <value>published</value>
        </item>
    </items>
</code-table>

示例XQuery

[编辑 | 编辑源代码]

此查询遍历XRX应用程序code-tables集合中的所有文件,并查找以code-table为根元素的XML文件。然后它创建一个包含所有选择列表的报告,这些选择列表位于一个正在运行的XForms应用程序中。

xquery version "1.0";
import module namespace style ='http://code.google.com/p/xrx/style' at '/db/xrx/modules/style.xqm';
declare namespace xhtml="http://www.w3.org/1999/xhtml";

(: XQuery to construct an XForm for either a new item or update item :)
declare option exist:serialize "method=xhtml media-type=application/xhtml+xml indent=yes"; 

let $app-collection := style:app-base-uri()
let $code-table-collection := concat($app-collection, '/code-tables')
let $code-tables := collection($code-table-collection)/code-table

return
<html xmlns="http://www.w3.org/1999/xhtml" 
xmlns:xf="http://www.w3.org/2002/xforms" 
xmlns:ev="http://www.w3.org/2001/xml-events">
   <head>
      <title>XForms Selection List Tester</title>
      {style:import-css()}
      <link type="text/css" rel="stylesheet" href="block-form.css"/>
      <xf:model>
         <!-- This instance holds the value of each code -->
         <xf:instance xmlns="" id="save-data" src="">
            <data>
               {for $code-table in $code-tables
                 return
                    element {$code-table/code-table-name/text()} {$code-table/items/item[1]/value/text()}}
            </data>
         </xf:instance>
      </xf:model>
   </head>
   <body>
      {style:header()}
      {style:breadcrumb()}
      <h1>Sample with a Model in the XForm</h1>
      {for $code-table in $code-tables
         let $code-table-name := $code-table/*:code-table-name/text()
      return
         <xf:select1 ref="{$code-table-name}">
            <xf:label>{$code-table-name}: </xf:label>
            {for $item in $code-table/*:items/*:item
              return
                 <xf:item>
                    <xf:label>{$item/*:label/text()}</xf:label>
                    <xf:value>{$item/*:value/text()}</xf:value>
                 </xf:item>}
            <xf:hint>{$code-table/*:definition/text()}</xf:hint>
         </xf:select1>
      }
      {style:footer()}
   </body>
</html>

请注意,此XQuery使用元素构造器在实例中创建元素名称。它还使用*:name表示法将来自空命名空间的数据直接放入XForms命名空间。

此文件还将元素的定义直接放入XForms应用程序的命中信息中。在某些XForms应用程序(如Firefox)中,提示信息会以浮动短暂模式显示在表单的左侧边距中。

示例CSS文件

[编辑 | 编辑源代码]

这是可以用来使每个选择出现在单独一行上的block-form.css文件

@namespace xf url("http://www.w3.org/2002/xforms");
body {font-family: Arial, Helvetica; sans-serif;}

/* This line ensures all the separate input controls appear on their own lines */
xf|output, xf|input, xf|select, xf|select1, xf|textarea {display:block; margin:5px 0;}

/* Makes the labels right aligned in a column that floats to the left of the input controls. */
xf|select > xf|label,
xf|select1 > xf|label
{text-align:right; padding-right:10px; width:250px; float:left;}

上一步:文件锁定 下一步:术语编辑器

华夏公益教科书