• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

A Simple DOJO Widget Example

September 26, 2013 //  by Krishna Srinivasan//  Leave a Comment

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.

  • How to setup dojo?
  • What is dojoConfig?

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.

DOJO ToolKit

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:

  • Learning DOJO
  • JavaScript Pocket Reference
  • Head First jquery

Category: DOJOTag: dojotoolkit

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Previous Post: « Difference between ArrayList, Vector and LinkedList in Java
Next Post: Dynamic Class Loading using Java Reflection »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact