Constructor of a custom dojo widget not found

Question

I'm trying to create a simple Widget with dojo 1.9 inside my Worklight 6.0 application, but I'm running into so issues, I've been messing around for it for too long I'm probably missing some very simple.

Here you can find the structure of my Worklight app:

I've created subfolders that will contain my javascript files (widgets etc).

This is my main HTML file: http://jsfiddle.net/d8K69/ Most important is:

 var dojoConfig = {
    isDebug : true,
    async : true,
    parseOnLoad : true,
    mblHideAddressBar: false,
    packages : [  {
                "name" : "playground",
                "location" : "js/playground"
                } ]
    };  

<div id="header" data-dojo-type="playground.HeaderWidget"></div>

The custom Widget code can be found here: http://jsfiddle.net/T9Tfq/2/

define([ "dojo/_base/declare", 
     "dijit/_WidgetBase", 
     "dijit/_TemplatedMixin", 
     "dojo/text!js/playground/widgets/header/HeaderWidget.html" ], 
 function(declare, _WidgetBase, _TemplatedMixin, template) {
    WL.Logger.debug("HeaderWidget.js: init.");

    return declare("playground.HeaderWidget", null, [_WidgetBase, _TemplatedMixin], {
        headerTitle: "Default header title",
            
        templateString: template,
            
        postCreate: function() {
                // Get a DOM node reference for the root of our widget
                //var domNode = this.domNode;    
                
                baseClass: "headerWidget";
    
                  // Run any parent postCreate processes - can be done at any point
                this.inherited(arguments);
                
                this.headerTitle.style.color = "red";
                }
     });
});

I'm a bit confused about how the module name in define, the packages in dojoConfig and including (require) in other javascript files exactly play along together. Currently I'm getting this error:

dojo/parser::parse() error
Error: Unable to resolve constructor for: 'playground.HeaderWidget'

While trying this in another javascript file:

require([ "js/playground/widgets/header/HeaderWidget"], function(HeaderWidget) {
    WL.Logger.debug("DOING SOMETHING WITH MY WIDGET");

Seems to work (although I didn't actually create a headerwidget programmaticly yet, this doesnt seem to succeed.

Answer 1

The declare() function only allows 3 parameters afaik:

• The classname, in this case playground.HeaderWidget
• The superclass modules (_WidgetBase and _TemplatedMixin)
• The object/class itself

So you have 1 parameter (the null one) that is too much.

In your case it will use the null as the superclass and the array of superclass modules [_WidgetBase, _TemplatedMixin] as your class/object. The array has no constructor and null has no constructor either, so it will throw an error.

The solution: remove the null parameter. More information about the declare() functionality (and the possible parameters) can be found in the API documentation.