The document provides an overview of the Dojo JavaScript toolkit and its core features. It summarizes Dojo's modular design, DOM manipulation utilities like dojo.query, animation capabilities via dojo.NodeList-fx, class declaration syntax, event handling with dojo.connect, and AJAX functions like dojo.xhrGet. It also describes Dojo widgets from the Dijit library for UI elements like tabs and forms, and DojoX extensions for charting, grids, and other experimental features. The document includes code examples for many of these Dojo capabilities.

1. Richard Paul
Kiwiplan NZ Ltd
17 Feb 2009

2. Dojo Tookit
http://dojotoolkit.org/
The Dojo Toolkit is an open source modular JavaScript library
[...] designed to ease the rapid development of cross platform,
JavaScript/Ajax based applications and web sites.
-- http://en.wikipedia.org/wiki/Dojo_Toolkit
Current version: 1.2.3
Next version: 1.3.0

3. dojo.query
Returns nodes which match the given CSS3 selector,
searching the entire document by default but optionally taking a
node to scope the search by. Returns an instance of dojo.
NodeList. -- http://api.dojotoolkit.org/
// Find all nodes with the class 'draggable'
var draggable = dojo.query('.draggable')
// Search in the subtree of an existing node
var myList = dojo.byId('myList')
var items = dojo.query('li', myList)
// Advanced CSS 3 selectors (regardless of browser)
:nth-child(odd), :not(...)

4. dojo.NodeList
dojo.NodeList is as subclass of Array which adds syntactic
sugar for chaining, common iteration operations, animation,
and node manipulation. NodeLists are most often returned as
the result of dojo.query() calls. -- http://api.dojotoolkit.org/
// Set onclick handler for all lists (ordered and
unordered)
dojo.query('ol, ul').onclick(function(event) { })
// Iterator over items in list
dojo.query('ol li, ul li').forEach(function() { })
// Empty the snippet list
dojo.query('#snippets').empty()
// Use camel-case naming to set CSS properties
dojo.query('#snippets li').style('backgroundColor',
'blue')

5. dojo.NodeList-fx
Fancy animations for your nodelist
// Include the NodeList animation package
dojo.require(quot;dojo.NodeList-fxquot;);
// Fade out all items
dojo.query('.items').fadeOut() // Opposite is fadeIn
// Wipe out all items
dojo.query('.items').wipeOut() // Opposite is wipeIn
// Animate CSS properties
dojo.query('#item').anim({width: '800', height: '300'})
// Even works for colours and for custom durations
dojo.query('#output').anim({backgroundColor: '#afa'},
4000)

6. Declaring Classes
Creating your own classes in Dojo
dojo.declare('className', superClass, property map)
dojo.declare('Logger', null, {
constructor: function(outputId) {
this.node = dojo.byId(outputId)
},
log: function(text) {
if (text == undefined)
return
this.node.innerHTML += '<br/>' + text
},
clear: function() {
new dojo.NodeList(this.node).empty()
}
})
var logger = new Logger('output')

7. dojo.connect
Allows function to be trigger when event occur.
// Call logger.clear() when terminal.load() is called
dojo.connect(terminal, 'load', logger, 'clear')
Passes the same arguments as passed to load to the clear
function.
terminal.load('mySnippet') // => log is cleared

8. dojo.behavior
Unobtrusive javascript (note the US spelling)
dojo.behavior.add({
'#snippetList a': {
'onclick': function(e) {
terminal.load(e.target.id)
}
},
'#run': {
'onclick': function(e) {
terminal.run()
}
},
'#clear': {
'onclick': function() {
logger.clear()
}
}
})
dojo.behavior.apply()

9. Dojo Topics
dojo.publish, dojo.subscribe
Anonymous communication is available in Dojo via topics.
// Set up subsciber
dojo.subscribe('topic', object, 'method')
// Publish data to the topic
dojo.publish('topic', ['a message'])
// Multiple arguments (mapped using apply)
dojo.subscribe('topic', null, function(a, b) {
alert(a + ':' + b)
})
dojo.publish('topic', ['one', 'two']) // => one:two
// Unsubscribing
var handle = dojo.subscribe(...)
dojo.unsubscribe(handle)

10. dojo.xhrGet
Simple AJAX calls
dojo.xhrGet({
url: 'service/sessions/1',
load: function(data) {
logger.log(data)
}
})
// Compared with a raw request
var request = new XMLHttpRequest()
request.open('GET', 'service/sessions/1', true)
request.onreadystatechange = function () {
if (request.readyState == 4) { // 4 = loaded
if (request.status == 200) { // 200 = success
logger.log(request.responseText) // or responseXML
}
}
}
request.send(null)

11. dojo.xhrPost
Posting data using Dojo
dojo.xhrPost({
url: 'service/addSession',
content: {
name: 'Groovy',
speaker: 'Kugan',
date: '17 April 2009 15:00'
},
load: function(data) {
logger.log(data)
}
})

12. dojo.xhrPost form submission
Posting a form using xhrPost
dojo.xhrPost({
url: 'service/addSession',
form: 'formId',
load: function(data) {
logger.log(data)
}
})
This approach takes a regular HTML form and submits it via XHR. Using dojo.
connect can override default form behaviour.
dojo.connect(myForm, 'onsubmit', null, function(e) {
e.preventDefault() // Cancel regular submit
dojo.xhrPost(...) // Submit via XHR
}

13. Dijit
Widgets for Dojo
Dojo provides a wide range of widgets including:
Layout widgets (tabs, accordion, content pane, ...)
Form widgets (drop down button, number spinner, date
pickers, popups)
Strong internationalisation support.
http://dojocampus.org/explorer/ for more examples
All widgets are themeable with Dojo including 3 default themes:
Nihilo
Soria
Tundra

14. Creating tabs
Using dijit.layout.TabContainer
<html>
...
<div id=quot;tabsquot;>
<div id=quot;Runquot;>...</div>
<div id=quot;Instructionsquot;>...</div>
...
</div>
</html>

15. Widgets from code
dojo.require(quot;dijit.layout.TabContainerquot;);
dojo.require(quot;dijit.layout.ContentPanequot;);
dojo.addOnLoad(function() {
// Construct tab content panes
dojo.query(quot;#tabs > divquot;).forEach(function(n) {
new dijit.layout.ContentPane({
title: dojo.attr(n,quot;titlequot;) // Use node title
}, n);
});
// Create outer tab container
var container = new dijit.layout.TabContainer(
{},quot;tabsquot;);
container.startup();
});

16. Widgets from markup
<div id=quot;parseMequot;>
<div id=quot;tabsquot; dojoType=quot;dijit.layout.TabContainerquot;>
<div id=quot;Tab 1quot; dojoType=quot;dijit.layout.ContentPanequot;>
Tab 1 content
</div>
<div id=quot;Tab 2quot; dojoType=quot;dijit.layout.ContentPanequot;>
Tab 2 content
</div>
</div>
</div>
dojo.require('dojo.parser')
dojo.addOnLoad(function() {
dojo.parser.parse(dojo.byId('parseMe'))
})

17. Validated forms
<input id=quot;newSessionStartDatequot; name=quot;startDatequot; type=quot;textquot;
dojoType=quot;dijit.form.DateTextBoxquot; required=quot;truequot;
constraints=quot;{
datePattern:'dd MMM yyyy',
strict:true,max:new Date()
}quot;
invalidMessage=quot;Please enter a date in the format of 'dd MMM yyyy'quot;
promptMessage=quot;Please enter a date.quot;
rangeMessage=quot;Please enter a non-future date.quot;
/>

18. DojoX
quot;The future, todayquot;
Includes new and innovative code that isn't deemed stable
enough for dojo or dijit.
Charting
Grid
Comet (server push)
Offline support / Google gears

19. Charting
Browser independent support for vector graphics.
IE = VML
Firefox, Safari, Opera = SVG
Provides an abstraction API over the underlying drawing
libraries.
http://dojocampus.org/explorer/#Dojox_Charting_2D_Updating

20. Grid
Grid/table widget that has support for editing, sorting and
continuous scrolling.
http://dojocampus.org/explorer/#Dojox_Grid_Edit%20Dijit

21. Including Dojo in your web page
AOL CDN
<script type=quot;text/javascriptquot; src=quot;http://o.aolcdn.com/dojo/1.
2.3/dojo/dojo.xd.jsquot;></script>
http://dev.aol.com/dojo
Google CDN
<script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis.
com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.jsquot;></script>
http://code.google.com/apis/ajaxlibs/documentation/#dojo
Can also use google.load(1.2) to get latest 1.2 release.
Local
<script type=quot;text/javascriptquot; src=quot;/path/to/my/dojo.jsquot;></script>

22. Using Dijit Themes
To have dijits show up correctly you need to include the CSS file for the
theme. Either from a CDN or from a local copy.
<head>
<link rel=quot;stylesheetquot; type=quot;text/cssquot;
href=quot;http://o.aolcdn.com/dojo/1.2.3
/dijit/themes/tundra/tundra.cssquot;/>
...
</head>
<div class=quot;tundraquot;>
<div dojoType=quot;dijit.Xxxquot;></div>
</div>

23. Dojo Web Performance
Each dojo.require() pulls in files one by one causing a slow client.

24. Baking a Profile
Dojo supports layers, where additional functionality can be baked into
a single javascript file to be served efficiently to the client. This file can
then be cached by browsers to makes the page load even faster.
dependencies = {
layers: [
{
name: quot;mylayer.jsquot;,
dependencies: [
quot;dojo.behaviorquot;,
quot;dijit.layout.TabContainerquot;,
quot;dijit.layout.ContentPanequot;
]
}
],
prefixes: [
[ quot;dijitquot;, quot;../dijitquot; ],
[ quot;dojoxquot;, quot;../dojoxquot; ]
]
};

25. Useful links/feeds
http://www.dojotoolkit.org
http://api.dojotoolkit.org
http://dojocampus.org/explorer/
http://dojocampus.org/content/category/dojo-cookies/
http://dev.opera.com/articles/view/introducing-the-dojo-
toolkit/
http://www.javaworld.com/javaworld/jw-01-2009/jw-01-
introduction-to-dojo-1.html
Any questions?