Freshers / Beginner level questions & answers
Ques 1. What is Dojo?
Dojo is actually based on JavaScript and HTML, so its easy to learn. You can learn Dojo very fast and start developing your next highly interactive web applications.
Dojo is the Open Source JavaScript Toolkit
It is tool for constructing dynamic web user interfaces
Dojo offers widgets, utilities, higher IO (AJAX) abstraction etc.
BSD or AFL licensed
Is it helpful?
Add Comment
View Comments
Ques 2. What is the basic structure in Dojo?
| The basic directory structure of the application is very simple and it will evolve later: |
| /index.html - The application entry point. |
| /app - The application module. |
| /app/main.js - The main script for app module. |
Is it helpful?
Add Comment
View Comments
Ques 3. What is the point in Dojo?
Dojo bases on the HTML and JavaScript
Developer has not to use any strange programming language
Dojo ups abstraction layer in a higher level
Developer has not to reinvent wheel when starting programming project
Is it helpful?
Add Comment
View Comments
Ques 4. History of Dojo.
Development was started by Alex Russell and Dylan Schiemann in 2004
The first Dojo code was written in Septemper 2004
Nowadays 40 000 downloads and over 40 developers and companies
Is it helpful?
Add Comment
View Comments
Ques 5. What is Package System in Dojo?
Dojo consists of JavaScript files
Package system takes care that only needed files are included
Each JavaScript file can be named as package dojo.provide(dojo.string)
By that name the package can be taken in use dojo.require(dojo.string)
One has not to remember any file or directory names
Only dojo.js has to be included into HTML document
That file takes care of initialization of Dojo
There is a couple of pre packaged builds that consist of different kinds of packages e.g. Widget, event or IO builds.
Is it helpful?
Add Comment
View Comments
Ques 6. Relation between AJAX and Dojo.
Dojo is sometimes advertised as AJAX framework
It is able to make AJAX requests with Dojo
But the technique of binding is under the abstraction layer that Dojo has.
Is it helpful?
Add Comment
View Comments
Ques 7. What is Widget Toolkit in Dojo?
Widget toolkit is also a very noticeable part of Dojo toolkit
Widget is a user interface object that has a layout and some properties
In Dojo widgets are HTML+CSS bound by JavaScript
Dojo has lots of useful widgets e.g. Tabs, sorting table, dialogs
Is it helpful?
Add Comment
View Comments
Ques 8. Example of Dojo script using widgets.
<script>
dojo.require(dojo.widget.Editor2);
</script>
<!-- ... -->
<textarea dojoType=Editor2>
...
</textarea>
Is it helpful?
Add Comment
View Comments
Ques 9. What are the features of Dojo?
- Dojo is based on HTML and JavaScript, so its easy for the developers to learn it fast.
- There is no requirement of learning new programming language. Just HTML and JavaScript knowledge if sufficient.
- Dojo provides higher abstraction layer to the programmer. So, it helps the programmers to develop powerful functions very easily.
- Dojo has already invented the wheels for the programmers and now programmers just have to use the Dojo api into their application
Is it helpful?
Add Comment
View Comments
Ques 10. Give some components that comes along with Dojo framework.
- DOJO Tree
- DOJO Button
- DOJO Calendar control
- DOJO Grid
- DOJO List box
- and many more..
Is it helpful?
Add Comment
View Comments
Ques 11. What are the advantages or benefits of Dojo?
- Associative arrays
- Loosely typed variables
- Regular expressions
- Objects and classes
- Highly evolved date, math, and string libraries
- W3C DOM support in the Dojo
Is it helpful?
Add Comment
View Comments
Ques 12. Give a sample example on Dojo.
First you can download the dojo required files from the below link:
Example of Creating a Button
Here we are going to create a button "Hello World!". To create a button in dojo you need to a Button Widget that contains three visual states as: mouseOut, mouseOver and mouseDown. To follow the following steps for creating a dojo button widget:
<script type="text/javascript">
// Load Dojo's code relating to widget managing functions
dojo.require("dojo.widget.*");
// Load Dojo's code relating to the Button widget
dojo.require("dojo.widget.Button");
</script>
dojo.require("dojo.widget.*"): It instructs you to include the dojo widget (Not load all the widgets) for managing functions.
dojo.require ("dojo.widget.Button"): This line instructs you to load the Dojo button widget. If you don't include this line, the markup code for the button would not be evaluated by Dojo upon loading, resulting in a plain HTML button instead of what you expect.
Insert the following code into the HTML body:
<button dojoType="Button" widgetId="helloDojoButton"
onClick="helloPressed();">Hello World!</button>
The key attribute of this HTML element to notice is the dojoType attribute. This is responsible for instructing Dojo on how to process the element when the page is loading. In this case you will use a button element for the button that is used to input element - Dojo will work with either as long as the dojoType attribute is present.
widgetId="helloDojoButton": This is replaced with id="helloDojoButton" without the functionality being affected - Dojo's widget system is smart enough to convert regular idattributes to widgetId's if no widgetId` attribute is explicitly named.
Connecting an Event to the Widget
When you click the command button then it doing something? We specify an onClick event handler for the given command button.
dojo.require("dojo.event.*");
Above code we use "dojo.event.*" that includes all events functionality of Dojo (But not all widgets).
Following function that will called by the button when we clicked. After clicking the "helloPressed" method is called and it displays an alert message like: "Click on the Hello World Button".
function helloPressed()
{
alert('Click on the Hello World Button');
}
Here is the code of program:
<html>
<head>
<title>button</title>
<script type="text/javascript">
dojo.require("dojo.event.*");
dojo.require("dojo.widget.*");
dojo.require("dojo.widget.Button");
function helloPressed()
{
alert('Click on the Hello World Button');
}
function init()
{
var helloDojoButton = dojo.widget.byId('helloDojoButton');
dojo.event.connect(helloDojoButton, 'onClick', 'helloPressed')
}
dojo.addOnLoad(init);
</script>
</head>
<body bgcolor="#FFFFCC">
<p align="center"><font size="6" color="#800000">Welcome to Roseindia Dojo Project</font></p>
<button dojoType="Button" widgetId="helloDojoButton" onClick="helloPressed();">Hello World!</button>
<br>
</body>
</html>
Is it helpful?
Add Comment
View Comments
Ques 13. Sample code for Checkbox in Dojo framework.
Check boxes are the same as html but dojo provides more controls and styling options than a conventional check box. The checkbox contains Boolean types value either 'true' or 'false'. The following example creates a Checkbox:
<html><head>
<title>checkbox</title>
<!-- check box -->
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.CheckBox");
</script>
</head>
<body>
<h2>Check box</h2>
<input id="cb" dojotype="dijit.form.CheckBox" name="developer"
checked="checked" value="on" type="checkbox" />
<label for="cb"> Are you a Dojo Developer </label>
</body>
</html>
Is it helpful?
Add Comment
View Comments
Ques 14. Example of Radio Button in Dojo framework.
Radio Buttons are the same as html but dojo provides more controls and styling options than a conventional Radio button. The radio button also contains Boolean types value either 'true' or 'false'. The following example creates a Radio buttons:
<html>
<head>
<title>Radio</title>
<!-- radio -->
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.*");
</script>
</head>
<body>
<h2>Radio button</h2>
<input dojoType="dijit.form.RadioButton" id="val1" name="group1"
checked="checked" value="Programmer" type="radio" />
<label for="val1"> Programmer </label>
<input dojotype="dijit.form.RadioButton" id="val2" name="group1"
value="Designer" type="radio" />
<label for="val2"> Designer </label>
<input dojotype="dijit.form.RadioButton" id="val3" name="group1"
value="Developer" type="radio" />
<label for="val3"> Developer </label>
</body>
</html>
<head>
<title>Radio</title>
<!-- radio -->
<script type="text/javascript">
dojo.require("dojo.parser");
dojo.require("dijit.form.*");
</script>
</head>
<body>
<h2>Radio button</h2>
<input dojoType="dijit.form.RadioButton" id="val1" name="group1"
checked="checked" value="Programmer" type="radio" />
<label for="val1"> Programmer </label>
<input dojotype="dijit.form.RadioButton" id="val2" name="group1"
value="Designer" type="radio" />
<label for="val2"> Designer </label>
<input dojotype="dijit.form.RadioButton" id="val3" name="group1"
value="Developer" type="radio" />
<label for="val3"> Developer </label>
</body>
</html>
Is it helpful?
Add Comment
View Comments
Intermediate / 1 to 5 years experienced level questions & answers
Ques 15. Tell us about Language Libraries in Dojo.
dojo.lang.*
Wrappers for common idioms
Functional programming APIs
For Example
dojo.lang.forEach
dojo.lang.map
dojo.lang.assert
Is it helpful?
Add Comment
View Comments
Ques 16. Describe Event System in Dojo.
Like crack for web developers
Any function can be notified when other function fires
Any DOM object can be connected to any function dojo.event.connect(id, onClick, listenerObj, handleOnClick);
Is it helpful?
Add Comment
View Comments
Ques 17. Example on Progress Bar in Dojo framework.
The progress bar is a GUI (Graphical User Interface) that gives dynamic feedback on the progress of a long-running operation. The progress bar can be updated by calling the JavaScript functions. Which works best for long-running JavaScript operations or a series of JavaScript XHR calls to the server. Progress bar performs to multiple types of works such as: download or upload any files and representation of the progress in a percent format.
<html>
<head>
<title>Progress Bar Demo</title>
<style type="text/css">
@import "../resources/dojo.css";
@import "../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dijit.ProgressBar");
dojo.require("dojo.parser");
function download(){
// Split up bar into 5% segments
numParts = Math.floor(100/5);
jsProgress.update({ maximum: numParts, progress:0 });
for (var i=0; i<=numParts; i++){
// This plays update({progress:0}) at 1nn milliseconds,
// update({progress:1}) at 2nn milliseconds, etc.
setTimeout("jsProgress.update({ progress: " + i + " })",(i+1)*100 +
Math.floor(Math.random()*100));
}
}
</script>
</head>
Progress Bar:
<body class="tundra">
<div dojoType="dijit.ProgressBar" style="width:800px"
jsId="jsProgress" id="downloadProgress"></div>
<input type="button" value="Start" onclick="download();" />
</body>
</html>
Is it helpful?
Add Comment
View Comments
Experienced / Expert level questions & answers
Ques 18. Tell us about Environment-Specific Libraries in Dojo.
Libraries provides routines for handling the environment
Consist of svg, html, style and dom packages
Provides some methods for arrange HTML document
There is also methods for handling DOM trees and SVG models
Those routines extend existing routines
Is it helpful?
Add Comment
View Comments
Ques 19. What are Application Support Libraries in Dojo?
Consist of the most interesting routines
IO package provides routines e.g. for AJAX binding
DND package provides routines for drag-and-drop operations
There is also some useful routines in logging, storage and animation packages
Is it helpful?
Add Comment
View Comments
Ques 20. What are the disadvantages of Dojo?
- Even if Dojo is nice, beautiful etc, it is quite heavy
- The documentation is still quite narrow
- Needs much network
- Developer depends on the browser support for the Dojo
- There is no way to hide the Dojo code in case of commercial application
Is it helpful?
Add Comment
View Comments
Ques 21. Example of Tree in Dojo Framework.
The tree is a GUI that helps to lists the hierarchical lists. The tree widget is a simple but the real power comes in the data. It represents the hierarchical structure of tree. Data is fed by the powerful dojo.dataAPI.
There are following steps for creating Dojo trees :
- Create a rooted or rootless trees (forests)
- Nest, each branch is independently expandible
- Different icons for different leaf or branch classes
- Tree data are stored in any dojo.data implementing API.
- Events fire when users clicked on it.
- Add, remove or disable nodes of tree.
<html>
<title>Tree</title>
<head>
<style type="text/css">
@import "../resources/dojo.css";
@import "../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
Simple Tree:<br><br>
<div dojoType="dojo.data.ItemFileReadStore"
url="tree.txt" jsid="popStore" />
<div dojoType="dijit.Tree" store="popStore"
labelAttr="sname" label="Tree"></div>
</body>
</html>
<title>Tree</title>
<head>
<style type="text/css">
@import "../resources/dojo.css";
@import "../dijit/themes/tundra/tundra.css";
</style>
<script type="text/javascript" src="dojo.xd.js"
djConfig="parseOnLoad: true"></script>
<script>
dojo.require("dojo.data.ItemFileReadStore");
dojo.require("dijit.Tree");
dojo.require("dojo.parser");
</script>
</head>
<body class="tundra">
Simple Tree:<br><br>
<div dojoType="dojo.data.ItemFileReadStore"
url="tree.txt" jsid="popStore" />
<div dojoType="dijit.Tree" store="popStore"
labelAttr="sname" label="Tree"></div>
</body>
</html>
tree.txt file contains:
{ label: 'name',
identifier: 'name',
items: [
{ name:'Students', type:'cat',
children: [
{ name:'Vinod', type:'st' },
{ name:'Suman', type:'st' },
{ name:'Deepak', type:'st' }
]}
identifier: 'name',
items: [
{ name:'Students', type:'cat',
children: [
{ name:'Vinod', type:'st' },
{ name:'Suman', type:'st' },
{ name:'Deepak', type:'st' }
]}
Is it helpful?
Add Comment
View Comments
Ques 22. Example on Color Picker in Dojo framework.
The dojox.widget.ColorPicker widget that allows user to select a color (in hexa format). This is a form component. We can add this component on the form to our requirement.
<html>
<head>
<title>Color Picker Example</title>
<style type="text/css">
@import "../dijit/themes/soria/soria.css";
@import "/resources/dojo.css";
@import "../dojox/widget/ColorPicker/ColorPicker.css";
</style>
<script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true"></script>
<script type="text/javascript">
dojo.require("dojox.widget.ColorPicker");
dojo.require("dojo.parser");
</script>
</head>
<body class="soria">
<b>Please select the color:</b>
<div id="colorPicker" dojoType="dojox.widget.ColorPicker"></div>
</body>
</html>
Is it helpful?
Add Comment
View Comments
Ques 23. Example on Drag and Drop in Dojo framework.
This is a technique of dragging an item. Click an object or specific item that have to be dragged and dropped, you hold down the mouse button and drag the object to the suitable destination.
<html>
<head>
<title>Dojo Drag and Drop Example</title>
<script type="text/javascript" src="dojo.js" djConfig="parseOnLoad: true">
</script>
<script type="text/javascript">
dojo.require("dojo.dnd.source");
dojo.require("dojo.parser");
</script>
</head>
<body>
<h1>Drag and Drop</h1>
<table border="1" cellpadding="0" cellspacing="0">
<tr>
<td valign="top">
<!-- Source -->
<div dojoType="dojo.dnd.Source" jsId="sourceData" class="source">
<b style="background-color:#999999 ">Source Data</b>
<div class="dojoDndItem" dndType="Arindam">
<div>Arindam</div>
</div>
<div class="dojoDndItem" dndType="Sumana">
<div>Sumana</div>
</div>
<div class="dojoDndItem" dndType="Arunita">
<div>Arunita</div>
</div>
</div>
</td>
<td valign="top">
<!-- Target -->
<div dojoType="dojo.dnd.Target" jsId="targetData" class="target"
accept="Arindam,Sumana,Arunita">
<b style="background-color:#999999; ">Target Data</b>
</div>
</td>
</tr>
</table>
</body>
</html>
Is it helpful?
Add Comment
View Comments
Most helpful rated by users:
- What is Dojo?
- What is the basic structure in Dojo?
- Give a sample example on Dojo.
- What are Application Support Libraries in Dojo?
- What is Package System in Dojo?