Dojo Tutorial

1 5/19/2012

Girish Srivastava girish.srivastava@vtindia.net

Objective In this tutorial, we will learn everything about the dojo. After

completing the tutorial you will be able to understand about Dojo

framework.

This Dojo tutorial covers:

2 5/19/2012

Introduction to Dojo

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.

3 5/19/2012

4 5/19/2012

Features of Dojo Dojo is based on HTML and JavaScript, so its easy for the developers to learn it

fast.

There is no requirement of learning new programming language. Just HTML and JavaScript knowledge if sufficient.

Dojo provides higher abstraction layer to the programmer. So, it helps the programmers to develop powerful functions very easily.

Dojo has already invented the wheels for the programmers and now programmers just have to use the Dojo api into their application

Here is the list of components that comes along with Dojo framework:

DOJO Tree

DOJO Button

DOJO Calendar control

DOJO Grid

DOJO List box

and many more..

5 5/19/2012

6 5/19/2012

7 5/19/2012

8 5/19/2012

DOJO Core

9 5/19/2012

What Is Dijit?

10 5/19/2012

11 5/19/2012

12 5/19/2012

13

What is a widget

A widget is an object, that contains not just logic, but also a

way to be presented on the screen

The way a widget is presented is the widget’s template

Widget can contain other widgets

5/19/2012

14

General widgets General purpose widgets that are used to make a web page

more “application-like”

Menu

Dialogs

Inline editing

Toolbar

ProgressBar

Tree – that can be connected to data source

Rich text editor – with plugins architecture to configure the editor’s functions

There are many more general widgets in dojoX

5/19/2012

15

What makes a widget

A widget is composed of two resources

A .js file that contains the logic of the widget

An html snippet that contains the way the widget is presented

This resource is called the widget’s template

The html code itself can be in another file or inlined in the .js file

This allows later on to perform runtime optimizations, by placing the

template in a separate file during development time, and inline it as part

of the build process

5/19/2012

Benefits of Dojo Framework

Dojo toolkit provides many widgets to develop the UI for web

applications.

Dojo is one of the robust ajax framework that can be used to develop

enterprise grade application.

Following are the benefits of Dojo.

Associative arrays

Loosely typed variables

Regular expressions

Objects and classes

Highly evolved date, math, and string libraries

W3C DOM support in the Dojo

16 5/19/2012

Disadvantages of Dojo

Developer depends on the browser support for the Dojo

There is no way to hide the Dojo code in case of commercial

application

17 5/19/2012

JQuery versus Dojo versus YUI

•JQuery Pros:

- JQuery is the most popular one of them all.

- It is very easy to use and to understand.

- The core library is only 15Kb in size.

- Their statement is: ‘The Write Less, Do More, Javascript

Library’.

Cons:

- Hard to use with object oriented programming

- JQuery is a library

18 5/19/2012

•YUI(The Yahoo! User Interface Library)

Pros:

- It is developed by Yahoo

- Fully documented, with a great API browser

- Very consistent and reliable

- Also contains unit testing framework

- YUI is a framework

Cons:

- Heavy page weight

- Very few utility or helper functions/methods

- Lacks the use of chaining methods together

19 5/19/2012

• Dojo Toolkit Pros:

- Debug your code in Firebug

- Dojo integrated in Zend Framework

- Hierarchical package system speeds loading

- Dojo is a framework

Cons:

- Dojo fails in online documentation

When we compare these 3 libraries/frameworks, I found the

following which was quite useful.

http://selectors.turnwheel.com/slickspeed.php

20 5/19/2012

Based on these results, we can conclude that YUI is the slowest one. This is also the reason why we didn’t chose for YUI. Dojo and JQuery scores the best.

Knowing that JQuery is the easiest to use and immense popular, Dojo has its advantage of being integrated in Zend Framework. Also, the difference in being a library or framework counts. - A library is about reusable functionalities, but a framework is about reusable behaviours - A library is something you call/inherit from your code, but framework is something that calls your code or provide services for your code - A library is a collection of components and classes, where framework is how abstract classes and components interact with each others

Dojo is a framework and JQuery a library.

JQuery is good for small websites where you want to achieve a ‘WOW’ factor in relative short time.

But when you are building an application, you need a robust framework where you can integrate your own codes.

21 5/19/2012

22 5/19/2012

23 5/19/2012

24 5/19/2012

25 5/19/2012

Loading Dojo ToolKit…

26 5/19/2012

27 5/19/2012

Install Dojo

Downloading Dojo

You can download the latest version of Dojo from its official

site http://dojotoolkit.org/.

Download the Dojo toolkit directly

from http://dojotoolkit.org/download.

28 5/19/2012

29 5/19/2012

30 5/19/2012

Themes and Theming

5/19/2012 31

Dijit Themes lend a consistent look and feel to widgets.

Themes are collections of images (icons and background images) and

CSS files that bring a common visual style (font, color, texture,

layout, animation, etc.) to all the widgets.

Using a Theme To include a given theme on your page or application, first include

the themeName.css file (one of claro.css, tundra.css, nihilo.css, or soria.css):

<link rel="stylesheet" href="dojo/dijit/themes/claro/claro.css" />

Then, add a theme class name to the parent <body> element, like:

<body class="claro">

It is recommended you include the theme CSS file before dojo.js to avoid any

potential race conditions where widgets start rendering before the theme has

finished loading. Thus, putting it all together:

Example

5/19/2012 32

<html>

<head>

<title>Hello, Dijit</title>

<link rel="stylesheet" href=“dojocore/dijit/themes/claro/claro.css">

<script src="lib/dojo/dojo.js"></script>

<script type="text/javascript">

dojo.require("dijit.Dialog");

</script>

</head>

<body class="claro">

<h1>Hello, Dijit</h1>

</body>

</html> http://dojotoolkit.org/reference-guide/1.7/dijit/themes.html

Dojo Hello World

33

<html>

<head>

<title>Hello World</title>

<script type="text/JavaScript" src=“dojoroot/dojo/dojo.js"

djConfig="parseOnLoad: true"> </script>

<style type="text/css">

@import "dojoroot/dijit/themes/tundra/tundra.css";

@import "dojoroot/dojo/resources/dojo.css";

</style>

<script type="text/JavaScript">

dojo.require("dijit.form.Button");

</script>

</head>

<body class="tundra">

<button dojoType="dijit.form.Button" id="helloButton"> Hello World

<script type="dojo/method" event="onClick">

alert("Hello Dojo.");

</script>

</button>

</body>

</html> 5/19/2012

The dojo.js file is the main component in the Dojo toolkit. You can

use Dojo by including this file in your page.

The djConfig attribute is used for configuring the Dojo runtime.

We want to use Dijit's button widget, so you must include the Dijit

style sheet, as shown here: <style type="text/css">

@import "dojoroot/dijit/themes/tundra/tundra.css"; </style>

Dijit allows you to choose a theme to use. The default theme is tundra,

which we use in our sample code by including tundra.css.

34 5/19/2012

Dojo uses the concept of modules, which are similar to Java packages.

Before you use functionality from a particular package, you must

include that package in your page. The dojo.require() call -- similar

to Java's import statement -- is used for importing a Dojo module: o <script type="text/JavaScript">

o dojo.require("dijit.form.Button");

o </script>

The line dojo.require("dijit.form.Button") tells Dojo to load

the dijit.form.Button class on your page.

To use any widget in a page, you must import its code using

dojo.require().

35 5/19/2012

You can use a Dijit widget by using the same markup as that of the

normal HTML element. The only difference is that you must add

the dojoType attribute indicating name of the Dijit widget that you

want to use: <button dojoType="dijit.form.Button" id="helloButton">

Hello World

<script type="dojo/method" event="onClick">

alert("Hello Dojo.");

</script> </button>

Like This we can create can create different different examples.

CheckBox …

ComboBox…

RadioButton… etc.

36 5/19/2012

Configuring the Dojo runtime

37

Dojo allows you to configure the runtime using the djConfig object.

The default value of parseOnLoad is false. If you do not set it to true, by default, system will not create any widgets.

Dojo creates the djConfig object when the framework initializes -- that is, when Dojo.js loads.

If you want to make any changes in djConfig, you should do so before dojo.js is loaded.

Any changes that you make in djConfig are ignored after dojo.js is loaded.

Here, we set the parseOnLoad property to true. This causes Dojo to

attach an onload event handler for the body. From that event handler, Dojo traverses the DOM tree and instantiates the widgets whenever a widget markup is located.

5/19/2012

38

The easiest and most commonly used approach is to add the

djConfig attribute to the <script> element that refers to

dojo.js:

<script type="text/JavaScript"

src=“dojocore/dojo/dojo.js"

djConfig="parseOnLoad: true, isDebug: true“>

</script>

isDebug: This flag turns debugging on or off.

Its default value is false. When you turn this flag on, Firefox

generates extended debugging information in Firebug.

If you're using some other browser, it includes the Firebug

Lite script files in the page and starts displaying the Firebug

Lite console. 5/19/2012

•Event Handling

•Add Buttons

Add a new dojo.require() statement to include the code for the

dijit.form.Button widget.

<script type="text/javascript">

dojo.require("dijit.form.Button");

</script>

Just above the line:

</body>

Add:

<br />

<button dojoType="dijit.form.Button">OK</button>

<button dojoType="dijit.form.Button">Cancel</button>

5/19/2012 39

Understanding Dojo's Event Handling

Event handling works somewhat differently in Dojo than regular

DOM. First, let's recap DOM's event handling scheme.

For a regular button element, you will register an onclick event

handler as follows: <button onclick="showEventStd(this, event);">OK</button>

The "this" and "event" keywords tell the browser to supply the

element and the event object as parameters to the handler function.

The handler function looks something like this: function showEventStd(theElement, theEvent) {

alert("Event " + theEvent.type + " for element " + theElement.nodeName);

}

5/19/2012 40

Cont… In Dojo, there are two main differences.

1. A Dojo button's onclick attribute takes the name of the event

handler method. You don't actually call the method like you do for a

regular DOM button.

2. Second, the event handler method gets only one parameter –

the Event object.

Let's have a look at an example. The event handler is registered as

follows: <button dojoType="dijit.form.Button" onclick="showEvent">OK</button>

The event handler method looks like this:

function showEvent(theEvent) {

alert("Event " + theEvent.type);

}

5/19/2012 41

42

Continue with…

5/19/2012

43 5/19/2012

JavaScript Object Oriented Feature

5/19/2012 44

<html> <head> <Script language="JavaScript"> function MyClass() { this.myData = 10; this.myString = "my frist program"; } var myClassObj1 = new MyClass(); var myClassObj2 = new MyClass(); myClassObj1.myData = 20; myClassObj1.myString = "Obj1: my second program"; myClassObj2.myData = 30; myClassObj2.myString = "Obj2: last program"; alert( myClassObj1.myData ); alert( myClassObj1.myString ); alert( myClassObj2.myData ); alert( myClassObj2.myString ); </script> </head> </body> </html>

Object-Oriented Programming

5/19/2012 45

The Object Oriented programming is a computer programming

paradigm.

Object Oriented programming is that computer program may be

seen as comprising a collection of individual units and objects, that is

on each other, as opposed to a traditional view in which a program

may be seen as a collection of functions or procedures, or simply as a

list of instructions to the computer.

Each object is capable of receiving messages, processing data, and

sending messages to other objects.

5/19/2012 46

Object: The Object an instance of a class and object is the run-time manifestation of a

particular exemplar of a class.

Each object has own data, though the code within a class a subclass or an

object may be shared for economy.

Encapsulation

The Object-Oriented program using the myclass as defined permits accessibility of

its internal data representation as well as this methods and variable names global in

scope increasing the risk of name collisions.

The Object-Oriented program Encapsulation supports data hiding and the concept

of viewing objects as self-contained entities providing services to consumers.

Encapsulation is a modern programming languages of the principle of information

hiding itself in a number of ways, including encapsulation and polymorphism.

Prototype-based OOP

5/19/2012 47

JavaScript implements a type of object-oriented programming

different to that used in Java™ code.

Whereas Java programming is based on a class-based OOP model,

JavaScript is based on a class-less-based OOP model commonly

known asprototype-based object-orientation.

Rather than defining a set of class templates from which objects are

created, objects are simply declared when needed.

When anobject needs to inherit features from another object, it can

simply clone the features of a prototype object.

One of the key advantages of prototypal OOP is that an object

prototype can be modified at run time, meaning that the definition of

the structure of objects is not strict.

A basic object prototype in JavaScript

5/19/2012 48

function Car() { }

var myCar = new Car();

console.log(myCar);

This should produce the following output in the console log:

Object {}.

Defining a member variable in your object

function Car() { }

Car.prototype.current_speed = 0;

var myCar = new Car();

console.log(myCar);

This time, the console log will output something a bit more

interesting: Object{ current_speed=0 }.

Adding a method to the prototype

5/19/2012 49

function Car() { }

Car.prototype.current_speed = 0;

Car.prototype.accelerate = function(increment)

{

this.current_speed += increment;

}

var myCar = new Car();

myCar.accelerate(30);

myCar.accelerate(20);

console.log(myCar);

The console output should produce the following: Object {

current_speed=50 }.

Example

5/19/2012 50

<html> <head> <Script language="JavaScript"> function MyClass() { var m_data = 15; var m_text = "indian"; this.SetData = SetData; this.SetText = SetText; this.ShowData = DisplayData; this.ShowText = DisplayText; function DisplayData() { alert( m_data ); } function DisplayText() { alert( m_text ); return; } function SetData( myVal ) { m_data = myVal; }

Example Cont…

5/19/2012 51

function SetText( myText )

{

m_text = myText;

}

}

var Obj1 = new MyClass();

var Obj2 = new MyClass();

Obj1.SetData( 30 );

Obj1.SetText( "Obj1: my cuntry" );

Obj2.SetData( 60 );

Obj2.SetText( "Obj2: my first javaScript progarm" );

Obj1.ShowData();

Obj1.ShowText();

Obj2.ShowData();

Obj2.ShowText();

</script>

</head>

</body>

</html>

Functions

functions are objects

they have properties

they have methods

can be copied, deleted, augmented...

special feature: invokable

5/19/2012 52

Functions

function boo(what) {

return what;

}

or

var boo = function(what) {

return what;

};

5/19/2012 53

Functions

function boo(what) {

return what;

}

or

var boo = function bootoo(what) {

return what;

};

5/19/2012 54

Return value

all functions return a value

if they don't explicitly, they return undefined

implicitly

functions can return other functions

5/19/2012 55

Constructors

when invoked with new, functions return an object known

as this

you have a chance of modifying this before it's returned

you can also return some other object

5/19/2012 56

Constructor functions

var Person = function(name) {

this.name = name;

this.speaks = 'fr';

this.say = function() {

return "Je m'appelle " +

this.name;

};

};

5/19/2012 57

An object created with constructor

>>>

var julien = new Person("Julien");

>>>

julien.say();

"Je m'appelle Julien"

5/19/2012 58

prototype

a property of the function objects

>>> var boo = function(){};

>>> typeof boo.prototype

"object"

5/19/2012 59

Prototypes can be augmented

>>> boo.prototype.a = 1;

>>> boo.prototype.sayAh =

function(){};

5/19/2012 60

Prototypes can be overwritten

>>> boo.prototype = {a: 1, b: 2};

5/19/2012 61

How is the prototype used?

when a function is invoked as a constructor

var Person = function(name) {

this.name = name;

};

Person.prototype.say = function() {

return this.name;

}

5/19/2012 62

How is the prototype used?

>>> var dude = new Person('dude');

>>> dude.name;

"dude"

>>> dude.say();

"dude"

5/19/2012 63

Own properties vs. prototype’s

>>> dude.hasOwnProperty('name');

true

>>> dude.hasOwnProperty('say');

false

5/19/2012 64

The prototype chain

5/19/2012 65

It’s alive!

>>> typeof dude.numlegs

"undefined"

>>> Person.prototype.numlegs = 2;

>>> dude.numlegs

2

5/19/2012 66

Inheritance

5/19/2012 67

Inheritance via the prototype >>> var Dad = function()

{

this.family = “Rahul";

};

>>> var Kid = function(){};

>>> Kid.prototype = new Dad();

>>> var billy = new Kid();

>>> billy.family

“Rahul"

5/19/2012 68

Inherit one more time

>>> var GrandKid = function(){};

>>> GrandKid.prototype = billy;

>>> var jill = new GrandKid();

>>> jill.family

“Rahul"

5/19/2012 69

Inheritance… >>> jill.hasOwnProperty('family')

false

>>> jill.__proto__.hasOwnProperty('family')

false

>>> jill.__proto__.__proto__.hasOwnProperty('family')

true

5/19/2012 70

Object-orientation in Dojo

One of the lesser-known facts about JavaScript is that it is an object-

oriented language.

However, it is a prototype-based object-oriented language that

doesn't have the same structure as class-based languages such as Java.

Dojo provides functionality to simulate class-based object-oriented

concepts such as declaring classes, constructors, and inheritance.

In the background, it takes care of things like prototyping,

inheritance, and various procedures that JavaScript requires.

5/19/2012 71

Working with classes

Dojo provides a dojo.declare() method that you should

use to declare a new class. It accepts the following

arguments:

A string representing the name of the class that you want to

declare.

The name of the superclass or array of names of the

superclasses that you want this class to inherit from. (I'll talk

more about multiple inheritance later.)

A hashmap of properties for the class. The properties

represent both instance variables and member function of

this class.

5/19/2012 72

Cont…

5/19/2012 73

Declaring a class

• dojo.declare("custom.javaworld.Worker",null,{

firstName: "",

lastName: "",

work: function(){

console.log("Working");

}

});

var johnDoe = new custom.javaworld.Worker();

johnDoe.work();

johnDoe.lastName ="Doe";

console.log("Last Name " + johnDoePerson.lastName);

Cont…

Here the dojo.declare() method's first argument is

custom.javaworld.Worker -- the name of the class we want to

declare. The method's second argument is null because we don't want

to inherit this class from any other class. The third argument is a

hashmap, in which work is the property's name and its value is a

function. We thereby define a work() member function for

the Worker class.

Once the custom.javaworld.Worker class is declared, you can

create a new object instance of it by calling new

custom.javaworld.Worker().

Then you can start calling the new object's methods or assign values

to its member variables.

5/19/2012 74

Constructors A constructor allows you to initialize every object of a class by executing

code whenever a new instance of the class is created.

Adding a constructor • dojo.declare("custom.javaworld.Worker",null,{

firstName: "",

lastName: "",

constructor: function(fName, lName){ console.debug("Constructor of com.javaworld.Worker called"); this.firstName = fName; this.lastName = lName;

},

work: function(){

console.log("Working");

}

});

var johnDoe = new com.javaworld.Worker("John","Doe"); console.log("First Name " + johnDoe.firstName); console.log("Last Name " + johnDoe.lastName);

5/19/2012 75

Inheritance

The ability to extend other classes is one of the basic features of

object-oriented programming.

Dojo handles all the requirements for setting up an inheritance

chain.

For example, when you create an instance of a class, Dojo calls the

constructor of its superclass before calling constructor of the child

class.

Also, if you add a method to the child class with same name as that of

the superclass, then the method in the child class overrides the

method in the superclass.

5/19/2012 76

Extending a class

creates a custom.javaworld.ITWorker class that

extends custom.javaworld.Worker.

dojo.declare("custom.javaworld.ITWorker",custom.javaworld.Worker,{

constructor: function(fName, lName){

console.debug("Constructor of com.javaworld.ITWorker");

},

work: function(){

this.inherited(arguments);

console.log("Writing Code");

}

});

var johnDoe = new com.javaworld.ITWorker("John","Doe");

johnDoe.work();

5/19/2012 77

Cont…

Because we want ITWorker to extend the Worker class, the above

code passes the custom.javaworld.Worker class as the second

argument when declaring the ITWorker class.

Now when you create a new instance of ITWorker using

the new operator, Dojo first invokes the constructor

of Worker class. Also, the ITWorker class's work() method

overrides the Worker class's work() method.

The .inherited() construct to invoke an inherited method of the

superclass.

Here when you call the ITWorker class's work() method, it first

invokes the Worker class's work() method, which prints

"Working" on the console then prints "Writing Code" on the

console.

5/19/2012 78

Multiple inheritance Dojo allows a class to inherit from multiple classes.

Create a PartTimeMusician class that inherits from both ITWorker and Musician.

dojo.declare("com.javaworld.Musician",null,{

constructor: function(fName, lName){

console.debug("Constructor of com.javaworld.Musician");

},

playMusic: function(){

console.log("Playing Music"); }

});

dojo.declare("com.javaworld.PartTimeMusician",

[com.javaworld.ITWorker,com.javaworld.Musician],{

constructor: function(fName, lName){

console.debug("Constructor of com.javaworld.PartTimeMusician");

}

});

var johnDoe = new com.javaworld.PartTimeMusician("John","Doe");

johnDoe.work();

johnDoe.playMusic(); 5/19/2012 79

Cont… we pass an array of ITWorker and Musician as the second

argument to the dojo.declare() method while declaring the PartTimeMusician class.

Now when you execute this code it will generate output like this: • Constructor of com.javaworld.Worker called

• Constructor of com.javaworld.ITWorker

• Constructor of com.javaworld.Musician

• Constructor of com.javaworld.PartTimeMusician

• Working

• Writing Code

• Playing Music

As you can see, the constructor of the Worker class, which is the parent of the ITWorker class, is invoked first, followed by the constructor of ITWorker.

The constructor of ITWorker is called before Musician's constructor because, while declaring the PartTimeMusician class, we passed an array of superclasses in which ITWorker was the first argument and Musician was the second argument.

http://dojotoolkit.org/documentation/tutorials/1.6/declare/ 5/19/2012 80

Overriding methods

A method of a superclass can be extended by declaring an attribute

with the same name.

There is no concept of overloading, as JavaScript ignores any

unexpected arguments and substitutes null for any that are missing.

In Java code, to invoke the overridden method you call the method on

super (that is, super().method Name(arg1, arg1);), but in Dojo you

use the inherited method (this.inherited(arguments);)

The Following Example shows two classes declared,

where child extends parent, overriding its helloWorld method, but

calls inherited to access the function of parent.

5/19/2012 81

Example

Invoking superclass method in Dojo dojo.declare( "parent", null,

{

helloWorld : function()

{

console.log("parent says 'hello world'");

}

} );

dojo.declare( "child", parent,

{

helloWorld : function()

{

this.inherited(arguments); // Call superclass method...

console.log("child says 'hello world'");

}

} );

var child = new child();

child.helloWorld(); http://www.ibm.com/developerworks/web/librar

y/wa-aj-dojo/ 5/19/2012 82

Remote Scripting with XHR

Remote scripting is the process of communicating with a server

from a client-side script without requiring a page reload.

•Each methods of remote scripting has advantages and

disadvantages. Although XHR began life as a Microsoft-only

technology, it is now available in all modern browsers.

5/19/2012 83

Cont…

XHR allows for full control of the HTTP transaction (URL,

headers, content), can use any HTTP method (GET, POST, PUT,

DELETE), and can be executed both synchronously and

asynchronously.

because of the same-origin policy, an XHR object cannot

communicate with a server that resides at a different origin than the

document that contains the script making the service request.

5/19/2012 84

Making an XMLHttpRequest

Most browsers provide a XMLHttpRequest object that allows you to

make an asynchronous request to the server and get a response

without refreshing the whole page.

But if you try to use the XMLHttpRequest object directly without

using a JavaScript framework such as Dojo, you'll run into problems

such as memory leaks and divergent, browser-specific APIs.

The Dojo toolkit simplifies the use of XMLHttpRequest by providing

a set of wrapper functions for the object.

The wrapper functions address common infrastructural issues by

providing a unified API, cross-browser compatibility, error handling,

data encoding, and much more.

5/19/2012 85

Cont…

The four wrapper functions all start with xhr (a short form

of XMLHttpRequest):

xhrGet() allows you to make an HTTP GET method call to the server.

xhrPost() allows you to make an HTTP POST method call to the server.

xhrPut() allows you to make an HTTP PUT method call to the server.

xhrDelete() allows you to make an HTTP DELETE method call to the

server.

Dojo also provides a generic xhr() function that takes the name of the

HTTP method that you want to use as an argument and makes the

requested method call.

5/19/2012 86

dojo.xhrGet

The dojo.xhrGet() function is the cornerstone function of AJAX

development.

Its purpose is to provide an easy to use and consistent interface to

making asynchronous calls to retrieve data.

This makes it much simpler to write cross-browser compatible AJAX

style applications.

This function, in essence, implements making an HTTP 'GET' call.

Limitations dojo.xhrGet (and other functions in the same line: dojo.xhrPost, dojo.xhrDelete,

dojo.xhrPut), are bound by the 'same domain' security policy of the browser.

This means that they can only establish a connection back to the same server that

served the HTML page.

5/19/2012 87

Ajax XML HttpRequest with Dojo

A Hello world Dojo Ajax example:

The file “data.txt” has a text statement “Welcome to Dojo Ajax!”.

This Web application just downloads the content of this text file, places it in the HTML “div” tag “put_here” placeholder, and displays it.

Assume the dojo core package dojo.js library is installed in the dojo directory in the root directory under webapps in a Web server such as Apache Tomcat.

If you browse this page, the “Welcome to Dojo Ajax” will be displayed in the HTML page.

5/19/2012 88

Here is the HTML file with a xhrGet Ajax request.

<html>

<head>

<title>Dojo Ajax</title>

<script type="text/javascript" src='dojo/dojo/dojo.js'></script>

<script>

function welcome() {

dojo.xhrGet( {

url: "data.txt",

// The load function is called on successful response from server

// It inserts the response to the HTML div “put_here” placeholder

load: function(response, ioArgs)

{

dojo.byId("put_here").innerHTML = response;

return response;

},

5/19/2012 89

Contd….

// The error function displays error message if server does not

// respond right

error: function(response, ioArgs)

{

console.error("HTTP status code: ", ioArgs.xhr.status);

return response;

}

});

}

//Invoke the welcome function when dojo starts up

dojo.addOnLoad(welcome);

</script>

</head>

<body>

<div id="put_here" ></div>

</body>

</html>

5/19/2012 90

Example

One uses Dojo xhrGet function to get data from the server and partially update the DHTML page without refreshing the whole page, just like all Ajax requests do. The other uses Dojo xhrPost method to post the DHTML form data to the server and receives responses back from the server to partiall update the client page.

The next example shows a Dojo xhrPost Ajax request in the following HTML file.

The request is sent to a JSP called response.jsp, which will respond to the Ajax xhrPost form request with a provided user name, and say “Hello <user name>”.

5/19/2012 91

<html>

<head>

<title>Hello User</title>

<script language="javascript"

src="/dojocore/dojo/dojo.js"></script>

<script language="javascript">

dojo.addOnLoad(function() {

var form = dojo.byId("sampleForm"); // save ref to form

dojo.connect(form, "onsubmit", function(e) {

// connect to, and disable the submit of this form

e.preventDefault();

// post the form with all it's defaults

dojo.xhrPost({

5/19/2012 92

form: form,

load: function(data) {

// set the form's HTML to be the response

form.innerHTML = data;

}

});

});

});

dojo.require("dijit.form.Button");

</script>

</head>

<body>

<form method="post" id="sampleForm" action="response.jsp">

<h3> Example of using xhrpost</h3><br>

Enter Name: <input type="text" length="20" name="myName"/>

<button type="submit" data-dojo-type="dijit.form.Button"

id="submitButton">Send it!</button>

</form>

<div id='Message'></div>

</body>

</html> 5/19/2012 93

Response.jsp

<%

String name = request.getParameter("myName");

if (name != null && !name.trim().equals("")) {

out.print("Hello " + name + "!");

} else {

out.print("You didn't enter a name!");

}

%>

5/19/2012 94

Data Source

5/19/2012 95

A data source is what the name implies, a source that provides data

to something.

In the case of a data store, a data source is where the data store

obtains its data.

A data source can be a database, a REST service, or even a JSON file.

For introductory purposes, we will look at the most simple data

source available, a javascript object.

Connecting dijit.Tree

5/19/2012 96

dojo.require("dojo.data.ItemFileReadStore"); dojo.require("dijit.Tree");

var storeData = { identifier: 'abbr', label: 'name',

items: [

{ abbr:'ec', name:'Ecuador', capital:'Quito' },

{ abbr:'eg', name:'Egypt', capital:'Cairo' },

{ abbr:'sv', name:'El Salvador', capital:'San Salvador' },

{ abbr:'gq', name:'Equatorial Guinea', capital:'Malabo' },

{ abbr:'er', name:'Eritrea', capital:'Asmara' },

{ abbr:'ee', name:'Estonia', capital:'Tallinn' },

{ abbr:'et', name:'Ethiopia', capital:'Addis Ababa' }

]}

<div data-dojo-type="dojo.data.ItemFileReadStore" data-dojo-props="data:storeData" data-dojo-id="countryStore"></div>

<div data-dojo-type="dijit.tree.ForestStoreModel" data-dojo-id="countryModel"

data-dojo-props="store:countryStore, rootId:'Countries', rootLabel:'Countries'"></div>

<div data-dojo-type="dijit.Tree" data-dojo-props="model:countryModel"></div>

5/19/2012 97

In the above example: The data source is the above javascript object

Each item is a country, and each item has three attributes: name, abbr, and capital.

The abbr attribute is an identifier. Each country has a different abbr for unique look up.

This is a simple, but powerful, way to represent data in the browser. It can also be quickly converted to a text format called JavaScript Object Notation (JSON).

The JSON format can be stored as files on your server and loaded via xhr calls.

dojo.data.ItemFileReadStore allows for the data to be defined in browser as an object, or from a JSON file of the same format.

The example shows how a datastore can be used to load the data and how widgets that are dojo.data aware can make use of it to display it easily.

dojo.data.ItemFileReadStore

5/19/2012 98

Dojo core provides an implementation of a read-only

datastore, ItemFileReadStore.

This store reads the JSON structured contents from an

http endpoint (service or URL), or from an in-memory

JavaScript object, and stores all the items in-memory for

simple and quick access.

ItemFileReadStore is designed to allow for flexibility in

how it represents item hierarchy, references, and custom

data types.

It also provides options for which an attribute can act as the

unique identifier, and which attribute can be used as a

general label for an item. http://dojotoolkit.org/reference-guide/1.7/quickstart/data/usingdatastores.html

Custom Widgets

5/19/2012 99

Let us create a simple widget that will just say "Hello, World!“.

First, Within “dojocore/Custom” sub-folder, create a

file CustomWidget.js with the following contents: dojo.provide('Custom.CustomWidget');

dojo.require('dijit._Widget');

dojo.declare("Custom.CustomWidget", dijit._Widget,

{

postCreate : function()

{

this.domNode.innerHTML = 'Hello, World!';

}

});

Cont…

5/19/2012 100

One of the more important functions of the

object dijit._Widget is postCreate.

We override the method to provide our implementation and that is

to simply set theinnerHTML of the container to the text Hello,

World!.

Now that we have got the widget, we do not know how and if it

works.

So, let's just write a simple test page (HTML) to use it. Create a file

Web Pages/custom-widget-test.html with the following contents.

5/19/2012 101

<html>

<head>

<title>Custom Widget Test</title>

<script type="text/javascript" language='javascript'

src="dojocore/dojo/dojo.js" djConfig="isDebug: true,

parseOnLoad: true"></script>

<script type='text/javascript' language='javascript'>

dojo.require('dijit.form.Button');

dojo.require(‘Custom.CustomWidget');

</script>

</head>

<body> <div id='w1' dojoType=‘Custom.CustomWidget'></div>

</body>

</html>

Customizing the Widget

5/19/2012 102

The next step is to customize the Hello, World! with a user defined content.

Let's say that the default value of the content to be displayed is Hello, World!. To this effect, update the CustomWidget.js as follows:

dojo.declare(“Custom.CustomWidget", dijit._Widget, { text: 'Hello, World!',

postCreate : function() {

this.domNode.innerHTML = this.text;

}

});

Simultaneously, we update the custom-widget-test.html file to as follows:

<body> <div id='w1' text='Hello, Java World!' dojoType=‘Custom.CustomWidget'></div> </body>

Templated Widgets

5/19/2012 103

Dijit sub-framework in Dojo Toolkit provides a support for

templated widgets through the object dijit._Templated.

Well, we do not inherit this but use as a mixin and

choosedijit._Widget as the parent object.

_TemplatedMixin implements buildRendering() for you, and all you

have to do is specify a template i.e, an HTML fragment, that specifies

the DOM for the widget.

http://livedocs.dojotoolkit.org/quickstart/writingWidgets

104 5/19/2012

References:

5/19/2012 105

http://ofps.oreilly.com/titles/9780596516482/index.html

http://livedocs.dojotoolkit.org/dojo/request/

http://dojotoolkit.org/documentation/tutorials/1.6/declare/

http://www.javaworld.com/javaworld/jw-01-2009/jw-01-introduction-to-dojo-1.html?page=1

http://dojotoolkit.org/reference-guide/1.7/dojo/data.html#dojo-data

http://www.java2s.com/Tutorial/JavaScript/0570__Dojo-toolkit/Catalog0570__Dojo-toolkit.htm

http://www.roseindia.net/dojo/index.shtml

http://www.json.org/

106 5/19/2012