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:

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Trackbacks

  1. […] In my previous article I have explained about how to create Pie Chart using DOJO. In this article I will explain about the another variant of charts that is Bar Chart. Bar Chart is another most popular chart for representing the data. This chart is mostly used for comparing the two data in the various periods or various sections (Read: How to Setup DOJO Application?). […]

  2. […] my previous article I have explained about the pie chart, bar chart and how to setup DOJO framework. These examples are written with very basic concepts to make the readers understand how to write a […]

  3. […] is Package?: As a first step, create DOJO project as mentioned in this article. It is always good idea to follow the best practice for creating the project structure. The […]

  4. […] In the recent trend, many companies started using the Java Script frameworks like jQuery, DOJO, etc. Still there are clear advantages on using the JSF, but the technology trend is moving in […]

Speak Your Mind

*