The section discusses how to code a widget that supports multiple renderers, and how to extend such a widget.

How to support multiple renderers

// renderer-agnostic portion

dojo.declare("my.widget.Foo"

{

  initializer: function() {

    // do initialization tasks, make instance properties

  },

  foo: 5,

  doit: function() { ... },

  ...

}

);



// render-specific portion

dojo.widget.defineWidget("my.widget.html.Foo", [ dojo.widget.HtmlWidget, my.widget.Foo], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);



dojo.widget.defineWidget("my.widget.svg.Foo", [ dojo.widget.SvgWidget, my.widget.Foo], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);

Subclassing from multiple renderers

// renderer-agnostic portion

// add features to my.widget.Foo, but don't explicitly extend or inherit

// my.widget.Foo properties will come in as part of my.widget.[html|svg].Foo

  // do initialization tasks, make instance properties

dojo.declare("my.widget.FooPlus", my.widget.Foo, { ... });



dojo.widget.defineWidget("my.widget.html.FooPlus", [my.widget.html.Foo, my.widget.FooPlus], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);



dojo.widget.defineWidget("my.widget.svg.FooPlus", [my.widget.svg.Foo, my.widget.FooPlus], {

   initializer: function() {

     // do initialization tasks, make instance properties

   },

    ...prototypical properties (in object notation)...

  }

);