Dojo, the Definitive Guide - Chapter 11 Dijit Overview

Dijit is the fantastic layer of widgets that the toolkit provides as drop-in replacements for the standard HTML web controls.
Some specific goals of Dijit include:
• Developing a standard set of common widgets for web development in an analogous manner to the way that Swing provides an interface for Java applications or Cocoa provides interface controls for an OS X application
• Leveraging existing machinery from Core and Base to keep the implementation of widgets as simple and portable as possible
• Conforming to accessibility (a11y) standards in accordance with the ARIA (Accessibility for Rich Internet Applications) specification to support the visually impaired and users who need cannot use a mouse
• Requiring that all widgets be globalized, which simplifies internationalization initiatives by ensuring that widgets are localized and supporting cultural formats and bidirectional (bidi) content
• Maintaining a coherent API so that developers can transfer knowledge across multiple widgets and reuse patterns for solving problems
• Supporting a consistent look and feel with stylesheets, yet making widgets easily customizable
• Ensuring that the creation of widgets in markup is just as easy as with JavaScript (or easier)
• Making it simple to augment an existing page with a widget orto scale multiple widgets into a full-blown application
• Providing full support for bidirectional text (realized as of version 1.1)
• Supporting the most common browsers across multiple platforms, including Internet Explorer 6+, Firefox 2+, and Safari 3+*
Perhaps the most important advantage that Dijit brings to your web development efforts is the ability encapsulate userinter face components into standalone widgets.
As a designer, snapping a dijit into a page via markup is as simple as including a special dojoType tag that the parser recognizes and instantiates into an event-driven DHTML entity.
As a general pattern, dijit constructor functions have the following signature that accepts a collection of configuration properties and a node reference:
dijit.WidgetName(/*Object*/props, /*DOMNode|String*/node)
The fundamentals for using an existing dijit in markup are quite simple: a dojoType tag specifies the type of dijit that should be placed in the page, attributes pass data into the widget upon creation, and extension points allow you to override existing widget behavior.While the dojoType tag is required, attributes usually are set to reasonable default values, and extension points always fall back to a reasonable implementation.
Common dijit attributes
Attribute Type Comment
id String A unique identifier for the widget. By default, this value is automatically generated
and guaranteed to be unique. If an explicit value is provided that is known already
to be in use, the value is ignored, and a unique value is generated.
lang String The language to use for displaying the widget. The browser’s locale settings are used by
default. If an additional locale is desired, specify it via djConfig.extraLocale so
the bundle will be available. (In general, this attribute is not used unless it’s necessary
to display multiple languages on a single page.)
dir String Bidirectional support as defined by the HTML DIR attribute. By default, this value is
set to ltr (left to right) unless rtl is provided. No other values are valid.
style String HTML style attributes that should be passed into the widget’s outermost DOM node.
By default, no additional style attributes are passed.
title String The standard HTML title attribute that can be used for displaying tooltips when
hovering over a dijit’s DOM node.
class String CSS class information to apply to the outermost DOM node. This attribute is particularly
useful for overriding all or part of a default theme.
A Dijit theme is a fully consistent collection of CSS rules that span across the entire
set of widgets. To say that anotherway, you might think of Dijit as being skinnable,
where a theme is a kind skin that you apply.
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.3/dojo/resources/dojo.css" />
<link rel="stylesheet" type="text/css"
href="http://o.aolcdn.com/dojo/1.3/dijit/themes/tundra/tundra.css" />
<body class="tundra">
Important distinctions must be made between a dijit versus a DOM node: a dijit is a
JavaScript Function object that is instantiated from a collection of resources that may
include HTML markup, CSS, JavaScript, and static resources like images; the dijit’s
visible manifestation is inserted into the page by assigning its domNode attribute (the
outermost node in its template) into the page.
The Dojo parser is a Core resource that is the standard means of instantiating a widget
defined in markup and ensuring that its visible representation, linked via its
domNode, gets inserted into the page. Once the domNode is assigned into the page, the
browser renders it on the page.
Parsing a widget when the page loads entails three basic requirements:
• Include parseOnLoad:true as a key/value pairto djConfig, which the parser will
detect when it is loaded and use to trigger automatic parsing.
• Require the parser via dojo.require("dojo.parser") so that the parser is available
and can register an automatic call to dojo.parser.parse( ) when the page
loads. Because no arguments are passed to the call, the entire body of the page
provides the basis for parsing.
• Provide dojoType tags as needed in the markup for widgets that should be
parsed.
Manually parsing a widget that has already been defined in markup after the page
loads is similar:
• Require the parser via dojo.require("dojo.parser"). Because parseOnLoad is not
detected to be true, no automatic call to dojo.parser.parse( ) occurs.
• Provide the corresponding dojoType tag in the markup for a widget—maybe even
dynamically after the page has already loaded.
• Manually call dojo.parser.parse( ), optionally providing a specific DOM node
as an argument as the starting point for the parsing operation.