If you are a Java developer, you must be very familiar with the build scripts and have good understanding on the various build tools like ant, maven, etc. We know that the main purpose of the build is too compile (Read : Java Compiler API) the source code to the executable form and then make the distributable archive file. In Java, source files are compiled to byte codes using the compiler and executed in the Java Runtime Environment (JRE).

Why DOJO Build: OK, then why we we need build tool for JavaScript framework?. Is it compiled?. This would be the first question asked by any Java developer who want to start learning the DOJO / JavaScript build. Let me first clear this basic question before start explaining the build process.

Server Loading Time: Whenever you have to send a code to the client machines through the network, it takes the bandwidth. If the web page is more complicated with more number of JS, CSS and Images, then it has to be downloaded to the browser which is going to make the user wait till the page is loaded. Also browser can not download all the resources simultaneously. It has the limitation of maximum 4 files can be downloaded simultaneously. It means that browser has to make the repeated HTTP requests to server for
downloading the resources.

Optimise CSS, JS, Images: For the above reasons, it is good idea if we optimise the resources used in our web application. Take an example, we have 10 CSS files for the development, if that can be merged into one file at the time of moving the code to production, that saves 9 extra HTTP requests to the server. It is only one way, there are many other aspects like inline, minification, etc. are part of compressing the resources. Note that, optimization will be done only after completing the development and moving the code to production. DOJO build does exactly same thing, it reads the DOJO library and project specific script files, then optimize it by implementing the concept of minification. This is very important for any DOJO project. Without the build process, performance of the application
will be impacted.

This post explores the DOJO build process with very simple example which would be easy for any beginner to understand without much difficulty. If you have any issues on running the DOJO build, please write it in the comments section with code samples. I will try my best to help you solving the problems.

Create DOJO Project Structure

What 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 structure consists of packages and modules. Package is a list of modules. We can say that it is a logical grouping of files. Dijit, dojo and dojox packages are separate packages grouped based on their functionality. When you write your own application, you would create your own package to add your files.

What is Module?: Module is a file and it defines a functionality. The keyword define is used for creating the modules. dojo/_base/declare is an example for a module. This file is part of dojo package.

Create Package Descriptor

The package descriptor file (package.json) gives you information about the current package name, such as the name of the package, information about its dependencies, links to licensing and bug tracking information, etc. This file has to be created for every package and copied to the root of the package.This file has the several attributes, but for the dojo build system, dojoBuild is the important and must have property in all the package descriptors. This property informs the dojo build about the location of profile file. Profile file is explained in the next section. A simple package file looks like:

[java]

{
"name": "app",
"description": "DOJOAPP",
"version": 1.0,
"dojoBuild": "dojoapp.profile.js"
}

[/java]

The last property tells the profile file name. Rest of the properties are only optional.

Create Profile File

This is most important file for helping the dojo build system to inform about how it should process the packages. The packages mentioned in this file only will be taken for the build. In our example, util folder under dojo is not required for the application, we can omit that in the profile file. Profile file is created for the each packages and placed on root folder. Most of the applications would have entire application in single package as root, in that case create one profile for root package.

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?).

Look at the following code:

HTML Code:

[java]
<div id="reportTotalsChartDiv" style=’display:block; clear:none; z-index:999;
width:100%; height:100%;’></div>
[/java]

Java Script Code (DOJO):

[java]

require(["dojox/charting/Chart2D",
"dojox/charting/plot2d/Columns",
"dojox/charting/themes/Wetland",
"dojox/charting/action2d/Highlight",
"dojox/charting/action2d/Tooltip",
"dojox/charting/themes/CubanShirts",
"dojo/ready"],
function (Chart2D, Columns, Wetland, Highlight, Tooltip, CubanShirts, ready) {
ready(function () {
var c = new dojox.charting.Chart2D("reportTotalsChartDiv");
c.addPlot("default", {
type: "Columns",
tension: 3,
gap: 10
});
c.addAxis("x", {
labels: [{
value: 1,
text: "Larger Bar"
}, {
value: 2,
text: "Splited Bar"
}],
fixLower: "major",
fixUpper: "major"
});
c.addAxis("y", {
vertical: true,
fixLower: "major",
fixUpper: "major",
min: 0
});
c.setTheme(dojox.charting.themes.Wetland);
c.addSeries("Splited 1", [{
x: 1,
y: 0
}, {
y: 100,
x: 2,
tooltip: "Splited 1 ",
text: "Splited 1"
}], {
stroke: {
color: "red",
width: 2
},
fill: "orange"
});
c.addSeries("Larger", [{
y: 1000,
x: 1,
tooltip: "Larger",
text: "Larger",
stroke: {
color: "blue",
width: 2
},
fill: "lightblue"
}, ]);
c.addSeries("Splited 2", [{
x: 1,
y: 1
}, {
y: 300,
x: 2,
tooltip: "Splited 2",
text: "Splited 2",
color: "lightgreen",
stroke: {
color: "green",
width: 2
}
}]);
var a1 = new dojox.charting.action2d.Tooltip(c, "default");
var a2 = new dojox.charting.action2d.Highlight(c, "default");
c.render();
});
});
[/java]

The above code is declarative style of creating the charting widget. This is the best practice for writing the DOJO coding. The creation of the chart follows a simple steps – create the chart, add a plot, add x and y axis, add the data series and render the chart.  In this case the chart is rendered into the div with the id of “reportTotalsChartDiv”.

dojox.charting.Chart2D(“reportTotalsChartDiv”) would create the chart object and attach to the div element. Once you have created the chart object, start attaching other properties to the chart. Plot, theme, axis, series, etc. can be added individually to the chart object which is great to enhance your chart instance. Finally call to method  render will output the chart. Hope this example helps you to understand the basics of the DOJO Bar Chart.

You can view the live demo of DOJO Bar Chart.

Reference Books:

• Learning DOJO
• JavaScript Pocket Reference
• Head First jquery

DOJO is one of the greatest JavaScript framework for building the charting applications. But, it is not widely used in many applications due to the lack of popularity and lack of community awareness for the DOJO framework. However, the recent developments with this framework offers wide range of options for drawing the charting tools. I would write series of articles on DOJO framework and charting capabilities in detail. Subscribe to our blog here to get the latest updates from our website. This article explores the Pie Chart functionality in the DOJO charting API. It is only the very basic how to start creating the simple Pie Chart with the limited set of data. In my next articles, I would come up with few advanced charts with dynamic data. (Read: How to setup DOJO application?)

Pie Charts are most widely used for representing the data in the graphical way. WikiPedia defines pie chart as follows “A pie chart (or a circle graph) is a circular chart divided into sectors, illustrating numerical proportion“. In DOJO, charting can be done using the API dojox.charting.Chart. This is the common API which has set of attributes to define the different type of charts. I have used DOJO 1.9 for writing this example program. Look into the following sample code:

HTML Code:

[java]

<!–Green Pie Chart –>
<div id="pieChart1" style="width: 600px; height: 200px; "></div>
<!–Blue Pie Chart–>
<div id="pieChart2" style="width: 600px; height: 200px;"></div>

[/java]

JavaScript Code (DOJO):

[java]

require(["dojox/charting/Chart",
"dojox/charting/axis2d/Default",
"dojox/charting/plot2d/Pie",
"dojox/charting/themes/PlotKit/green",
"dojox/charting/themes/PlotKit/blue",
"dojox/charting/action2d/MoveSlice",
"dojo/ready"],
function(Chart, Default, Pie,green,blue,MoveSlice, ready){
ready(function(){
var chart1 = new Chart("pieChart1");
chart1.addPlot("default", {type: Pie});
chart1.setTheme(green);
chart1.addAxis("x");
chart1.addAxis("y", {vertical: true});
chart1.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
var mag1 = new dojox.charting.action2d.MoveSlice(chart1,"default");
chart1.render();

var chart2 = new Chart("pieChart2");
chart2.addPlot("default", {type: Pie});
chart2.setTheme(blue);
chart2.addAxis("x");
chart2.addAxis("y", {vertical: true});
chart2.addSeries("Series 1", [1, 2, 2, 3, 4, 5, 5, 7]);
var mag2 = new dojox.charting.action2d.MoveSlice(chart2,"default");
chart2.render();

});
});

[/java]

dojox.charting.Chart

This is the JavaScript class used for creating the chart widget. This can be created any number of times depends on how many widgets required. In the above examples, I have created two pie chart widgets named as green and blue.

dojox.charting.themes.PlotKit.green

This is the theme for the background color and styles. DOJO has the predefined set of themes and its API reference which can be initiated and used for your charts. You can find the list of available themes here.

dojox.charting.action2d.MoveSlice

This is very nice effect while moving the mouse over to the pie chart. A slice will be moved out and indicate the selection area. This appearance gives very good feel for the widget.

You can view the live demo of DOJO Pie Chart.

• DOJO Charting
• Dojo Charts Part 1 – Pie Charts

Tooltip is when user mouseover on top of any particular links or images, there will be a message displayed which is helpful information about that component. Every framework has its own API for defining and styling the tooltips as you need. DOJO has its own API for creating tooltips and customise it as you need. This can be done in two ways, either through declarative way or programatically. Doing it in the programatic way is most recommended as good practice in DOJO. This post writes about the both the ways with few simple examples.

dijit.Tooltip is the dojo type used for creating the tooltip. Tooltip can be displayed using the four locations surrounding the element as
“above”, “below”, “after” and “before”. This can be declared as an array while defining the tooltip object. At runtime, which is suitable for that component will be displayed. It takes the first one as the high priority. Please read the below example program and write your questions if you could not understand the concepts.

[java]
<!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">
<Style>
.rodTip { background:lightblue; border-bottom:1px dotted blue;
cursor:help; padding:2px; display:inline-block; }
</Style>
</head>
<script src="${pageContext.request.contextPath}/js/dojo-release-1.9.0-src/dojo/dojo.js"></script>
<script>
require(["dojo/parser","dijit/Tooltip", "dojo/domReady!"],
function(parser){
parser.parse();
new dijit.Tooltip({
connectId:["test1"],
label:"Test Label 1"
});
new dijit.Tooltip({
connectId:["test2"],
label:"Test Label 2"
});
});
</script>
<body class="claro">
<button id="Tooltip1" onmouseover="dijit.Tooltip.defaultPosition=[‘above’, ‘below’]">Tooltip Above</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:’Tooltip1’">Above Tooltip</div>
<button id="Tooltip2" onmouseover="dijit.Tooltip.defaultPosition=[‘below’,’above’]">Tooltip Below</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:’Tooltip2’">Below Tooltip</div>
<button id="Tooltip3" onmouseover="dijit.Tooltip.defaultPosition=[‘after’,’before’]">Tooltip After</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:’Tooltip3’">After Tooltip</span></div>
<button id="Tooltip4" onmouseover="dijit.Tooltip.defaultPosition=[‘before’,’after’]">Tooltip Before</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip" data-dojo-props="connectId:’Tooltip4’">Before Tooltip</div>
<h2>Tooltip on Text in Paragraph (Programmatic)</h2>
<p>
This is random <span id="test1" class="rodTip">text</span> for demonstrating tool tip text <span id="test2" class="rodTip">Test</span>.
</p>
</body>
</html>

[/java]

You can copy paste the above code and run the application. The output for the above code will be as follows:

Declarative Approach

In the declarative approach, components are defined in the page itself. Look at the following code.

[java]
<button id="Tooltip1" onmouseover="dijit.Tooltip.defaultPosition=[‘above’, ‘below’]">
Tooltip Above</button>
<div class="dijitHidden"><span data-dojo-type="dijit.Tooltip"
data-dojo-props="connectId:’Tooltip1’">Above Tooltip</div>
[/java]

• dijit.Tooltip – Dojo type for displaying the tooltip dialog
• connectId – attribute which is mapping the tooltip and component where tooltip has to be displayed
• dijit.Tooltip.defaultPosition – The default position of the tooltip. It is an array with the values above, below, after and before.

Programmatic Approach

When using the programmtice approach, tooltips are creating inside the scripts. It is the most recommended way of writing the DOJO components. Look at the following code:

[java]
new dijit.Tooltip({
connectId:["test1"],
label:"Test Label 1"
});
[/java]

In the above code, creating of tooltp widget is happening inside the scripts. connectId is used for binding the widget to its corresponding
element in the page. Label is the tooltip text. You can create any number of widgets inside the scripts and bind to the actual elements in the page.

Reference:

• Dojo Tooltips

Recommended Books:

• Learning DOJO
• JavaScript Pocket Reference
• Head First jquery

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

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

[java]
&amp;lt;script src=&amp;quot;http://ajax.googleapis.com/ajax/libs/dojo/1.5/dojo/dojo.xd.js&amp;quot;&amp;gt;&amp;lt;/script&amp;gt;
[/java]

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.

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

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

[java]
<!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>
[/java]

• 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:

• DOJO 1.9 Reference
• AJAX with DOJO Toolkit
• Learning DOJO 1.8

Recommended Books:

• Learning DOJO
• JavaScript Pocket Reference
• Head First jquery