Dojo javascript toolkit

Dojo Toolkit
Predhin Tom Sapru

Do you know?
HTML JavaScript
Ajax
DOM
Web Browsers
HTML Events

Hmm Should I use Dojo?
• Dojo saves time and scales with the web development
process, using web standards as its platform. It’s the toolkit
experienced developers turn to for building high quality
desktop and mobile web applications
• 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
Dojo Supports

Browser gaps
• Ajax
• CSS(class manipulations/reset, CSSOM)
• DOM(Events, Node lookups, placements, attributes)
• Language Awkwardness (type detection, dates)
• Forward looking API(animation, vector graphics, querying,
widgets, charts etc.)

What is Dojo?
– Dojo is JavaScript framework released as open source
software. This JavaScript toolkit provides many
components to develop rich internet applications.
– You can use Dojo toolkit to develop dynamic web
applications. Dojo toolkit will put life in your web
application and turn it into highly interactive application.
You can turn your web application into desktop like web
application.
– Dojo offers many widgets, utilities and ajax libraries to
develop your application.
– Dojo is released under BSD or AFL license
– Dojo is free and can be used to develop free or commercial
application.

What are the features of Dojo?
•Dojo's powerful, lightweight core makes common tasks quicker and easier
Powerful APIs
•Don’t spend hours reinventing the wheel, use Dojo’s widget system Dijit
for commonly used form widgets like calendars, input validation and
more..
Rich UI Widgets
•Use and modify Dojo in commercial and Open Source software with
confidence
Open Source
•Provides support for both desktop and mobile applications
Desktop, Mobile
•Create enterprise grade apps with grids and charts that work across
browsers and can handle any data thrown at it
Grids and Charts
• Only load the capabilities you need, all asynchronously and FAST
Asynchronous Loading

What is the history of Dojo?
• Alex Russell, David Schontzler, and Dylan Schieman started
work on the Dojo framework by in 2004 while working for
Informatica. Later many other developers started contributing
to Dojo. In 2005, the Dojo foundation was formed to house
the code and manage intellectual-property rights. So far,
eleven major releases have been issued, and the framework
has been downloaded more than 1 million times. Companies
such as IBM, AOL, Sun, SitePen, Blogline, Google, Nextweb,
and others contribute to the Dojo framework.

Still Why Choose Dojo?
• Breadth and Depth: Dojo is the “full stack”. Instead of
cobbling together components from several different sources,
Dojo allows each component to build on a trusted set of high-
quality building blocks by providing integrated infrastructure
and a wide variety of optional modules.
• Quality: Infrastructure for internationalization and
accessibility is woven through the entire fabric of Dojo.
• Performance: Dojo is used on high-profile, high-traffic sites
every day and Dojo’s build tools are a key reason why. Dojo’s
package system makes it easy to manage large-scale UI
development projects and the build system layers on top to
make your applications scream; all without code changes.

Why Choose Dojo?
• Community: Dojo is an open community. As a result many
individuals and companies have been able to come together
on a level playing field to build tools that benefit everyone.
• Asynchronous Module Definition (AMD): API for defining
reusable modules that can be used across different
frameworks. AMD was developed to provide a way to define
modules such that they could be loaded asynchronously using
the native browser script element-based mechanism.

What is the architecture of Dojo?

What are the different layers of Dojo?
• As a framework, Dojo has three main components:
• The Dojo core provides core functionality such as ability to
make remote method calls, manipulate DOM node, and
manipulate Cascading Style Sheets (CSS). The Dojo core also
supports animation features and drag-and-drop functionality.
• Dijit is Dojo's widget library, built on top of the Dojo core. Dijit
provides template-based, accessible widgets, not only for
simple form control but also advanced widgets such as
calendar control, menus, toolbars, progress bars, charts, and
graphs.
• DojoX is a container for developing extensions to the Dojo
toolkit. It acts as an incubator for new ideas and a testbed for
experimental additions to the main toolkit, as well as a
repository for more stable and mature extensions.

How can I get Dojo?
Step 1: Got to the Dojo Toolkit download
link : http://dojotoolkit.org/download/
Step 2: Download dojo 1.9 JS files
Step 3: Extract the dojo1.9 ZIP file
Step 4 : Dojo, Dijit, Dojox folders
will be available

How can I setup Dojo?
• Setting up a development environment for a JavaScript
framework like Dojo is a little different from doing so for Java
SE or EE frameworks/ ASP.NET/PHP applications.
• The Dojo toolkit depends on set of JavaScript, CSS, and HTML
files to be available in a predefined directory structure at
runtime. You can install Dojo in one of two ways:
* Use Dojo from a content-delivery network (CDN)
* Install the latest development build on your server

How to load Dojo?
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Tutorial: Hello Dojo!</title>

<script src="../dojo/dojo.js"
data-dojo-config="async: true"></script>
</head>
<body>
<h1 id="greeting">Hello</h1>
</body>
</html>

What is dojoConfig ?
• dojoConfig object (known as djConfig prior to Dojo 1.6) is the primary
mechanism for configuring Dojo in a web page or application. It is
referenced by the module loader, as well as Dojo components with global
options.
• http://dojotoolkit.org/reference-guide/1.9/dojo/_base/config.html
• 
dojoConfig= {
has: {
"dojo-firebug": true
},
parseOnLoad: false,
foo: "bar",
async: true
};

What are dojoConfig has() Configuration
?
• We can specify features for the has() feature set in dojoConfig
• https://dojotoolkit.org/documentation/tutorials/1.9/dojo_config/
• This feature set is now used for determining certain supported capabilities in Dojo.
• Example we can disable or enable debug messages
<script>
dojoConfig = {
has: {
"dojo-debug-messages": true
}
};
</script>
• dojo-firebug : To enable debugging assistance with Firebug Lite for older versions of
Internet Explorer
• dojo-debug-messages : To log debug messages
• debugContainerId: specify a particular element to contain the console UI.
• popup: use a popup window rather than rendering the console into the current window

What is dojoConfig Loader
Configuration?
• New loader added a few new configuration options that are crucial to defining
packages, aliases, and more.
• baseUrl: The base URL prepended to a module identifier when converting it to a
path or URL.
baseUrl: "/js”
• packages: An array of objects which provide the package name and location:
packages: [{
name: "myapp",
location: "/js/myapp"
}]
• aliases: Allows you to alias modules by another name
aliases: [
// [alias name, true name]
["cookie", "dojo/cookie"]
]

What are common dojoConfig properties?
• async: Defines if Dojo core should be loaded asynchronously.
async: true
• deps: An array of resource paths which should load immediately once Dojo has loaded
deps: ["dojo/parser“]
• parseOnLoad: If true, parses the page with dojo/parser when the DOM and all initial dependencies
(including those in the dojoConfig.deps array) have loaded.
parseOnLoad: true
• callback: The callback to execute once deps have been retrieved:
callback: function(parser) { }
• waitSeconds: Amount of time to wait before signaling load timeout for a module; defaults to 0
(wait forever): waitSeconds: 5
• cacheBust: If true, appends the time as a querystring to each module URL to avoid module caching:
cacheBust: true

Give an example of dojoConfig sample code?
<script>
dojoConfig = {
has: {
"dojo-firebug": true,
"dojo-debug-messages": true
}, // Don't attempt to parse the page for widgets
parseOnLoad: false,
packages: [ {
name: "demo",
location: "/documentation/tutorials/1.9/dojo_config/demo"
} ], // Timeout after 10 seconds
waitSeconds: 10,
aliases: [ // Instead of having to type "dojo/domReady!", we just want "ready!" instead
["ready", "dojo/domReady"]
], // Get "fresh" resources
cacheBust: true
};
</script>
<script src="http://ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"></script> <script>
require(["demo/AuthoredDialog", "dojo/parser", "ready!"], function(AuthoredDialog, parser) {
// Parse the page
parser.parse();
// Do something with demo/AuthoredDialog...
});
</script>

Where to start Dojo from?
<html>
<head>
<title>Welcome to Dojo 1.9 </title>
<script
src="//ajax.googleapis.com/ajax/libs/dojo/1.9.1/dojo/dojo.js"
data-dojo-config="async: true"></script>
</head>
<body>
<h1 id="Welcome">Welcome to Dojo Toolkit 1.9</h1>
</body>
</html>

What is AMD?
• The Asynchronous Module Definition (AMD) API specifies
a mechanism for defining modules
• Using AMD the module and its dependencies can be
asynchronously loaded.
• This is particularly well suited for the browser
environment where synchronous loading of modules
incurs performance, usability, debugging, and cross-
domain access problems.

What is AMD?
• The AMD API is the preferred loader API and is exposed through two
global functions, require and define. Both functions are normally
asynchronous. When running in legacy loader API mode, however, they
may operate synchronously in order to allow AMD modules to be accessed
by legacy code.
• In order to actually require and define modules for use, two global
functions are provided by the loader
• define, which is used to define a module.
• require, which is used to load one or more modules
• require is used to configure the loader and load AMD modules. It has the
following signature:
• require( configuration, // (optional; object) configuration object
dependencies, // (optional; array of strings) list of module identifiers to
load before calling callback callback // (optional; function) function to call
when dependencies are loaded ) -> undefined

What is AMD?
• define is very similar to require and is used to define AMD
modules. It has the following signature:
• define( moduleId, // (optional; string) an explicit module
identifier naming the module being defined dependencies, //
(optional; array of strings) list of module identifiers to load
before calling factory factory // (function or value) the value
of the module, or a function that returns the value of the
module )
• Module creation is lazy and asynchronous, and does not occur
immediately when define is called.

What is AMD?
• Once a module value has been entered into the module
namespace, it is not recomputed each time it is demanded.
• Plugins can be used to extend the loader to support loading
resources other than AMD modules:
• dojo/domReady, dojo/text, dojo/i18n, dojo/has, dojo/sniff,
dojo/require
• When a module identifier passed to require or define contains
an "!", the loader splits the string in two at the exclamation
point. The string to the left of "!" is treated like a normal
module ID and is used as the identifier for the desired plugin;
the string to the right of "!" is passed to the plugin for
processing.

How to define module demo/myModule in file
demo/myModule.js?
define(["dojo/dom" ], function(dom){
var oldText = {};
return {
setText: function(id, text){
var node = dom.byId(id);
oldText[id] = node.innerHTML;
node.innerHTML = text;
},
restoreText: function(id){
var node = dom.byId(id);
node.innerHTML = oldText[id];
delete oldText[id];
}
};
});

How to require module
demo/myModule?
• Now that we’ve defined this module, we can load and use it in
some actual code
// Require the module we just created
require(["demo/myModule"], function(myModule){
// Use our module to change the text in the greeting
myModule.setText("greeting", "Hello Dojo!");
// After a few seconds, restore the text to its original state
setTimeout(function(){
myModule.restoreText("greeting");
}, 3000);
});

Is dojo supporting OOPS?
• dojo/_base/declare module is the foundation of class creation
• The declare function is defined in
the dojo/_base/declare module. declare accepts three
arguments: className, superClass, and properties.
// Create a new class named
"mynamespace.MyClass"
declare("mynamespace.MyClass", null, {
// Custom properties and methods here
});

How is inheritance done in Dojo?
• Declare with null or other class as first argument assumes
there is no class extended
var MyClass = declare(null, {
// Custom properties and
methods here
});
var MySubClass = declare(MyClass, {
// MySubClass now has all of MyClass's
properties and methods
// These properties and methods override
parent's
});

Does dojo support Multiple
Inheritance?
• array of classes signifies multiple inheritance
var MyMultiSubClass = declare([
MySubClass,
MyOtherClass,
MyMixinClass
],{
// MyMultiSubClass now has all of the properties and
methods from:
// MySubClass, MyOtherClass, and MyMixinClass
});

How to create a simple class with
inheritance?
define([
"dojo/_base/declare",
"dijit/form/Button"
], function(declare, Button){
return declare("mynamespace.Button", Button, {
label: "My Button",
onClick: function(evt){
console.log("I was clicked!");
this.inherited(arguments);
}
});
});

How to write a constructor in Dojo?
// Create a new class
var Twitter = declare(null, {
// The default username
username: "defaultUser",
// The constructor
constructor: function(args){
declare.safeMixin(this,args);
}
});

How to theme in Dojo?
• Dijit includes a theming framework that allows a user to define.
• Dijit includes four themes to choose from: Claro, Tundra, Soria, and Nihilo.
• Include the theme css file
• <link rel="stylesheet"
href="http://ajax.googleapis.com/ajax/libs/dojo/1.7.1/dijit/themes/claro/claro.css">
• Include the theme class name in the body tag
<body class="claro">
<h1 id="greeting">Hello</h1>
</body>

How to use Dojo to manipulate the DOM in a
simple, cross-browser way?
• As far as browser-based JavaScript is concerned, the
Document Object Model (DOM) is the glass that we paint.
• Dojo aims to make working with the DOM easy and efficient.
• Provides a handful of convenience functions that fill some
awkward cross-browser incompatibilities and make common
operations simpler and less verbose.
• There are four operations of Javascript on DOM using Dojo :
– Retrieval
– Creation
– Placement
– Destruction

How to use Dojo to manipulate the
DOM in a simple, cross-browser way?
• We need to know how to get elements from the DOM, in
order to work with them.
• Dojo provides dojo/dom resource's byId method .
• When you pass an ID to dom.byId, you will receive the
DOM node object with that ID.
• If no matching node is found, a null value will be
returned.
• This is the equivalent of using document.getElementById,
but with two advantages.
– It is shorter to type. 
– It works around some browsers' buggy implementations of
getElementById

simple, cross-browser way(Retrieval)?
require(["dojo/dom", "dojo/domReady!"],
function(dom) {
function setText(node, text){
node = dom.byId(node);
node.innerHTML = text;
}
var one = dom.byId("one");
setText(one, "One has been set");
setText("two", "Two has been set as well");
});

simple, cross-browser way(Creation)?
• Dojo’s dojo/dom-construct's create method a more
convenient and reliable option.
• The arguments to domConstruct.create are as follows
– node name as a string,
– properties of the node as an object,
– an optional parent or sibling node,
– and an optional position in reference to the parent or
sibling node (which defaults to "last").
• http://dojotoolkit.org/reference-guide/1.9/dojo/dom-
construct.html

simple, cross-browser way(Creation)?
require(["dojo/dom", "dojo/dom-construct",
"dojo/domReady!"],
function(dom, domConstruct) {
var list = dom.byId("list");
domConstruct.create("li", {
innerHTML: "Six“
}, list);
});

simple, cross-browser way(Placement)?
• Dojo’s dojo/dom-construct's place method is used to place
the node.
– The arguments to domConstruct.place are as follows
– A DOM node or string ID of a node to place.
– A DOM node or string ID of a node to use as a reference.
– An optional position as a string which defaults to "last" if
not provided. Options (before,after,first)
• domConstruct.create uses domConstruct.place under the
hood.

simple, cross-browser way(Destruction)?
• To remove nodes dojo provides two ways :
– domConstruct.destroy which will destroy a node and all of
its children.
– domConstruct.empty will only destroy the children of a
given node.
• Both take a DOM node or a string ID of a node as their only
argument.

simple, cross-browser way(Destruction)?
require(["dojo/dom", "dojo/dom-
construct", "dojo/domReady!"],
domConstruct.destroy("list");
domConstruct.empty("list");
});

How to query a DOM?
• It's important to be able to retrieve nodes quickly and
efficiently.
• Covered one option dom.byId. However, coming up with
unique IDs for every node in your application can be a
daunting and impractical task.
• It would also be inefficient to find and operate on
multiple nodes by ID alone.
• The dojo/query module uses familiar CSS queries (which
you use in your stylesheets) to retrieve a list of nodes,
including support for advanced CSS3 selectors!
• Require the query module in dependency array to work
with query in Dojo.

How to query a DOM?
require(["dojo/query", "dojo/domReady!"],
function(query) {
// retrieve an array of nodes with the ID
“username"
var usrName = query(“#userName“)[0];
})
<input type=“text” id=“userName”
value=“Predhin”/>

How to query a DOM?
• retrieve an array of nodes with the class name "odd"
var odds = query(".odd");
• // retrieve an array of nodes with the class name "odd" from the first a
particular id “list” using a selector
var odds1 = query("#list .odd");
• // Retrieve an array of any a element that has an li as its ancestor.
var allA = query("li a");
• // Retrieve an array of any a element that has an li as its direct
ancestor.
var someA = query("li > a");

How to query a DOM?
• NodeList has methods that match the Dojo array helper
methods. One such method is forEach.
query(".odd").forEach(function(node, index, nodelist){
// for each node in the array returned by query,
// execute the following code
domClass.add(node, "red");
});
• Where node is the current node, Index of the current node,
nodelist is the entire set of selected nodes.

How to query a DOM(Node List Extensions)?
• Because each query call returns a NodeList, we can make this
even simpler by chaining method calls
query("li.fresh").on("click", function(evt){
alert("I love fresh " +
this.innerHTML);
});

How to query a DOM(Node List DOM
Extensions)?
• The dojo/Nodelist-dom contains DOM methods such as
addClass, removeClass, attr, style, empty, and place which
work on NodeList.
require(["dojo/query", "dojo/NodeList-dom"],
function(query) {
query("li.fresh")
.addClass("fresher")
.attr("title", "freshened")
.style("background", "lightblue")
.on("click", function(evt){
alert("I love fresh " +
this.innerHTML);
});
});

How to query a DOM(Animating)?
• The dojo/NodeList-fx module augments NodeList with a series of methods that
allow you to apply effects from Dojo’s effects system to a collection of nodes.
require(["dojo/query", "dojo/NodeList-fx", "dojo/domReady!"],
function(query) {
query("#btn").on("click", function(){
query("li.fresh")
.slideTo({
left: 200,
auto: true
}) .animateProperty({
properties: {
backgroundColor: { start: "#fff", end: "#ffc" }
}
}) .play();
});
});

How to query a DOM(Add data to DOM)?
• The dojo/NodeList-data module adds a mechanism for attaching arbitrary data to
elements via the data method
require(["dojo/query", "dojo/NodeList-data", "dojo/domReady!"], function(query,
NodeList) {
function mark(evt){
var nodeList = new NodeList(this); // make a new NodeList from the clicked
element
nodeList.data("updated", new Date()); // update the 'updated' key for this element
via the NodeList
}
query("li") // get all list items
.data("updated", new Date()) // set the initial data for each matching element
.on("click", mark); // add the event handler
query("#btn").on("click", function(){
query("li").data("updated").forEach(function(date){
console.log(date.getTime());
});
});
});

How to query a DOM(Add data to DOM)?
• no automatic node-deletion tracking going on. If you bind data to a node, and
destroy that node directly or indirectly, the data will persist in the cache
• call _gcNodeData() at any time. It will remove items from the cache for nodes that
no longer exist in the DOM
• highly recommended you manually manage your Data items if in a scenario
leading to these potential “leaks”.
•
require(["dojo/_base/kernel", "dojo/NodeList-data"], function(kernel){
kernel._gcNodeData();
});

How to attach events in Dojo?
• dojo/on module provides methods to register events.
• http://dojotoolkit.org/reference-guide/1.9/dojo/on.html
require(["dojo/on", "dojo/dom", "dojo/dom-style",
"dojo/mouse", "dojo/domReady!"],
function(on, dom, domStyle, mouse) {
var myButton = dom.byId("myButton"),
myDiv = dom.byId("myDiv");
on(myButton, "click", function(evt){
domStyle.set(myDiv, "backgroundColor",
"blue");
});
on(myDiv, mouse.enter, function(evt){
domStyle.set(myDiv, "backgroundColor",
"red");
});
});

• The on method not only normalizes the API to register events,
but it also normalizes how event handlers work:
• Event handlers are always called in the order they are
registered.
• They are always called with an event object as their first
parameter.
• The event object will always be normalized to include
common W3C event object properties, including things like a
target property, a stopPropagation method, and a
preventDefault method.
• Dojo also provides a way to remove an event handler:
handle.remove

var handle = on(myButton, "click", function(evt){
// Remove this event using the handle
handle.remove();
// Do other stuff here that you only want to happen one time
alert("This alert will only happen one time.");
});
• dojo/on includes a convenience method for doing exactly
this: on.once.
• It accepts the same parameters as on, but will
automatically remove the handler once it is fired.

• By default, on will run event handlers in the context of the node passed in
the first argument.
• http://dojotoolkit.org/reference-guide/1.9/dojo/_base/lang.html
• lang.hitch (from the dojo/_base/lang module) to specify the context in
which to run the handler.
require(["dojo/on"], function(on){
var processEvent = function(e){
this.something = "else";
};
on(something, "click", processEvent);
});

• In asynchronous callbacks such as above, the context that the
code is executing in has changed. It will no longer refer to the
object that originally provided it
require(["dojo/on", "dojo/_base/lang"], function(on, lang){
var processEvent = function(e){
this.something = "else";
};
on(something, "click", lang.hitch(this, processEvent));
});

How to use event deligation in Dojo?
• Event delegation using the dojo/on module, using the syntax
on(parent element, "selector:event name", handler).
• dojo/on needs a selector engine exposed by dojo/query in
order to be able to match selectors used for event delegation
<div id="parentDiv">
<button id="button1" class="clickMe">Click me</button>
<button id="button2" class="clickMe">Click me also</button>
</div>
<script>
require(["dojo/on", "dojo/dom", "dojo/query", "dojo/domReady!"], function(on, dom){
var myObject = {
id: "myObject",
onClick: function(evt){
alert("The scope of this handler is " + this.id);
}
};
var div = dom.byId("parentDiv");
on(div, ".clickMe:click", myObject.onClick);
}); </script>

How to use event delegation in Dojo?
• "click" - the user clicked a node
• "focus" - a node received focus
• "blur" - a node was 'blurred', or otherwise lost focus
• "change" - an input value was changed
• "keypress" - fired when the user presses a key that displays
• "keydown" - fired for non-printable keys
• "keyup" - fired when the user releases a key
• "mouseover" - a node was hovered (warning: may fire more than you'd
like because of bubbling)
• "mouseout" - a node was un-hovered
• dojo/mouse#enter - a normalized version of onmouseover that wont fire
more than you'd like (only on first enter)
• dojo/mouse#leave - a normalized version of onmouseout that wont fire
more than you'd like (only once when leaving)
• submit - a form has been submitted

How to add effects in Dojo?
• Dojo provides effects, which allow us to jazz up your page
or application!
• Dojo 1.9 has two fx modules: dojo/_base/fx and dojo/fx.
• dojo/_base/fx provides base effects methods that were
found previously in Dojo base, including: animateProperty,
anim, fadeIn, and fadeOut.
• dojo/fx provides more advanced effects, including: chain,
combine, wipeIn, wipeOut and slideTo

How to add effects in Dojo(fade)?
• One animation you might have seen in applications you have used is a node fading
in or out.
• This effect is so common and simple that it's included as a part of the Dojo base.
• Used it to hide or show elements on a page in a way that feels really smooth and
polished.
<button id="fadeOutButton">Fade block out</button>
<button id="fadeInButton">Fade block in</button>
<div id="fadeTarget" class="red-block"> A red block </div>
<script>
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
var fadeOutButton = dom.byId("fadeOutButton"),
fadeInButton = dom.byId("fadeInButton"),
fadeTarget = dom.byId("fadeTarget");
on(fadeOutButton, "click", function(evt){
fx.fadeOut({ node: fadeTarget }).play();
});
on(fadeInButton, "click", function(evt){
fx.fadeIn({ node: fadeTarget }).play();
}); }); </script>

How to add effects in Dojo(wipe)?
• Changing the height of a node while leaving the content alone.
• This makes it look like someone is using a windshield wiper on the node.
• Used it to hide or show elements on a page in a way that feels really smooth and
polished.
<script>
require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
on(wipeOutButton, "click", function(evt){
fx.wipeOut({ node: wipeTarget }).play();
});
on(wipeInButton, "click", function(evt){
fx.wipeIn({ node: wipeTarget }).play();
});
});
</script>

How to add effects in Dojo(slide)?
• Shifting a node around to create an appearance of movement or progression on a
page.
• fx.slideTo creates a smooth animation of the node in the page, moving it around
by specifying the coordinates of the top and left position of the node in pixels.
<script>
require(["dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"], function(fx, on, dom) {
on(slideAwayButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "200", top: "200" }).play();
});
on(slideBackButton, "click", function(evt){
fx.slideTo({ node: slideTarget, left: "0", top: "100" }).play();
});
});
</script>
</script>

How to handle animation events in
Dojo?
• All of these animation methods discussed previously return a dojo.Animation
object.
• These objects all provide controls to play or pause the animation.
• Provide a set of events that we can listen to, in order to perform some sorts of
actions before, during, and after the animation.
var anim = fx.slideTo({
node: slideTarget,
left: "200",
top: "200",
beforeBegin: function(){
style.set(slideTarget, {
left: "0px",
top: "100px"
});
}
});
on(anim, "End", function(){
style.set(slideTarget, {
backgroundColor: "blue“
});
}, true);
anim.play();
});

How to chain effects in Dojo?
• dojo/fx module gives us a couple of great convenience methods to set up effects
to run in sequence or in parallel.
• fx.chain is used to play animations one after another.
require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom", "dojo/domReady!"],
function(baseFx, fx, on, dom) {
fx.chain([
baseFx.fadeIn({ node: slideTarget }),
fx.slideTo({ node: slideTarget, left: "200", top: "200" }),
baseFx.fadeOut({ node: slideTarget })
]).play();
});
});

How to combine effects in Dojo?
• dojo/fx provides is the combine method which will start multiple animations at the
same time.
require(["dojo/_base/fx", "dojo/fx", "dojo/on", "dojo/dom",
"dojo/domReady!"],
function(baseFx, fx, on, dom) {
fx.combine([
baseFx.fadeIn({ node: slideTarget }),
fx.slideTo({ node: slideTarget, left: "200", top:
"200" })
]).play();
});
});

How to create custom effects in Dojo?
• Using Dojo we can create and combine effects for customized animation of
elements on the page.
• Dojo's generic animation utility, baseFx.animateProperty is used for this purpose.
require(["dojo/_base/fx", "dojo/on", "dojo/dom", "dojo/domReady!"],
function(baseFx, on, dom) {
baseFx.animateProperty({
node: anim8target,
properties: {
top: : { start: 25, end: 150 },
left: 0,
opacity: { start: 1, end: 0 }
},
duration: 800
}).play();
});

What is Dijit?
• Dijit is both a framework for defining user interface widgets,
and a collection of ready-to-use controls and related
functionality.
• It enhances native controls like form fields, provides widgets
for dynamic layouts and advanced widgets like trees and
calendars.
• The dijit package is a sibling to Dojo Core. It is managed and
run as a sub-project of the Dojo Toolkit, with its own owner,
policies and guidelines

What is Dijit?
• Dijit also has powerful tools for creating dynamic user
interfaces that adapt to viewport size, and respond to resize
and user interaction
• It includes widgets for creating desktop-like application
layouts and standard items like Tab and Accordion controls for
making the best use of the space available.
• https://dojotoolkit.org/reference-guide/1.9/dijit/

What is Dijit?
• Can use Dijit in one of two ways:
– declaratively by using special attributes inside of regular HTML tags
– programmatically through JavaScript
require(["dijit/Dialog", "dojo/domReady!"], function(Dialog){
// create a "hidden" Dialog:
var myDialog = new Dialog({ title:"Hello Dijit!" }, "someId");
myDialog.startup();
// Hint: In order to open the dialog, you have to call
myDialog.show();
});

What is Dijit?
• is identical to:
<script> require(["dojo/parser", "dijit/Dialog"]); </script>
<div data-dojo-type="dijit/Dialog" title="Hello Dijit!"
id="someId"></div>
• The declarative method requires you include
the dojo/parser and have
either dojoConfig.parseOnLoadset to true, or you manually
call parser.parse() when you would like the widgets (aka:
Dijits) to be created.

What is Dijit?
• Dijit uses a special function for access, dijit.byId() ... This is not the same as
dojo.byId, which works exclusively on DomNodes. Dijit stores all active widgets in
the dijit/registry, and uses id’s as unique qualifiers. registry.byId() returns the
instance (widget) from a passed ID, allowing you access to all the methods and
properties within:
<script>
require(["dojo/parser", "dijit/registry", "dojo/dom", "dojo/domReady!"], function(parser,
registry, dom){
parser.parse();
// dom.byId("foobar") would only be a normal domNode.
var myDialog = registry.byId("foobar");
myDialog.set("content", "<p>I've been replaced!</p>");
myDialog.show();
});
</script>
<div data-dojo-type="dijit/Dialog" id="foobar" title="Foo!">
<p>I am some content</p>
</div>

What is Dijit?
• When creating widgets programmatically, pass an id:””
parameter, Otherwise, a unique ID will be generated.
• All Dijits follow the same programmatic convention. Create a
new instance with the JavaScript new function, pass an
object-hash of properties and functions (in this case, title:”No
ID”), and supply an optional “source node reference”.
require(["dijit/Dialog", "dojo/dom"], function(Dialog, dom){
var node = dom.byId("makeADialog");
var myDialog = new Dialog({ title:"From Source Node" }, node);
myDialog.show();
});

How to create a dijit button?
• dijit/form/Button the most basic widget in any toolkit is a button.
• Allows a user to trigger an action, such as submitting a form or resetting the values
on a form.
• Some Widget properties
– iconClass: indicates what CSS class to use (to apply an image sprite).
– showLabel: determines whether to show any text in the button.
– title: sets the value of the HTML title attribute on the rendered DOM node of the widget.
– label: in programmatic usage, this indicates the content of the button label; declaratively, this
is specified via the content (innerHTML) of the element representing the widget.
<button id="btn2" data-dojo-type="dijit.form.Button“
data-dojo-props=“ iconClass:'dijitIconNewTask', showLabel:false,
onClick:function(){}">
Click Me!
</button>

How to create a dijit button?
• Dijit also includes three other button widgets:
• dijit/form/ToggleButton: a button that maintains an on/off state.
• dijit/form/DropDownButton: a button designed to show a popup
widget (such as a menu) when clicked.
• dijit/form/ComboButton: like a dijit/form/Button

How to create a dijit textbox?
• dijit/form namespace, there are a number of textbox-
based widgets
• dijit/form/TextBox: a basic textbox .
• dijit/form/SimpleTextarea: a basic textarea, for large text
input.
• dijit/form/ValidationTextBox: a textbox with basic
validation abilities, which can be further customized.
• dijit/form/NumberTextBox: a textbox that ensures the
input is numeric.
• dijit/form/DateTextBox: a textbox that includes a popup
calendar.

How to create a dijit textbox?
• dijit/form/TimeTextBox: a textbox that includes a
popup time-picker.
• dijit/form/CurrencyTextBox: an extension of
dijit/form/NumberTextBox with additional
considerations for localized currency.
• dijit/form/NumberSpinner: an extension of
dijit/form/NumberTextBox providing buttons and
keybindings for incrementally changing the value.
• dijit/form/Textarea: an extension of
dijit/form/SimpleTextarea which dynamically
increases or decreases its height based on the amount
of content inside.

What is Dojox?
• The dojox namespace is a collection of sub-projects that
extend the toolkit into common and less common areas
• Examples
– DojoX: Data Grid

What is Dojox?
• There are several different statuses for sub-packages and modules:
• Mature - This package or module is considered mature and is being actively
developed and maintained by committers within the Dojo Toolkit. It is expected
that it will persist into the foreseeable future.
• Experimental - This package or module is experimental, while it is being actively
developed and maintained, the API may change in the future and developers
should be cautious about depending on the API remaining unchanged or the code
continuing to persist in the future.
• Maintained - This code is being actively maintained, but may or may not persist
into Dojo 2.0.
• Deprecated - This code is being actively maintained for backwards compatibility
purposes, but a decision has been made that this package will not persist into Dojo
2.0.
• Abandoned - This code is not being actively maintained anymore. End developers
may have difficulty using this code in current and future versions of the Dojo
Toolkit. Patches are usually welcome for bug fixes, but it is highly unlikely new
features or enhancements will be considered.

What is Dojox?
– DojoX: Charting
• DojoX historically was an area for development of additional
Dojo functionality.
• http://dojotoolkit.org/reference-guide/1.9/dojox/

How to create a chart in Dojo?
<div id="simplechart" style="width: 250px; height: 150px; margin: 5px auto 0px
auto;"></div>
---------------------------------------------------------------------------------------------------------
require(["dojox/charting/Chart", "dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Lines", "dojo/ready"],
function(Chart, Default, Lines, ready){
ready(function(){
var chart1 = new Chart("simplechart");
chart1.addPlot("default", {type: Lines});
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
chart1.render();
});
});

How to represent a grid data in Dojo?
• The dojox/grid/DataGrid is the central component of many applications
due to its effective and usable presentation of tabular data.
• DataGrid is made up of several different parts.(dgrid is recommended over
DataGrid)
• At the highest level, a DataGrid is made up of views.
• Views break the DataGrid up into sections and render the header and
content for each section.
• Headers and contents contain rows (although the header only contains
one row) which are populated by sub-rows of cells.
• http://dojofoundation.org/packages/dgrid/tutorials/hello_dgrid/

• Cells tell the DataGrid what cells, or columns, we want to be displayed for each data record.
• we will pass an array of cell definition objects to the structure property.
• Each cell definition object can have several properties defined:
– name: the string to use in the header cell
– field: the name of the field of the data record to display
– width: a string containing the CSS width (with units) of the column
– hidden: a boolean that when true will hide the column
• The cell definition properties headerStyles, cellStyles, and styles are strings of CSS style
definitions.
var grid = new DataGrid({
store: store,
query: { id: "*" },
structure: [
{ name: "First Name", field: "first", width: "84px" },
{ name: "Last Name", field: "last", width: "84px" },
{ name: "Bats", field: "bats", width: "70px" },
…………
]
}, "grid");

What are the layouts in Dojo?
• Dojo picks up with a set of extensible widgets as a part of Dijit - Dojo's UI
framework.
• Layouts allow precise placement and management of areas of the page
where we want to:
• Respond to resize events
• Provide for user control over layout and how the available space is
apportioned
• Adapt controls and/or contents to the currently available horizontal and
vertical space
• Some layout widgets
– AccordianContainer(http://dojotoolkit.org/reference-guide/1.9/dijit/layout/AccordionContainer.html)
– BorderContainer(http://dojotoolkit.org/reference-guide/1.9/dijit/layout/BorderContainer.html)
– StackContainer(http://dojotoolkit.org/reference-guide/1.9/dijit/layout/StackContainer.html)
– TabContainer(http://dojotoolkit.org/reference-guide/1.9/dijit/layout/TabContainer.html)

• Widgets can be created declaratively or programmatically.
<div class="centerPanel” data-dojo-type="dijit.layout.TabContainer”
data-dojo-props="region: 'center', tabPosition:
'bottom'">
<div data-dojo-type="dijit.layout.ContentPane” data-dojo-props="title: 'Group 1'">
<h4>Group 1 Content</h4>
</div>
</div>
--------------------------------------------------------------------------------------------------------------------------------------------
var contentTabs = new TabContainer({
region: "center",
id: "contentTabs",
tabPosition: "bottom",
"class": "centerPanel",
href: "contentCenter.html"
})
var contentPane = new ContentPane({“title”:”Group 1”,”content”:” <h4>Group 1 Content</h4> ”})
contentTabs.addChild(contentPane );
contentTabs.startup();

• dijit/layout/BorderContainer allows you to define a layout subdivided into regions.
• The center region is always flexible and auto-sized.
• Other regions are fixed in size: "top", "bottom", "leading", "trailing", "left" or
"right".
• Each region is represented by a child widget.
• All Dijit widgets support the region property, so in principle, you can use any
widget in these positions.
• The fixed-size regions (all but center) can have a end-user-moveable divider
associated with them by setting a splitter property.

• dijit.layout.TabContainer is a container that has multiple
panes, but shows only one pane at a time.
• There are a set of tabs corresponding to each pane.
• Each tab has the title (aka label) of the pane, and optionally a
close button.

What are the different stores in Dojo?
• dojo.store is the API for Stores
• Different types of Store
– Memory(dojo/store/Memory)
– Observable(dojo/store/Observable)
– Object(dojo/data/ObjectStore)
– JSON(dojo/store/JsonRest)
– XML(dojo/data/XMLStore)
– Cache(dojo/store/Cache)

How to use memory in Dojo?
• Memory store provides full read and write
capabilities for in memory data
• synchronous store(directly returns the results
of an action (get returns the object))
• Memory store uses
the dojo/store/util/SimpleQueryEngine

How to use memory in Dojo?
require(["dojo/store/Memory"], function(Memory){
var someData = [
{id:1, name:"One"},
{id:2, name:"Two"}
];
store = new Memory({data: someData});
store.get(1) -> Returns the object with an id of 1
store.query({name:"One"}) // Returns query results from the array that
match the given query
store.query(function(object){
return object.id > 1;
}) // Pass a function to do more complex querying
store.query({name:"One"}, {sort: [{attribute: "id"}]}) // Returns query
results and sort by id
store.put({id:3, name:"Three"}); // store the object with the given identity
store.remove(3); // delete the object
});

How to use Observable in Dojo?
• dojo/store/Observable is an object store
wrapper that adds support for notification of
data changes to query result sets
• The observe function provides indication of
the previous and new index values of changed
objects to properly update result arrays.

How to use Observable in Dojo?
require(["dojo/store/Observable", "dojo/store/Memory"], function(Observable, Memory){
// create the initial Observable store
store = new Observable(new Memory({data: someData}));
// query the store
var results = store.query({rating:5});
// do something with the initial result set
results.forEach(insertRow);
// now listen for any changes
var observeHandle = results.observe(function(object, removedFrom, insertedInto){
if(removedFrom > -1){ // existing object removed
removeRow(removedFrom);
}
if(insertedInto > -1){ // new or updated object inserted
insertRow(insertedInto, object);
}
});
// this will trigger an addition to the result set (the observe listener will be called)
store.put({rating: 5, id: 3});
// this will *not* trigger a observe event, since the object does not match the query constraint (query was for rating = 5)
store.put({rating: 3, id: 4});
// if this object was in the result set, it will trigger a observe event
store.remove(2);
// done observing, any further modifications will not trigger our listener
observeHandle.cancel();
});

How to use ObjectStore in Dojo?
• dojo.data.ObjectStore is an adapter for using
the new Dojo Object Stores
var jsonStore = new
dojo.store.JsonRest({target:"/Table/"});
var dataStore = new
dojo.data.ObjectStore({objectStore: jsonStore
});
// we can now use dataStore with any legacy
Dojo Data consumer
var grid = new dojox.data.DataGrid({
store: dataStore,
...
});

How to use JSONStore in Dojo?
• store actions to your server using standards-based HTTP/REST
with JSON
• store actions map intuitively to HTTP GET, PUT, POST, and
DELETE methods.
require(["dojo/store/JsonRest"],
function(JsonRest){
employeeStore = new
JsonRest({target:"/Employee/"});
employeeStore.get("Bill").then(function(bill){
// called once Bill was retrieved
});
});

How to use XMLStore in Dojo?
• XmlStore is a read and write interface to basic XML data
var store = new dojox.data.XmlStore({url:
"books.xml", rootItem: "book"});
var gotBooks = function(items, request){
for(var i = 0; i < items.length; i++){
var item = items[i];
console.log("Located book: " +
store.getValue(item, "title");
}
}
var request = store.fetch({query:
{isbn:"A9B57*"}, onComplete: gotBooks});

How to use CacheStore in Dojo?
• The Cache store provides caching capabilities for stores.
• usage of dojo/store/Cache would be to use a JsonRest store as the master
store, and a Memory store as the caching store.
restStore = new JsonRest(...);
memoryStore = new Memory();
store = new Cache(restStore, memoryStore);
store.get(1) -> Returns the object with an id of
1 by making a GET request
store.get(1) -> Returns the object, using the
local memory cache
store.put({id:2, name:"two"}) -> Stores the
object in both master and cache store
store.get(2) -> Returns the object, using the
local memory cache

How to populate a combobox?
require([
"dojo/store/Memory", "dijit/form/ComboBox", "dojo/domReady!"
], function(Memory, ComboBox){
var stateStore = new Memory({
data: [
{name:"Alabama", id:"AL"},
{name:"Alaska", id:"AK"},
{name:"American Samoa", id:"AS"},
{name:"Arizona", id:"AZ"},
{name:"Arkansas", id:"AR"},
{name:"Armed Forces Europe", id:"AE"},
{name:"Armed Forces Pacific", id:"AP"},
{name:"Armed Forces the Americas", id:"AA"},
{name:"California", id:"CA"},
{name:"Colorado", id:"CO"},
{name:"Connecticut", id:"CT"},
{name:"Delaware", id:"DE"}
]
});
var comboBox = new ComboBox({
id: "stateSelect",
name: "state",
value: "California",
store: stateStore,
searchAttr: "name"
}, "stateSelect");
});
------------------------------------------------------------------------------------------------------------------------
<input id="stateSelect">
<p><button onClick="alert(dijit.byId('stateSelect').get('value'))">Get value</button></p>

How to create a custom widget in
Dojo?
• Dijit's _Widget and _WidgetBase provide a fantastic
foundation for creating widgets, but the _Templated
mixin is where Dijit really shines.
• With _Templated, you can quickly create widgets that
are highly maintainable, quickly modifiable and easy to
manipulate.
• The basic concept of _Templated is simple enough:
• It allows a developer to create a small HTML file that
has a few small extensions loads this HTML file as a
string at run-time (or inlined during the build process)
for re-use by all instances of the templated widget.

Dojo?
• http://dojotoolkit.org/reference-
guide/1.9/quickstart/writingWidgets.html
• https://dojotoolkit.org/documentation/tutori
als/1.9/recipes/custom_widget/

What is the life cycle of custom
Widget?
• The lifecycle of a widget describes the phases of its creation and destruction which you can hook into. It’s useful
to understand exactly what happens when. Whether you are sub-classing an existing widget, using dojo/method
script blocks, or passing in method overrides to the constructor, these are your entry points for making a widget
do what you want it to do.
– Widgets are classes, created with dojo.declare. All widgets inherit from dijit._WidgetBase, and most get the _Templated mixin.
That provides you the following extension points (methods) you can override and provide implementation for:
– constructorYour constructor method will be called before the parameters are mixed into the widget, and can be used to
initialize arrays, etc.
– parameters are mixed into the widget instanceThis is when attributes in the markup (ex: <button iconClass=...>) are mixed in or,
if you are instantiating directly, the properties object you passed into the constructor (ex: new dijit.form.Button({label: “hi”})).
This step itself is not overridable, but you can play with the result in...
– postMixInPropertiesIf you provide a postMixInProperties method for your widget, it will be invoked before rendering occurs,
and before any dom nodes are created. If you need to add or change the instance’s properties before the widget is rendered -
this is the place to do it.
– buildRenderingdijit._Templated provides an implementation of buildRendering that most times will do what you need. The
template is fetched/read, nodes created and events hooked up during buildRendering. The end result is assigned to
this.domNode. If you don’t mixindijit._Templated (and most OOTB dijits do) and want to handle rendering yourself (e.g. to really
streamline a simple widget, or even use a different templating system) this is where you’d do it.
– setters are calledSetters are called for all attributes with custom setters and that were either specified as constructor
parameters or have non-null non-blank non-zero default values.
– postCreateThis is typically the workhorse of a custom widget. The widget has been rendered (but note that child widgets in the
containerNode have not!). The widget though may not be attached to the DOM yet so you shouldn’t do any sizing calculations
in this method.
– startupIf you need to be sure parsing and creation of any child widgets has completed, use startup. This is often used for layout
widgets like BorderContainer. If the widget does JS sizing, then startup() should call resize(), which does the sizing.
– destroyImplement destroy if you have special tear-down work to do (the superclasses will take care of most of it for you.
Examples on how to destroy a widget:

How to extend a dijit Widget?
declare("my/Button", dijit.form.Button, {
xyz: '',
buildRendering: function() {
this.inherited(arguments);
this.domNode.setAttribute("xyz", this.xyz);
}
});
------------------------------------------------------------------------------------------
<div dojoType="my/Button" xyz="foobar" id="mybtn"></div>

Dojo?
require([
"dojo/_base/declare", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase",
], function(declare, parser, ready, _WidgetBase){
declare("MyFirstBehavioralWidget", [_WidgetBase], {
// put methods, attributes, etc. here
});
ready(function(){
// Call the parser manually so it runs after our widget is defined, and page has finished loading
parser.parse();
});
});
------------------------------------------------------------------------------------------------------------
Instantiate the widget in markup
------------------------------------------------------------------------------------------------------------
<span data-dojo-type="MyFirstBehavioralWidget">hi</span>

Dojo?
require([
"dojo/_base/declare", "dojo/dom-construct", "dojo/parser", "dojo/ready",”dojo/on”,
"dijit/_WidgetBase",
], function(declare, domConstruct, parser, ready, on,_WidgetBase){
declare("Counter", [_WidgetBase], {
// counter
_i: 0,
buildRendering: function(){
// create the DOM for this widget
this.domNode = domConstruct.create("button", {innerHTML: this._i});
},
postCreate: function(){
// every time the user clicks the button, increment the counter
on(this.domNode, "onclick", "increment");
},
increment: function(){
this.domNode.innerHTML = ++this._i;
}
});
ready(function(){
parser.parse();
});
});
Instantiate declaratively:
<span data-dojo-type="Counter"></span>

Dojo?
require([
"dojo/_base/declare", "dojo/parser", "dojo/ready",
"dijit/_WidgetBase", "dijit/_TemplatedMixin"
], function(declare, parser, ready, _WidgetBase, _TemplatedMixin){
declare("FancyCounter", [_WidgetBase, _TemplatedMixin], {
// counter
_i: 0,
templateString: "<div>" +
"<button data-dojo-attach-event='onclick: increment'>press me</button>" +
"  count: <span data-dojo-attach-point='counter'>0</span>" +
"</div>",
increment: function(){
this.counter.innerHTML = ++this._i;
}
});
ready(function(){
parser.parse();
});
});
--------------------------------------------------------------------------------------------------------------
<span data-dojo-type="FancyCounter">press me</span>

Dojo?
• Case of widget inside of the template:
• When using this template in a directly extended
widget class, you will need to mixin
dijit._WidgetsInTemplateMixin in addition to
dijit._TemplatedMixin.
<div class="combinedDateTime">
<div data-dojo-type="dijit/form/DateTextBox"></div>
<div data-dojo-type="dijit/form/TimeTextBox"></div>
</div>

Dojo?
• What _Templated Provides
– templateString, // a string representing the HTML of the template
– widgetsInTemplate // a Boolean indicating whether or not child widgets are defined in the
template
• In addition to the properties above, _Templated overrides three methods defined
in Dijit's widget architecture:
– buildRendering,
– destroyRendering,
– startup.
• These three methods handle the parsing and filling out of the template
(buildRendering),
• destroying the widget's DOM correctly (destroyRendering), and ensuring that any
child widgets in a template are started correct

Dojo?
<div class="${baseCls}" data-dojo-attach-point="focusNode" data-dojo-attach-
event="ondijitclick:_onClick“ >
<span data-dojo-attach-point="containerNode"></span>
</div>
• This template demonstrates three of the most important aspects of the Dijit template system:
variable substitution, attach points, and event attachments.
• Variable Substitution
– The variable name is any property or field defined in your widget declaration ${property} or
${!propertyObject.property} If the property in question happens to be a reference to an object.
• Attach Points
– Property of the widget to get the corresponding dom element.
• Event Attachments
– Dijit template system gives you a way of attaching native DOM events to methods in your custom widget.
• The widgetsInTemplate Property
– This property (by default, set to false) tells the template system that your template has other widgets in it
and to instantiate them when your widget is instantiated.

Dojo?
Each widget declared with _WidgetBase as its base will run
through several methods during instantiation.
They are listed here, organized according to the sequence in
which they are called:
• constructor (common to all prototypes, called when
instantiated)
• postscript (common to all prototypes built using declare)
– o create
– + postMixInProperties
– + buildRendering
– + postCreate
• startup

Dojo?
postCreate()
This is fired after all properties of a widget are defined, and the document fragment
representing the widget is created
But before the fragment itself is added to the main document.
When developing a custom widget, most (if not all) of your customization will occur
here.
startup()
Probably the second-most important method in the Dijit lifecycle is the startup
method.
This method is designed to handle processing after any DOM fragments have been
actually added to the document;
it is not fired until after any potential child widgets have been created and started as
well

How to use ajax in Dojo?
• dojo/request/xhr is a provider that uses XMLHttpRequest
(XHR) objects to make asynchronous requests. It is the default
provider for browser based platforms.
require(["dojo/request/xhr"], function(xhr){
xhr("example.json", {
handleAs: "json"
}).then(function(data){
// Do something with the handled data
}, function(err){
// Handle the error condition
}, function(evt){
// Handle a progress event from the request if the
// browser supports XHR2
});
});

How to use ajax in Dojo?
• dojo/request/xhr takes two arguments
– url String The URL that the request should be made to.
– options Object? Optional A hash of options.
– https://dojotoolkit.org/reference-guide/1.9/dojo/request/xhr.html#dojo-request-xhr
require(["dojo/request/xhr", "dojo/dom", "dojo/dom-construct", "dojo/json", "dojo/on", "dojo/domReady!"],
function(xhr, dom, domConst, JSON, on){
on(dom.byId("startButton"), "click", function(){
domConst.place("<p>Requesting...</p>", "output");
xhr("helloworld.json", {
handleAs: "json"
}).then(function(data){
domConst.place("<p>response: <code>" + JSON.stringify(data) + "</code></p>", "output");
});
});
});
<h1>Output:</h1>
<div id="output"></div>
<button type="button" id="startButton">Start</button>

How to use deferred in Dojo?
• Powerful tool for working with asynchronous
operations, such as Ajax
• Deferred waits until a later time to perform an
action; essentially, you're deferring the action
until a prior action is completed. Ajax is one
such situation: We don't want to take some
actions until we know that the server has
successfully sent information back to us.

How to use deferred in Dojo?
require(["dojo/Deferred", "dojo/request", "dojo/_base/array", "dojo/dom-construct", "dojo/dom", "dojo/domReady!"],
function(Deferred, request, arrayUtil, domConstruct, dom) {
// Create a deferred and get the user list
var deferred = new Deferred(),
userlist = dom.byId("userlist");
// Set up the callback and errback for the deferred
deferred.then(function(res){
arrayUtil.forEach(res, function(user){
id: user.id,
innerHTML: user.username + ": " + user.name
}, userlist);
});
},function(err){
innerHTML: "Error: " + err
}, userlist);
});
// Send an HTTP request
request.get("users.json", {
handleAs: "json"}).then(
function(response){
// Resolve when content is received
deferred.resolve(response);
},
function(error){
// Reject on error
deferred.reject(error);
}
);
});

How to handle a list of deferred?
require(["dojo/promise/all"], function(all){
all([promise1, promise2]).then(function(results){
// results will be an Array
});
// -- or --
all({
promise1: promise1,
promise2: promise2
}).then(function(results){
// results will be an Object using the keys "promise1" and "promise2"
});
});

How to create unit test in Dojo?
• D.O.H.: Dojo Objective Harness
• http://dojotoolkit.org/reference-guide/1.9/util/doh.html
• There are several ways to run DOH tests, but the simplest way
is inside a web browser.
• http://localhost/dojo/util/doh/runner.html or
http://localhost:8181/dojo/util/doh/runner.html

How to create unit test in Dojo?
define(["doh/runner"], function(doh){
doh.register("MyTests", [
function assertTrueTest(){
doh.assertTrue(true);
doh.assertTrue(1);
doh.assertTrue(!false);
},
{
name: "thingerTest",
setUp: function(){
this.thingerToTest = new Thinger();
this.thingerToTest.doStuffToInit();
},
runTest: function(){
doh.assertEqual("blah", this.thingerToTest.blahProp);
doh.assertFalse(this.thingerToTest.falseProp);
// ...
},
tearDown: function(){
}
},
// ...
]);
});

What are few useful links to refer
Dojo?
• http://www.sitepen.com/blog/2012/10/31/de
bugging-dojo-common-error-messages/
• http://livedocs.dojotoolkit.org/dijit/_WidgetsI
nTemplateMixin
• http://livedocs.dojotoolkit.org/loader/amd
• http://www.sitepen.com/blog/2011/05/04/w
hat-is-the-best-way-to-start-a-dojo-project/

References
• http://dojotoolkit.org
• L1 : Dojo Framework 1.7 Presentation

Dojo javascript toolkit

Recommended

Recommended

More Related Content

What's hot

What's hot (20)

Viewers also liked

Viewers also liked (9)

Similar to Dojo javascript toolkit

Similar to Dojo javascript toolkit (20)

Recently uploaded

Recently uploaded (20)

Dojo javascript toolkit