The Widget framework in Dojo solves 2 problems and both of them, elegantly.
For a UI application developer, widgets are essential. Before I continue, It would be useful to define what a widget's purpose is, to better understand its usefulness. A UI application will consist of well-defined visual controls that a user interacts with, to view/input information. For example: Dropdown lists, Text-fields, Buttons etc. It would be extremely beneficial if these were readily available rather than having to build something application-specific. Dojo addresses this problem with its rich set of widgets - Dijit Theme-tester link.
[I wont get into a lengthy discussion of why the native HTML controls are just not enough or compare Dojo's widgets with an other framework.. Did I hear someone say jQuery UI or ExtJS :) ]
Second, and the one which I think has been solved by Dojo really well is the Widget authoring framework. It is the same architecture that's used to build the widget set seen earlier. Developing new widgets\Customizing existing widgets is a streamlined software engineering process because of this architecture.
From here, we will dive into the internal workings of this system. It is not going to be a 101 course in building Dojo widgets. It assumes that the reader if familiar with developing widgets.There are excellent articles for those:
Understanding _WidgetBase - Tutorial
Writing your own widget - Reference Guide
dijit._WidgetBase - Reference Guide
Creating Template-based Widgets - Tutorial
By the end of this post, I hope to have explained some of the magic hidden in these framework classes: _WidgetBase and _TemplatedMixin will be the focus of this deep-dive.
Every Dojo widget that is readily available or any new widget that you would develop would utlimately subclass _WidgetBase. This is the basic contract of building a Dojo Widget - a Dijit. Hereafter, when I use the term widget, it means that I am referring to a Dojo widget.
The _TemplatedMixin allows widget developers to specify the UI of the widget in a seperate file which will be processed during the widget construction.
Github links to these classes:
Here is a dojo-sandbox link to a very minimal widget built using these classes:
http://jsfiddle.net/deepakanand/hxxx220q/
We will copy-paste a code snippet from that link for the purposes of our discussion here:
For a UI application developer, widgets are essential. Before I continue, It would be useful to define what a widget's purpose is, to better understand its usefulness. A UI application will consist of well-defined visual controls that a user interacts with, to view/input information. For example: Dropdown lists, Text-fields, Buttons etc. It would be extremely beneficial if these were readily available rather than having to build something application-specific. Dojo addresses this problem with its rich set of widgets - Dijit Theme-tester link.
[I wont get into a lengthy discussion of why the native HTML controls are just not enough or compare Dojo's widgets with an other framework.. Did I hear someone say jQuery UI or ExtJS :) ]
Second, and the one which I think has been solved by Dojo really well is the Widget authoring framework. It is the same architecture that's used to build the widget set seen earlier. Developing new widgets\Customizing existing widgets is a streamlined software engineering process because of this architecture.
From here, we will dive into the internal workings of this system. It is not going to be a 101 course in building Dojo widgets. It assumes that the reader if familiar with developing widgets.There are excellent articles for those:
Understanding _WidgetBase - Tutorial
Writing your own widget - Reference Guide
dijit._WidgetBase - Reference Guide
Creating Template-based Widgets - Tutorial
By the end of this post, I hope to have explained some of the magic hidden in these framework classes: _WidgetBase and _TemplatedMixin will be the focus of this deep-dive.
Every Dojo widget that is readily available or any new widget that you would develop would utlimately subclass _WidgetBase. This is the basic contract of building a Dojo Widget - a Dijit. Hereafter, when I use the term widget, it means that I am referring to a Dojo widget.
The _TemplatedMixin allows widget developers to specify the UI of the widget in a seperate file which will be processed during the widget construction.
Github links to these classes:
Here is a dojo-sandbox link to a very minimal widget built using these classes:
http://jsfiddle.net/deepakanand/hxxx220q/
We will copy-paste a code snippet from that link for the purposes of our discussion here:
1 2 3 4 5 6 7 8 | var MyWidget = declare([_WidgetBase, _TemplatedMixin], { baseClass: "myWidgetBaseClass", templateString: "<div></div>" }); var widgetInstance = new MyWidget({}, "widgetcontainer"); widgetInstance.startup(); |
MyWidget is the new widget which has its own baseClass and a simple template which consists of a single div element and no attach-points or attach-events.
widgetInstance is an instance of the MyWidget class.
The startup() method is the last of the lifecycle methods that needs be explicitly called(but oft forgotten) after instantiating a widget and placing it in the page.
A class diagram showing the architecture:
TODO: Detailed description of code-path
No comments:
Post a Comment