How to Setup DOJO Application?

DOJO is a JavaScript framework for building the Rich Internet Applications (RIA). It is very much similar to the another most popular framework built on JavaScript, that is jQuery (jQuery Articles). This framework become quite successful framework for building the great UI components because of its simplicity to use and vast scope on its library files. This community also keeps adding lot of new features and enhancements to this framework. It provides more confidence to the developers who are using this framework. This article explores how one can setup application in server with few easy steps. This is only very basic steps for setup the initial configurations. This article doesn’t explain the advanced concepts.

This framework can be added to your project in two ways.

  • 1. AOL CDN or Google CDN (What is CDN?)
  • 2. Installing in your server

DOJO ToolKit

Content Delivery Network (CDN)

It is very simple to install using the CDN way. When you are using the CDN for accessing framework files, user need not allocate any space for installing the this libraries. The files are hosted on the CDN and it is just accessed using the CDN. Note that, this solution might not be viable for all the projects. If the server which is running the application is not connected to the internet, then it will not work. Also some clients may not be interested in allowing external network to be used/depend for running their application. If you are running any sample programs, or your application server is always connected to the internet, then this solution will be more suitable.

The following line of code has to be added for importing the dojo files from the CDN. This is hosted in the Google CDN (This shows how the computing world moving towards the cloud computing).

    <script src="http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js"></script>

Installing DOJO in Your Server

Second way of installing the this framework for your application is to download the source from dojo repository and upload to your server. It is very much traditional way of doing any application development. IN general, if you are using eclipse for the development, follow the steps :

  1. Create Dynamic Web Project
  2. Create a folder “js” under WebContent
  3. Copy the framework source inside the folder “js”. Your application will point to this folder for acessing the dojo files.

Please look into the below image for the actual structure of the framework project folders. It is a simple structure for a dojo project. The following line has to be added for importing the libraries.

DOJO Folder Structure

<script src="js/dojo-release-1.9.0-src/dojo/dojo.js"></script>

The following line of code shows how to write very simple DOJO program with a text box in web page.

<!DOCTYPE html>
<%@ page language="java"
contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<html>
<head>
<link rel="stylesheet" href="js/dojo-release-1.9.0-src/dijit/themes/claro/claro.css" media="screen">
</head>
<script src="js/dojo-release-1.9.0-src/dojo/dojo.js"></script>
<script>
require(["dojo/parser", "dijit/form/TextBox"]);
</script>
<body>
<input type="text" name="firstname" value="Testing"
data-dojo-type="dijit/form/TextBox"
data-dojo-props="trim:true, propercase:true" id="firstname" />
</body>
</html>
  • In the above code,dojo/parser is used for parsing the dojo types through DOM and converting to the html elements. data-dojo-type is a dojo attribute which indicates an equivalent html element at the time of rendering the components.
  • Dojo parser’s job is to convert all the dojo types in a page to corresponding html elements. dijit/form/TextBox is the text box type in dojo. This page is just rendering a simple text box with the value “Testing” in it.
  • require is needed in all the web pages for importing the APIs which is used in the page. It is the same way how we are importing the Java class files in the Java programming. Whatever the components used in that web page has to be imported using the require.

Reference:

Recommended Books:

Leave a Reply

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

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>