Recommend this
on Google+

Recommend this
on Google+

Tuesday, August 31, 2010

Dojo … What a wonderful toolkit!!!

Dojo Toolkit

 

Introduction:

 

                It’s no wonder when we say, “Appealing & intuitive looks of user-interfaces play key role in determining a product’s success”. A perfect analogy for this would be comparison of Unix & Microsoft Windows. During early days of computing when Unix and Windows were competing to gain hold of PC, this UI played a crucial role in making the later more successful.

 

Now-a-days, web-applications are in drift towards replacing desktop-applications, they need to combine their richness in UI, along with the power of web. In fact, one would wonder while comparing the capabilities offered by online version of Office Suites & their desktop counterparts. Hence, it would be a great experience if we could develop such UI’s in our websites with minimal coding.

 

Dojo is one such JavaScript libraries that offer developers to create stunningly great interfaces. Most importantly, it saves lot of time & toil, at the same time gives powerful performance & scalability when coupled with AJAX.

 

What’s in for me?

 

                Now that you know why Dojo exists, let’s start what it’s made up of! Dojo is a toolkit for JavaScript, that offers flexible and adaptable library for enhancing user interface of web pages. It’s very simple to say that Dojo is just JavaScript code, yet yields wonders with it’s underlying complex functions.

               

From a web developer’s perspective, Dojo is a third-party library extension to JavaScript that enhances DOM with a set of tools & API. Most importantly, adding Dojo’s flavor to your existing recipes is as easy as adding a pinch of salt to your dish. Dojo’s features can be classified as:

1.       Data – dealing with a variety of compact database formats (CSV, AtomFiles, GoogleSearch etc.)

2.       Drag and drop – Enabling easier representation of information

3.       FX (or effects) – Visual effects to animate UI.

4.       IO – All the methods to perform IO. Includes from XMLHttpRequest to several Scripts.

5.       Query – To standardize the way of accessing DOM elements via CSS Selectors.

 

The entire Dojo API is organized into namespaces, similar to many modern language libraries. Most importantly, it’s an open-source produce that can be used with absolute peace of mind.

 

Getting Started:

 

Before we go ahead, I recommend you to download Dojo from http://www.dojotoolkit.org/download, for clear understanding of the rest of this document. Please be advised that the rest of the document deals with “dojo.js” contained in API, and refers to the other files/folders (dijit, dojox, dojoC etc.,) if required.

 

Let’s get used to few basics of Dojo functions, that are commonly used, to help us grasp the essence:

1.       dojo.require(“namespace”) – used to import all the functionality out of dojo.js ‘s scope.

2.       dojo.addOnLoad(nameOfTheFunction, or definition of the event handling function) – Registers a function  with the event that is fired after finishing the document-loading-process. Do ensure that when you pass the name of a function to this method, DO NOT keep parenthesis (Brackets we usually keep while calling other functions). Doing so calls the method immediately, instead of executing as an event handler.

3.       dojo.byId(“idOfAnElement”) – Returns the DOM reference of an element in the HTML page. It can be used instead of document.getElementById(). Due to variations in DOM API of different browser vendors, getElementById() has non-uniform behavior. Dojo conceals this by offering byId() that abstracts underlying differences.

4.       dojo.query(“cssClassSelectorId”) – Returns a list of DOM references that have “class” attribute as cssClassSeletorId in HTML page (Ex: <input type=”text” class=cssClassSelectorId” … />.

5.       dojo.forEach(listOfEntries,functionORnameOfaFunction) – Performs an action on each element retrieved by a query.

6.       dojo.connect(srcObj,”srcEvntMethod”,targetObj,”targetEvntMethod”) – Provides a excellent way to weave events. In other words, this makes an event to execute it’s handler & also fires another event each time it’s fired. This makes your code look cleaner, and simple. srcObj and srcEvntMethod are the source of first event, while targetObj & targetEvntMethod are the targets executed each time source is triggered.

 

 

Kick starting the application:

 

To use Dojo in your application, follow the steps mentioned below.

1.       Copy dojo.js file into your application directories (Usually “javascript/” ).

2.       Place the script tag in your HTML header to include javascript.
Example:
<script type=”text/javascript” src=”javascript/dojo.js” djConfig="parseOnLoad:true, isDebug:true"></script>
Don’t worry if you hadn’t understood the attribute djConfig and it’s value. Dojo can be tuned to various configurations to better build the code & run it in production. djConfig is the attribute to specify those options. parseOnLoad and isDebug are two commonly used options in configuration. parseOnLoad is used to make dojo’s parser to initialize few controls in widgets, by adding an attribute called dojoType inside HTML page elements. isDebug
option enables/disables displaying certain debugging messages at the time of development.
That’s it, dojo is now your friend!

3.       Making the document ready! As observed earlier, dojo offers us a feature to avoid browser incompatibilities via it’s API. As part of it, a event called dojo.ready(functionName)  to gets fired after completing the document loading of the browser. With it, you can always be sure that page has completed to load irrespective of any browser. It’s highly important to make sure that no script runs to alter DOM before ready() event when using dojo. In other words, any code should start to run only after ready() in dojo. Most importantly, do not even use onLoad event of standard DOM when using dojo. Dojo offers all such mechanisms via it’s own API to make you sure of avoiding browser incompatibilities.

4.       Use the dojo.require() to import the required components of dojo and continue writing code that fits your requirement.

 

 

Examples & Sample Codes:

 

Please feel free to use the below template, whenever you want to code an HTML page in a web application using dojo.

 

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"

        "http://www.w3.org/TR/html4/strict.dtd">

<html>

    <head>

        <title>Dojo Toolkit Test Page</title>   

   

        <!– load the dojo toolkit base –>

        <script type="text/javascript" src="js/dojotoolkit/dojo/dojo.js"

            djConfig="parseOnLoad:true, isDebug:true"></script>

   

        <script type="text/javascript">

            /* our JavaScript will go here */

        </script>

   

        <style type="text/css">

        /* our CSS can go here */   

        </style>   

    </head>

    <body><!– this is a Typical WebPage starting point … –>

        <h1 id="testHeading">Dojo Skeleton Page</h1>           

        <div id="contentNode">

            <p>Some Content To Replace</p>

        </div>

    </body>

</html>

 

 

Do come back for exciting demos.

More smiles per day,

K Chandrasekhar Omkar.