Uncaught TypeError: this._onTransparencyChanged is not a function

1092
5
Jump to solution
10-27-2016 09:25 AM
RolandoFlorez
New Contributor III

I have the startup function in my Widget.js

startup : function () {
   this.inherited(arguments);
   this.horizontalSlider = new HorizSlider({
         minimum : 0,
         maximum : 1,
         intermediateChanges : true,
         onChange : function (value) {
            console.log('slider value: ' + value);
            this._onTransparencyChanged(value);
            console.log('opacity changed');
         }
      }, this.sliderNode);
   this.horizontalSlider.startup();
   new HorzRuleLabels({
      container : "bottomDecoration"
   }, this.transparencyRule);
   console.log('startup');
},

but the onChange function, in the horizontal slider, when I try to change the opacity of layers. The console show me the error above.
This is the function:

_onTransparencyChanged : function (opacity) {
   this._vectorial.setOpacity(1 - opacity);
   this._baseAerea.setOpacity(opacity);
}

And similarly if I put the code of _onTransparencyChanged function in the onChange function I get an error like : cannot read property 'setOpacity' of undefined. What ever I do , got an error.

Thanks a lot

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   That is because this._onTransparencyChanged is out of scope when you are inside the onChange function handler and you are not using lang.hitch.

startup : function () {
   this.inherited(arguments);
   this.horizontalSlider = new HorizSlider({
         minimum : 0,
         maximum : 1,
         intermediateChanges : true,
         onChange : lang.hitch(this, function (value) {
            console.log('slider value: ' + value);
            this._onTransparencyChanged(value);
            console.log('opacity changed');
         })
      }, this.sliderNode);
   this.horizontalSlider.startup();
   new HorzRuleLabels({
      container : "bottomDecoration"
   }, this.transparencyRule);
   console.log('startup');
},

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Emeritus

Rolando,

   That is because this._onTransparencyChanged is out of scope when you are inside the onChange function handler and you are not using lang.hitch.

startup : function () {
   this.inherited(arguments);
   this.horizontalSlider = new HorizSlider({
         minimum : 0,
         maximum : 1,
         intermediateChanges : true,
         onChange : lang.hitch(this, function (value) {
            console.log('slider value: ' + value);
            this._onTransparencyChanged(value);
            console.log('opacity changed');
         })
      }, this.sliderNode);
   this.horizontalSlider.startup();
   new HorzRuleLabels({
      container : "bottomDecoration"
   }, this.transparencyRule);
   console.log('startup');
},
RolandoFlorez
New Contributor III

That's it Robert. I saw this implementation in LayerList widget, but I didn't understand.
Thanks.

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

Rolando,

  If you are going to do WAB widget development that I would suggest you spend time leaning about dojo templated widgets and definitely about lang.hitch and this.own

0 Kudos
RolandoFlorez
New Contributor III

Hi Robert,

Can you tell me, where is the documentation about "this.own" ?

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

You can find that on the dojo site about  templated dijits 

0 Kudos