Dojo’s widget system is called Dijit. Dijits are the official, accessible, themed components shipped with the Dojo Toolkit. It has its own namespace, and likewise its own collection of utility functions:

Using dijits

There are two ways to make Dijits: via markup, or programatically. The markup route breaks W3C validation because Dojo conveniently uses customized attributes in the markup to configure the widget. If this concerns you, it can all be done with script. We’ll do both.

Start by making a new skeleton file, including a couple changes for dijit styling: the default theme tundra’s CSS, and setting to enable it:

Dijit uses Dojo’s package system to track dependencies via dojo.require. Simply call in the modules you need in a script tag. For instance, to use a dijit.Dialog and dijit.form.Button, you need the following calls:

From markup

You can specify all the attributes needed to setup your widget directly in markup, the most important being the dojoType. The parser finds the dojoType attribute, and turns the node into a Dijit with the matching classname. title is a common attrbute used by many widgets with headings:

If parseOnLoad is true, the widgets will be created, then addOnLoad code will be executed. If you want to execute code before widgets are parsed, set parseOnLoad:false, and put your code inside an addOnLoad function as before. Issuing the command dojo.parser.parse(); will create the widgets when you are ready.

From JavaScript

The same results can be achieved using valid HTML and JavaScript. Our markup is simple, valid HTML:

And our script is standard dojo code. We pass all the attributes as an object into our constructor, and tell it to use the node “sampleNode” for it’s content. All Dijits (or declared classes) can be created using the JavaScript new function.

When the button is clicked, you should see the word “clicked” in your Firebug (or Firebug Lite) console.

Manipulating The Widget

With our dialog successfully loaded and parsed (no errors were thrown, and the content of the Dialog is hidden), we need to explore some of the ways to manipulate the widgets. The function dijit.byId gives us a reference to our widget. The dijit.Dialog has an id of sampleNode.

To make the button the button control the dialog, modify the button’s onClick attribute to do more than print text:

If using the programmatic method, modify the lines that create the button:

The dijit.Dialog inherits from a dijit.layout.ContentPane which provides a few content-handling methods, including setHref. Add a new button outside the dialog with a new onClick function:

Or programatically by adding another button to our HTML:

And an additional new call:

Adding an id attribute to the paragraph inside the Dialog is an easy way to demonstrate another useful Dijit tool, dojo.getEnclosingWidget, to find which widget contains a passed domNode: