Before you can write your own widget, you should understand how dojo's widgets are organized, both in terms of where files are and how the class hierarchy works.

Renderer Base Classes

The first thing to notice is the following renderer base classes.

Widget 

   |-- DomWidget

      |-- HtmlWidget     

      |-- SvgWidget

Each widget implementation will extend either HtmlWidget?, SvgWidget?, or VmlWidget?, according to what browser it supports.

Class Hierarchy

For widgets w/only a single implementation (usually "html"), the class hierarchy is pretty simple. For example, there is a dojo.widget.html.Button that extends HtmlWidget.



However, widgets w/multiple implementations are more complicated, because there's a base class that defines common functionality and the parameter list for the widget. This effectively leads to multiple-inheritance, since the widget implementation to pull in stuff from both from the renderer base class and the widget base class. For example, dojo.widget.svg.Chart needs to effectively inherit from both SvgWidget and from dojo.widget.Chart.

Technically, multiple implementations are defined using mixins, which are similar (but subtly different) than multiple-inheritance. In the above case, dojo.widget.svg.Chart extends HtmlWidget but mixes in dojo.widget.Chart base class.

Directory Structure

For widgets w/a single implementation, like Button:

• src/widget/Button.js - defines dojo.widget.html.Button

For widgets w/multiple implementations, like Chart (in the future):

• src/widget/Chart.js - defines dojo.widget.Chart base class
• src/widget/svg/Chart.js - dojo.widget.svg.Chart, svg implementation
• src/widget/vml/Chart.js - dojo.widget.vml.Chart, vml implementation