Wizard

Helps to create wizards that can be used by application developers in their applications.

Syntax

HTML	<div cordysType="wcp.library.util.Wizard" id=sID wizardData=xwizard.xmlDocument ><Wizard>

where,sIDis the ID of the wizard component.

To dynamically add and initialize this component, you can use theinitializeHTMLElementsoraddTypemethods of the Application object.

To customize the wizard, the following properties, methods and events of the component are used:

Table 1. List of Attributes

Attribute	Property	Description
backButton	backButton	String that sets or retrieves the identifier of the Back Button defined on the wizard page. By default, this isbtnBack.
cancelButton	cancelButton	String that sets or retrieves the identifier of the Cancel button defined on the wizard page. By default, this isbtnCancel.
caption	caption	String that denotes the caption of the application. This is same as thecaptionproperty of the application Definition.The title of the wizard would be a combination of caption and description ("caption-description"). The value for caption is picked up from this property and description is dynamically generated by the wizard. If caption is set as caption="New SOAP Node", then the first step in the wizard will be "New SOAP Node - Step 1 of 5". If caption is not specified then only description will be shown.
docked	docked	Boolean that sets or retrieves whether the wizard pages are docked or not. By default, this is true.Process Platform Ajax Toolkit allows the feature of docking the application by which the application can appear on a window. If docking is specified as false, then it will open the application in one of the 8 frames available in the application framework.
finishButton	finishButton	String that sets or retrieves the identifier of the Finish button defined on the wizard page. By default, this isbtnFinish.
frame	frame	String that sets the dock where the wizard pages should run. Process Platform Ajax Toolkit has 8 frames inside the application framework. The value for this property can be one of those 8 frames. If it is other than one of them, then the wizard opens in a new window using the application Framework. If theframeproperty is not specified in the definition (frame="") then the wizard will be opened up in a new window using window.open(). By default, this isframe="".
headingContainer	headingContainer	String that denotes the identifier of the object in the template inside which the heading for the wizard is shown.
height, width, top, left	height, width, top, left	String properties that denotes the Height, Width, Top and Left positions of the wizard page. By default, the values of these properties are (480,720,100,120) pixels respectively.
iframeContainer	iframeContainer	String that denotes the identifier of the object in the template inside which the frames for each of the steps of the wizard are created.
imageContainer	imageContainer	String that denotes the identifier of the object in the template where the image is loaded in the wizard page.
nextButton	nextButton	String that sets or retrieves the identifier of the Next Button defined on the wizard page. By default, this isbtnNext.
resizable	resizable	String that specifies whether to allow resizing of the browser window. This property is applicable only when the iframe property is set to "".
		yes. Default. Window is resizable.
		no. Window is not resizable.
status	status	String that specifies whether to add a status bar at the bottom of the browser window. This property is applicable only when the iframe property is set to "".
		yes. Status bar is displayed.
		no. Default. Status bar is not displayed.
template	template	String that denotes the name of the template file that should be used for the wizard. A user can choose to define his own layouts for the wizard pages. It should have a FRAMESET, an HTML element and an IMAGE element. By default, this is " /cordys/wcp/library/util/wizardtemplate.htm ".
Heading	N/A	Sets the heading property, which is a string that sets or retrieves dynamically the heading of the wizard pages.
wizardData	N/A	Sets the wizardData property, which is an object that denotes a pointer to an XML Document that contains information about each wizard page.

Table 2. List of Methods

Method	Description
cancel	Cancels or closes the wizard. The same functionality can be achieved by clicking on the Cancel button in the wizard steps.
finish	Closes the wizard. The same functionality can be achieved by clicking on the Finish button in the last step of the wizard.
getCurrentFrame	Retrieves the value of the currentFrame property, which is an object that denotes the current window that is in view of the wizard. For example, if the wizard is in Step 2, then getCurrentFrame method returns the window object of step2.
getWizardCounter	Retrieves the value of the wizardCounter property, which is an integer that denotes the number of the step of the wizard pages in which the wizard is currently in.
getWizardWindow	Retrieves the value of the wizardWindow property, which is an object that denotes the newly opened window of the wizard page.
goNext	Loads the next step in the wizard. The same functionality can be achieved by clicking on the Next button in the wizard.
goBack	Loads the previous step in the wizard. The same functionality can be achieved by clicking on the Previous button in the wizard.
resetButtons	Resets all the buttons in the wizard. This can be used by the developer in case of a change in the wizardData at runtime.
getHeading	Gets the value of the heading property.
setHeading	Sets the heading property, which is a string that sets or retrieves dynamically the heading of the wizard pages.
getWizardData	Gets the value of the wizardData property.
setWizardData	Sets the wizardData property, which is an object that denotes a pointer to an XML document that contains information about each wizard page.
start	Initializes the wizard. This method also pops up the wizard window showing the first step of the wizard if the wizard is not already running. If the wizard is running, the focus is set to the already running wizard.

Table 3. List of Events

Event	Description
onclose	Fires when the wizard is closed. This can be because the wizard finished, got cancelled or the user closed in between by pressing the "X" button. This won't be fired if the wizard got closed because of the application which contains it got closed by itself.

The application developer can write functions in each of the pages in the wizard for handling changes in the wizard. The function names and their description are as follows:

Table 4. List of Functions

Function	Description
onNext	Called when the user clicks on the Next button in the wizard. The next step of the wizard is not loaded if this function returns 'false'.
onBack	Called when the user clicks on the Back button in the wizard. The previous step of the wizard is not loaded if this function returns 'false'.
onFinish	Called when the user clicks on the Finish button in the wizard. The wizard is not closed if this function returns 'false'.
onCancel	Called when the user clicks on the Cancel button in the wizard. The wizard is not closed if this function returns 'false'.
onEnterForward	Called if the user comes to a page that is already loaded before by clicking the Next button.
onEnterBackward	Called if the user comes to a page that is already loaded before by clicking the Back button.

Example

The following example demonstrates the usage of the library:

<!DOCTYPE HTML PUBLIC"-//W3C//DTD HTML 4.01 Transitional//EN""http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
    <script type="text/javascript" src="/cordys/wcp/application.js" ></script>
</head>
<script type="cordys/xml" id="tutorialPageDetails" >
    <wizard>
        <step>
            <url>/cordys/wcp/demo/firstpage.htm</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 1</caption>
        </step>
        <step>
            <url>/cordys/wcp/demo/secondpage.htm</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 2 </caption>
        </step>
        <step>
            <url>/cordys/wcp/demo/thirdpage.htm</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 3</caption>
        </step>
        <step>
            <url>/cordys/wcp/demo/fourthpage.htm</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 4</caption>
        </step>
        <step>
            <url>/cordys/wcp/demo/fifthpage.htm</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 5</caption>
        </step>
    </wizard>
</script>
<body>
<div cordysType="wcp.library.util.Wizard" id="wizard" wizardData="tutorialPageDetails.XMLDocument"  automatic="false" async="false" style="display:none docked="false" frame="main"></div>
<button class="medium" onclick="wizard.start()" >Click to start wizard</button>
</body>
</html>

Note: In order to fire an OnSelect event for the wizard pages, the URL must be provided with the dummy XML data. For Example,

<xml id="tutorialPageDetails">
    <wizard>
        <step>
            <url>/wizard01.caf?data="<data/>"</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 1</caption>
        </step>
        <step>
            <url>/wizard02.caf?data="<data/>"</url>
            <image>/cordys/wcp/demo/wizardSteps1.jpg</image>
            <caption>Page 2 </caption>
        </step>
    </wizard>
</xml>

pp108 : Wizard

Wizard

Syntax

Example