Creating a Templated Custom Widget in DOJO

INTRODUCTION

In this doc, you'll learn how to create a templated 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. Here we will be focusing on making custom widgets with a template descibing its UI.
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 AuthorWidget.js file defining the widget, that is how the the widget would respond and what would be its behaviour. 

 define([
"dojo/json","dojo/dom","dojo/dom-attr", "dojo/_base/declare", "dojo/parser", "dojo/ready", "dijit/_WidgetBase", "dijit/_TemplatedMixin","dojo/text!./templates/AuthorWidget.html"
], function(json,dom,domAttr,declare, parser, ready, _WidgetBase, _TemplatedMixin,template){
return declare("AuthorWidgetClass", [_WidgetBase, _TemplatedMixin], {
// counter
_i: 0,
templateString:template,
name: "unknown",
bio: "unknown",
address:"unknown",
avatar:require.toUrl("./myApp/widget/images/defaultAvatar.png"),
//_setAvatarAttr:{node:"avatarNode", type:"src"},
constructor:function(args){
},
postCreate: function(){
domAttr.set(this.avatarNode, "src", this.avatar);
domAttr.set(this.streetNode, "innerHTML", json.stringify(this.address.street));
domAttr.set(this.cityNode, "innerHTML", json.stringify(this.address.city));
}
});
ready(function(){
// Call the parser manually so it runs after our widget is defined, and page has finished loading
parser.parse();
});
});

 
Define is used to tell to dojo that what all modules we will be requiring in our widget definition. Here first we define
"dojo/json","dojo/dom","dojo/dom-attr", "dojo/_base/declare", "dojo/parser", "dojo/ready", "dijit/_WidgetBase", "dijit/_TemplatedMixin","dojo/text!./templates/AuthorWidget.ht
ml"
and have their corresponding argument being passed to the callback function. “Dojo/json” module is used because we would be passing author data via json, and hence would require json parsing. “dojo/text!./templates/AuthorWidget.html” is referring to the template of this widget i.e the html file describing how the widget would look like.

 Other modules are self-explanatory if required they are well document at dojo official site.
Inside the call back function we are declaring a class:-

1.  the first parameter of class depicts: class name
2.  the second parameter of class depicts: modules dependency
3.  the third parameter of class depicts: class definition.

Now in the class definition first we specify the templateString 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. ”name”, ”bio”, “address”, “avatar” are the properties of the class that you can set either via constructor or via postCreate function.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) Create a AuthorWidget. HTML file defining the widget template, that is how the the widget would look like.

<div>
<div data-dojo-attach-point="nameNode">${name}</div>
<img style="width:100px;height:150px;" src="$avatar" data-dojo-attach-point="avatarNode" alt="alternative text">
<p data-dojo-attach-point="bioNode">${!bio}</p>
<div data-dojo-attach-point="addressNode">${address}
<div data-dojo-attach-point="streetNode"></div>
<div data-dojo-attach-point="cityNode"></div>
</div>
<hr>
</div>

Here we have defined :-

• Author Name: nameNode
• Image of the author: avatarNode
• Little description: bioNode
• Address of the author:streetNode and cityNode.

 Step 5) Include the above created widget on your HTML page. 

<body>
<script>
require(["myApp/widget/AuthorWidget","dojo/query","dojo/parser", "dojo/ready","dojo/request", "dojo/dom", "dojo/_base/array", "dojo/json","dojo/dom-construct"],
function(AuthorWidgetClass,query,parser, ready,request, dom, arrayUtil,json,domConstruct){
// Load up our authors
request("myApp/data/authors.json", {
handleAs: "json"
}).then(function(authors){
// Get a reference to our container
_i=0;
divId='';
var parentDiv = dom.byId("authorContainer");
arrayUtil.forEach(authors, function(author){
_i++;
divId='d'+_i;
alert(json.stringify(author));
domConstruct.create("div", {
innerHTML: widget,
id:divId
}, parentDiv);
var widget=new AuthorWidgetClass(author,divId);
});
},function(error){alert('error');}
);
});
</script>
<!-- Custom Widget -->
<!-- Headers and whatnot -->
<h2>Authors</h2>
<div id="authorContainer">
Authors go here!
</div>
<!-- Custom Widget End-->
</body>

The above code shows how to include custom “AuthorWidget” 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 First module mentioned here is our custom AuthorWidget widget, notice the path for mapping to exact location.
Now in the callback function:

1.  First we make a json call to fetch the author records from json file.
2.  Then for each object in json file you create a div tag dynamically .
3.  Then you create an instance of AuthorWidget widget for each div tag you made in previous step.
4.  Then we use placeAt function to place it at desired location.
5.  Third we call the startUp() function on the widget instance

Below is the snapshot of the widget.

 

In case of any Query , please reach out to me at:- saurabhpahuja@yahoo.co.in
Regards
Saurabh Pahuja 

Sr Developer