The goal of this exercise is to add a simple Form dijit to the page, and turn on the Tundra visual theme, bundled with Dojo.

Steps to add a button dijit

Load the module by calling dojo.require

<script type="text/javascript"><!--
dojo.require("dijit.form.Button");
// --></script>

Add dijit to the page as markups.

<button id="hello">Hello Dijit</button>

By now what you’ll see in the page is a normal button that has the same look and feel as your browser form elements.

Screenshot

Turn on theme

djConfig

Dojo has predefined djConfig parameters and are applied as dojo.js is being loaded.

<script src="../js/dojo090/dojo/dojo.js"></script>

Here we need to turn one of the parameters on, parseOnLoad. What it does is to tell Dojo to apply styles to dijits as it goes through the page during page load.

tundra.css

This is the stylesheet for theme tundra. In the file it specifies styles for all dijits having applicable styles. I assume any other themes would have same classes and ids, if any, as this one.

Unlike Dojo 0.4.x, the stylesheets are not automatically loaded and applied and the following statement needs to be added to the head.

@import "../js/dojo090/dijit/themes/tundra/tundra.css";

one more step

Add class=”tundra” to body tag.

Screenshot

Example

Example: lab002.html
Source Code: lab002.txt

Getting Dojo

Download Dojo 0.9 from http://www.dojotoolkit.org and unzip the tar.gz file.

In the dojo folder you will see four folders dojo, dijit, dojox, util.

Setting environment, recommended settings

• Suppose you unzipped the dojo folder to c:\webapps\dojo.
• Create a folder called js in webapps, and move dojo into js folder. So now you will have dojo under c:\webapps\js\dojo.
• Rename dojo folder to dojo090. Finally you have c:\webapps\js\dojo090.
• Create another folder called dojolab under webapps. This folder will contain the example web pages.

It’s not necessary to have this structure for dojo to work. For the purpose of this exercise, since loading dojo requires knowing the relative path to dojo.js from current folder, setting up the same directory structure can possibly save a lot of hassle.

Testing Dojo Installation

Under dojolab, create a file called lab001.html, or right click and save this link lab001.html

Explanation

The following two lines are the statements to load dojo.js and dijit.js. The path is the relative path from current location to dojo.js and dijit.js respectively.

Then to test dojo.js and dijit.js are found and loaded, use the following two Javascript statements to output statements in Firefox console.

Screenshot

What I am doing

I’ve used Dojo 0.4.x since last year and had chances to create custom widgets on top of dojo’s widget infrastructure and core functions, although the two was not that clearly decoupled in 0.4.x.

From what is advertised and my own view too, Dojo 1.0 is going to be much better organized and Dojo 0.9 is good enough for the re-learning to start with. I’ll post my experience and notes during the re-learning and hopefully the posts can continue and accumulatively become a supplemental resource for learning Dojo.

System Requirement

• Internet Access, to download Dojo and view my blog, not really necessary for working with most of Dojo’s modules and functions.
• Firefox 2 + Firebug, for developing and debugging, cannot be substituted with any versions of IE. But your code will work under IE, almost for sure.