XForms/在模型中儲存選項卡

動機

您希望在表單執行時動態修改選項卡。
方法

除了在表單主體中靜態載入所有選項卡之外，還可以將選項卡儲存在 XForms 模型中，然後使用重複顯示每個選項卡。
完整示例

declare namespace h = "http://www.w3.org/1999/xhtml";

let $content-type := "text/xml"
let $mode := xdmp:set-response-content-type($content-type)
let $results := 
(
processing-instruction {'xml-stylesheet'} {'type="text/xsl" href="/lib/xsltforms/xsltforms.xsl"'},
<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"
 xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xs="http://www.w3.org/2001/XMLSchema"
>
    <head>
        <title>Tabs</title>
        <xf:model id="data-model">
            <xf:instance id="tabset-instance" xmlns="">
                <tabset value="create">
                    <item value="create">Create</item>
                    <item value="configure">Configure</item>
                    <item value="validate">Validate</item>
                    <item value="review">Review</item>
                </tabset>
            </xf:instance>
        </xf:model>
        <style type="text/css"><![CDATA[
body {margin:0.25in;}

.xforms-repeat-item  {
    display:inline-block;
    font-size:12pt;
    font-family:Arial;
    text-align:center;
    padding:5px;
    border:solid 1px black;
    background-color:lightGray;
    -moz-border-radius-topleft:10px;
    -webkit-border-top-left-radius:10px;
    -moz-border-radius-topright:10px;
    -webkit-border-top-right-radius:10px;    
}

/* this formats the selected tab differently so that you can tell what tab you are using */
.xforms-repeat-item-selected {
    border-bottom:solid 3px white;
    background-color:white;
}
.tabframe {
    position:relative;
    }
    
.tabs {
/*    position:absolute;
    z-index:2; */
    margin-left:15px;
    }

.tabpane {
    width:800px;
    height:500px;
    border:solid 1px black;
    z-index:1;
/*    position:absolute; */
    margin-top:-2px;
    padding:10px;
    box-shadow: 7px 7px 8px #818181;
    -webkit-box-shadow: 7px 7px 8px #818181;
    -moz-box-shadow: 7px 7px 8px #818181;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;
    -moz-border-radius:10px;
    -webkit-border-radius:10px;    
    };
        ]]></style>
   </head>
    <body>
        <div class="tabframe">
        <div class="tabs">
        <xf:repeat nodeset="instance('tabset-instance')/item" 
            id="tab-item-repeat">
            <xf:trigger ref="." appearance="minimal"> 
                <xf:label><xf:output ref="."/></xf:label>
                <xf:action ev:event="DOMActivate">
                    <xf:setvalue ref="instance('tabset-instance')/@value" 
                    value="instance('tabset-instance')/item[index('tab-item-repeat')]"/>
                    <xf:toggle ref=".">
                        <xf:case value="@value"/>
                    </xf:toggle>
                </xf:action>
            </xf:trigger>
        </xf:repeat>
        </div>
        <div class="tabpane">
        <xf:switch>
        <xf:case id="create" selected="true">
                <h1>Create Transformation Strategy</h1>
                <p>This is the pane where strategies for transformations are designed</p>
        </xf:case>
        <xf:case id="configure">
                <h1>Configure Strategy Parameters</h1>
                <p>This sets the parameters necessary for the execution of the strategy.</p>
        </xf:case>
        <xf:case id="validate">
                <h1>Validate Strategy Rules</h1>
                <p>This sets up tests for determining whether the transformation has succeeded or failed.</p>
        </xf:case>
        <xf:case id="review">
                <h1>Review Strategy</h1>
                <p>This provides a comprehensive review of the states defined within a given strategy.</p>
        </xf:case>
        </xf:switch>
        </div>
        </div>
    </body>
</html>)
return $results
致謝

此示例由 Kurt Cagle 在 XML Today 上釋出。