INTRODUCTION TO DOJO

What is DOJO??

DOJO is an Open source JavaScript toolkit that makes professional web development better,easier and faster.

It builds on several contributed code bases, which is why we refer to it sometimes as a “unified” toolkit which consists of a set of JavaScript libraries.

Dojo contains sub packages of JavaScript code to take care of all of the infrastructure work that you normally have to write yourself when you build a JavaScript application.

Cont..

Dojo provides to make your web sites more useable, responsive, and functional.

Dojo does all of these things by layering capabilities onto a very small core which provides the package system

and little else .

Aims to solve some long-standing historical problems with DHTML like browser incompatibility.

Dojo Architecture

As illustrated in the diagram the Dojo toolkit is made of a set of layered libraries.

The bottom most layer is the packaging system which allows you to customize the distribution of Dojo for your application.

On top of Dojo's package system reside language libraries such as the Dojo event system and the language utilities which greatly improve and simplify the lives of JavaScript developers.

Cont..

The bulk of the Dojo code lives in the application support libraries, which are too numerous to display completely in the diagram.

lfx is a lightweight effects library, while I/O is "where the ajax lives.“

A higher layer and highly popular piece of Dojo is the widget toolkit, which contains a set of APIs and functionality for defining and instantiating reusable components across your application.

Your application code may use functionality from any or all of the different layers in the toolkit. Dojo is designed to simplify building sophisticated JavaScript applications.

Adding Dojo to your HTML pages

1. Flags<script type="text/javascript">djConfig = { isDebug: false };</script>

2. Dojo Bootstrap<script type="text/javascript" src="/path/to/dojo/dojo.js"></script>

3. Adding Resources <script type="text/javascript">

dojo.require("dojo.event.*");dojo.require("dojo.io.*");dojo.require("dojo.widget.*");</script>

What are widgets?Is a UI element such as a button, text box, scroll bar, calendar, tree etc

Widgets "enhance the user experience".  In layman's terms, that means that you can design web pages that are easier for people use, more quickly understandable, less error-prone, and flashier than web pages in plain html.

Three Ways of Adding Widgets to Your Page.

1)<dojo:NameofWidget ../> 2)<div dojoType="NameOfWidget" ..../> 3)<div class="dojo-NameOfWidget" .../>

Eg:<button dojoType="Button" id="foo"> Click me </button>

Dojo Events

Events are essential in JavaScript components as they drive the user interface.

allows JavaScript components to interact with each other.

It abstracts the JavaScript event system.

Lets you register to "hear" about any action through a uniform and simple to use API - dojo.event.connect().

Treats any function call as an event that can be listened to

It provides advanced event handling schemes.

Aspect oriented - your event handler can be called “before” or “after”.

dojo.event.connect(srcObj,"srcFunc", "targetFunc").

eg: dojo.event.connect(helloButton, 'onClick', 'helloPressed')

Dojo.io.bind

The dojo.io.* namespace contains generic APIs for doing network I/O.

dojo.io package provides portable code for XMLHTTP and other, more complicated, transport mechanisms .

dojo.io.bind() is a generic asynchronous request API that wraps multiple transport layers

dojo.io.bind() hides low-level XMLHttpRequest operations.

dojo.io.bind() Syntax:

// Make a request that returns raw text from a URL dojo.io.bind({

// URL to make a request to url: "http://foo.bar.com/something",

// Callback function to execute upon successful response load: function(type, data, evt){ /*do something w/ the data */ },

// Type of data that is returned mimetype: "text/plain“});

Example : Error Handling

// Make a request that returns raw text from a URL

// with error handling

dojo.io.bind({ url: "http://foo.bar.com/sampleData.txt",

load: function(type, data, evt){ /*do something with the data */ },

error: function(type, error){ /*do something with the error*/ },

mimetype: "text/plain"});

HelloWorld demo:

• Step1: Setting up Dojo

- HelloWorldTutorial/- | - |---- js/

- | ---- dojo/

• HelloWorldTutorial/ | |-- js/ | -- dojo/ | -- build.txt -- CHANGELOG -- demos | -- .. -- dojo.js -- dojo.js.uncompressed.js -- iframe_history.html -- LICENSE -- README -- src/ | -- ..

Cont..

• Step2: Include dojo.js which is responsible for loading the base

Dojo script that provides access to all the other Dojo functionality that we will use.

• Step3:Creating a Button Widget .

• Step4:

Connecting an Event to the Widget .• Step5:

Reading Data from the Server

Source code:

• <html>• <head>• <title>Dojo: Hello World!</title>

• <!-- SECTION 1 -->• <script type="text/javascript" src="js/dojo/dojo.js"></script>• • <!-- SECTION 2 -->• <script type="text/javascript">• dojo.require("dojo.io.*");• dojo.require("dojo.event.*");• dojo.require("dojo.widget.*");• dojo.require("dojo.widget.Button");

Source code:

function helloPressed() { dojo.io.bind({ url: ‘response.txt', handler: helloCallback

});

}

function helloCallback(type, data, evt) { if (type == 'error') alert('Error when retrieving data from the server!'); else alert(data); }

function init() { var helloButton = dojo.widget.byId('helloButton'); dojo.event.connect(helloButton, 'onClick', 'helloPressed') }

dojo.addOnLoad(init); </script> </head>

<body> <button dojoType="Button" widgetId="helloButton">Hello World!</button> <br> Please enter your name: <input type="text" id="name">

</body></html>

Advantages

• Code Simplification

• Reusable Code

• Portable Tools

• More responsive and functional

Thank You