Customizing Dojo Widgets

Question

Hi, How do I customize an existing Dojo widget? I'm using dojo version 1.3. In the previous versions we had the html file under templates folder. Do I need to edit the source code directly. I need to add an image to Accordion widget. Can someone please help me in customizing it?

Thanks in advance.

Answer 1

I think you could extend the existing widget rather than modifying it.

Answer 2

That HTML template is still there in the templates folders. You just need to download the source release. Depending on your needs you could 1) set the content by adding children, 2) write custom widget inheriting it or 3) use it as a part of compound widget. Inheritance in Dojo way is simple:

dojo.declare("my.Accordion", dijit.layout.AccordionContainer, {
    // your methods...
});

Answer 3

First, grab the existing template from the dojo library. This'll be your starting point.

Then, create your own widget that inherits from AccordionContainer, but specify your own html template:

dojo.declare("MyWidgets.Accordion", dijit.layout.AccordionContainer, {
    templatePath: dojo.moduleUrl("MyWidgets","Accordion.html");
});

(dojo.moduleUrl is a nice way of specifying folder paths so the dojo library can find and inline them when you package up your final product).

This way, you leave the original source intact, but can set your own html and override any methods as needed.