Class RapidContext.Widget.Wizard

Extends: RapidContext.Widget

The wizard widget class. Used to provide a sequence of pages, where the user can step forward and backward with buttons. Internally it uses a <div> HTML element containing Pane widgets that are hidden and shown according to the page transitions.

Source code: RapidContext_Widget_Wizard.js

Class Summary
 
Creates a new wizard widget.
Method Summary
 
activatePage(indexOrPage)
Activates a new page and sends the onchange signal.
 
Returns the active page.
 
Returns the active page index.
 
addChildNode(child)
Adds a single child page widget to this widget.
 
Cancels the active page operation.
 
done()
Sends the wizard onclose signal.
 
Returns an array with all child pane widgets.
 
next()
Moves the wizard forward to the next page and sends the onchange signal.
 
Moves the wizard backward to the previous page and sends the onchange signal.
Methods borrowed from class RapidContext.Widget:
addAll, addClass, animate, blurAll, destroy, disable, enable, hasClass, hide, isDisabled, isHidden, removeAll, removeChildNode, removeClass, setAttrs, setStyle, show, toggleClass, uid
Event Summary
 
Emitted when the user selects to cancel the page flow.
 
Emitted when a page transition is performed.
 
Emitted when the user has completed the page flow.
Class Detail
RapidContext.Widget.Wizard(attrs)
Creates a new wizard widget.
JavaScript:
var page1 = RapidContext.Widget.Pane({ pageTitle: "The first step" });
...
var page2 = RapidContext.Widget.Pane({ pageTitle: "The second step" });
...
var attrs = { style: { width: "100%", height: "100%" } };
var exampleWizard = RapidContext.Widget.Wizard(attrs, page1, page2);
var exampleDialog = RapidContext.Widget.Dialog({ title: "Example Dialog" }, exampleWizard);
RapidContext.Util.registerSizeConstraints(exampleDialog, "80%", "50%");
User Interface XML:
<Dialog id="exampleDialog" title="Example Dialog" w="80%" h="50%">
  <Wizard id="exampleWizard" style="width: 100%; height: 100%;">
    <Pane pageTitle="The first step">
      ...
    </Pane>
    <Pane pageTitle="The second step">
      ...
    </Pane>
  </Wizard>
</Dialog>
Parameters:
{Object} attrs
the widget and node attributes
{Boolean} attrs.hidden Optional
the hidden widget flag, defaults to false
{Widget} ... Optional
the child widgets or DOM nodes (should be Pane widgets)
Returns:
{Widget} the widget DOM node
Method Detail
{Array} getChildNodes()
Returns an array with all child pane widgets. Note that the array is a real JavaScript array, not a dynamic NodeList.
Returns:
{Array} the array of child wizard page widgets

addChildNode(child)
Adds a single child page widget to this widget. The child widget should be a RapidContext.Widget.Pane widget, or a new one will be created where it will be added.
Parameters:
{Widget} child
the page widget to add

{Widget} activePage()
Returns the active page.
Returns:
{Widget} the active page, or null if no pages have been added

activePageIndex()
Returns the active page index.
Returns:
the active page index, or -1 if no page is active

activatePage(indexOrPage)
Activates a new page and sends the onchange signal. If the page is moved forward, the old page must pass a form validation check, or nothing will happen.
Parameters:
{Number/Widget} indexOrPage
the page index or page DOM node

cancel()
Cancels the active page operation. This method will also reset the page status of the currently active page to ANY. This method is triggered when the user presses the Cancel button.

Moves the wizard backward to the previous page and sends the onchange signal. This method is triggered when the user presses the Previous button.

Moves the wizard forward to the next page and sends the onchange signal. The page will not be changed if the active page fails a validation check. This method is triggered when the user presses the Next button.

done()
Sends the wizard onclose signal. This method is triggered when the user presses the Finish button.
Event Detail
onchange()
Emitted when a page transition is performed. This event signal contains the page index and widget as payload.

oncancel()
Emitted when the user selects to cancel the page flow. This event signal carries no event information.

onclose()
Emitted when the user has completed the page flow. This event signal carries no event information.