XForms/Storing Tabs in the Model

Motivation edit

You want to dynamically modify your tabs while the form is executing.
Method edit

Rather than statically loading all your tabs in the form body it is also possible to store your tabs in the XForms model and then display each of them by using a repeat.
Full Example edit

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
Acknowledgments edit

This example was posted by Kurt Cagle on XML Today.