In the last few exercises I demoed some most basic use of Dojo toolkit.

Topics Summary

• Install Dojo, set up directory structure
• Load dojo.js
• Turn on themes
• Load and use dijit
• Add events to dijit
• Interact with other dijits

Form dijits are some of the most useful dijits. A lot of web pages contain forms and these enhanced form dijits can greatly improve the user experience of such web pages.

With the former 4 exercises, one shall be able to look into Dijit’s test pages, which are an important resource to learn the power of Dojo dijits.

Those test pages, which can also serve as demo pages, reside under dojo090/dijit/tests/.The form dijits, in particular, are located under dojo090/dijit/tests/form.

Here is the link to that folder on my server. http://kunalu.com/js/dojo090/dijit/tests/form

Forecast

In the following exercises I will try to get hands dirty to discuss more dojo and dojox functions then packaged dijit.

The goal of this exercise is to add interactivity between two dijits, TextBox and Button.

add TextBox

load TextBox dijit

Add another dojo.require after the former two.

dojo.require("dijit.form.TextBox");

add TextBox dijit

Add the following code before button dijit.

<input id="input" class="medium" name="string" type="text" />
<button id="hello" onclick="log()">Hello Dijit</button>

extra attributes

Notice when adding TextBox, a few extra attributes are specified

• trim, tells dojo to remove leading and tailing spaces in the input
• propercase, tells dojo to capitalize the first letter of each word separated by spaces

augment Button onClick function

In this exercise, when the button is pressed, we want the function to read values in the TextBox first, then output the msg to the console.

dijit.registry

To find the TextBox dijit value, we need to find the TextBox dijit first.
dijit.registry, by its name we can guess, contains information about all the dijits in this page. Therefore we can utilize it to find the TextBox dijit and its value.

get the value

//Find the dijit by its id;
var input = dijit.registry.byId("input");
//Get the value of the TextBox by calling its function getValue
var msg = input.getValue();

wrapping up as a function

Replace var log = console.debug in last example with the following code

var log = function(){
var input = dijit.registry.byId("input");
var msg = input.getValue();
if (msg == ""){
msg = "nothing";
}
console.debug("I was pressed to say " + msg);
}

Finally, modify the onClick attribute of the Button.

<button id="hello" onclick="log()">Hello Dijit</button>

Screenshot

Example

Example: lab004.html
Source Code: lab004.txt

The goal of this exercise is to add a rollover tooltip and add an event to the button created in last exercise.

Add tooltip

Load Tooltip dijit

Add another dojo.require after loading Button dijit.

dojo.require("dijit.form.Button");
dojo.require("dijit.Tooltip");

Add tooltip and attach to the button

Add actual dijit to the body of the web page.
Notice the value of connectId attribute has to be the same with the id of the button dijit. Dojo will know that this tooltip is for the button having the same id.

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

Press to output in console.

Add an action

Define a function

<script type="text/javascript"><!--
var log = console.debug;
// --></script>

What this code does is to let log point to console.debug function. Therefore when log is called, it will behave like console.debug, which is output a message in the Firefox console.

Add action to the button

Set onClick attribute of the button markup to log().

<button id="hello" onclick="log("I was pressed to say hello.")">Hello Dijit</button>

Screenshot

Example

Example: lab003.html
Source Code: lab003.txt

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