Your SlideShare is downloading. ×
  • Like
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply


  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
    Be the first to like this
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. 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 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
  • 2. 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
  • 3. 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 The author chose the file.
  • 4. 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.
  • 5. 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.
  • 6. 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.
  • 7. 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.
  • 8. 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.
  • 9. Tetreault 9
  • 10. 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.