Take Your Web Forms to the Next Level with Dojo | WebReference

Take Your Web Forms to the Next Level with Dojo

By Rob Gravelle


I introduced the Dojo JavaScript framework in my previous article, "Dojo i18n: a Pure JavaScript Localization Solution". At that time, my main focus was Dojo's i18n module, which is a JavaScript approximation of Java's resource bundle system for loading localized text. Dojo's i18n capabilities are impressive, but its real claim to fame is its collection of rich UI controls.

If you can write HTML and CSS, Dojo allows you to quickly build reusable client-side components. Dojo controls offer a lot more features than regular HTML elements, including validation, tooltips, themes, and of course, localization support. Some controls also allow data mapping, whereby the display value is formatted but the underlying value is not.

In today's article, I'll demonstrate how to construct a form to subscribe to an investing newsletter using a variety of Dojo controls. In a subsequent article, I'll implement localization into the form for formats and language support.

The Dijit Module

The Dijit module is included with the Dojo Toolkit Release and contains JS files for reusable rich UI components as well as demos. Dijit (shorthand for "Dojo widgets") makes developing and reusing interface components very easy. The Dijit module also includes a number of HTML control replacements so that you can convert all form controls to their Dijit counterparts, making for a more consistent look and behavior. Some examples of Dijit controls include dropdown/popup menus, dialogs, page layouts, trees, progress bars and standard form element replacements.

Constructing a Simple Dijit Form -- Declarative Style

The easiest way to include Dojo in your Web pages is to set the <SCRIPT> src to a trusted host. Likewise, it is quite sufficient under most circumstances to create Dijit controls using the declarative method of widget creation, whereby controls are defined through tag attributes. For more complex applications, you may also create any Dijit widget programmatically using dojo.behavior. You would need to do this if you needed to derive the locale by calculating it or by extracting it from the URL. Using the declarative method, you would also set the global djConfig variable by including an additional attribute in the <SCRIPT> tag. Here's the code to include the script in the declarative style using script hosting:

Setting isDebug to true ensures that Dojo provides extended debugging feedback via the Firebug Web development tool. If Firebug is not available on your platform, Dojo will pull in and display the version of Firebug Lite that is integrated into the Dojo distribution, thereby always providing a debugging/logging console when code>isDebug is enabled. It's important to set the parseOnLoad flag's value to true so that Dojo parses the DOM document on loading and converts nodes with the dojoType attribute to Dijit widgets.

A second script loads the necessary Dijit controls:

The next step is to choose a theme. Dijit Themes lend a consistent look and feel to widgets. Dijit comes prepackaged with four themes called Claro, Tundra, Soria and Nihilo. The Dojo themes and theming page shows examples of each theme and describes how to mix themes as well as how to create your own. The following code loads the basic Dojo and Claro Dijit theme stylesheets:

You'll also need to add the theme name as a class to the <BODY> element:

If you'd like to compare the four Dijit themes, you can sample each of them on the Dojo theme tester page.

Here's a list of fields that we'll be including on our form:

Field Name Control Type Mandatory? Validation Rule(s)
Name Textbox YES Cannot be empty
Email Textbox YES Cannot be empty; Must be in correct format
Website Textbox NO Must be in correct format
Date of Birth DateTextBox NO Must be a valid past date
Topics of Interest CheckedMultiSelect NO  
Email Format Radio Buttons YES One radio button must be selected.
Submit Button Submit Button N/A  
Reset Button Reset Button N/A