Problem with custom modules

Question

Hi All, I am trying to practice accessing content from custom modules using the Home Button sample from the API tutorials. I have saved the HomeButton.js and the HTML page in the folder structure which is attached as images. I have written the following HTML page to load the HomeButton but I get an "Object doesn't support this action" error when the page attempts to create a new HomeButton object. I suspect that the issue is with the way I have entered the path to my custom module but I have tried loads of combinations and cant seem to find a solution. The code is below and any help would be greatly appreciated! Peter Home Extent Button Dijit

All Options

ERMWidgetsFolder.JPG topfolder.JPG

Anonymous User · Answer

Original User: mattdriscollHi Matt,

I think the module is working correctly. I have modified it slightly from your GitHub version (mostly changing the definedClass and I removed the esri namespace section at the bottom as I didnt think I needed that?). I have included the code below, would you mind taking a quick look at it?

Thanks for your help.

Peterdefine([
    
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",

"dojo/Evented",
    "dojo/_base/declare",
    "dojo/_base/lang",

"dojo/on",
    // load template    
    "dojo/text!ERMWidgets/templates/HomeButton.html",
    "dojo/dom-class",
    "dojo/dom-style"
],
function (
    Evented, declare, lang,
    _WidgetBase, _OnDijitClickMixin, _TemplatedMixin,
    on,
    dijitTemplate, 
    domClass, domStyle
) {
    var Widget = declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, Evented], {
        declaredClass: "ERMWidgets.HomeButton",
        templateString: dijitTemplate,
        options: {
            theme: "HomeButton",
            map: null,
            extent: null,
            visible: true
        },
        // lifecycle: 1
        constructor: function(options, srcRefNode) {
            // mix in settings and defaults
            declare.safeMixin(this.options, options);
            // widget node
            this.domNode = srcRefNode;
            this._i18n = i18n;
            // properties
            this.set("map", this.options.map);
            this.set("theme", this.options.theme);
            this.set("visible", this.options.visible);
            this.set("extent", this.options.extent);
            // listeners
            this.watch("theme", this._updateThemeWatch);
            this.watch("visible", this._visible);
            // classes
            this._css = {
                container: "homeContainer",
                home: "home",
                loading: "loading"
            };
        },
        // start widget. called by user
        startup: function() {
            // map not defined
            if (!this.map) {
                this.destroy();
                console.log('HomeButton::map required');
            }
            // when map is loaded
            if (this.map.loaded) {
                this._init();
            } else {
                on(this.map, "load", lang.hitch(this, function() {
                    this._init();
                }));
            }
        },
        // connections/subscriptions will be cleaned up during the destroy() lifecycle phase
        destroy: function() {
            this.inherited(arguments);
        },
        /* ---------------- */
        /* Public Events */
        /* ---------------- */
        // home
        // load
        /* ---------------- */
        /* Public Functions */
        /* ---------------- */
        home: function() {
            var defaultExtent = this.get("extent");
            this._showLoading();
            if(defaultExtent){
                return this.map.setExtent(defaultExtent).then(lang.hitch(this, function(){
                    this._hideLoading();
                    this.emit("home", {extent: defaultExtent});
                }));
            }
            else{
                this._hideLoading();
                console.log('HomeButton::no home extent');
            }
        },
        show: function(){
            this.set("visible", true);  
        },
        hide: function(){
            this.set("visible", false);
        },
        /* ---------------- */
        /* Private Functions */
        /* ---------------- */
        _init: function() {
            this._visible();
            if(!this.get("extent")){
                this.set("extent", this.map.extent);   
            }
            this.set("loaded", true);
            this.emit("load", {});
        },
        _showLoading: function(){
            domClass.add(this._homeNode, this._css.loading);
        },
        _hideLoading: function(){
            domClass.remove(this._homeNode, this._css.loading);
        },
        _updateThemeWatch: function(attr, oldVal, newVal) {
            domClass.remove(this.domNode, oldVal);
            domClass.add(this.domNode, newVal);
        },
        _visible: function(){
            if(this.get("visible")){
                domStyle.set(this.domNode, 'display', 'block');
            }
            else{
                domStyle.set(this.domNode, 'display', 'none');
            }
        }
    });
    return Widget;
});

Ah, it looks like the define arguments are out of order.

They should be like this:

_WidgetBase, _OnDijitClickMixin, _TemplatedMixin,
    Evented, declare, lang,

PeterMcBride · Answer

Seems like it's probably something in the module then. Is it returning a define function correctly?

Hi Matt,

I think the module is working correctly. I have modified it slightly from your GitHub version (mostly changing the definedClass and I removed the esri namespace section at the bottom as I didnt think I needed that?). I have included the code below, would you mind taking a quick look at it?

Thanks for your help.

Peterdefine([
    
    "dijit/_WidgetBase",
    "dijit/_OnDijitClickMixin",
    "dijit/_TemplatedMixin",

"dojo/Evented",
    "dojo/_base/declare",
    "dojo/_base/lang",

"dojo/on",
    // load template    
    "dojo/text!ERMWidgets/templates/HomeButton.html",
    "dojo/dom-class",
    "dojo/dom-style"
],
function (
    Evented, declare, lang,
    _WidgetBase, _OnDijitClickMixin, _TemplatedMixin,
    on,
    dijitTemplate, 
    domClass, domStyle
) {
    var Widget = declare([_WidgetBase, _OnDijitClickMixin, _TemplatedMixin, Evented], {
        declaredClass: "ERMWidgets.HomeButton",
        templateString: dijitTemplate,
        options: {
            theme: "HomeButton",
            map: null,
            extent: null,
            visible: true
        },
        // lifecycle: 1
        constructor: function(options, srcRefNode) {
            // mix in settings and defaults
            declare.safeMixin(this.options, options);
            // widget node
            this.domNode = srcRefNode;
            this._i18n = i18n;
            // properties
            this.set("map", this.options.map);
            this.set("theme", this.options.theme);
            this.set("visible", this.options.visible);
            this.set("extent", this.options.extent);
            // listeners
            this.watch("theme", this._updateThemeWatch);
            this.watch("visible", this._visible);
            // classes
            this._css = {
                container: "homeContainer",
                home: "home",
                loading: "loading"
            };
        },
        // start widget. called by user
        startup: function() {
            // map not defined
            if (!this.map) {
                this.destroy();
                console.log('HomeButton::map required');
            }
            // when map is loaded
            if (this.map.loaded) {
                this._init();
            } else {
                on(this.map, "load", lang.hitch(this, function() {
                    this._init();
                }));
            }
        },
        // connections/subscriptions will be cleaned up during the destroy() lifecycle phase
        destroy: function() {
            this.inherited(arguments);
        },
        /* ---------------- */
        /* Public Events */
        /* ---------------- */
        // home
        // load
        /* ---------------- */
        /* Public Functions */
        /* ---------------- */
        home: function() {
            var defaultExtent = this.get("extent");
            this._showLoading();
            if(defaultExtent){
                return this.map.setExtent(defaultExtent).then(lang.hitch(this, function(){
                    this._hideLoading();
                    this.emit("home", {extent: defaultExtent});
                }));
            }
            else{
                this._hideLoading();
                console.log('HomeButton::no home extent');
            }
        },
        show: function(){
            this.set("visible", true);  
        },
        hide: function(){
            this.set("visible", false);
        },
        /* ---------------- */
        /* Private Functions */
        /* ---------------- */
        _init: function() {
            this._visible();
            if(!this.get("extent")){
                this.set("extent", this.map.extent);   
            }
            this.set("loaded", true);
            this.emit("load", {});
        },
        _showLoading: function(){
            domClass.add(this._homeNode, this._css.loading);
        },
        _hideLoading: function(){
            domClass.remove(this._homeNode, this._css.loading);
        },
        _updateThemeWatch: function(attr, oldVal, newVal) {
            domClass.remove(this.domNode, oldVal);
            domClass.add(this.domNode, newVal);
        },
        _visible: function(){
            if(this.get("visible")){
                domStyle.set(this.domNode, 'display', 'block');
            }
            else{
                domStyle.set(this.domNode, 'display', 'none');
            }
        }
    });
    return Widget;
});

Anonymous User · Answer

Original User: mattdriscollAn update to this, I have done some more digging and using the developer tools in IE9 I can see that the requests are going to the right places so I am certain that my relative paths etc are working correctly. I have also updated the code to an example from the API samples so it now looks like this: