Dojo Toolkit in a nutshell. Part 1.

Dojo Toolkit is open-source collection for JavaScript programming language. It provides a rich set of tools for developers.

The Dojo Toolkit library

The framework includes a number of components.

Widgets (and the Dijit widgets system)

Dojo widgets are composed of JavaScript, HTML and CSS, and there are, among others: menus and tool-tips, sortable tables, dynamic charts and 2D vector graphics, animations, calendars, timers, form elements with validation procedures, etc.

Skins

You can use different skins to change the look of widgets / UI.

Asynchronous communication (client-server)

That is one of the most important capabilities of an application that uses AJAX, traditionally performed using XMLHttpRequest JavaScript.

Wrapper offered by Dojo (dojo.io.bind) allows the use of XMLHttpRequest in different browsers without changing the code. It supports also other methods of transportation (e.g. hidden iframes) and various data exchange formats.

Package system

Dojo offers a package system, so we can put the functionality in separate packages in a modular programming style. Furthermore, it is possible to define dependencies.

Storing data on the server side

In newer versions, the Dojo Toolkit supports data storages on the server side by dojo.data: CsvStore (CSV format), OpmlStore (OPML format), YahooStore, DeliciousStore, RdfStore (RDF).

Support for Adobe Integrated Runtime (AIR)

Dojo Toolkit can be safely used in applications based on Adobe AIR (updated safety rules).

Programming with Dojo Toolkit — quick start

The complete library can be obtained from the official website.

It can also be attached using a CDN, as the following example of a simple HTML5 page.

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Dojo Toolkit!</title>

    <script src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
               data-dojo-config="async: true"></script>
</head>
<body>
    <p id="hello">Todo</p>

</body>
</html>

Waiting for the DOM

We should know it already. Sometimes we need to pause the execution of the code until we make sure that the browser loaded everything, what’s need (JavaScript libraries, HTML document elements, etc).

For example jQuery has the $(document).ready(function() { /* … */ });, Ext JS has Ext.onReady(function() { /* … */ });, and in the Dojo Toolkit this will be done on the basis of attaching the modules (because we need DOM handling in this case).

Example:

require(["dojo/dom", "dojo/domReady!"], function(dom) {
    var hello = dom.byId("hello");
    hello.innerHTML = "Hello Dojo!";
});

Getting the element by ID in Dojo is done through dom.byId(“id_of_element”);.

So here we have an example of how Dojo supports DOM operations, and we can compare it with other libraries.

In addition, I recommend especially two articles from the official Dojo Toolkit website:

– DOM functions in Dojo

– Using dojo/query to work with DOM

Yes, Dojo Toolkit sometimes uses a specific syntax. This gives the programmer the unfamiliar things, or quite different in use than in other JavaScript frameworks.

Summary

Dojo Toolkit is a framework of great capabilities, developed over many years. Interestingly there is a Dojo Foundation, which is a non-profit organization and promotes library and supports open-source projects.

In the second part about Dojo Toolkit, we will concentrate on more practical activities.