I made a change in the blogger configuration to ease the later work when blogging. It is possible that older entries are not correctly formatted.

Friday 23 April 2010

Dojo Toolkit - Basics

This is a high level overview of the dojo toolkit.

  • Function called on load
  • package framework
  • a DOM element retrieval mechanism
  • a number of Widgets
  • Helper Methods
  • Dojo Array Methods
  • dojo.connect - Event mechanism
  • Parsing, formatting and validation of numbers and dates
  • Ajax request tools
  • An history and bookmarking mechanism
  • Event System tools
  • Animation tools
  • I18n tools (Internationalization)

Loading the dojo code

The code of dojo can be loaded from http://ajax.googleapis.com/ajax/libs/dojo/1.4/dojo/dojo.xd.js. I would like to try loading it from the web server.

Function called on load

As for other web frameworks, you can have different function called on load:

dojo.addOnLoad(funtion( // code to perform on load ));

package framework

The dojo toolkit provides a package mechanism, the code is used in the following way:

dojo.require('dojo.fx');
loads the dojo.fx package.

a DOM element retrieval mechanism

Dojo provides a number of methods to retrieve elements of the DOM document. For instance, dojo.byId('myId'); retrieves the element with the id 'myId' just as document.getElementById would.

Just as other frameworks dojo provides also a query mechanism.

From the dojo documentation:

// all <h3> elements
dojo.query('h3')
// all <h3> elements which are first-child of their parent node
dojo.query('h3:first-child')
// a node with id="main"
dojo.query('#main')
// all <h3> elements within a node with id="main"
dojo.query('#main h3')
// a <div> with an id="main"
dojo.query('div#main')
// all <h3> elements within a div with id="main"
dojo.query('div#main h3')
// all <h3> elements that are immediate children of a <div>, within node with id="main"
dojo.query('#main div > h3')
// all nodes with class="foo"
dojo.query('.foo')
// all nodes with classes "foo" and "bar"
dojo.query('.foo.bar')
// all <h3> elements that are immediate children of a node with id="main"
dojo.query('#main > h3')

A number of Widgets

The dojo toolkit provides a number of widgets. These can be retrieved by the dijit.byId() method.

Dojo Array Methods

Dojo provides some other useful methods for example: dojo.forEach(). A similar method can be used on the resuklt of a dojo.query().

Dojo also provides filter and map functions. filters an array and returns all the elements verifying a given property. The map function applies some function on all the elements of an array and returns a new array of new values.

The functions dojo.some() and dojo.every() checking that some property is true for some, respectively all the elements of the array

dojo.connect - Event mechanism

The dojo toolkit provides the dojo.connect methods which allows to connect some event to a given event.

Parsing, formatting and validation of numbers and dates

Ajax request tools

An history and bookmarking mechanism

Event System tools

Animation tools

I18n tools (Internationalization)