using dojo

Richard PaulKiwiplan NZ Ltd

17 Feb 2009

Dojo Tookithttp://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.3Next version: 1.3.0

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(...)

dojo.NodeListdojo.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 listdojo.query('ol li, ul li').forEach(function() { })

// Empty the snippet listdojo.query('#snippets').empty()

// Use camel-case naming to set CSS propertiesdojo.query('#snippets li').style('backgroundColor', 'blue')

dojo.NodeList-fxFancy animations for your nodelist

// Include the NodeList animation package dojo.require("dojo.NodeList-fx"); // Fade out all itemsdojo.query('.items').fadeOut() // Opposite is fadeIn // Wipe out all itemsdojo.query('.items').wipeOut() // Opposite is wipeIn // Animate CSS propertiesdojo.query('#item').anim({width: '800', height: '300'}) // Even works for colours and for custom durationsdojo.query('#output').anim({backgroundColor: '#afa'}, 4000)

Declaring ClassesCreating 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')

dojo.connect

Allows function to be trigger when event occur.

// Call logger.clear() when terminal.load() is calleddojo.connect(terminal, 'load', logger, 'clear') Passes the same arguments as passed to load to the clear function. terminal.load('mySnippet') // => log is cleared

dojo.behaviorUnobtrusive 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()

Dojo Topicsdojo.publish, dojo.subscribe

Anonymous communication is available in Dojo via topics.

// Set up subsciberdojo.subscribe('topic', object, 'method')// Publish data to the topicdojo.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 // Unsubscribingvar handle = dojo.subscribe(...)dojo.unsubscribe(handle)

dojo.xhrGetSimple AJAX calls

dojo.xhrGet({ url: 'service/sessions/1', load: function(data) { logger.log(data) }})

// Compared with a raw requestvar 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)

dojo.xhrPostPosting 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) }})

dojo.xhrPost form submissionPosting 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 }

DijitWidgets 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:

Tundra Soria Nihilo

Creating tabsUsing dijit.layout.TabContainer

<html> ... <div id="tabs"> <div id="Run">...</div> <div id="Instructions">...</div> ... </div></html>

Widgets from code

dojo.require("dijit.layout.TabContainer");dojo.require("dijit.layout.ContentPane");dojo.addOnLoad(function() { // Construct tab content panes dojo.query("#tabs > div").forEach(function(n) { new dijit.layout.ContentPane({ title: dojo.attr(n,"title") // Use node title }, n); }); // Create outer tab container var container = new dijit.layout.TabContainer( {},"tabs"); container.startup();});

Widgets from markup

<div id="parseMe"> <div id="tabs" dojoType="dijit.layout.TabContainer"> <div id="Tab 1" dojoType="dijit.layout.ContentPane"> Tab 1 content </div> <div id="Tab 2" dojoType="dijit.layout.ContentPane"> Tab 2 content </div> </div></div>

dojo.require('dojo.parser')dojo.addOnLoad(function() { dojo.parser.parse(dojo.byId('parseMe'))})

Validated forms<input id="newSessionStartDate" name="startDate" type="text" dojoType="dijit.form.DateTextBox" required="true" constraints="{ datePattern:'dd MMM yyyy', strict:true,max:new Date() }" invalidMessage="Please enter a date in the format of 'dd MMM yyyy'" promptMessage="Please enter a date." rangeMessage="Please enter a non-future date."/>

DojoX"The future, today"

Includes new and innovative code that isn't deemed stable enough for dojo or dijit.

ChartingGridComet (server push) Offline support / Google gears

ChartingBrowser independent support for vector graphics.

IE = VMLFirefox, Safari, Opera = SVG

Provides an abstraction API over the underlying drawing libraries.

http://dojocampus.org/explorer/#Dojox_Charting_2D_Updating

GridGrid/table widget that has support for editing, sorting and continuous scrolling.

http://dojocampus.org/explorer/#Dojox_Grid_Edit%20Dijit

Including Dojo in your web page

AOL CDN<script type="text/javascript" src="http://o.aolcdn.com/dojo/1.2.3/dojo/dojo.xd.js"></script>http://dev.aol.com/dojo Google CDN<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.js"></script>http://code.google.com/apis/ajaxlibs/documentation/#dojoCan also use google.load(1.2) to get latest 1.2 release. Local<script type="text/javascript" src="/path/to/my/dojo.js"></script>

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="stylesheet" type="text/css" href="http://o.aolcdn.com/dojo/1.2.3/dijit/themes/tundra/tundra.css"/> ... </head>

<div class="tundra"> <div dojoType="dijit.Xxx"></div></div>

Dojo Web Performance

Each dojo.require() pulls in files one by one causing a slow client.

Baking a ProfileDojo 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: "mylayer.js", dependencies: [ "dojo.behavior", "dijit.layout.TabContainer", "dijit.layout.ContentPane" ] } ], prefixes: [ [ "dijit", "../dijit" ], [ "dojox", "../dojox" ] ]};

Useful links/feeds

http://www.dojotoolkit.orghttp://api.dojotoolkit.orghttp://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?