Datasheet
Chapter 1: Enhancing Development with Dojo Core
❑
dijit/
— Residing in this directory is Dijit, the Dojo widget system.
❑
dojox/
— Under this path, you’ll find optional yet powerful extensions to Dojo that provide
charting facilities, cryptographic routines, offline application support, and more.
Getting to Hello World
Possibly the best way to get a flavor for the Dojo way is to jump right into a quick example page that
loads up the toolkit and tries a few things out:
<html>
<head>
<title>Hello Dojo</title>
<style type="text/css">
@import "../dojodev/dojo/resources/dojo.css";
@import "../dojodev/dijit/themes/tundra/tundra.css";
</style>
<style type="text/css">
.accord { margin: 1em; height: 300px;}
</style>
<script type="text/javascript" src="../dojodev/dojo/dojo.js"
djConfig="isDebug: true, parseOnLoad: true"></script>
Note that the CSS and JavaScript paths in the preceding code assume that this page resides in a folder
devoted to this chapter —
ex-dojo-core/
for example — in the same directory as the
dojodev/
folder.
The code itself is fairly mundane stuff so far — the page opens with a title and the inclusion of a couple
of Dojo style sheets. What’s worth noting, though, is that Dojo does include a baseline ‘‘reset’’ CSS like
the one offered by YUI and others, though not nearly as ambitious.
The second CSS import is somewhat more interesting:
tundra.css
defines a complete theme for Dijit
widgets, and can be swapped out for another. For example,
soria/soria.css
is one you might try. You
read more on this feature later on in Chapter 6.
The final bit of CSS is just a little tweak to an element that will appear further along in the page.
After the CSS, take a look at the first JavaScript import of the page. This loads up the core of Dojo. Notice
that there’s a custom
djConfig
attribute on the
<script>
tag — this is your first hint that there’s some-
thing different going on here. The
djConfig
attribute may contain flags and settings used globally to
configure the Dojo toolkit. In this case, the
isDebug
flag enables debug logging and messages, and the
parseOnLoad
flag tells Dojo to scan the DOM for setup cues once the page has finished loading.
Continuing on, here’s markup to finish off the
<head>
element:
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.TextBox");
dojo.require("dijit.form.CheckBox");
3