JAVASCRIPT

The Dojo Toolkit Wizard vs. Microsoft`s Web Wizard

Wizards are very useful for Internet applications. Users are often very comfortable with them. This article compares the look and feel of two wizards, and shows the code behind one of them (the code behind the other one was discussed in a previous article).

Author Info:

By: Jayaram Krishnaswamy

Poor Best

Rating:

/ 8

March 21, 2007

TABLE OF CONTENTS:

The Dojo Toolkit download is unzipped to a virtual directory on the IIS5.1 on a machine operating with Windows XP Professional Media Center Edition. The Dojo Toolkit version 0.4 was used. The code shown here is modified from an example in the dojo documentation. Some modification was made to keep the size of the wizard's content within some limits, as the original example did not allow design modification of the wizard's content pane easily. The source code for New Wizard.htm follows.

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head><STYLE TYPE="TEXT/CSS">
   A:hover {text-decoration: underline; color: red}
   A:visited {text-decoration: underline; color: blue}
   A:link {text-decoration: underline; color: black}
   body {font-family: arial}
   .til {color:white; background-color:blue;}

</STYLE>

<title>Wizard Demo</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"></meta>

   function cancel() {
     alert("Wizard Cancelled!");
   }

   function checkPass1() {
     alert("Thanks for entering your name");
   }

   function checkPass2() {
     alert("Your last visit is recorded");
   }

   function checkPass3() {
     alert("You are mostly done");
     window.fullname.value=window.fn.value+" "+window.ln.value;
     window.ldate.value= dojo.widget.byId("lastDate").getDate();
   }

   function done() {
     alert("Good Bye! Please come again"); window.close();
   }
</script>

</style>

</head>
<body>

   <TABLE WIDTH=50% BORDER=1 CELLPADDING=0 CELLSPACING=0>
<tr><td align=center class="til">
   Welcome to the Dojo Wizard </td></tr>
   <TR>
   <TD ALIGN=LEFT>
   <div id="wizard1" dojoType="WizardContainer"

     nextButtonLabel="next >>"
     previousButtonLabel="<< previous"
     cancelFunction="cancel"
     >

   <div dojoType="WizardPane" passFunction="checkPass1" >
     <span style="color:Blue; font-size:15; left:200">
       <center>Please enter your name</center>
       <p></p>
       First Name:
       <input id="fn" name="fn" type="text" value="">
       <p></p>
       Last Name:
       <input id="ln" name="ln" type="text" value="">
     </span>
   </div>

   <div dojoType="WizardPane" passFunction="checkPass2">
     Last Visited Date: <div id="lastDate"
    dojoType="dropdowndatepicker">

</div>

<span style="Color:Blue; font-Size:15; left=200;">
You are almost done!</span>

   </div>
   <div dojoType="WizardPane" doneFunction="done" canGoBack="false">
     <span style="color:Blue; font-size:15; left:200">
       <center>We cordially Welcome you back</center>
       <p></p></span>
     <span id="fln" style="color:red; font-size:15; left:200">
       <input name="fullname" type="text" value="">
       <p></p></span>
     <span id="ld" style="color:green; font-size:15; left:200">
       <center>Your Last Visit was on:
       <input type="text" value="" name="ldate"/></center>
       <p></p></span>

     <A href="javascript: self.close ()">Close this Window</A>
   </div>
   </div>
   </TD>
   </TR>
</TABLE>

</body>
</html>

The various steps are color coded. Basically you have a "Wizard Container" shown in bold which contains the four "Wizard Panes" shown in different colors. The "Wizard Pane" is also a container. The first pane collects the name. The second pane collects the date and stores it internally; it is displayed using the pane's Id property accessed using the dojo toolkit method for accessing the elements by their Id property as in,

dojo.widget.byId("lastDate").getDate();

The alert messages are all invoked by the functions doneFunction(), passFunction() and so on defined in the wizard.js file, which gets referenced with the dojo.require() method invoked earlier in the code.

Summary

Dojo toolkit has done a very good job on this widget. It looks smashing!. This code only worked in IE 7.0. The "Wizard Container" spilled its contents in FireFox 2.0 and Opera 9.0.

With Opera 9.0, it was even spookier. The wizard started to work when the previous buttons were clicked. These weird effects may be due to mixing of the non-dojoesque JavaScript and confining dojo objects inside a table. I am the only one to be blamed for these transgressions, which include the use of the infamous <center/> tags. The dojo syntax is slightly different from the JavaScript syntax not only in accessing elements but also in function calls. You will find it rewarding to work with this toolkit and its large group of developers.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.