2. 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:
Introduction to DOJO
Features of Dojo
Why DOJO tool kit?
DOJO tool kit Libraries
Comparison between different tool kits
3. 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
4.
5. 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..
14. 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
15. 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
16.
17. 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 supports plug-ins, but all these plug-ins are
not verified.
- JQuery is a library
18. •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. • 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. 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
27. 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.
32. Dojo Hello World
<html> dojo.addOnLoad(init);
<head> </script>
</head>
<title>button</title>
<body bgcolor="#FFFFCC">
<script type="text/javascript"> <p align="center"><font size="6"
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*"); color="#800000">Welcome to Dojo
Project</font></p>
dojo.require("dojo.widget.Button"); <button dojoType="Button"
function helloPressed() widgetId="helloButton"
{
onClick="helloPressed();">Hello
alert('Click on the Hello World Button');
World!</button>
} <br>
function init() </body>
{ </html>
var helloButton = dojo.widget.byId('helloButton');
dojo.event.connect(helloButton, 'onClick', 'helloPressed')
}
33. The above example we have created 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
34. 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 abutton element for the
button that is used to input element - Dojo will work with
either as long as thedojoType attribute is present.
35. widgetId="helloButton": This is replaced
with id="helloButton" without the functionality
being affected - Dojo's widget system is smart
enough to convert regular idattributes 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
Like This we can create can create different different
examples.
CheckBox …
ComboBox…