custom widget for ArcGIS Online Development Related question

1361
5
Jump to solution
12-22-2016 03:42 AM
Awet_Tekle
New Contributor II

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);
},

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Esteemed Contributor

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);
                    }
                }
            },

View solution in original post

5 Replies
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor II

Robert,

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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
New Contributor II

Robert,

Thank you very much,problem solved.

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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.

0 Kudos