The Dojo Toolkit Wizard vs. Microsoft`s Web Wizard - Source code for this page
(Page 4 of 4 )
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.
<!--
<!DOCTYPE html
PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
-->
<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>
<script type="text/javascript">
var djConfig = {
isDebug: true,
debugAtAllCosts: true
};
</script>
<script type="text/javascript" src="http://localhost/DoAjax/dojo.js"></script>
<script type="text/javascript">
dojo.require("dojo.widget.Wizard");
dojo.hostenv.writeIncludes();
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 type="text/css">
body {
font-family : sans-serif;
}
</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>
<div dojoType="WizardPane" passFunction="checkPass3">
<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. |
/ 5 
