Blog / 2011 / September / 26

Getting Started with Dojo

September 26, 2011

Here's some very basic getting started instructions for the Dojo JavaScript toolkit. Unlike jQuery, there's generally more raw JavaScript involved.

Google CDN

The basic library can be installed from Google's CDN:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.6.0/dojo/dojo.xd.js"></script>

Running Code on Page Load

To run JavaScript on page load, pass a javascript function into dojo.ready:

function init() {
    dojo.byId("greeting").innerHTML += ", from " + dojo.version;
}
dojo.ready(init);

Modules

Dojo loads a minimal amount of the library up front, other modules can be loaded using a dojo.require call. Here's an example that loads the dojo.fx library and then using it to slide a html element to a new position

dojo.require("dojo.fx");

function init() {
    dojo.byId("greeting").innerHTML += ", from " + dojo.version;

    dojo.fx.slideTo({
       top: 100,
       left: 200,
       node: dojo.byId("greeting")
    }).play();
}

Creating Nodes

Dojo provides the dojo.create function to support creating dom nodes. The first parameter is the tag name and the second is an object with the attributes you want to create on the node. The third element is optional, and is the parent to attach to.

var list = dojo.byId("list");

dojo.create("li", {
    innerHTML: "Six"
}, list);

dojo.create("li", {
    innerHTML: "Seven",
    className: "seven",
    style: {
        fontWeight: "bold"
    }
}, list);

You can also specify another parameter that controls the relationship between the parent node to add to, and the new node. This defaults to "last":

var three = dojo.byId("three");

dojo.create("li", {
    innerHTML: "Three and a half"
}, three, "after");

Valid values for the last parameter are: "before", "after", "replace", "only", "first", or "last". See http://docs.dojocampus.org/dojo/create for more details.

Finding Nodes

Dojo uses dojo.query to peform jQuery like searching for nodes based on a CSS selector. This always returns an array (actually a dojo NodeList instance):

var odds = dojo.query(".odd");

NodeList has supporting methods, so to iterate around all the returned nodes:

dojo.query(".odd").forEach(function(node, index, nodelist){
    dojo.addClass(node, "red");
});

There are convenience methods on NodeList for many DOM functions, so this code can be simplified as:

dojo.query(".odd").addClass("red");

This will return the NodeList, so you can chain just like with jQuery:

dojo.query(".odd").removeClass("red").addClass("blue");

Dijit

Dijit is the Dojo presentation layer framework, complete with themeing. You can get the CSS for that (here using the Tundra theme) from Google's CDN:

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/dojo/1.6/dijit/themes/tundra/tundra.css">

Remember to add the theme name as a class on the body tag:

<body class="tundra">

Here's we're going to load the digit modules for a button and a dialog box, and show a dialog when the button is clicked. First, include CSS, then load the appropriate modules:

dojo.require("dijit.form.Button");
dojo.require("dijit.Dialog");

Next, create a button in the HTML and attach a JavaScript onClick handler to it:

<button dojoType="dijit.form.Button" id="buttonTest">
    Click me
    <script type="dojo/method" event="onClick">
        dijit.byId('dialogTest').show();
    </script>

Finally, we need to define the dialog contents:

<div dojoType="dijit.Dialog" id="dialogTest" title="Clicky-click!">You clicked and now you see this box.</div>

Alternatively, we can create the dialog in code, rather than declare a separate div in the HTML.

Create the following function on the page:

function dialogAlert(pTitle, pContent) {
    var thisdialog = new dijit.Dialog({ title: pTitle, content: pContent });
    dojo.body().appendChild(thisdialog.domNode);
    thisdialog.startup();
    thisdialog.show();
}

and then have the button call this function when clicked:

<script type="dojo/method" event="onClick">
    dialogAlert('Title', 'You clicked and now you see this box.');
</script>

References

Tags: javascript dojo