Using Dojo

56 %
44 %
Information about Using Dojo

Published on February 15, 2009

Author: rapaul


Richard Paul Kiwiplan NZ Ltd 17 Feb 2009

Dojo Tookit 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. -- Current version: 1.2.3 Next 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. -- // 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.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. -- // 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')

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)

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

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

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

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)

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

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 }

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. for more examples All widgets are themeable with Dojo including 3 default themes: Nihilo Soria Tundra

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

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(); });

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')) })

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; />

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

Charting Browser independent support for vector graphics. IE = VML Firefox, Safari, Opera = SVG Provides an abstraction API over the underlying drawing libraries.

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

Including Dojo in your web page AOL CDN <script type=quot;text/javascriptquot; src=quot; 2.3/dojo/dojo.xd.jsquot;></script> Google CDN <script type=quot;text/javascriptquot; src=quot;http://ajax.googleapis. com/ajax/libs/dojo/1.2.3/dojo/dojo.xd.jsquot;></script> 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>

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; /dijit/themes/tundra/tundra.cssquot;/> ... </head> <div class=quot;tundraquot;> <div dojoType=quot;dijit.Xxxquot;></div> </div>

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

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; ] ] };

Useful links/feeds toolkit/ introduction-to-dojo-1.html Any questions?

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

Dojo Toolkit

A Toolkit by the Dojo Foundation featuring DHTML and AJAX functions. The site features demos, downloads, help on getting started, documentation, support ...
Read more

Hello Dojo! - Dojo Toolkit Tutorial

Hello Dojo! Welcome to Dojo! In this tutorial, you’ll learn how to load Dojo and begin exploring some of its core functionality. You’ll also learn ...
Read more


ClassDojo helps teachers, parents, and students build amazing classroom communities. ClassDojo Toggle navigation. Learn more; Teacher resources; Log in ...
Read more

Karate Dojo Usingen e.V.

Herzlich Willkommen – 歓. Karate – für die einen ein Synonym für Agilität, Disziplin und Perfektion, für die anderen pure Lebensfreude und Spaß ...
Read more

The Dojo Toolkit - Demos Index

The Dojo Toolkit Demo Index. Skip to Content | Skip to Navigation. Download; Features; ... twitterverse Aggregate Twitter information about Dojo, using Dojo;
Read more

Telerik Kendo UI Dojo

The Kendo UI Dojo is an interactive environment designed to help you get up and running quickly with Telerik Kendo UI.
Read more

Using Dojo for Client-Side Validation | WebReference

Client-side form validation is quick and reduces the load on the server. This tutorial explains how to use the Dojo JavaScript library for these types of ...
Read more

Using dojo/aspect - David Walsh Blog - JavaScript Consultant

One of those tools includes Dojo 1.7's aspect, a module that allows developers to react to function calls by executing another function before or after ...
Read more

| Getting Started with Persevere Using Dojo | Blog | SitePen

This post is written for Persevere 1.0 and Dojo 1.3. If you want to get started with Persevere 2.0 (recommended), take a look at this post. Dojo 1.6 and ...
Read more