Dojo Toolkit Reference Guide

Welcome

Dojo is a collection of JavaScript utilities providing solutions for a vast array of problems faced by the professional JavaScript developer. This reference guide provides information on the following:

  • Dojo Base is the foundation of the Dojo Toolkit and functionality such as DOM and AJAX convenience methods, animations, and other base functionality suitable for building simple Web sites.
  • Dojo Core is a larger set of components built upon Dojo Base and includes things such as drag and drop, l10n and i18n components, and data stores.
  • Dijit is a complete widget system, providing all core UI components and utilities.
  • DojoX is a collection of advanced components, including data grids, low-level graphics libraries, mobile components, and other experimental software.
  • Utilities section provides extensive information about the Dojo Build system, , and a variety of other Dojo-related utilities.

There are some additional resources within this reference guide as well:

  • Quick-Start Guides - covering various topics, linking to related module documentation.
  • Developer Notes - Various topics that are related to development of the toolkit
  • Release Notes - The release notes for Dojo, Dijit, DojoX and Utils

Dojo Base

The base functionality of the Dojo Toolkit is provided by just including dojo.js. This includes tons of features like CSS-based queries, event handling, animations, Ajax, class-based programming, and a package system that makes getting access to the rest of Dojo a snap.

An example doing a basic animation

require(["dojo/query", "dojo/_base/fx", "dojo/_base/connect", "dojo/domReady!"],
function(query, baseFx, conn){
  query("#showMe").on("click", function(e){
    var node = this,
        anim = baseFx.anim(node, {
          backgroundColor: "#363636",
          color: "#f7f7f7"
        }, 1000);

    conn.connect(anim, "onEnd", function(){
      baseFx.anim(node, { color: "#363636" }, null, null, function(){
        node.innerHTML = "wow, that was easy!";
        baseFx.anim(node, { color: "white" });
      });
    });
  });
});
<div id="showMe" style="padding: 10px;">click here to see how it works</div>

Checkout the full contents of the Dojo modules.

Dojo Core

Additional stable (but optional) components for advanced animations, I/O, data, Drag and Drop and much more.

An example using a built in module dojo/fx/easing

require(["dojo/query", "dojo/_base/fx", "dojo/fx/easing", "dojo/domReady!"],
function(query, baseFx, easing){
  query("#showMe2").on("click", function(e){
    baseFx.animateProperty({
      node: e.target,
      properties: {
        marginLeft: 200
      },
      easing: easing.elasticOut,
      duration: 1200,
      onEnd: function(n){
        baseFx.anim(n, { marginLeft: 2 }, 2000, easing.bounceOut);
      }
    }).play();
  });
});
<div id="showMe2" style="padding: 10px; margin-left:2px;">
     Click to Animate me with built in easing functions.
</div>

Dijit

Dijit is Dojo's theme-able, accessible (i18n, l10n), easy-to-customize UI Library. Dijit requires Dojo Base and various Dojo Core modules to use.

DojoX

DojoX contains a number of sub-projects based on Dojo Base. Once can consider these projects Dojo eXtensions or eXperiments. Each project has a varying states of maturity -- from very stable and robust, to alpha and eXperimental. All DojoX projects, at the least, contain README files that outline their maturity and authorship, so be sure to check those along with the documentation pages to get the full picture of where a module is headed.

Visit the DojoX Reference Index to begin the adventure.

Utilities

Dojo ships a number of additional utility projects for internal use and general user consumption. The various utilities are outlined in their respective pages: