WHY DOJO
As there are numerous quality toolkits
available for JavaScript and a number of other JavaScript toolkits of vivid
quality then why should you go for any one particular , specially DOJO.
Here are the reasons why you should go
for dojo:-
AMD and Modular
Now as JavaScript at client side is
growing in size in every web application , having AMD and modularity will
help us in making the applications faster in performance and easier in maintenance. Using one large JavaScript library without any asynchronous loading is no longer a good practice now.
Dojo has been implementing functionality
in Modules for years
now, and requiring only the necessary modules using
Define and Require helps in making quick applications.
Eg
define([
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/_base/declare",
"dojo/dom-attr"
],
function(_Widget,
_Templated, declare, domAttr){
}
Using dojo/declare for implementing Classes and hence providing
Extensibility
A true class system is not provided by
JavaScript, but a class inheritance system is provided by the Dojo Toolkit
with the help of dojo/declare module. Declare is very useful as with the
help of it programmers can:
• Remove redundant code
• Extend an existing functionality
• Provide better customization
• Easily share existing module code
Dojo’s UI Framework:-Dijit
Dijit, Dojo’s UI Framework, is Dojo
Toolkit’s X-factor over
other Java Script frameworks. It has a lot of form
and other
tools. It boasts of:-
• Out of the box feature for localization
• complete support for accessibility
• Easy customization
• Complete modularity in existing widgets
• Facility for custom theming
Dojo Objective Harness(DOH): Testing Frame work of DOJO
Testing is a very important aspect in any
application. Dojo Objective Harness , Dojo Toolkit’s testing framework, is
included in each Dojo version download. With DOH writing Tests is very easy, plus you can write tests in different formats as well.
INTRO
In this doc, you'll learn how to create a
basic hello world
custom widget. We will be using pieces of dojo and dijit
framework to create our own custom widgets, mainly we will
use
dijit/_WidgetBase and dijit/_TemplatedMixin in widget creation.We will be using
DIJIT framework which comes with
dojo toolkit. DIJIT is basically a
collection of controls
called widgets. we will cover this process in
steps:-
Step 1) First of all include dojo library in your project.
Step 2) Include DOJO library in your parent HTML page where you
will be placing your widget.
<script src="
./dojo/dojo.js"
data-dojo-config="async:true"></script> is called the
loader statement and is used to load
the dojo library in your page. Setting
data-dojo-config="async:true" allows you load the dojo library
asynchronously on your page.
Step 3) Create a HelloWorld.js file defining the widget, that is
how the the widget
would look like and what would be its behaviour.
define([
"dijit/_WidgetBase",
"dijit/_TemplatedMixin",
"dojo/_base/declare",
"dojo/dom-attr"
],
function(_Widget, _Templated, declare, domAttr){
return declare("myWidgets.HelloWorld", [_Widget,
_Templated],{
templateString: '<div
data-dojo-attach-point="_box"></div>',
postCreate: function(){
domAttr.set(this._box, "innerHTML", "Hello,
World!");
}
});
});
Define is used to tell to dojo that what
all modules we will
be requiring in our widget definition. Here first we
define
"dijit/_WidgetBase","dijit/_TemplatedMixin","dojo/_base/declare", "dojo/dom-attr"
and have their corresponding argument being passed to the callback
function.
Inside the call back function we are
declaring a class:-
• the first parameter of class depicts:
class name
• the second parameter of class depicts:
modules dependency
• the third parameter of class depicts:
class definition.
Now in the class definition first we
specify the template
String property , which decides how your widget would
look
like.
That is it contains the template for your
widget. The
data-dojo-attach-point property is used to have an attach point
that is how you will point to any node inside
your template.
Now you will override the postCreate
function , and inside that you will use domAttr(reference or obj of
dojo/dom-attr)
module’s “set” method to specify what should be displayed
inside your widget.
Step 4) Include the above created widget on your HTML page.
<body>
<script>
require(["dojo", "dojo/dom", "myApp/widget/HelloWorld"],
function(dojo, dom, HelloWorld){
var helloWorld = new HelloWorld();
helloWorld.placeAt(dom.byId("test"));
helloWorld.startup();
}
);
</script>
<div id="test"></div>
</body>
The above code shows how to include
custom “Hello World” widget
on your page.
Require works similar to define. Here
first you require all the modules you want to load your widget on to page.
The third module mentioned here is our
custom hello world widget, notice the path for mapping to exact location.
Now in the callback function:
• First you create an instance of
HelloWorld widget
• Then we use placeAt function to place
it at desired location.
• Third we call the startUp() function on
the widget instance
Below is the snapshot of the widget.
After doing the above steps you have
a bare bone widget now you
can add any functionality as per your
requirements.
In case of any Query , please reach out to me at:- saurabhpahuja@yahoo.co.in
Regards
Saurabh Pahuja
Sr Developer
|
