<p>A SimpleWizard offers kit developers an alternative method for defining a wizard.</p>
<p>Use the SimpleWizard.css to get a consistent Visual Composer look-and-feel in your wizard. Make sure to use the names WIZARD-AREA, WIZARD-PAGE and BANNER-AREA.</p>
<p>The pages of the SimpleWizard should be organized inside the htc of the SimpleWizard, as in the following example:</p>
<pre>
<SimpleWizard id="SimpleWizardExample" glyph="WIZARD-AREA">
<DIV id="firstWizardPage" class="WIZARD-PAGE">
Place First Page Content Here
</DIV>
....
<DIV id="lastWizardPage" class="WIZARD-PAGE">
Place Last Page Content Here
</DIV>
</SimpleWizard>
</pre>
<p>
Define your wizard's trails with the following format:
<pre>
var trailDataObject = [{id:'SimpleWizardPage1', name:'First Page Name'}, {id:'SimpleWizardPage2', name:'Second Page Name'},
{id:'SimpleWizardPage3', name:'Third Page Name'}];
</pre>
</p>
<p>
Start (or change) the wizard's trail by using the start method:
<pre>
SimpleWizardExample.start(trailDataObject, 'Arbitrary trail name', 0);
</pre>
</p>
<p>
Use the attachControl method to link your UI to the SimpleWizard:
</p>
<pre>
SimpleWizardExample.attachControl('trail', YourBannerArea);
SimpleWizardExample.attachControl('next', YourNextButton);
SimpleWizardExample.attachControl('back', YourBackButton);
SimpleWizardExample.attachControl('finish', YourFinishButton);
</pre>
<p>
</p>
<p>As the end user progresses through the SimpleWizard, the following functions will be called:</p>
<ul><li><b>YourPageName_init:</b> When the SimpleWizard loads </li></ul>
<ul><li><b>YourPageName_enter:</b> When entering the page from the preceeding page (using next) </li></ul>
<ul><li><b>YourPageName_enterBack:</b> When entering the page from the following page (using back) </li></ul>
<ul><li><b>YourPageName_exit:</b> When leaving the page to the following page (using next) </li></ul>
<ul><li><b>YourPageName_exitBack:</b> When leaving the page to the proceeding page (using back) </li></ul>(c) SAP AG 2006. All rights reserved.
Gets or sets the bounding box of the control.
Gets the collection of attached controls.
Gets or sets whether the box and its contents can respond to user interaction.
Gets or sets the control styling glyph.Sample glyph:
<pre>
.WIZARD-AREA { position:absolute; x:165; y:top; w:W-165; h:H-36; background:#F7F3EF; border:none; padding:10; overflow:hidden; }
.WIZARD-PAGE { position:absolute; x:0; y:0; w:full; h:full; layout:box; background:none; border:none; padding:0; overflow:hidden; visibility:hidden; }
</pre>
Gets the current page object.
Gets the current page data object.
Gets the current trail data object.
Gets the current trail name.
Gets the current trail position.
Gets the current trail size.
Gets or sets whether the box is visible.
Attaches a control element to the wizard element.Control type (TRAIL|NEXT|BACK|FINISH).Control object.
Returns to the previous page within the current trail.
Finishes the wizard by advancing beyond the last page in the current trail.
Hides the wizard box.
Lays out the wizard and all its contained boxes. Typically you will not need to call this method directly.
Advances to the next page in the current trail.
Shows the wizard box.
Starts a new wizard trail.Trail data object.Trail name.Starting position within the new trail.
Fires whenever a wizard trail is finished.The name of the trail that was finished.
Fires whenever the wizard is moved/resized.
Fires whenever a wizard trail is started.The name of the trail that was started.