widget:wizard

Purpose

Defines a Forms Wizard widget containing XForms elements.

Contained by

Contains

Attribute groups

Attribute

Attribute Description Type Default Options Use
cancel-dialog Provides a reference to the Popup widget that shows the warning message when user wants to cancel the wizard xs:string     optional 

Action

Action Description
launch Causes the wizard to start

Event

Event Description
completed The event sent when the wizard is completed and the form content is returned to the server

Example

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/2002/06/xhtml2"
  xmlns:xforms="http://www.w3.org/2002/xforms"
  xmlns:si="http://www.volantis.com/xmlns/2006/01/xdime2/si"
  xmlns:widget="http://www.volantis.com/xmlns/2006/05/widget">
  <head>
    <title>widget:wizard</title>
    <xforms:model>
      <xforms:instance>
        <si:instance>
          <si:item name="login"/>
          <si:item name="password"/>
          <si:item name="repeat"/>
        </si:instance>
      </xforms:instance>
      <xforms:submission id="submit" action="."/>
    </xforms:model>
  </head>
  <body>
    <div>
      <widget:wizard class="widget" id="myWizard" cancel-dialog="myPopup">
        <xforms:group>
          <div>Please enter your login:</div>
          <p>
            <xforms:input ref="login">
              <xforms:label>Login</xforms:label>
            </xforms:input>
          </p>
        </xforms:group>
        <xforms:group>
          <div>Please enter your password:</div>
          <p>
            <xforms:input ref="password">
              <xforms:label>Password</xforms:label>
            </xforms:input>
            <xforms:input ref="repeat">
              <xforms:label>Repeat</xforms:label>
            </xforms:input>
          </p>
          <xforms:submit submission="myForm" id="submit-button">
            <xforms:label>Finish</xforms:label>
          </xforms:submit>
        </xforms:group>
      </widget:wizard>
    </div>
    <div>
      <widget:button id="start-button" action="myWizard#launch"> Start the wizard </widget:button>
    </div>
    <div>
      <widget:popup id="myPopup">
        <div> Do you really want to cancel?</div>
        <div>
          <widget:dismiss type="yes">yes</widget:dismiss>
          <widget:dismiss type="no">no</widget:dismiss>
        </div>
      </widget:popup>
    </div>
  </body>
</html>

Related topics