Geospatial Scott: Dojo Dijits: Object Oriented JavaScript Goodness

Object Oriented Programming is a programming style that views the world as a set of objects with properties and methods. When programming with JavaScript, it's easy to fall into a scripting mindset and fire off code in one giant method. This makes your code hard to read and debug. It can also lead to copying/pasting and redundant code. The first step to breaking this habit is to refactor as much as possible. However, this can only take you so far. The next step is breaking out sets of related methods into separate objects. Fortunately for those of us that work with the ArcGIS API for JavaScript, we have access to the wonderful world of Dojo Dijits.

If you've worked with the JS API before you have probably already used a Dojo Dijit. These are prepackaged code and markup that you can plug right into your applications. Dijit.form.Button and Dijit.form.Slider are very common examples. These are great, but the real fun comes in creating your own.

This article by Matthew Russell was my first introduction to creating your own custom Dijits (look for "Creating You Own Widgets"). It's not as complicated as you would think. The building blocks consist of three files (links to my files are included):

An .html file containing the markup code (hit view source to see the code).
A .js file containing all of the JavaScript.
A .css file containing all of your styling.

After doing the work to create your own Dijit, it's as easy to use as any regular Dojo Dijit. I've created a full screen map dijit that I use for several of my applications. It includes goodies such as map resizing, an animated navigation toolbar, basemap layers and error wiring. It's great to spend time only once refining my design and code and then easily reusing it. And when I make improvements, all of my applications are automatically updated.

Here's what it looks like in the current app that I'm currently working on. You'll see references to the map dijit and a tools digit.

HTML:

<body class="nihilo">
        <div id="mapDijit" dojoType="mapDijits.mapDijit_FullScreen"></div>
        <div id="toolsDijit" dojoType="mapDijits.toolsDijit"></div>

JavaScript:

<script type="text/javascript">
            //require newly created dijit
            dojo.require("mapDijits.mapDijit_FullScreen");
            dojo.require("mapDijits.toolsDijit");
            dojo.require("dojo.parser");
            
            // global
            var g = {};
            g.baseURL = "http://gis.sandy.utah.gov/ArcGIS/rest/services/";
            g.PermitsURL = g.baseURL + "Public_Works/Road_Cut_Permits/MapServer";
            
            function init(){
                // get map dijit and tools dijit
                var mapDij = dijit.byId("mapDijit");
                var toolsDij = dijit.byId("toolsDijit");
                
                // set map dijit for tools dijit
                toolsDij.mapDijit = mapDij;
                toolsDij.setup();
                
                // add permits layer
                mapDij.addLayer(g.PermitsURL, cached=false, wireErrors=true);
                
                // add buttons
                toolsDij.addButton(label="Add Line", iconClass="drawLineIcon", method=drawLine);
                toolsDij.addButton(label="Add Point", iconClass="drawPointIcon", method=drawPoint);
            }

You can see it in action in my Core Samples and Pavement Markings live applications. Anyone else using custom Dijits out there?

Geospatial Scott

Monday, July 26, 2010

Dojo Dijits: Object Oriented JavaScript Goodness

No comments:

Post a Comment