21⟩ Example of Dojo script using widgets?
<script>
dojo.require(”dojo.widget.Editor2”);
</script>
<!-- ... -->
<textarea dojoType=”Editor2”>
...
</textarea>
Dojo
Home Client Side Scripting Dojo
“Dojo frequently Asked Questions in various Dojo job Interviews by interviewer. The set of questions here ensures that you offer a perfect answer posed to you. So get preparation for your new job hunting”
33 Dojo Questions And Answers
22⟩ 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
23⟩ 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
24⟩ Give some components that comes along with Dojo framework?
DOJO Tree
DOJO Button
DOJO Calendar control
DOJO Grid
DOJO List box
and many more..
25⟩ 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>
26⟩ 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>
27⟩ 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>
28⟩ Explain 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”);
29⟩ Explain 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
30⟩ Explain 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
31⟩ 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.
32⟩ 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
33⟩ Dijit widget lifecycle?
1.constructor
2.Properties are mixed into the widget instance
3.postMixInProperties
4.buildRendering
5.setters are called
6.postCreate
7.startup (must be called manually for programmatic widgets!)
