Developers have been talking about the mojo of Dojo. From dealing with strings as quickly as possible, to efficient iterations, to built-in support for the back button in Ajax, Dojo has a lot to offer! The Dojo Toolkit's core implementation includes DOM utilities, Ajax (including JSON support), event handling and animation features. There are several optional modules available to add support for encryption, unit testing, debugging and more. Extension libraries Digit and DojoX offer many advanced controls and features for creating widgets, data display and manipulation and theming, among others.
Dojo provides the
dojo.query object for manipulating the DOM.
Like jQuery, most functions can be chained together. Alternatively, many chains
have standalone functions to achieve the same goals. For instance,
dojo.addClass("testHeading," "testClass") yield identical results. The following
code example displays some of Dojo's main features. It references the element
with the ID of "
testHeading," adds the
testClass CSS class
to it and then fades it out after 500 milliseconds using a Dojo effect:
dojo.require()method. This function allows us to pull in parts of the Dojo Toolkit not provided for in the Core dojo.js, such as drag and drop, additional animations, Dijit widgets, DojoX projects or even your own code. Having the ability to download code at runtime helps keep the file size to a minimum.
Events can be added to HTML elements using the
method. This powerful utility can be applied to multiple elements by chaining
it to the
dojo.query() function. The following example does exactly that by
turning off all the links in a page in one line of code (formatted for readability):
The dojo.js file includes the
dojo.animateProperty() is very powerful, and is the foundation for
most advanced animations and other animations in Dojo core. In the following
dojo.animateProperty() function is used to fade an element back
in via its opacity property and simultaneously make the text larger:
Much can be done visually with the base animations, especially
dojo.fx module can be optionally called in via
dojo.require() for even more effects. Adding the module to your code provides
several additional animation methods including
The Dojo Toolkit doesn't store its Ajax functionality in
a separate module, but presents a collection of functions that all start
with the "
xhr" identifier, which is short for the Ajax
POST calls are performed using the
functions. All the Ajax methods share several common parameters. Most important
url (the destination) and
handleAs (the data type to treat the returned
data as). Once the data arrives, it's passed to the
load() function. Errors
are handled by the
It's also possible to supply name/value pairs using a JSON object named content or by passing in form fields. In the case of the latter, all you need to do is supply the ID of the form:
JSON objects, and the Dojo Toolkit is up to the task. For instance,
say that you wanted to download a JSON object containing some data and a function
to run. To accomplish this in Dojo, you would set the
url to the file, the
json," and then you can access the object within the
Dijit offers an array of form controls that can be added to a Web page with minimal effort. Controls include date pickers, currency validators, menus, layout panes, trees, calendars, as well as layout containers such as tab containers and splitters. Digit controls can also be extended and customized using the Dijit architecture.
DojoX specializes in slightly more esoteric applications such as data grids, charts, graphics and even cryptography. Nonetheless, they do offer many popular widget choices that compliment dijit's selection, including the Iterator, FileInput and ColorPicker controls. Others, like the Lightbox, Gallery and SlideShow widgets, are great for adding visual flair to your Web page.