Hi,
The following example (taken from
http://en.wikibooks.org/wiki/XForms/Storing_Tabs_in_the_Model ) worked
well in version 533:
<?xml version="1.0" encoding="utf-8"?>
<?xml-stylesheet href="../xsltforms/xsltforms.xsl" type="text/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="validate">
<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; background-color:#d8dcda;}
.xforms-repeat-item {
display:inline-block;
font-size:12pt;
font-family:Arial;
text-align:center;
padding:5px;
margin-right: 1em;
border:solid 1px #29768a;
background-color:#29768a;
border-radius: .4em .4em 0em 0em;
margin-bottom: 0px;
hover.background-color:#f2f0fb;
}
/* this formats the selected tab differently so that you can tell what
tab you are using */
.xforms-repeat-item-selected {
border-bottom:solid 5px #f2f0fb;
background-color:#f2f0fb;
}
.tabframe {
position:relative;
}
.tabs {
/* position:absolute;
z-index:2; */
margin-left:15px;
}
.tabpane {
width:700px;
height:400px;
border:solid 1px #29768a;
z-index:1;
/* position:absolute; box-shadow: 7px 7px 8px #818181;*/
margin-top:-2px;
padding:10px;
border-radius:10px;
background: -webkit-linear-gradient(top, #f2f0fb, #d8dcda);
background:-moz-linear-gradient(top, #f2f0fb, #d8dcda);
};
]]></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')]/@value"/>
<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>
In version555, on loading show next alert:
> XSLTForms Exception
> --------------------------
>
> Error initializing :
>
> @http://localhost:8888/xsltforms/xsltforms.js:8887
> xsltforms_initImpl@http://localhost:8888/probe/tabs-model.xhtml:54
> xsltforms_init@http://localhost:8888/probe/tabs-model.xhtml:2
> onload@http://localhost:8888/probe/tabs-model.xhtml:1
>
>
> TypeError
>
> target is null
After, also work well, change correct the value of tabs. When is removed
de case element from toggle, the message not appear. Would be possible,
instead, to use case as attribute in toggle element, with AVT, in the
near future? Or caseref from switch (XForms 2.0)?
With thanks,
Ioan
|
