<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:xf="http://www.w3.org/2002/xforms"
xmlns:xsd="http://www.w3.org/2001/XMLSchema"
xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xmlns:ev="http://www.w3.org/2001/xml-events"
xmlns:fst="http://some.url/xforms-state/1.0"
xmlns:exf="http://smartsite.nl/namespaces/xforms/1.0"
>
<head>
<title>A Wizard Structue</title>
<xf:model>
<xf:instance xmlns="" id="data">
<formData>
<name required="true" />
<email xsi:type="xf:email" required="true" />
<street required="true" />
<number required="true" />
<postalcode required="true" />
<city required="true" />
</formData>
</xf:instance>
<xf:bind nodeset="name" required="true()" />
<xf:instance xmlns="" id="resources">
<text>
<!-- Wizard texts -->
<navigation>
<nextbutton>Next</nextbutton>
<previousbutton>Previous</previousbutton>
<steplist>Steps</steplist>
<step>Step</step>
<invalidcontrols>Not all values are valid and complete.</invalidcontrols>
<refreshscreen>Update values</refreshscreen>
<save>Save locally</save>
<load>Load locally</load>
<saved>Your data was saved successfully</saved>
<loaded>Your data was loaded successfully</loaded>
</navigation>
<steps>
<step>
<label>The first step</label>
<summary>The summary for the first step</summary>
<field name="name" >
<label>Your name</label>
<hint>Please enter your name.</hint>
<alert>This information is required.</alert>
<help>Your name could be 'John'</help>
</field>
<field name="email">
<label>Your email address</label>
<hint>Please enter your email address.</hint>
<alert>This information is required.</alert>
<help>Your email address could be 'John@acme.com'</help>
</field>
</step>
<step>
<label>The second step</label>
<summary>The summary for the second step</summary>
<field name="street" >
<label>Your street name</label>
<hint>Please enter the street name.</hint>
<alert>This information is required.</alert>
<help>The street name could be 'Broad Street'</help>
</field>
<field name="number" >
<label>Your building number</label>
<hint>Please enter your building number.</hint>
<alert>This information is required.</alert>
<help>The building number could be '27'</help>
</field>
</step>
<step>
<label>The third step</label>
<summary>The summary for the third step</summary>
<field name="postalcode" >
<label>Postal code</label>
<hint>Please enter the postal code.</hint>
<alert>This information is required.</alert>
<help>The postal code could be '1234 AB'</help>
</field>
<field name="city" >
<label>Your city name</label>
<hint>Please enter your city name.</hint>
<alert>This information is required.</alert>
<help>The city name could be 'London'</help>
</field>
</step>
</steps>
<template label="-" hint="-" alert="-" help="-" step="-" />
</text>
</xf:instance>
<!-- Wizard supporting data -->
<xf:instance id="formState">
<fst:state>
<fst:currentStep xsi:type="xsd:integer">0</fst:currentStep>
<fst:numberOfSteps xsi:type="xsd:integer">0</fst:numberOfSteps>
<fst:stepTitle xsi:type="xsd:string"/>
<fst:allSteps>
<fst:step nr="" />
</fst:allSteps>
<fst:previousButton />
<fst:nextButton />
</fst:state>
</xf:instance>
<!-- Required fields only on active tab -->
<xf:bind nodeset="instance()//*[@step=instance('formState')/fst:currentStep and @required='true']"
required="true()" />
<!-- Wizard logic -->
<!-- this line will create the Step 3|7 Steptitle indicator -->
<xf:bind id="steptitle"
nodeset="instance('formState')/fst:stepTitle"
calculate="concat(instance('resources')/navigation/step,' ', instance('formState')/fst:currentStep,'|', instance('formState')/fst:numberOfSteps,': ', instance('formState')/fst:allSteps/fst:step[@nr=instance('formState')/fst:currentStep])" />
<!-- These lines determine if the previous and next buttons can be displayed -->
<xf:bind nodeset="instance('resources')/steps/step"
readonly="@nr >= instance('formState')/fst:currentStep" />
<xf:bind id="previousButton"
nodeset="instance('formState')/fst:previousButton"
readonly="../fst:currentStep = 1" />
<xf:bind id="nextButton"
nodeset="instance('formState')/fst:nextButton"
readonly="../fst:currentStep >= ../fst:numberOfSteps" />
<!-- Display a notification if any controls on the current page are invalid
We are using the extension function valid() here. This function may vary between vendors.
Here we use the Smartsite extension (hence the additional namespace in the header).
The function checks all nodes on the active tab
-->
<xf:bind id="invalidControls"
nodeset="instance('formState')/fst:stepIsValid"
relevant="not(exf:valid(instance('data')//*[@step=instance('formState')/fst:currentStep], false(),true()))" />
<xf:action ev:event="xforms-model-construct-done">
<!-- Count the number of steps -->
<xf:setvalue ref="instance('formState')/fst:numberOfSteps" value="count(instance('resources')/steps/step)" />
<!-- Start with the first block -->
<xf:toggle case="step_1" />
<!-- Complete the allSteps section in formState instance -->
<xf:action while="instance('formState')/fst:allSteps/fst:step[@nr='']">
<xf:insert context="instance('formState')/fst:allSteps" nodeset="node()" origin="instance('formState')/fst:allSteps/fst:step[last()]" if="count(instance('formState')/fst:allSteps/fst:step) < instance('formState')/fst:numberOfSteps" />
<xf:setvalue ref="instance('formState')/fst:allSteps/fst:step[@nr='']/@nr" value="count(./preceding::fst:step)+1" />
<xf:setvalue ref="instance('formState')/fst:allSteps/fst:step[.='']" value="instance('resources')/steps/step[position()=current()/@nr]/label" />
</xf:action>
<!-- Decorate with default attributes and assign values;
we will use these attributes for the summary page -->
<xf:action while="//*[not(*) and not(@label)]">
<!-- Create the attributes for the last node that meets the condition -->
<xf:insert context="//*[not(*) and not(@label)]" origin="instance('resources')/template/@*" />
<!-- Assign values -->
<xf:setvalue ref="//*[not(*) and @label='-'][last()]/@label" value="instance('resources')/steps/step/field[@name=local-name(current()/..)]/label" />
<xf:setvalue ref="//*[not(*) and @hint='-'][last()]/@hint" value="instance('resources')/steps/step/field[@name=local-name(current()/..)]/hint" />
<xf:setvalue ref="//*[not(*) and @alert='-'][last()]/@alert" value="instance('resources')/steps/step/field[@name=local-name(current()/..)]/alert" />
<xf:setvalue ref="//*[not(*) and @help='-'][last()]/@help" value="instance('resources')/steps/step/field[@name=local-name(current()/..)]/help" />
<xf:setvalue ref="//*[not(*) and @summary='-'][last()]/@summary" value="instance('resources')/steps/step/field[@name=name(current()/..)]/summary" />
<xf:setvalue ref="//*[not(*) and @step='-'][last()]/@step" value="count(instance('resources')/steps/step[field/@name=local-name(current()/..)]/preceding-sibling::step)+1" />
</xf:action>
</xf:action>
<xf:submission id="send"
method="post" action="http://xforms.smartsite.nl/xformsecho"
ref="." serialization="multipart/form-data" validate="true" replace="none">
<xf:message ev:event="xforms-submit-error" if="event('error-type')='validation-error'">Validation failed.</xf:message>
</xf:submission>
</xf:model>
</head>
<body>
<xf:group class="container">
<xf:label class="formTitle" bind="steptitle"></xf:label>
<xf:switch>
<xf:case id="step_1">
<xf:setvalue ref="instance('formState')/fst:currentStep" value="1" ev:event="xforms-select" />
<xf:label>First step</xf:label>
<xf:input ref="name">
<xf:label ref="@label" />
<xf:hint ref="@hint" />
<xf:alert ref="@alert" />
<xf:help ref="@help"/>
</xf:input>
<xf:input ref="email">
<xf:label ref="@label" />
<xf:hint ref="@hint" />
<xf:alert ref="@alert" />
<xf:help ref="@help"/>
</xf:input>
</xf:case>
<xf:case id="step_2">
<xf:setvalue ref="instance('formState')/fst:currentStep" value="2" ev:event="xforms-select" />
<xf:label>Second step</xf:label>
<xf:input ref="street">
<xf:label ref="@label" />
<xf:hint ref="@hint" />
<xf:alert ref="@alert" />
<xf:help ref="@help"/>
</xf:input>
<xf:input ref="number">
<xf:label ref="@label" />
<xf:hint ref="@hint" />
<xf:alert ref="@alert" />
<xf:help ref="@help"/>
</xf:input>
</xf:case>
<xf:case id="step_3">
<xf:setvalue ref="instance('formState')/fst:currentStep" value="3" ev:event="xforms-select" />
<xf:label>Third step</xf:label>
<xf:input ref="postalcode">
<xf:label ref="@label" />
<xf:hint ref="@hint" />
<xf:alert ref="@alert" />
<xf:help ref="@help"/>
</xf:input>
<xf:input ref="city">
<xf:label ref="@label" />
<xf:hint ref="@hint" />
<xf:alert ref="@alert" />
<xf:help ref="@help"/>
</xf:input>
</xf:case>
</xf:switch>
<!-- Previous / next buttons section -->
<xf:group class="previous_next_buttons">
<xf:trigger bind="previousButton" class="trg_left">
<xf:label ref="instance('resources')/navigation/previousbutton" />
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('formState')/fst:previousButton" value="(instance('formState')/fst:currentStep)-1" />
<xf:setvalue ref="instance('formState')/fst:previousButton" value=".-1" while="not(exf:relevant(instance('resources')/texts/step[position()=current()])) and . >1" />
<xf:toggle>
<xf:case value="concat('step_',instance('formState')/fst:previousButton)" />
</xf:toggle>
</xf:action>
</xf:trigger>
<xf:trigger bind="nextButton" class="trg_right next_btn">
<xf:label ref="instance('resources')/navigation/nextbutton" />
<xf:action ev:event="DOMActivate">
<xf:setvalue ref="instance('formState')/fst:nextButton" value="(instance('formState')/fst:currentStep)+1" />
<xf:setvalue ref="instance('formState')/fst:nextButton" value=".+1" while="not(exf:relevant(instance('resources')/texts/step[position()=current()])) and . <instance('formState')/fst:numberOfSteps" />
<xf:revalidate />
<xf:toggle if="exf:valid(instance()//*[@step=instance('formState')/fst:currentStep], false(),true())">
<xf:case value="concat('step_',instance('formState')/fst:nextButton)" />
</xf:toggle>
</xf:action>
</xf:trigger>
</xf:group>
</xf:group>
<!-- Group navigation -->
<xf:group class="steps_overview">
<xf:label ref="instance('resources')/navigation/steplist"></xf:label>
<xf:repeat nodeset="instance('formState')/fst:allSteps/fst:step">
<xf:trigger ref="." class="stepList-step trg_right" appearance="minimal" >
<xf:label>
<xf:output value="if(instance('formState')/fst:currentStep=@nr, concat('<span class=active>',@nr,' ', .,'</span>'), concat('<span>',@nr,'</span> ', .))" />
</xf:label>
<xf:action ev:event="DOMActivate">
<xf:toggle>
<xf:case value="concat('step_',@nr)" />
</xf:toggle>
</xf:action>
</xf:trigger>
</xf:repeat>
<xf:group class="action_buttons">
<xf:submit submission="tussentijdsOpslaan" class="trg_down tussentijdsOpslaan">
<xf:label ref="instance('resources')/navigation/save"></xf:label>
<xf:message ev:observer="tussentijdsOpslaan" ev:event="xforms-submit-done" level="ephemeral" ref="instance('resources')/navigation/saved"></xf:message>
</xf:submit>
<xf:submit submission="vorigeDataLaden" class="trg_left vorigeDataLaden">
<xf:label ref="instance('resources')/navigation/load"></xf:label>
</xf:submit>
</xf:group>
</xf:group>
<noscript>
<xf:trigger>
<xf:label>Update screen</xf:label>
<xf:hint>Scripting is off. Update the screen by clicking this button.</xf:hint>
</xf:trigger>
</noscript>
<!--
<xf:submit class="block-ui sync">
<xf:label>Submit</xf:label>
<xf:message ev:observer="send" ev:event="xforms-submit-done"
level="ephemeral">Submit ready...</xf:message>
</xf:submit>
-->
</body>
</html>