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 .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.
<body class="nihilo"> <div id="mapDijit" dojoType="mapDijits.mapDijit_FullScreen"></div> <div id="toolsDijit" dojoType="mapDijits.toolsDijit"></div>
You can see it in action in my Core Samples and Pavement Markings live applications. Anyone else using custom Dijits out there?