You are on page 1of 37
Dojo Tutorial Girish Srivastava
Dojo Tutorial
Girish Srivastava

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

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 develo free or

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

DOJO Core
DOJO Core
What Is Dijit?
What Is Dijit?

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

  • Developer depends on the browser support for

the Dojo

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

JQuery versus Dojo versus YUI

  • Pros:

JQuery

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

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

  • • Dojo Toolkit  Pros: - Debug your code in Firebug - Dojo integrated in Zend
    • 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
    • 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

    Loading Dojo ToolKit

    Install Dojo  Downloading Dojo  You can download the latest version of Dojo from its
    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.

    Remoting

    (Ajax Application)

    Dojo Hello World <html> <head> <title>button</title> dojo.addOnLoad(init); </script> </head> <body bgcolor="#FFFFCC"> <script type="text/javascript"> <p align="center"><font size="6"
    Dojo Hello World
    <html>
    <head>
    <title>button</title>
    dojo.addOnLoad(init);
    </script>
    </head>
    <body bgcolor="#FFFFCC">
    <script type="text/javascript">
    <p align="center"><font size="6"
    dojo.require("dojo.event.*");
    dojo.require("dojo.widget.*");
    dojo.require("dojo.widget.Button");
    color="#800000">Welcome to Dojo
    Project</font></p>
    <button dojoType="Button"
    function helloPressed()
    widgetId="helloButton"
    {
    alert('Click on the Hello World Button');
    }
    onClick="helloPressed();">Hello
    World!</button>
    <br>
    function init()
    </body>
    </html>
    {
    var helloButton = dojo.widget.byId('helloButton');
    dojo.event.connect(helloButton, 'onClick', 'helloPressed')
    }
    • 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

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

    • 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

    • RadioButton… etc.