Introduction to DOJO Toolkit

by · February 6, 2009

dojo-toolkit-javascript-framework-logo

Introduction

– Dojo is an Open Source DHTML toolkit / Dojo is JavaScript framework released as open source software. – Dojo delivers on the promise of Web 2.0 terms like Comet and Ajax by helping you create rich and interactive web apps. – It builds on several contributed code bases like widgets. It is unified toolkit. – Dojo provides higher abstraction layer to the programmer. So, it helps the programmers to develop powerful functions very easily. – Dojo offers many widgets, utilities and Ajax libraries to develop your application. It’s a great framework for developing Ajax based applications.

Why DOJO?

– It helps in DOM scripting. – It helps in event management. – It shortens the time between idea and implementation by providing a well conceived API and set of tools for assisting and fixing the issues experienced in everyday web development – It provides an abstraction over the difficult JavaScript. – We can use arrays, object, classes , and many more inbuilt components as easily as we include a <input> tag in the HTML pages.

Downloading DOJO

Download the newest released version of the Dojo Toolkit from: http://dojotoolkit.org/download/ Unpack the contents of the archive into a folder. You will see the following folders. You can get a dojoroot folder and three other folders dijit, Dojo, dojox. You just have to place these folders into your WebContent folder of J2EE project.

Folder Structure

Dijit – Dijit makes a developing and reusing interface components very easy. If you can write HTML and CSS, Dijit allows you to quickly build reusable client side components. It contains js files for reusable components as well as demos. DOJOX – “Edge of the web” features are being developed in the Dojox namespace. It provides a sandbox where these new components can be added without constrained by the high standard of testing. Individual projects in the dojox contains README file. DOJOX – Dojo features built-in internationalization and localization support, full accessibility hinting in all Dijit widgets. Infrastructure to support keyboard event handling and the ability to theme all Dijit components using only CSS. For using any of the components in Dojo toolkit you have to have knowledge of above all folders. You can get all the demos and code for creating a rich UI.

DOJO component

Dojo framework comes up with many components like – DOJO Tree – DOJO filtering Select – DOJO combo box – DOJO Button – DOJO Calendar control – DOJO Grid

Coding in DOJO

To use dojo we have to write some script and include some style sheets which have the default styles to the component.
<style type="text/css">
            @import "dojoroot/dijit/themes/tundra/tundra.css";
            @import "dojoroot/dojo/resources/dojo.css";
</style>
<script type="text/javascript" src="dojoroot/dojo/dojo.js"
          djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
        dojo.require("dojo.data.ItemFileWriteStore");
        dojo.require("dojo.data.ItemFileReadStore");
        dojo.require("dijit._tree.dndSource");
        dojo.require("dijit.Tree");
        dojo.require("dojo.parser");
        dojo.require("dojo.dnd.Source");
</script>

Code language: HTML, XML (xml)
This line i.e “dojo.require“ instruct you to load the Dijit tree widget. If you don’t include this line, the markup code for the tree would not be evaluated by Dojo upon loading. You always have to include particular component you are using in your application. JSP File
<body class="tundra">
        <h1>Tree Drag And Drop</h1>
       <div dojoType="dojo.data.ItemFileReadStore" url="TreeData"    jsid="popStore">
       </div>
        <div dojoType="dojo.data.ItemFileWriteStore" url="newtree.json"   jsid="newtree" />
        </div> 
        <table>
            <tr>
                <td> <div dojoType="dijit.Tree" store="popStore" labelAttr="Tree" 
                           checkAcceptance="stopDnd" dndController="dijit._tree.dndSource" label=“Root"  jsid="ptTree">
                            <script type="dojo/method" event="getLabelClass" args="item"></script>
                    </div>
                </td>
                 <td> 
                       <div dojoType="dijit.Tree" jsid="newTree" label="Drop Selection Here" 
                          class="source" store="newtree" onClick="onClick" labelAttr="name" 
                          childrenAttr="children, items" onDndDrop="tree2CustomDrop" 
                          dndController="dijit._tree.dndSource" checkAcceptance="dndAccept">                       
                       </div>
                </td>
            </tr>
        </table>
        <br>
        <br>
        <div id="selection"></div>
        ...
        ...

Code language: HTML, XML (xml)
<div dojoType="dojo.data.ItemFileWriteStore" url="newtree.json"   jsid="newtree" />
This line reads the tree parents n child nodes from a json “newtree.json”.
For reading that store we have to use “ItemFileWriteStore” which is of dojotype.

<div dojoType="dijit.Tree" jsid="newTree" label="Drop Selection Here" 
    class="source" store="newtree" onClick="onClick" labelAttr="name" childrenAttr="children, items"
In above line we assign a dojo type to the formed jsid. And provide a method onclick for writing a required behavior of tree. 

Code language: HTML, XML (xml)
Lastly we have to make an entry of servlet in StrutsConfig.xml We can form a json string in the servlet only and pass it to the client. I.e. front end. Making Ajax call from a js using DOJO is somewhat different.
var dataUrl = "FetchTreeCriteria.do"; 
var xhrArgs = {url: dataUrl+"?"+"cell_Id="+cellId,handleAs:     "json-comment-optional", preventCache: true};
var gotData = function(data){
  //Fetching a data from database.
 }
var rdata = dojo.xhrGet(xhrArgs);
rdata.addCallback(gotData);

Code language: JavaScript (javascript)
By using an above code you can make Ajax call and by providing a variable after question mark we can pass request parameters to the Servlet. By using xhrGet method we can make XHR call. All Dojo XHR methods are bi-directional. The only difference is the method. Using dojo.xhrPost, we use the POST method, embedding the data in the request (as opposed to the query string as with dojo.xhrGet). The data can be set directly as an object passed to the content: parameter.
Get our Articles via Email. Enter your email address.

Tags:

You may also like...

6 Comments

  1. Gaurav says:
    9 February, 2009, 11:56  

    very good tutorial … it helped me a lot.

    Reply
  2. Narendar says:
    28 May, 2012, 15:58  

    Good Tutorial..

    Reply
  3. Kumar Kurmar says:
    6 June, 2012, 1:43  

    The Download page is not working.

    Reply
    • Viral Patel says:
      6 June, 2012, 7:14  

      The link was broken. I’ve fixed it now. Please try again. Thanks for pointing this out.

      Reply
  4. Govinda says:
    14 August, 2012, 18:54  

    Viral could you please put some coding stuff related to calling a servlet from using dojo..

    Reply
  5. Sangeet says:
    7 November, 2012, 14:08  

    its wonderful Tutorial..

    Reply

Leave a Reply

Your email address will not be published. Required fields are marked *

Follow: