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.
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 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.
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>
<form id="frmDojoTest" action="" onsubmit="return false;">
<h4>Please enter a data range:</h4>
</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.
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
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.
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!