Tetreault 1

Stephen Tetreault

Professor Cusick

Internet and Web Architecture

21 July 2008

The Dojo Toolkit:

Quick deployment of JavaScript and Ajax-based applications.

The Dojo toolkit is open source and was first started by Alex Russell, Dylan Schiemann,

David Schontzler and others in 2004. Leonard Lin suggested the name Dojo and it doesn’t really

mean anything. The toolkit is JavaScript libraries that feature widgets or prepackaged JavaScript

code. The widgets include menus, dynamic charts, animated effects like fade-in and fade-out, a

calendar based date selector, clock and more. Another important feature of the toolkit is to

provide Ajax applications with asynchronous communications between browser and server.

Since Dojo is open source it has a strong user and developer community where the JavaScript

libraries keep expanding daily. A nightly build of new and modified scripts is available at

dojotoolkit.org. By utilizing the Dojo toolkit you can build or reuse interactive widgets, provide

animation and construct Ajax requests with ease making your web application more robust.

Since the toolkit is mostly JavaScript, a little background on that subject would be

helpful. JavaScript originated at Netscape under the name of Mocha. The name was changed to

JavaScript under a marketing deal with Sun and bundled in Netscape browser version 2 in late

1995. Microsoft followed suit with its version of the language called Jscript and supported it in

Internet Explorer version 3 in 1996. JavaScript supports the programming syntax of C which

makes it very powerful. JavaScript is an interpreted language which means that each time the

Tetreault 2

web page is loaded the source code is converted into an executable for that particular page

display. In the book New Perspectives on HTML and XHTML Patrick Cary writes,

“There is no need for a compiler to create the executable file; the browser must

simply be able to interpret and run the JavaScript code. Unlike Java, JavaScript

code can be inserted directly into an HTML or XHTML file or placed in a

separate text file that is linked to the web page. This means that you or other users

can easily read any JavaScript code that you write. JavaScript is not as powerful a

computing language as Java, but it is simpler to use and it meets the needs of most

users who want to create programmable web pages. (523).

There is a library of available Dojo objects or elements that have their own unique properties,

methods and event handlers just like JavaScript. Now having said that, Charles Wyke-Smith

writes, “there are only four browsers you need to really care about: Firefox, Safari, IE7 and IE6”.

(xiv). There are subtle differences in how these objects function so it is advisable to test the code

in several different browsers. The author makes use of Internet Explorer 7, Internet Explorer 6,

Firefox, Safari and Opera when testing code from Dreamweaver. As was mentioned by Carey,

the JavaScript code can be imbedded in the HTML code or in an external file and called when

the page is loaded. This is also true with Dojo. This concept is similar to external stylesheets

which means only one file has to be maintained for the page just like Cascading Style Sheets that

are maintained separately from the web page. JavaScript also provides for program loops with

the for and while commands and supports conditional statements like the if and switch

commands.

The Ajax architecture relies heavily on JavaScript making the Dojo toolkit a perfect fit

for Ajax based applications. An important aspect of Ajax applications is asynchronous

Tetreault 3

communication between browser and server. This important feature makes use of the JavaScript

command XMLHttpRequest. Dojo provides two routines dojo.xhrGet and xhrPost that makes

use of this JavaScript command for various web browser implementations. We will review these

later.

The installation of the Dojo toolkit is not complicated and the standard release archive is

available as a tar.gz or zip file so development can be done on a Linux/Unix or Windows

platform. Once proficient with the toolkit, source files are available so that you can build your

own custom Dojo. It’s a good idea to unpack the contents of the archive on the web server

particularly for Ajax development. To download the newest version of the Dojo Toolkit go to

http://download.dojotoolkit.org/current-stable/

The author chose the dojo-release-1.1.1.zip file.

Tetreault 4

It is important to note where the dojo.js file is located as the package handles all dependencies

once it’s been loaded onto the page. Your directory structure should be similar to this listing.

To save key strokes, the author changed the directory name dojo-release-1.1.1 to src.

To test the download and installation of the Dojo Toolkit, point your browser to the following

file, File:///c:/js/src/dojo/tests/runTest.html and you should see a similar looking page.

Tetreault 5

Now that the Dojo Toolkit has been installed, let’s create a simple markup and add a little

magic. This is done with Dijits which is short for Dojo Widgets. A Dojo Widget can perform

many different kinds of tasks. They can do form control, graphic displays, send and receive data

from a server, drag and drop effects and much more. First, lets review the required snippet of

code for the head section.

The djConfig controls the flags. During development, the programmer would want these set to

true for debugging purposes, but, beware; Firefox has some issues with Firebug. It doesn’t work

with version 3 of Firefox. If your stuck with Firefox as your development browser, you may

want to retrieve version 2 or use Internet Explorer. The script dojo.js is responsible for loading

the base Dojo system. The dojo.require loads only the necessary modules from the library. The

function is used to load the individual dijit types. The next snippet of code is what is needed for

the body section. We see that Dojo has introduced a new attribute dojoType which is added to

the tag that we wish to dijitize.

Tetreault 6

Here’s a screen shot of the fisheye list and you can also follow this link to the author’s web site

for a real demo. Once the page has been downloaded, you can view source to see the complete

markup and the CSS.

http://www.brookshill.info/js/dojofisheye.htm

Tetreault 7

Ajax’s popularity is with its ability to perform asynchronous communication with a

server. The term asynchronous means that data can be requested from the server and loaded

down to the client without interfering with the user’s display. The user could be entering

additional information on a form while the server handles a request at the same time. An

example of this asynchronous communication in Dojo is done through the use of the xhrGet and

xhrPost functions. These functions are what allows the scripting language to perform HTTP

client functionality such as submitting form data or loading data from a server. The functions can

also be used to make requests over HTTP and HTTPS. The dojo.xhrGet function wraps the

object XMLHttpRequest and hides the added code necessary for its use. Lets create a simple

program that will display date and time and when we click the button, the program will go to the

server for a test file and display this file on the page without doing any kind of refresh. We will

prove that by the date and time stamp not changing.

Tetreault 8

The first few script lines are very similar to our other program. We’ve introduced another

function the dijit.form.Button. Notice it is called from the dojo.require and is listed as an

attribute on the button tag. The dojo.xhrGet and dojo.xhrPost are not widgets or dijits. They are

simply wrappers for the XMLHttpRequest object. Dojo.byId is an abbreviated version of the

standard document.getElementById function. The url parameter is the response generated from

the server and often times from a database. Load is the function called after the url has been

retrieved. You will note that the button has an onClick event which calls the function getText

which in turn calls the function dojo.xhrGet.

Here’s a screen shot of the Ajaxget markup and you can also follow this link to the

authors web site for the demo.

Tetreault 9

http://www.brookshill.info/js/ajaxget.htm

Tetreault 10

Works Cited

Carey, Patrick. New Perspectives on HTML and XHTML. Boston: Course Technology, 2005.

Wyke-Smit, Charles. Stylin’ with CSS, New Riders, 2008.