Adding Dijit

Let's look at the HTML code for that form:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<head>

    <title>Taxes, The Surest Thing Next to Death!</title>

</head>

<body>

<h1>2007 Tax Form</h1>

    The Sovereign Nation of Googolica,  In Search We Trust

<form>

    First Name: <input type="text" length="20" name="first"><br>

    Last Name: <input type="text" length="20" name="last"><br>

    Email Address: <input type="text" length="20" name="email"><br>

<hr>

<ol>

    <li>

        Please Enter Your 2007 Gross Income 

        <input type="text" length="10" name="grossIncome">

    </li>

    <li>

        Please enter the value from line 1.  This is your <em>2007 tax</em> 

        <input type="text" length="10" name="tax">

   </li>

    <li>

        Would you like to contribute an extra $3 to the Presidential Campaign Fund? 

        <input type="checkbox" name="campaign" value="Y">

    </li>

    <li>

        Filing Date:

        <input type="text" length="10" name="filingDate">

    </li>

</ol>

<input type="submit" value="Submit">

</form>

</body>

Pretty standard stuff. Using Dojo we can improve the UI just a few lines of Javascript and some extra attributes on our existing markup.

The magic is in Dijit - shorthand for "dojo widgets". Dijit widgets perform all sorts of tasks, from embelllishing a form control, to controlling the layout of sections and beyond.

Preliminaries for Dijit

You must add two snippets of code for every page using dijits:

A HEAD snippet which loads the style sheet and Dojo libraries, then calls functions to load individual dijit types.
A class to the BODY tag specifying the name of your theme. In our examples, we'll use the "Tundra" theme.

Our examples will use the America Online hosted version of Dojo, so you don't have to install one bit of Dojo code! Just copy and paste them to a file on your server, and they will work. So here's the HEAD snippet:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Taxes, The Surest Thing Next to Death!</title>

    <style type="text/css">

        @import "http://o.aolcdn.com/dojo/1.0.0/dijit/themes/tundra/tundra.css";

        @import "http://o.aolcdn.com/dojo/1.0.0/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="http://o.aolcdn.com/dojo/1.0.0/dojo/dojo.xd.js" 

        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

       dojo.require("dojo.parser");

    </script>

</head>

Alternatively, if you're a do-it-yourselfer running Dojo from your local site, you just make a few changes to the header:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"

            "http://www.w3.org/TR/html4/strict.dtd">

<html>

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">

<title>Taxes, The Surest Thing Next to Death!</title>

    <style type="text/css">

        @import "/dojoroot/dijit/themes/tundra/tundra.css";

        @import "/dojoroot/dojo/resources/dojo.css"

    </style>

    <script type="text/javascript" src="/dojoroot/dojo/dojo.js" 

        djConfig="parseOnLoad: true"></script>

    <script type="text/javascript">

       dojo.require("dojo.parser");

    </script>

</head>

All of the remaining examples will use the AOL version of the header. The important thing is: none of the rest of the code changes. You can use AOL CDN while you're trying out Dojo, then just change the first lines when/if you install you're own.

This is a fairly standard block. If you have access to a server-side language like PHP or ASP, it's handy to place the header in a separate file and include it.

Tundra is the default theme for dijit, a theme being a standard color and design scheme across elements. Themes are discussed at length in Themes, and dijit comes preloaded with a few very nice ones, or you can create your own.

The second snippet is trivial:

<body class="tundra">

But if you don't do it, your widgets will look very strange on screen. They rely almost entirely on CSS.

Turning Ordinary INPUT Tags into Widgets

Dijit introduces a new attribute "dojoType". You simply add that to the tag you wish to "dijit-ize". /* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #b1b100;} .geshifilter .kw2 {color: #000000; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .coMULTI {color: #808080; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #ff0000;} .geshifilter .nu0 {color: #cc66cc;} .geshifilter .sc0 {color: #00bbdd;} .geshifilter .sc1 {color: #ddbb00;} .geshifilter .sc2 {color: #009900;}

<form>

First Name: <input type="text" length="20" name="first"  dojoType="dijit.form.TextBox"><br>

Last Name: <input type="text" length="20" name="last"  dojoType="dijit.form.TextBox"><br>

Email Address: <input type="text" length="20" name="email"  dojoType="dijit.form.TextBox">

Filing Date: <input type="text" length="10" name="filingDate" dojoType="dijit.form.DateTextBox">

<hr>

<ol>

<li>Please Enter Your 2007 Gross Income 

<input type="text" length="10" name="grossIncome"  dojoType="dijit.form.TextBox"></li>

<li>Please enter the value from line 1.  This is your <em>2007 tax</em> 

<input type="text" length="10" name="tax"  dojoType="dijit.form.TextBox"></li>

<li>Would you like to contribute an extra $3 to the Presidential Campaign Fund? 

<input type="checkbox" name="campaign" value="Y"  dojoType="dijit.form.CheckBox"></li>

</ol>

We use the dojoTypes dijit.form.TextBox and dijit.form.Checkbox. Now that we know this, we can fill in some code in the head snippet:

/* GeSHi (C) 2004 - 2007 Nigel McNie (http://qbnz.com/highlighter) */ .geshifilter {font-family: monospace;} .geshifilter .imp {font-weight: bold; color: red;} .geshifilter .kw1 {color: #000066; font-weight: bold;} .geshifilter .kw2 {color: #003366; font-weight: bold;} .geshifilter .kw3 {color: #000066;} .geshifilter .co1 {color: #009900; font-style: italic;} .geshifilter .coMULTI {color: #009900; font-style: italic;} .geshifilter .es0 {color: #000099; font-weight: bold;} .geshifilter .br0 {color: #66cc66;} .geshifilter .st0 {color: #3366CC;} .geshifilter .nu0 {color: #CC0000;} .geshifilter .me1 {color: #006600;} .geshifilter .re0 {color: #0066FF;}

<script type="text/javascript">

    dojo.require("dojo.parser");

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

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

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

</script>

What Did We Get?

The form is looking better already:

It is now clear which field has the focus: the border turns dark and the gradient fill turns upside down. A small thing, but very helpful to find the usually-tiny insertion point. The checkbox uses a snazzy checkbox icon. It just looks better.

But what is style without substance? Let's add some...