Hide Table of Contents
Application Layouts
Working with Dojo

Dojo is an open source toolkit that helps you write robust and efficient JavaScript code. JavaScript is a language that runs within a web browser, and there are various flavors of web browsers that interpret JavaScript in slightly different ways. Toolkits such as Dojo, jQuery, YUI, Prototype, and many others are designed to abstract away the browser idiosyncrasies so that you don't have to learn them all and handle them in your code.

There are often several ways to code the same thing using JavaScript. Toolkits like Dojo provide functions you can use to do things in easier or more efficient ways. Using libraries from a toolkit can reduce the lines of code you write and make your JavaScript applications quicker and more stable.

What does it mean that the ArcGIS API for JavaScript is built on top of Dojo?

The Esri developers who created the ArcGIS API for JavaScript used Dojo to simplify their development process and to ensure that the applications you build behave the same in different browsers. For example, the map zoom and panning animations use Dojo, as does the graphics layer.

Furthermore, the zoom level slider and info windows that you see in your JavaScript API maps are Dojo widgets (dijits). The slider dijit is provided with Dojo, and the info window is a custom dijit created by Esri for the ArcGIS API for JavaScript.

How much Dojo do I need to know in order to use the ArcGIS API for JavaScript?

The amount of Dojo you use when you work with the ArcGIS API for JavaScript is up to you, but at a minimum you'll need to use several common functions:

  • dojo.require: Similar to the <script> include tag on an HTML page. It imports resources into your JavaScript page.
    // legacy
    dojo.require("esri.map");
    
    // AMD
    require(["esri/map", ... ], function(Map, ... ){ ... });
    

    For the JavaScript API, the most commonly imported resources are:

    Resource Use for:
    esri.map Map, geometry, graphics, and symbols
    esri.layers.agsdynamic ArcGISDynamicMapServiceLayer
    esri.layers.agstiled ArcGISTiledMapServiceLayer
    esri.tasks.find Find task
    esri.tasks.geometry Geometry task
    esri.tasks.gp Geoprocessing task
    esri.tasks.identify Identify task
    esri.tasks.locator Locator task
    esri.tasks.query Query task
    esri.toolbars.draw Draw
    esri.toolbars.navigation Navigation
  • dojo.ready (or dojo.addOnLoad): Similar to <body onload="">. It registers an initializing block after the page has finished loading.
    // legacy
    dojo.ready(init);
    
    // AMD
    require(["dojo/ready"], function(ready){
      ready(function(){
        // This function won't run until the DOM has loaded and other modules that register have run.
      });
    });
    
  • dojo.connect: Similar to Element.addEventListener and Element.attachEvent JavaScript functions. It registers a listener to listen to specific events on an Object or element on the page and returns results from a function.
    // legacy
    dojo.connect(myMap, "onLoad", myLoadHandler);
    
    // AMD
    require(["esri/map", "dojo/on"], function(Map, on) {
      // ...
      on(myMap, "load", callback);
    });
    
  • dojo.byId: Similar to the document.getElementById(id) JavaScript function. The function searches and returns the first HTML element with the argument ID.
    dojo.byId("myInputField").value = myMap.id; 
    
  • dojo array extras: refer to the Arrays Made Easy tutorial on dojotoolkit.org

When writing your ArcGIS JavaScript applications, you can take advantage of the full Dojo toolkit, which includes buttons, grids, tree views, charts, and other widgets. The toolkit is divided into three parts:

Core - Essential functions like those listed above
Dijit - Themeable widgets such as trees, menus, and buttons
DojoX- Extension projects in various stages of development, such as graphics, grids, and charts

As stated previously, you can start building ArcGIS API for JavaScripts apps with minimal dojo knowledge. But, the more dojo you know, the more you'll be able to accomplish. Dojotoolkit.org's tutorials and documentation are a fantastic place to start.