Invalid template in the Gauge sample

1604
4
Jump to solution
08-05-2013 11:55 AM
IanKramer3
New Contributor III
Hi, I am working on building a custom widget in JavaScript.  I thought the best place to start was downloading the Gauge sample widget and implementing that in a test application.  I renamed everything to Gauge2, so that it didn't conflict with the one in the Esri library.  I am getting an "Invalid Template" error when I try to initialize the Gauge object.  The code is below.  I did put an alert box at the end of the constructor and it displays that fine.  I am using both the sample Gauge library and the HTML page from the sample site.  Has anybody seen this before?

Thanks!

Ian

try
            {
            gauge = new esri.dijit.Gauge2(gaugeParams, "gaugeDiv");
            }
            catch (err)
            {
             txt="There was an error on this page.\n\n";
      txt+="Error description: " + err.message + "\n\n";
      txt+="Click OK to continue.\n\n";
      alert(txt);
            }
0 Kudos
1 Solution

Accepted Solutions
IanKramer3
New Contributor III
Derek, thanks for your help!  Following your example for the Clustering, I believe I figured out how to get the templated Dojo widget to work.  Since my goal was to build my own custom widget, I decided to stop trying to get the Gauge widget to work.  I ended up using the example located here: http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/.  This example uses the same syntax as the ClusterLayer example, but is slightly different from the Gauge sample code (i.e. dojo.require statements).  I have included a copy of the widget's code below.  I am currently loading it from the ClusterLayer demo index HTML page and it is working.


-----------------------------------------------------
define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/Gauge2.html", "dojo/dom-style", "dojo/_base/fx", "dojo/_base/lang"],
    function(declare, _WidgetBase, _TemplatedMixin, template, domStyle, baseFx, lang){
        return declare([_WidgetBase, _TemplatedMixin], {
            // Some default values for our author
            // These typically map to whatever you're passing to the constructor
            name: "No Name",
            // Using require.toUrl, we can get a path to our AuthorWidget's space
            // and we want to have a default avatar, just in case
            avatar: require.toUrl("./images/defaultAvatar.png"),
            bio: "",

            // Our template - important!
            templateString: template,

            // A class to be applied to the root node in our template
            baseClass: "authorWidget",

            // A reference to our background animation
            mouseAnim: null,

            // Colors for our background animation
            baseBackgroundColor: "#fff",
            mouseBackgroundColor: "#def"
        });
});

View solution in original post

0 Kudos
4 Replies
IanKramer3
New Contributor III
Here's the top portion of the code for Gauge2.js.  I also renamed the template to Gauge2.html.  I didn't alter anything else. 

The code sits in a folder under root, called "chart".  That contains a css and templates folder.

dojo.provide("esri.dijit.Gauge2");

dojo.require("dojo.cache");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.widget.AnalogGauge");
dojo.require("dojox.widget.gauge.AnalogArcIndicator");

dojo.declare("esri.dijit.Gauge2", [dijit._Widget, dijit._Templated], {
  templateString: dojo.cache("esri.dijit", "templates/Gauge2.html"),
  widgetsInTemplate: false,
  constructor: function(options, srcRefNode) {
....
0 Kudos
derekswingley1
Frequent Contributor
Are you using the API from the CDN or are you hosting it locally?

If you're using the CDN, Dojo is looking for your template on the esri server. You should be able to see a request and a 404 when your page looks for Gauge2.html

I would define your own namespace rather than putting your code in esri.dijit. Refer to the clustering sample as a way to set up your own namespace (in that sample it's called "extras").
0 Kudos
IanKramer3
New Contributor III
Hi Derek,
I am using the CDN.  I did try renaming namespace to just chart.Gauge2.  I've uploaded my code if you want to take a look at it. 

I am wondering if I have a bad path for the templateString: dojo.cache("chart", "templates/Gauge2.html"), property.  The Chart.js file is located in the ROOT/chart folder.  The template is located in ROOT/chart/templates.  Is my path correct?  Also should I be using templateString or templatePath? 

Thank you!

Ian


dojo.provide("chart.Gauge2");

dojo.require("dojo.cache");
dojo.require("dijit._Widget");
dojo.require("dijit._Templated");
dojo.require("dojox.widget.AnalogGauge");
dojo.require("dojox.widget.gauge.AnalogArcIndicator");

dojo.declare("chart.Gauge2", [dijit._Widget, dijit._Templated], {
  templateString: dojo.cache("chart", "templates/Gauge2.html"),
  widgetsInTemplate: false,
  constructor: function(options, srcRefNode) {
0 Kudos
IanKramer3
New Contributor III
Derek, thanks for your help!  Following your example for the Clustering, I believe I figured out how to get the templated Dojo widget to work.  Since my goal was to build my own custom widget, I decided to stop trying to get the Gauge widget to work.  I ended up using the example located here: http://dojotoolkit.org/documentation/tutorials/1.8/recipes/custom_widget/.  This example uses the same syntax as the ClusterLayer example, but is slightly different from the Gauge sample code (i.e. dojo.require statements).  I have included a copy of the widget's code below.  I am currently loading it from the ClusterLayer demo index HTML page and it is working.


-----------------------------------------------------
define(["dojo/_base/declare","dijit/_WidgetBase", "dijit/_TemplatedMixin", "dojo/text!./templates/Gauge2.html", "dojo/dom-style", "dojo/_base/fx", "dojo/_base/lang"],
    function(declare, _WidgetBase, _TemplatedMixin, template, domStyle, baseFx, lang){
        return declare([_WidgetBase, _TemplatedMixin], {
            // Some default values for our author
            // These typically map to whatever you're passing to the constructor
            name: "No Name",
            // Using require.toUrl, we can get a path to our AuthorWidget's space
            // and we want to have a default avatar, just in case
            avatar: require.toUrl("./images/defaultAvatar.png"),
            bio: "",

            // Our template - important!
            templateString: template,

            // A class to be applied to the root node in our template
            baseClass: "authorWidget",

            // A reference to our background animation
            mouseAnim: null,

            // Colors for our background animation
            baseBackgroundColor: "#fff",
            mouseBackgroundColor: "#def"
        });
});
0 Kudos