Creating rich internet applications using the Dojo Toolkit

IBM has embraced the Dojo Ajax toolkit for the development of web-based user interfaces (UIs). In this presentation towards the end of IBM Impact, Chris Mtichell from IBM’s Websphere group explains what the Dojo toolkit is and how it can be used by developers.

Chris points out that more and more of us are using browsers to interact with more and more complex applications. This calls for more advanced UIs, and here is where Ajax can play a big part. Rather than having to refresh the whole page when some new information is required from the server, Ajax allows for the update of a single element (whether it be a number, an image, a piece of html etc.). Add DHTML to the equation and you can build rich interfaces approximating those found in software applications.

Toolkits such as Dojo have emerged to simplify code for common functions and to deal with issues such as cross-browser compatibility. The service-based nature of Ajax and these toolkits provides a great fit for SOA. The Dojo Toolkit itself is a set of common Javascript libraries used for creating Ajax and DHTML web applications. It has been around for almost 5 years.

Key features of this open source toolkit include a large collection of widgets (called ‘Dijit’), a data abstraction layer (useful for dealing with data coming from different sources, eg. Amazon, Yahoo or other APIs), event management handling and a debugging interface all in an extensible modular architecture. This means it only pulls in what it needs when it needs it, making it smaller and faster than just about any other toolkit out there.

The toolkit is divided up into base and core components:

dojo_structure1

Beyond that there is a widget/plugin approach for additional functionality:

dojo_widgets

Dojo ‘base’ features

It is worth looking at the rich feature-set provided as the base functions that are always available to developers (the lightweight dojo.js which weighs in at under 60kb):

  • Cookie functions
  • Lang utils and array extras (compatibility between IE6 and Firefox)
  • JSON serialization
  • Fast CSS manipulation
  • Events (simple connect)
  • Fast CSS style manipulation (for positioning elements)
  • Browser detection
  • URL functions
  • Doc load, unload hooks
  • Animation and effects (fade, slide, css colors)

Loading the Dojo Toolkit is as simple as referencing the Javascript in your HTML page and setting a few configuration options:

dojo_load

Most Dojo functions are tied to the dojo.addOnLoad event. Furthermore, a set of actions can be chained together. A key use of the Dojo Toolkit is to add styling to data pulled from an Ajax call. For instance, if a figure in a table has been updated, you might want to highlight this via CSS and then fade back to the normal state. You also have direct access to the DOM, with the potential to remove or add nodes (or HTML fragments).

When it comes to making an Ajax call, the dojo.xhr mechanism is simple and easy to use. It is based on XMLHTTPRequest and follows the standard REST conventions (get, put, post delete). Here’s an example of grabbing a subscription using JSON, and displaying the output:

dojo_ajax

Dojo ‘core’ libraries

The libraries contain modules that are extremely useful, but not always needed. They are not loaded by default (for performance reasons) but can be accessed using dojo.require().

Some examples:

  • Extended animation
  • Date parsers
  • Drag ‘N Drop
  • Regular expressions
  • Extended I/O

Widgets and plugins

In the Dojo world, core widgets are handled by a system called Dijit. As well as being a set of pre-packaged skinnable, template-driven widgets, Dijit also contains a powerful, flexible architecture for building your own widgets.

Dijit in action:

dojo_dijit

DojoX, another set of widgets could be termed the ‘Las Vegas of widgets’: it contains everything under the sun. Extended animation effects, date parsers, presentation tools including graphs and charts, 3d vector graphics and even an offline mode incorporating Google Gears.

DojoX also handles all cross-browser compatibility issues around displaying images:

dojo_dojox

Best practice for Dojo development

When it comes to actual development, Chris had a few pointers:

  • Firebug, the Firefox plugin is great for debugging Dojo
  • Make sure you test in Internet Explorer upfront: don’t wait until the last moment
  • Initialize Javascript code only once
  • Understand the DOM methods
  • Learn RegExp and CSS Selectors

Helpful resources

Dojo community: http://dojotoolkit.org/community/, http://dojotoolkit.org/forum
Blogs, tutorials and more: http://dojotoolkit.org/key-links
Documentation: http://dojocampus.org, http://docs.dojocampus.org

More from IBM on Dojo

Leave a Reply

Your email address will not be published. Required fields are marked *