Get started with Dojo Javascript Framework

Introduction

Dojo is an Open Source JavaScript framework toolkit. It provides modularity in code via dojo classes. Dojo gives desktop as well as mobile support and also provides rich UI by using Dijit widget. Dojo gives uniform access to browser APIs. 

Why DOJO

It helps in Scripting and event management. It provides abstraction layer to the programmer to develop powerful features very easily. Dojo base size is very small (26 KB) which take less bandwidth and less initial load time (based on required feature).

Download DOJO

Download the Latest released version of Dojo Toolkit from http://dojotoolkit.org/download/ 

After downloading, extract the contents of archive folder. In that folder you get three folders Dojo, Dijit, Dojox. Put these three folders in your Web project’s folder.

Folder Structure of Dojo Toolkit –

Folder_Structure

1 – Dojo – This is the core API of this framework and contains all that is required initially(like classes declaration, event listening ,asynchronous request etc.)

2 – Dijit – Dijit constitutes developing and reusing interface components built on top of dojo core. If you can write HTML and CSS Manualy, Dijit allows you to quickly build reusable client side components. It contains js files for reusable components.

3 – Dojox – This could be considered as dojo plugins meant for testing of new features that will be the part of Dojo or Dijit namespace in future.

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

Features :

Dojo toolkit has features like Associative arrays, Highly evolved date, math, and string libraries and W3C DOM support.

Note:-

Developers have to check whether their browser supports Dojo and there is no way to hide the Dojo code.

How to Use dojo Widgets

Example of a Simple Dojo Application:

In this application we use Number Textbox which is very advance Textbox And also see some its functionalities.

First you Download Dojo Toolkit from: http://dojotoolkit.org/download/

Extract it in the Content folder of the dynamic web project.

In the Content folder create a new HTML page.

-In the Head section put this content

<head id=”Head1″ runat=”server”>

<titleFirst Application </title>

<link href=”dojo-release-1.8.1/dijit/themes/tundra/tundra.css”

rel=”stylesheet”type=”text/css”/>

<script djconfig=”parseOnLoad: true” src=”dojo-release-1.8.1/dojo/dojo.js”

type=”text/javascript”></script>

<script type=”text/javascript”>

dojo.require(“dijit.form.NumberTextBox”);

</script>

</head>

Head section Code:

– We are using tundra.css and have imported core Dojo library from dojo.js.

In this Application, we set the parseOnLoad property to true using djConfig attribute, because if we don’t set it to true there will be no widget creation.

The dojo.require() function is used to import JavaScript library/package. In this application we import dijit.form.NumberTextBox widget. If you want to use any other widget you can use dojo.require() for import package.

In the Body section put this content

<body class=”tundra”>

<form id=”form1″ runat=”server”>

<div>

<h1NumberTextBox Application Demo </h1>

<label id=”lblNumberTextBox “> NumberTextBox </label>

<input id=”NumTxtBox”  dojotype=”dijit.form.NumberTextBox”/>

</div>

</form>

</body>

In the body section:

We set tundra class in the body tag. All form widgets are added using the <input> or <select> tag and the dojoType attribute.

When you will run this Application following page will be displayed.

NumbertTextBox Demo

When we enter value like 12345678 then it shows like this.

NumberTextBoxWithComma

And when we enter decimal value like .12389 then this control converts it into round figure

NumberTextBoxWithroundValue

And when we give wrong input it will give an error as follows:-

NumberTextBoxWithError

Resources

Dojo has good  tutorials and blogs that help developers to understand the Dojo framework.

Uselfull link: http://dojotoolkit.org/api/

2 thoughts on “Get started with Dojo Javascript Framework

  1. Nice post.
    Your post mentions that “Developers have to check whether their browser supports Dojo”.
    – Can you please also give the list of supported browsers if it is not supported on all the browsers. Are there some serious limitations here.
    – Also, any other limitations ?

    • Dojo latest version supports following browsers Firefox 3.6-12, Safari 5-6, Chrome 13-21, IE 6-9, Opera 10.50-12 (Dojo core only).

      If a browser is not supported, it still may work, because dojo developer did not test on unsupported browser.

Leave a Reply

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


+ eight = 12

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>