Dojo-do-it-yourself widget

Good day to all readers! In this topic, I will share my experience in creating widgets on Dojo using the example of a numeric LED indicator (clock, timer, etc.). I will not delve into the history of the creation of the framework and the theory - the topic is practical.
So, let's begin.


As you know, JavaScript does not have native class support, and almost every JS framework somehow solves this problem.
In Dojo, the following construction is used.

dojo.declare( ' ', [1,2,...], { / } ); 

Our widget will inherit two classes - the base dijit._Widget and dijit._Templated , the purpose of which is to create a DOM node from the template defined in the parameter in this case
templateString .
The dijit._Widget class provides several special methods (you can familiarize yourself with their list here ), we will use the postCreate method called after creating the widget and redefine it.
')

  postCreate : function () { this.digits = dojo.query('.digit', this.containerNode); this.render(); }, 

In this method, we memorize a collection of nodes contained in containerNode (the value of the dojoAttachPoint attribute) with class digit ( span elements that will display numbers) and call the custom render method.
The render method is called each time the indicator value changes ( setValue method). In it, we go through the saved collection of nodes and assign each element a corresponding class ( digit_0, digit_1, ... digit_9 ). The implementation of the method does not need a detailed explanation, therefore I will give the full code of the widget:

  dojo.declare( 'LedIndicator', [dijit._Widget,dijit._Templated], { currentValue : '000000', templateString: "<div>" + '<span class="led" dojoAttachPoint="containerNode">' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + '<span class="digits"><span class="digit"></span><span class="digit"></span></span>' + "</div>" , postCreate : function () { this.digits = dojo.query('.digit', this.containerNode); this.render(); }, render : function () { var i = 0; var dc = Math.min(this.digits.length, this.currentValue.length); this.digits.removeClass(); for (i=0; i < dc; i++) { dojo.addClass(this.digits[i],'digit_'+this.currentValue.charAt(i)); } }, setValue : function (value) { this.currentValue = value; this.render(); } } ); 

That's probably all, now we can create an instance of the widget using markup

 <div dojoType="LedIndicator" id="led_1" class="led"></div> 

I will not give CSS - as you probably already guessed, all nodes of the collection have one background with numbers, but in different positions.

Conclusion

There are two ways to create a widget for Dojo - declarative and program.

The declarative method is to create a widget from the HTML markup. Its advantage is the simplicity and speed of development, the disadvantage is the scanning of the DOM-tree significantly reduces the download speed of bulk pages. Thus, the declarative method can be very useful when prototyping a web application, in the working version it is recommended to use the program method.
You can find a little about these methods here .

The article does not claim to be complete and genius, but nevertheless, I hope it will be useful to you.