Welcome to ESRI Blogs

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

Published Wednesday, October 22, 2008 11:29 AM by sterlingdq
Filed under: , ,

Comment Notification

If you would like to receive an email when updates are made to this post, please register here

Subscribe to this post's comments using RSS

Comments

# web site

VERY NICE BLOG ITS VERY USEFUL THANK YOU..........
Thursday, October 23, 2008 6:32 AM by michael

# re: Using Dojo dijits with the ArcGIS JavaScript API

This is a really good topic that you should expand upon - particularly with respect to putting the map into other layout dijits/widgets, as this has been tricky. Cheers, Dave
Thursday, October 30, 2008 9:42 AM by Dave Bouwman

# re: Using Dojo dijits with the ArcGIS JavaScript API

Some of us are using custom dojo builds for our core and/or dijit functionality (particularly with regard to inheriting dijits and creating build layers). Can the dojo portion of the ArcGIS Javascript API be safely excluded (e.g., by hosting just the ESRI portions separately), or have ESRI-specific changes been made to the dojo code that is provided?
Friday, October 31, 2008 3:45 PM by Nathan Evans

# re: Using Dojo dijits with the ArcGIS JavaScript API

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?

Friday, October 31, 2008 3:55 PM by sterlingdq

# re: Using Dojo dijits with the ArcGIS JavaScript API

Yes, that answers the question. My primary concern is that I am able to substitute my own dojo files without breaking any ESRI functionality. We've got a pretty complex set of layers on the project, so I want to be able to drop the dojo code that is included with the "kitchen sink" ArcGIS API link I have (http://serverapi.arcgisonline.com/jsapi/arcgis/?v=1.1). I believe your esri.js and jsapi.js links are exactly what I'm looking for. Thanks Sterling!
Friday, October 31, 2008 4:13 PM by Nathan Evans

# re: Using Dojo dijits with the ArcGIS JavaScript API

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.

Monday, November 03, 2008 1:50 PM by jayantbsai

# re: Using Dojo dijits with the ArcGIS JavaScript API

Where can I get the uncompressed and unobfuscated ESRI javascript for 9.3 (esri.js)? It would be very useful for debugging and better understanding the API.
Monday, November 10, 2008 7:48 AM by Rhonda Gregory

# re: Using Dojo dijits with the ArcGIS JavaScript API

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.

Monday, November 10, 2008 10:21 AM by jayantbsai

Leave a Comment

(required) 
required 
(required)