|
This article was previously published at GeoChalkboard in the form of a two-part article, and has been reproduced here with permission.
User expectations for web mapping applications have changed dramatically in the past few years thanks largely to Google Maps and Microsoft Bing Maps (nee Virtual Earth) technologies which brought “Web 2.0” to the masses and forever changed our expectations of how these applications should look, perform, and access data. With the advent of “Web 2.0” your applications must meet certain expectations including sleek interface controls, a better user experience driven largely by asynchronous data processing and client-side scripting, drag and drop capabilities, and the ability to combine or “mashup” multiple data sources into a single application. A number of JavaScript toolkits including Dojo, jQuery, Yui, Mochikit, and many others have been developed to enable these capabilities. ESRI recently released the JavaScript API for ArcGIS Server which was built on top of the Dojo toolkit and enables developers to take advantage of the capabilities provided by this JavaScript toolkit. Dojo is also a highly flexible toolkit that allows you to pick and choose the pieces of the toolkit that best fit your needs. According to Jayant Sai of ESRI, “We like the fact that our users can use the whole Dojo toolkit to build their next generation web 2.0 mapping application, or use just our mapping components, without really getting into the hardcore JavaScript pieces of the toolkit.”
This article concentrates on the use of Dojo for building web mapping applications. We will not only examine how Dojo is used with the ArcGIS Server JavaScript API, but you’ll also see how you can use this toolkit with other mapping API’s including Google Maps. We will start with a simple overview of Dojo and how it can be used in your web based GIS applications.
What is Dojo?
Dojo is an open source JavaScript toolkit that enables you to write robust, efficient applications without the need for a client-side plugin or server-side component. There are of course many different types of web browsers, and each interprets JavaScript differently. Dojo helps smooth out these differences and resolve any inconsistencies between the different types of browsers. From an application developer perspective, tookits like Dojo result in a simpler development process that does not require browser dependent code. These applications are also easier to test, debug, and deploy in a production environment.
Dojo is a collection of static, client-side JavaScript scripts that does not require a client-side plugin nor does it require the use of a server side component. It is a set of open source tools that helps you build better browser-based applications by resolving inconsistencies between various browsers, expanding the capabilities of the web browser, provides for the integration of user interface controls, and functions primarily through client-side JavaScript.
What does it do?
Dojo is perhaps best known for the HTML user interface components, called Dijits, which you can plug into your application. You can see some examples of these components by reviewing the Dojo Feature Explorer provided by DojoCampus.org. This alone would be good reason to use Dojo, but this toolkit provides so much more. In addition, to the user components Dojo also provides the following:
- Fixes browser incompatibilities and memory leaks (no more browser dependent code)
- Normalizes the browser event system across browsers
- DOM utilities
- Build system that divides your code into small, manageable chunks for development and a packaging system for optimal download performance
- Internationalization, localization, and accessibility
- Support for asynchronous programming
- Remote scripting with XHR, script, and iframe
- Drivers for accessing data in JSON, XML, CSV, and other formats including web services such as Flickr and Picasa
Three Projects (Dojo, Dijits, DojoX)
What we call Dojo is actually three separate projects: Dojo, Dijits, and DojoX.
Dojo core is the foundation for all three projects and handles browser normalization, fixes browser incompatibilities, allows DOM querying, remote scripting, drag and drop, data store API, localization and internationalization, Firebug integration, cookie handling, accessibility, and much more.
Dijit includes the Dojo framework along with roughly 40 HTML user interface widgets including buttons, text boxes, grids, tree views charts, color pickets and many others. Tundra is the default CSS theme for Dijit and is designed to blend into existing color palettes and design. An additional theme, Soria, is available as well and you can certainly build your own if neither the Tundra or Soria themes fit your needs.
DojoX are Dojo extensions and includes projects such as the grid widget, a graphics library, charting, image handling and more. These often include some very sophisticated projects which are not necessarily as stable as what you’ll find in Dojo or Dijit.
ESRI and Dojo
The ArcGIS Server JavaScript API, released with ArcGIS Server 9.3, sits directly on top of Dojo providing developers with access to Dojo user interface widgets and all the other benefits of Dojo core through a simple reference in your web application.
Since Dojo is included with the ArcGIS JavaScript API you do not need to reference the Dojo API to get access to its functionality. When you include the following references to the ArcGIS Server JavaScript API, you also get access to the full Dojo toolkit. There is no need to download, host, or even reference the Dojo API.
In fact, the ESRI zoom slider was built with the Vertical Slider Dijit.
In coming posts we’ll take a look at how you can integrate a number of other dijits into your web applications.
Using Dojo with Google Maps API
You can also take advantage of Dojo when creating Google Maps API applications (this applies to other JavaScript mapping API’s as well). Although the Google Maps API isn’t built on top of Dojo like ESRI’s ArcGIS Server JavaScript API its quite simple to take advantage of its functionality. In this case you have several options. The easiest of which is to simply reference the publicly available Dojo hosted on the AOL Content Delivery Network (CDN). We’ve done just that in the code example you see below.
Your other options for downloading Dojo to your local environment include:
Fundamentals of Using Dojo with the ArcGIS Server JavaScript API
The ArcGIS Server JavaScript API provides easy access to the functionality provided by Dojo since it was built directly on top of the framework. This means that you can access everything within Dojo base and core as well as the user interface dijits. In this post we’ll cover some of the most commonly used features of Dojo that you’ll use when writing your ArcGIS Server JavaScript API applications.
Adding Dojo and the ArcGIS Server JavaScript API to your Application
Before you can begin working with either the ArcGIS Server JavaScript API or Dojo you must provide some boilerplate code in the head and body tags of your application. Basically this requires the following three steps :
- References in the head section to:
- Dojo style sheet you intend to use
- ArcGIS Server JavaScript API which as you know also contains Dojo
- Set the class for the body tag to the Dojo style sheet you have selected
- Add dojo. Require statements for the ArcGIS Server and Dojo resources you intend to use
Step 1: Reference the Dojo Style Sheet and ArcGIS Server JavaScript API
A reference to the style sheet provided by Dojo is provided mainly to control the look and feel of the graphic elements in your map as well as any user interface dijits that you add to your application. This is accomplished by adding the following line of code in the head section of your application.
In the code snippet above we are referencing the “tundra” style sheet. The style sheet is a set of fonts, colors, and sizing settings for your user interface components. Dojo also provides style sheets for “nihilo” and “soria”, and you can certainly develop your own themes as well. In addition to providing a reference to a style sheet you will also need to add a script tag that references the ArcGIS Server JavaScript API as seen below. This reference also includes everything included with Dojo since the JavaScript API was built on top of Dojo.
Step 2: Set the Class of the Map div Tag
Next, you’ll need to set the class of the map to match the theme of the style sheet that you referenced in Step 1. Notice in the code example below that we are referencing the “tundra” theme. If you had referenced the “soria”, “nihilo”, or your own custom style sheet you’d reference this theme here instead of “tundra”.
Step 3: Add dojo.require() Statements
The ArcGIS Server JavaScript API includes a number of “resources” that you can use in your application, the most commonly used of which are identified in the table below.
To use any of these resources in your application you will need to import them into your application with dojo.require() . For example, the two lines of code that you see below will import functionality related to maps, geometry, graphics and symbols (“esri.map”) as well as geoprocessing functionality (“esri.geoprocessing”).
The dojo.require() method can also be used to import various Dojo dijits and other functionality provided by Dojo core.
Each of these “resources” are really small code modules and act much the same as “include” or “import” statements in other languages. Each dojo.require( ) statement is placed inside a script tag in the head section of your application.
Important Note: You will be applying these three steps to every ArcGIS Server JavaScript application that you develop. Once you’ve completed these three steps you are ready to begin developing the functionality of your application.
There are a few additional Dojo methods that I’d like to introduce at this time which you will use frequently when developing your ArcGIS Server JavaScript API applications.
dojo.addOnLoad()
This method is similar to the body tag's onload() event in that it registers a JavaScript initialization function to be run after all the web page components have been loaded. In the code sample below you will see an example of dojo.addOnLoad( ) in action.
In this case, dojo.addOnLoad calls a JavaScript function called “init”. The addOnLoad function will ensure that the JavaScript “init” function will run only after all elements of the web page have loaded. Normally the initialization function is used to set up the initial parameters of your application including loading the map, setting the initial appearance of the user interface components, and referencing various tasks provided by ArcGIS Server.
dojo.connect()
We’ll cover this function in greater detail in a future post so for now I’ll simply provide a high level overview. Dojo.connect( ) is used to connect events with listener functions that will run in response to those events. For example, when a user clicks your map this is known as a Map.onClick event. You can write JavaScript code that runs in response to this event. Perhaps you’d like to display the map coordinates where the user clicked or perform a reverse geocoding operation. There are many events that can occur in an application, but you only need to write code that responds to those events your application is interested in. For example, the code snippet below connects the Map.onClick event to a JavaScript function called “doReverseGeocode” which will perform a reverse geocode based on the point that was created through a map click.
dojo.byId()
This method is used to search for and return an HTML DOM element similar to what you’d find with the JavaScript document.getElementById() method.
Conclusion
In this article you were introduced to Dojo and some of the more commonly used Dojo methods in an ArcGIS Server JavaScript API. While this will certainly get you started in your development efforts, the Dojo framework can do so much more.
This article was written by Eric Pimpler at GeoSpatial Training Services. Geospatial Training Services provide a
range of geoweb courses.
 |
Twitter @geowebguru
Subscribe to this comment's feed