unofficial dojo quick start guide v1.0

8/12/2019 Unofficial Dojo Quick Start Guide v1.0

1/14

The unofficial

Dojo Toolkit 1.8

Quick Start Guide

Elia Contini v1.0


2/14

Elia Contini The unofficial Dojo Toolkit 1.8 Quick Start Guide

Index

1. Introduction................................................................................................................................. 3

2. Configure and load Dojo Toolkit..................................................................................................4

2.1. Resources........................................................................................................................... 5

3. AMD: Asynchronous Module Definition...................................................................................... 6

3.1. Resources........................................................................................................................... 7

4. AJAX: Request and Promise...................................................................................................... 8

4.1. Promise............................................................................................................................... 8

4.2. Resources........................................................................................................................... 9

5. Data store................................................................................................................................. 10

5.1. Resources..........................................................................................................................11

6. Managing events...................................................................................................................... 12

6.1. Resources......................................................................................................................... 12

7. Creating widgets....................................................................................................................... 13

7.1. Resources......................................................................................................................... 14

2


3/14


1. Introduction

The Dojo Toolkit (DT) is a JavaScript toolkit that gives to web developers a huge amount of

functionalities and facilities to create rich web applications quickly. One of the big advantages of

Dojo is to provide a uniform and coherent interface upon most famous browsers enabling

developers to concentrate their efforts on application functionalities instead of solving crossbrowser issues. The Dojo Toolkit is divided in three projects:

1. dojo: which includes all basic functionalities to manage Document Object Model (DOM),

arrays, events, asynchronous requests, Cascading Style Sheet (CSS) and more.

2. dijit: it is a rich and well tested set of widgets ready to use. Dijit contains form controls,

data grid and a lot of UI utilities. All widgets are tested to guarantee accessibility.

3. dojox: it provides advanced functionalities and widgets. For instance, in dojox we can

find widgets and utilities to build mobile web applications. Sometimes components ofdojox are experimental.

The main purpose of this guide is to present the most important aspects and functionalities of

Dojo Toolkit providing a guided study path in order to obtain the maximum benefit by the official

Dojo tutorials. All chapters contain links to further resources. Of course, this is not an exhaustive

guide, but only a good starting point to study DT.

The challenge of this guide is to provide self contained (or at least loosely coupled) chapters

long no more than two pages.

Enjoy!

3


4/14


2. Configure and load Dojo Toolkit

Example: 00 - dojoConfig.html

In order to use DT we have to create a project structure like this ( Note: this is only a

suggestion):

myProject|- css|- img|- js| |- lib| | |- dijit| | |- dojo| | `- dojox| `- myWidgets`- index.html

Based on this directory layout, we can define the DT configuration in our index.html file. We will

use HTML5 as markup language.


5/14


parameters used by the Dojo core.

b"se%rl: specify which is the base path to find JavaScript files.

isDeb*g: enable/disable debug messages. During development should be set on true.

"sync: enable/disable asynchronous loading of Dojo modules. It should always set on

true.

"c("ges: specify an alias and the real path (based on b"se%rl) of a package.

In the second script tag we load the Dojo core.

In the third script tag we write our app: we need to specify which modules we need using the

re7*irefunction.

In the example, our application needs the dojo+dom and dojo+dom-"ttr modules. The

dojo+dommodule gives DOM functionalities such as to retrieve tags by id (dom.by:d).

The dojo+dom-"ttrprovides a unified API to deal with DOM node attribute and property

values. We use it to set the inner;T2attribute of the given node.

2.1. Resources

dojoConfig: configuring Dojo, http://dojotoolkit.org/reference-

guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-

the-dojo-core

require: the Dojo AMD Loader, http://dojotoolkit.org/reference-

guide/1.8/loader/amd.html#the-amd-api

dom.byId: a simple alias to document.getElementById, http://dojotoolkit.org/reference-

guide/1.8/dojo/dom.html#dojo-dom-byid

dojo/dom-attr: a unified API to deal with DOM node attribute and property values,

http://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.html#dojo-dom-attr-get

5
http://dojotoolkit.org/reference-guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-corehttp://dojotoolkit.org/reference-guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-corehttp://dojotoolkit.org/reference-guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-corehttp://dojotoolkit.org/reference-guide/1.8/loader/amd.html#the-amd-apihttp://dojotoolkit.org/reference-guide/1.8/loader/amd.html#the-amd-apihttp://dojotoolkit.org/reference-guide/1.8/dojo/dom.html#dojo-dom-byidhttp://dojotoolkit.org/reference-guide/1.8/dojo/dom.html#dojo-dom-byidhttp://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.html#dojo-dom-attr-gethttp://dojotoolkit.org/reference-guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-corehttp://dojotoolkit.org/reference-guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-corehttp://dojotoolkit.org/reference-guide/1.8/dojo/_base/config.html#explicitly-creating-a-dojoconfig-object-before-including-the-dojo-corehttp://dojotoolkit.org/reference-guide/1.8/loader/amd.html#the-amd-apihttp://dojotoolkit.org/reference-guide/1.8/loader/amd.html#the-amd-apihttp://dojotoolkit.org/reference-guide/1.8/dojo/dom.html#dojo-dom-byidhttp://dojotoolkit.org/reference-guide/1.8/dojo/dom.html#dojo-dom-byidhttp://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.html#dojo-dom-attr-get


6/14


7/14


to their aliases to be used inside our code.

The decl"refunction takes three parameters: a string as the name of the module we are

creating, an array of other modules (superclasses) to be extended (in our case is n*ll), an

object that represent our class.

The function constr*ctordefines the constructor of the class. Properties and methods that

starts with =(underscore) indicates private properties and methods by convention.

Now we are able to use our module in our page:

re7*ire83$dojo$0 $dojo+dom-"ttr$0 $my+Circle$50 )*nction8dojo0 "ttr0 Circle9 A"r circle # ne? Circle8B96 A"r res*lt # $Circ*m)erence/ $ circle.getCirc*m)erence89 $


8/14


. A!A": #e$uest and %ro&ise

Example: 02 - Request Promise.html

Modern web applications perform asynchronous requests to the server. DT provides a module

called dojo+re7*estto execute this kind of requests. In the example, we request information

about books. The boo(.jsonfile contains data with the following structure:

3 $:D$/ ,0 $Title$/ $oo( , Title$0 $P*blisher$/ $oo( , P*blisher$0 $City$/ $oo( , City$0 $1*thors$/ $1*thor ,0 1*thor @$0 $Ye"r$/ $@EE,$

40 ...5

Our script reads the data and prints the title of each book on the page.

re7*ire83$dojo$0 $dojo+=b"se+"rr"y$0 $dojo+dom-constr*ct$0$dojo+re7*est$50

)*nction8dojo0 "rr"y0 dom0 re7*est9 A"r getD"t" # re7*est.get8$boo(.json$0 h"ndle1s/ $json$

496

getD"t".then8)*nction8resonse9 A"r cont"iner # dojo.by:d8$test$96 "rr"y.)or"ch8resonse0 )*nction8boo(0 index9 dom.cre"te8$diA$0 $inner;T2$/ boo(.Title40 cont"iner96 496 496 496

The get89method returns a Promiseobject. Once the request was performed it is possible tocall a function in order to manage the response. The method then89enables us to specify a

callback to execute when data are available (Note: ."ddC"llb"c(89 and ."ddrrb"c(89

are no longer available).

4.1. Promise

The dojo+romisemodule manages communication between asynchronous threads. When

we call re7*est.get8*rl0 otions9, a romiseobject is returned. Sometimes we have

to request multiple resources and wait that all are retrieved. The promise module provides a

useful method function called "ll89 (Note: dojo+romise+"ll replaces

8


9/14


dojo+De)erredist). For example:

re7*ire83$dojo+romise+"ll$0 $dojo+re7*est$50 )*nction8re7*est0 "ll9 A"r romise, # re7*est.get8$boo(.json$0 h"ndle1s/ $json$496 A"r romise@ # re7*est.get8$Aideo.json$0 h"ndle1s/ $json$496 "ll83romise,0 [email protected])*nction8res*lts9++ res*lts ?ill be "n 1rr"y496

4.2. Resources

dojo/request: the Dojo IO/Request API, http://dojotoolkit.org/reference-

guide/1.8/dojo/request.html

dojo/promise: communication between asynchronous threads,

http://dojotoolkit.org/reference-guide/1.8/dojo/promise.html

dojo/promise/all: manages multiple promises, http://dojotoolkit.org/reference-

guide/1.8/dojo/promise/all.html

9
http://dojotoolkit.org/reference-guide/1.8/dojo/request.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/request.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/promise.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/promise/all.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/promise/all.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/request.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/request.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/promise.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/promise/all.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/promise/all.html


10/14


'. Data store

Example: 03 - Data Store.html

DT gives an elegant way to manage a data collection. For example, once we retrieve data in

JSON format, we can create a data store and query it as we do with a DBMS.

re7*ire83$dojo+store+2emory$0 $dojo+re7*est$50 )*nction82emory0 re7*est9 A"r boo(s # n*ll6 A"r getD"t" # re7*est.get8$boo(.json$0 h"ndle1s/ $json$496

getD"t".then8)*nction8resonse9 boo(s # ne? 2emory8$d"t"$/ resonse0 $idProerty$/ $:D$496

++ retrieAes "ll boo(s A"r "lloo(s # boo(s.7*ery8496

++ retriAes boo( ?ith :D ,

A"r boo(, # boo(s.get8,96 ++ :D # ,

++ s"Ae *d"ted d"t" on the store boo(,.Title # $Title *d"ted$6 boo(s.*t8boo(,96

A"r ne?oo( # $:D$/ ,E0 $Title$/ $%no))ici"l Dojo Tool(it ,.' F*ic( Gt"rt H*ide$0

$P*blisher$/ $li" Contini$0 $City$/ $Hi*bi"sco$0 $1*thors$/ $li" Contini$0 $Ye"r$/ $@E,@$ 4

++ insert " ne? boo( boo(s."dd8ne?oo(96

++ remoAe boo( ?ith id I boo(s.remoAe8I96 496496

When we create a Memory store we have to specify two parameters:

d"t": an array of objects;

idProerty: the name of the property to use as the identifier (key).

10


11/14


5.1. Resources

dojo/store: an uniform interface for the access and manipulation of stored data,

http://dojotoolkit.org/reference-guide/1.8/dojo/store.html

dojo/store/Memory: an object store wrapper for JavaScript/JSON available directly with

an array, http://dojotoolkit.org/reference-guide/1.8/dojo/store/Memory.html

11
http://dojotoolkit.org/reference-guide/1.8/dojo/store.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/store/Memory.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/store.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/store/Memory.html


12/14


(. Managing e)ents

Example: 04 - Events.html

From version 1.8, Dojo Toolkit provides a new unified module to manage events. In the example

we can see how to use the on module. The HTML code is:


13/14


*. Creating +idgets

Example: 05 - Custom Widget.html

From version 1.6, the Dojo team started the refactoring of Dojo Toolkit in order to make it

compliant with the CommonJS AMD API. AMD allows to create more efficient scripts, to use

different toolkits in the same web application avoiding conflicts and much more. In version 1.7,

the refactoring has been completed and this release is also the base to start the migration to

Dojo 2.0. Of course, in Dojo 1.8 we have to write AMD module.

We will create a simple widget that displays the classical Hello, world!

Based on the directory layout that we saw in chapter 2, we create a file called ;elloWorld.js

and save it in myProject+lib+myWidgets+directory.

Inside ;elloWorld.jswe can write these lines of code:

de)ine83$dijit+=Widget"se$0 $dijit+=Teml"ted2ixin$0$dojo+=b"se+decl"re$0 $dojo+dom-"ttr$50)*nction8=Widget0 =Teml"ted0 decl"re0 dom1ttr9 ret*rn decl"re8$myWidgets.;elloWorld$0 3=Widget0 =Teml"ted50 teml"teGtring/ J


14/14


And to see the result, we have to write this piece of code in our page:

re7*ire83$dojo$0 $dojo+dom$0 $my+;elloWorld$50 )*nction8dojo0 dom0 ;elloWorld9 A"r helloWorld # ne? ;elloWorld896 helloWorld.l"ce1t8dom.by:d8$test$996 helloWorld.st"rt*896

496

7.1. Resources

dojo/dom-attr: the core Dojo DOM attributes API, http://dojotoolkit.org/reference-

guide/1.8/dojo/dom-attr.html

Asynchronous Module Definition (AMD):Notes on Dojo,

http://blog.eliacontini.info/post/16352021810/notes-on-dojo-asynchronous-module-

definition-amd

Creating Template-based Widgets: the official tutorial,

http://dojotoolkit.org/documentation/tutorials/1.8/templated/

14
http://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.htmlhttp://blog.eliacontini.info/post/16352021810/notes-on-dojo-asynchronous-module-definition-amdhttp://blog.eliacontini.info/post/16352021810/notes-on-dojo-asynchronous-module-definition-amdhttp://dojotoolkit.org/documentation/tutorials/1.8/templated/http://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.htmlhttp://dojotoolkit.org/reference-guide/1.8/dojo/dom-attr.htmlhttp://blog.eliacontini.info/post/16352021810/notes-on-dojo-asynchronous-module-definition-amdhttp://blog.eliacontini.info/post/16352021810/notes-on-dojo-asynchronous-module-definition-amdhttp://dojotoolkit.org/documentation/tutorials/1.8/templated/

unofficial dojo quick start guide v1.0

Documents