Enhance Web application design with Dojo

There is only so much time in the day, so anything that helps build useful Web applications is a welcome additional to any developer's toolbox. Some of the more popular free online toolkits I've covered previously are: jQuery, scriptaculous, and the Yahoo! User Interface (YUI) Library. This week's focus is on Dojo.

Getting Dojo

The Dojo Toolkit is available for download from the Dojo site. You download it in one compressed file, which includes extensive demos, example code, the core JavaScript library, and much more. For my development machine, I extracted the files and installed them on my development instance of IIS. This makes it easy to run the demos and utilize the core libraries in my own applications.

The directory structure of the download places the core JavaScript library file (dojo.js) in the root, so it is easily accessible to your own code via include statements. The current release is 0.9.

The Dojo Toolkit is available as open source software. It provides two licensing schemes: Academic Free License v2.1 and the BSD License. Dojo is an open community, which invites developers, designers, and documentation writers to contribute. If you decide to contribute to the project, you must sign the Contributors License Agreement.

The pieces

Dojo provides various features that target different developers. For starters, it provides widgets for server-side developers. HTML/CSS developers can build template-driven widgets. It also provides a powerful JavaScript library to build robust Web applications.

The foundation of Dojo is one tiny library called the base in the documentation. It contains AJAX, event handling, effects, CSS queries, language utilities, and much more. This base library is included in the core Dojo file (Dojo.js). In addition, the core includes drag-and-drop, extended forms of AJAX and I/O, JSON-RPC, internationalization, and back-button handling. The vast amount of available libraries and options can be overwhelming.

The previously mentioned widgets are provided via the widget system called Dijit, which is layered on top of Dojo. Dijit allows you to build powerful Web interfaces with little or no JavaScript. Dojo features built-in internationalization and localization support, full accessibility hinting in all Dijit widgets, infrastructure to support coherent keyboard event handling, and the ability to theme all Dijit components using only CSS.

Dojo utilizes a module-based architecture similar to Java packages. This negates problems encountered with other toolkits where you need to know what libraries to load and in which order they should be loaded. A simple example demonstrates using the Calendar widget. The following Web page allows the user to select two date values using the Calendar drop-down widget.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">


<title>Dojo Example - Calendar</title>

<script type="text/javascript" src="dojo-0.4.3-ajax/dojo.js" mce_src="dojo-0.4.3-ajax/dojo.js"></script>

<script type="text/javascript">





<form id="frmDojoTest" action="" onsubmit="return false;">

<h4>Please enter a data range:</h4>

<div dojoType="dropdowndatepicker">

</div> to <div dojoType="dropdowndatepicker"></div>


This basic example demonstrates the basic approach to utilizing Dojo features. Here are notes about the example:

  • The core Dojo library is loaded via the first script statement in the page. The path to this file may differ depending upon your configuration.
  • The dojo.require statement loads the Dijit feature that will be used on the page. The core functionality is available via loading of the dogo.js file, and all of Dojo's capabilities are reachable using dojo.require.
  • Dojo functionality is utilized via attributes assigned to HTML elements. In this example, the dojoType attribute is used to insert the drop-down Calendar objects.

Offline availability

A popular trend with Web applications is making them available anywhere regardless of an Internet connection. A good example is the Google Gears browser extension. The Dojo Storage API provides this type of functionality with a way to securely store data on the client side. It works with Internet Explorer 6, Firefox 2, and Safari.

Customize the Dojo.js file

An interesting aspect of the Dojo Toolkit is its build engine. If there are features that you don't want to use in an application, you can create a custom build of the Dojo.js file that includes only the necessary functionality. You will need the full Dojo source code to perform a build, but it is included in the download. In addition, the Dojo Toolkit includes a JavaScript compressor called ShrinkSafe that allows you to reduce the size of the JavaScript code that users will download.

Dojo stands out in the crowd

The team behind Dojo makes it easy to design a more usable Web experience for the intended audience. The quality of Dojo's code makes it stand out from other tools. Its documentation is a work in progress, but this has become a standard for many freely available tools.

With that said, you will spend a lot of time learning Dojo through examples and trial-and-error. The wealth of features and options available with Dojo should be able to address almost any development scenario. If not, you can use Dojo as the base and extend it to match your needs.

Developing JavaScript solutions from the ground up seems to have gone by the wayside with the vast number of libraries available. Do you use Dojo or similar libraries in your projects? Share your experience with the Web Development community.

Check out the Web Development Zone archive, and catch up on the most recent editions of Tony Patton's column.

Tony Patton began his professional career as an application developer earning Java, VB, Lotus, and XML certifications to bolster his knowledge.


Get weekly development tips in your inbox Keep your developer skills sharp by signing up for TechRepublic's free Web Development Zone newsletter, delivered each Tuesday. Automatically subscribe today!