Using Dojo dijits with the ArcGIS JavaScript API

A nice thing about the ArcGIS JavaScript API being built on top of the Dojo toolkit is that you can use Dojo widgets, or “dijits”, to add prepackaged user interface components to your applications. Dojo has a bunch of existing dijits you can choose from such as text boxes, buttons, menus, calendars, color pickers, and so on. The online Book of Dojo has a nice overview of the Dijit library that you can use to browse the dijits.

Dijits have been tested to behave consistently in different browsers and comply with accessibility and localization requirements. The dijit framework is extensible, so with a little ambition you can even create your own dijits.

How would you use dijits in an ArcGIS JavaScript API application?

Your Web GIS applications may require the user to interact with the page outside of the map. For example, you might need users to enter some text, click a button, choose a value from a slider, or select an item from a dropdown list. Dijits give you a robust way to provide this functionality without writing the code yourself.

Dijits for user input and results display 

You can also combine several dijits into one for easy re-use. Suppose your company has multiple Web designers that want to embed maps in their pages. You can wrap up a map and some other elements inside a dijit, which the Web designers can then add to their pages without having to learn how to use the ArcGIS JavaScript API.

In the image below, the map, slider, buttons, and city seal have been combined into a dijit that a Web designer could add to the page with a line of code. The slider and the buttons themselves are individual dijits included in the larger dijit.

Custom map dijit made up of other dijits 

Dijits can also help users accomplish focused workflows, such as finding nearby dentists, selecting a site for a business, or generating a route. In this way, dijits are similar to “tasks” in the Web ADF.

Custom restaurant locator dijit 

In the coming weeks we’ll be posting more about how to create dijits that use the ArcGIS JavaScript API.

Contributed by Sterling Quinn of the ArcGIS Server software development team

This entry was posted in Services and tagged , , , . Bookmark the permalink.

Leave a Reply

3 Comments

  1. sterlingdq says:

    Nathan – You can reference newer versions of Dojo if needed. The following example includes Dojo 1.1.1 from the AOL CDN with version 1.1 of the ArcGIS JavaScript API. This is perfectly acceptable:

    <link rel=”stylesheet” type=”text/css” href=”http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/dojo/dijit/themes/tundra/tundra.css”>

    <script type=”text/javascript” src=”http://o.aolcdn.com/dojo/1.1.1/dojo/dojo.xd.js”></script>

    <script type=”text/javascript” src=”http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/esri/esri.js”></script>

    <script type=”text/javascript” src=”http://serverapi.arcgisonline.com/jsapi/arcgis/1.1/js/esri/jsapi.js”></script>

    Does this answer your question?

  2. jayantbsai says:

    The ArcGIS JavaScript API build layer file (jsapi.js) contains all its required dependency except GFX. Currently there is no way to build GFX (VML/SVG/…) into the built file. Our recommendation is that you use dojo version that is the same or higher that what we build into each version. For example, v1.1 is built on dojo 1.1.0 and v1.2 will be released with dojo 1.2.0. So as long as your dojo version is the same or higher, things should continue to work.

  3. jayantbsai says:

    At this time, we do not have an un-compressed/un-obfuscated version of the JSAPI. We will definitely look into it having a debug version for future releases.