custom widget for ArcGIS Online Development Related question

[Awet_Tekle]

Hello all,let me post my partial code in which I have difficulty to figure out its solution: I have a button with "FadeIn" id and I want to call the FadeInPrimaryOpacity(op) function for each value of i repeatedly till the limit value of i is reached after the FadeIn button is pressed.so,is there any wrong with my code

postCreate: function() {
registry.byId("FadeIn").on("click", lang.hitch(this, this.PrimaryLayer_Visibility));

},

PrimaryLayer_Visibility:function () {

// don't worry about "this.primaryLayer" since this is partial code of the whole code
if (this.primaryLayer.visible) {
for(var i=0;i<=10;i++)
setTimeout(function(){
FadeInPrimaryOpacity(i/10.0);
},2000);
} else {
for(var i=10;i>=0;i--){
setTimeout(function(){
FadeInPrimaryOpacity(i/10.0);
},2000);
}
}
} ,
FadeInPrimaryOpacity:function(op) {
this.primaryLayer.setOpacity(op);
},

[RobertScheitlin__GISP]

Awet,

  Here is what I saw wrong corrected:

postCreate: function() {
  registry.byId("FadeIn").on("click", lang.hitch(this, this.PrimaryLayer_Visibility));
},

PrimaryLayer_Visibility:function () {
  // don't worry about "this.primaryLayer" since this is partial code of the whole code
  if (this.primaryLayer.visible) { 
    for(var i=0;i<=10;i++) {
      setTimeout(lang.hitch(this, function(){
        this.FadeInPrimaryOpacity(i/10.0);
      }),2000);
    } 
  } else { 
    for(var i=10;i>=0;i--){
      setTimeout(lang.hitch(this, function(){
        this.FadeInPrimaryOpacity(i/10.0);
      }),2000); 
    } 
  } 
},

FadeInPrimaryOpacity:function(op) {
  this.primaryLayer.setOpacity(op);
},‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Also in templated widget development you normally do not use 

registry.byId("FadeIn")‍

you would normally use:

this.FadeIn.on("click", lang.hitch(this, this.PrimaryLayer_Visibility));‍

Because in the html template you would have:

<button data-dojo-type="dijit/form/Button" data-dojo-attach-point="FadeIn" type="button">Fade In</button>‍

Notice the use of data-dojo-attach-point instead of id attribute.

[Awet_Tekle]

Robert,

Thank you very much for your continuous help, but still notworking,I don't know why it is.

[RobertScheitlin__GISP · Accepted solution]

Awet,

   OK your logic was incorrect.

            PrimaryLayer_Visibility: function() {
                // don't worry about "this.primaryLayer" since this is partial code of the whole code
                if (this.primaryLayer.opacity > 0.9999999999999999) {
                    this.FadeInPrimaryOpacity('out');
                } else {
                    this.FadeInPrimaryOpacity('in');
                }
            },

            FadeInPrimaryOpacity: function(dir) {
                if (dir === 'out') {
                    if (this.primaryLayer.opacity > 0) {
                        this.primaryLayer.setOpacity(this.primaryLayer.opacity - 0.1);
                        setTimeout(lang.hitch(this, function() {
                            this.FadeInPrimaryOpacity('out');
                        }), 1000);
                    }
                } else {
                    if (this.primaryLayer.opacity <= 1) {
                        this.primaryLayer.setOpacity(this.primaryLayer.opacity + 0.1);
                        setTimeout(lang.hitch(this, function() {
                            this.FadeInPrimaryOpacity('in');
                        }), 1000);
                    }
                }
            },‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

[Awet_Tekle]

Robert,

Thank you very much,problem solved.

[RobertScheitlin__GISP]

Awet,

   You should mark the reply that answered your question as the "Correct Answer" to allow others to easily find the correct answer. You had marked your own reply as the correct answer by mistake so I unmarked it.