Last modified on 11 September 2010, at 11:55

XForms/Storing Tabs in the Model

MotivationEdit

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

MethodEdit

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 ExampleEdit

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

AcknowledgmentsEdit

This example was posted by Kurt Cagle on XML Today.