XForms, Storing Tabs in the Model

Motivation

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

Method

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

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"'},
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"
>

Tabs
id="data-model">
id="tabset-instance" xmlns="">
value="create">
value="create">Create
value="configure">Configure
value="validate">Validate
value="review">Review

type="text/css">
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;
};
]]>

class="tabframe">
class="tabs">
nodeset="instance('tabset-instance')/item"
id="tab-item-repeat">
ref="." appearance="minimal">
ref="."/>
ev:event="DOMActivate">
ref="instance('tabset-instance')/@value"
value="instance('tabset-instance')/item[index('tab-item-repeat')]"/>
ref=".">
value="@value"/>

class="tabpane">

id="create" selected="true">
Create Transformation Strategy
This is the pane where strategies for transformations are designed

id="configure">
Configure Strategy Parameters
This sets the parameters necessary for the execution of the strategy.

id="validate">
Validate Strategy Rules
This sets up tests for determining whether the transformation has succeeded or failed.

id="review">
Review Strategy
This provides a comprehensive review of the states defined within a given strategy.

)
return $results

Acknowledgments

This example was posted by Kurt Cagle on XML Today.

Where this page came from

This page was imported from Wikibooks. From “XForms” on Wikibooks, by its contributors, under CC BY-SA 4.0. Changed here: set as a page; navigation and edit links left out; each image under its own licence, credited in its caption.

Nobody has written it yet — it is the source material at a new address, which is why search engines are asked to skip it and why no one earns from it. It is up for grabs: take it on, and it is yours to rewrite and to earn from.