Datasheet
Chapter 1: Enhancing Development with Dojo Core
Using Firebug
In case you’ve never been introduced to it, Firebug is an invaluable Firefox extension
for web developers.
Firebug is useful in every aspect of the job — you can inspect elements in the page,
view and manipulate live CSS, access a JavaScript shell for trying out small snippets, as
well as view a log of debugging messages from your code. Check it out here:
http://getfirebug.com
It’s also worth noting that Dojo, at least in development, comes with a copy of Firebug
Lite for non-Firefox browsers. It can be activated by the Dojo config setting
isDebug
.
Read more about Firebug Lite here:
http://getfirebug.com/lite.html
Next begins the
<body>
of the page:
<body class="tundra">
<h1>Hello Dojo</h1>
Note that the
<body>
tag has a
class
=
"tundra"
attribute. This corresponds to the theme loaded in CSS
earlier. Now we’re starting to get into some meaty bits:
<div class="accord"
dojoType="dijit.layout.AccordionContainer"
duration="200">
<div dojoType="dijit.layout.AccordionPane" selected="true"
title="Intro" class="apane">
<p>Hello world - welcome to Dojo!</p>
</div>
There hasn’t been much JavaScript in this page yet, but the preceding HTML will cause quite a bit to
happen. Thanks to the requirements loaded in the
<head>
—aswellas
djConfig
=
"parseOnLoad:
true"
appearing on the
<script>
tag loading Dojo — the markup here is interpreted on page load as
declarative cues for object initialization.
Inparticular,thismarkupdeclaresthatanaccordion-style layout widget be constructed. Although there
are some caveats, this widget can be styled like any bit of HTML on the page, as seen with the
.accord
selector appearing in CSS earlier, back in the
<head>
element.
Notice that each of the
<div>
elements comes with a custom
dojoType
attribute that defines
what Dijit class should be instantiated and wrapped around each. The parent
<div>
becomes an
AccordionContainer
, and the first child
<div>
becomes an
AccordionPane
. Additionally, each of these
comes with configuration for the widgets in the form of custom attributes. For instance, the animation
speed with which the accordion panes open and close is specified by
duration
=
"200"
, and the title of
apaneisspecifiedwith
title
=
"Intro"
.
5