A Simple DOJO Widget Example

Widgets are user interface components that can be dynamically created and plcaed at suitable locations. DOJO provides great support on wide variety of built in widgets and provision to write the custom widgets. DOJO widgets can be created by extending the _WidgetBase class under the dijit package. “_ “at the beginning of any classes in DOJO implies that, that class needs to be extended by another class for the complete functionality.

Prior to the version 1.8, there is another class dijit/_Widget is used for writing the widgets. _Widget still inherits from the base class _WidgetBase, but this will be phased out from the version 2.0. It is always recommended to use the class _WidgetBase for writing any widgets.

One of the important aspect on widgets are callback or life cycle methods initiated at the different phase of invoking a widget. These callback methods are defined in its base class _WidgetBase itself. When custom widgets are extending the base class, it inherits the pre-defined life cycle methods. In technical term, widgets are classes that are created with dojo.declare. All the widgets extend the base class _WidgetBase. The following are the important callback methods in each widget. This article explains the very basic example widget using DOJO. This article is intended for the beginners who are interested in writing their first widget program.

constructor

This is the familiar concept for most of us. This method would be called when new instance is created. Here you can initialize the variavles, arrays, etc.

postMixInProperties

This method is invoked just before the dom nodes are created.It is the last chance to update the instance variables and initialization of properties before the dom nodes are created.

buildRendering

dijit._Templated provides implementation of this method. In most of the cases, we use the dijit._Templated for template our widget. If we want our own template, that has to be done in this method. In this phase only dom nodes are created and hooked with the events. And it is ready for the rendering. Also the resultant content will be set to this.domNode.

setters

The naming convention of the setters method is _setPropertyNameAttr(property). For example, if your property name is age, then setter method has to be _setAgeAttr(property). This method would take one parameter that is used for passing the value to the widget. In the below example you would understand how the values are set inside the widget.

postCreate

This is one of the important method in the life cycle. Most of the customization for the widget is completed in this method. We can say that this is the place where you write anything which is showing as the widget to the user.

startUp

This method is mainly used for ensuring that all the child widgets are created.

destroy

This is not necessary if you don’t have any special clean up things to do for your widget. Most of the time super class would take care of this job. You can omit this method in most of the cases.

Example DOJO Widget Code Listing : 1 (widget.jsp)

<html>
<head>
<meta content="text/html;charset=utf-8" http-equiv="Content-Type">
<meta content="utf-8" http-equiv="encoding">
<link rel="stylesheet" href="src/dijit/themes/claro/claro.css"
	media="screen">
</head>
<script>
	var dojoConfig = {
		baseUrl : "src",
		packages : [ {
			name : "dojo",
			location : "dojo"
		}, {
			name : "dijit",
			location : "dijit"
		}, {
			name : "dojox",
			location : "dojox"
		}, {
			name : "app",
			location : "app"
		}, ],
		parseOnLoad : true,
		async : true
	};
</script>
<script src="src/dojo/dojo.js"></script>
<script type="text/javascript">
	require([ "app/FirstWidget" ]);
</script>
<body>
	<span data-dojo-type="app.FirstWidget"
	data-dojo-props="name:'Raja',age:'30'"></span>
</body>
</html>

Example DOJO Widget Code Listing : 2 (FirstWidget.js)

require([ "dojo/_base/declare",
          "dojo/dom-construct",
          "dojo/parser",
          "dojo/ready",
          "dijit/_WidgetBase"],
          function (declare, domConstruct, parser, ready, _WidgetBase){
	declare ("app.FirstWidget",[_WidgetBase],{
		i : 10,
		name : '',
		age : 0,
		constructor : function(){
			this.i = 30;
			alert ("Inside Constructor");
		},
		postMixInProperties : function(){
			this.i = 20;
			alert ("Inside postMixInProperties");
		},
		buildRendering : function(){
			alert ("Inside buildRendering");
			this.domNode = domConstruct.create("button",
			{innerHTML: "I am Button!!"});
		},
		_setNameAttr : function(name){
			this.name = name;
		},
		_setAgeAttr : function(age){
			this.age = age;
		},
		postCreate : function(){
			alert("Name : " + this.name);
			alert("Age : " + this.age);
		},
		startUP : function(){
			alert ("Inside SatrtUp");
		}
	});

});

In the above example, a JSP page which displays the widget. As you can read from the code, it is very simple to invoke the widget by writing the span blocks. The data-dojo-type is the actual widget type or class which will be loaded. data-dojo-props is used for passing the property list to the widgets.

FirstWidget.js defines the list of callback methods. When you execute this example, all the methods will be invoked in the same order.
_setNameAttr is invoked for setting the property values. You can write each method for one property. buildRendering method creates a button and add into the dom tree. This will be displayed in the screen. domNode contains the final dom tree to be displayed in the screen.

Recommended Books: