Dojo

In this first section of Dojo tutorial we will familiarize you with the Dojo framework. Dojo is another great JavaScript framework to develop ajax based application.

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.

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..

In the next sections you will be learning about all these components in details.

————————————-

Benefits of Dojo Framework

In this section we will see the 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

Disadvantages of Dojo Following are the 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

Why Dojo?

Choosing a ajax framework for your next web application can be very difficult task for you. There may be many choices for the ajax framework. There are many frameworks already available in the market for developing ajax applications. Both commercial and free ajax software’s provides many features.

Read more on the Dojo Official web site here. In the next section we will learn how to install Dojo.

————————-

In this section we will learn how to download and install Dojo in your web application. You can easily add Dojo support into your existing application.

This section covers:

  • Download and install for new development
  • Download and install Dojo into existing application

Downloading Dojo

You can download the latest version of Dojo from its official site http://dojotoolkit.org/. The latest version of Dojo was Dojo Toolkit 1.1.1 at the time of wiring of the tutorial.

Download the Dojo toolkit directly from http://dojotoolkit.org/downloads.

In our case the downloaded file was dojo-release-1.1.1.tar.gz.

Installing Dojo

First choose the directory in your computer where you want to install the Dojo for this tutorial. Let’s assume that the directory is c:\mydojo. Now move the downloaded file into the “c:\mydojo” directory and unzip it using WinZip tool or winrar tool. You will get a new directory called “dojo-release-1.1.1″. Here is the screen shot from my computer:

Now you ready to start the development. In next section I will show you how to develop simple “Hello World” Dojo application.

Installing Dojo into existing application

Installing Dojo into existing application is also a very easy task. You have to just copy the directory “dojo-release-1.1.1″ into your existing project. You can rename the directory “dojo-release-1.1.1″ to dojo for easy programming.

Now get ready to develop “Hello World” application in next section.

————————–

In this tutorial, you will learn how to create a “Hello World” example in Dojo. Before creating any examples or applications you must be follow the its directory structure.

Try Online: Hello World

Create a Button

The following example we are going to create a button “Hello World!”. To create a button in dojo you need to a Button Widget that contains three visual states as: mouseOut, mouseOver and mouseDown. To follow the following steps for creating a dojo button widget:

<script type=”text/javascript”>
// Load Dojo’s code relating to widget managing functions
dojo.require(“dojo.widget.*”);

// Load Dojo’s code relating to the Button widget
dojo.require(“dojo.widget.Button”);
</script>

dojo.require(“dojo.widget.*”): It instructs you to include the dojo widget (Not load all the widgets) for managing functions.

dojo.require(“dojo.widget.Button”): This line instructs you to load the Dojo button widget. If you don’t include this line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect.

Insert the following code into the  HTML body:

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>

The key attribute of this HTML element to notice is the dojoType attribute. This is responsible for instructing Dojo on how to process the element when the page is loading. In this case you will use a button element for the button that is used to input element – Dojo will work with either as long as the dojoType attribute is present.

widgetId="helloButton":  This is replaced with id="helloButton" without the functionality being affected – Dojo’s widget system is smart enough to convert regular id attributes to widgetId's if no widgetId` attribute is explicitly named.

Connecting an Event to the Widget

When you click the command button then it doing something? We specify an onClick event handler for the given command button.

dojo.require("dojo.event.*");

Above code we use “dojo.event.*” that includes all events functionality of Dojo (But not all widgets).

Following function that will called by the button when we clicked. After clicking the “helloPressed” method is called and it displays an alert message like: “Click on the Hello World Button”.

function helloPressed()
{
alert('Click on the Hello World Button');
}

Here is the code of program:

<html>

<head>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");

function helloPressed()
{
alert('Click on the Hello World Button');
}

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

dojo.addOnLoad(init);
</script>

</head>

<body bgcolor="#FFFFCC">

<p align="center"><font size="6" color="#800000">Welcome to Roseindia Dojo Project</font></p>

<button dojoType="Button" widgetId="helloButton" onClick="helloPressed();">Hello World!</button>
<br>

</body>

</html>

Output of program:

After clicking the “Hello World!” command button, you get:

Try Online:

Leave a Reply