Dynamic, scrollable snippets rdedraw over previous content

buddy13 Sep 2011 2:23 PM
I have a weather app with scrollable snippets.  The data for these snippets is assembled at launch and the snippet itself displays live weather data.  In the simulator, everything works fine:  The snippet draws correctly everytime.  However, on the television (Samsung), only the first draw appears correctly.  Every snippet scrolled to after that shows every previous snippet's data underneath the new data for the now current snippett.  I have tried a variety of methods for creating the snippet without success.    I am hoping someone here can point me in the right direction.

My snippet construction code (part of my onApplicationStartup code)
function redrawSnippets(){
    KONtx.application.setProfileSnippetViews(new Array())
    var snippetList=new Array();
    //Draw any relevant snippets
    if(city_obj.citylist.length>0){**
for(var nona=0; nona<city_obj.citylist.length; nona++){
var newSnip={
id: 'profileSnippet'+nona,
viewClass:TWNSnippetView,
data: {
id:nona,
name:city_obj.citylist[nona],
myCode:city_obj.citycode[nona],
params:{
id: nona,
myCode:city_obj.citycode[nona],
},
}
}
snippetList.push(newSnip)
}
    } else {
var newSnip={
id: 'DefaultSnippet',
viewClass:TWNSnippetView,
data: {},
}
snippetList.push(newSnip)
    }
    city_obj.currentIndex=0;
    KONtx.application.removeAllProfileSnippets();
    KONtx.application.setProfileSnippetViews(snippetList);    
}


and here is my snippet code:
var TWNSnippetView = new KONtx.Class({
    ClassName: 'TWNSnippetView',
    
    Extends: KONtx.system.ProfileSnippetView,
    
    initialize: function() {
this.parent();
this._handleActivateSnippet.subscribeTo(this, ['onActivateSnippet'], this);
    },
    
    _handleActivateSnippet: function(event) {
if(this.config.data.params) {
event.preventDefault();
event.stopPropagation();
KONtx.application.setHostResultToViewId(event, 'view-Home', this.config.data.params);
}else {
}
    },
    
    createView: function() {
    this.controls.weather_con=new KONtx.element.Container({
    
    }).appendTo(this);
this.controls.weatherIcon=new KONtx.element.Image({
src: "",
styles: {
height: 75,
hOffset:5,
vOffset:5,
width: 87,
}
}).appendTo(this.controls.weather_con);
this.controls.warning_con=new KONtx.element.Container({
styles:{
hOffset:this.controls.weatherIcon.outerWidth,
vOffset:this.height/2,
visible:false,
}
}).appendTo(this.controls.weather_con);
this.controls.warning=new KONtx.element.Image({
src: 'Images/Yahoo_Interface_Icons/warning_0.png',
styles:{
}    
}).appendTo(this.controls.warning_con);    
if(city_obj.citylist.length<1)
var truncName=""
else
var truncName=this.config.data.name.substr(0, this.config.data.name.lastIndexOf(","))
this.controls.cityname = new KONtx.element.Text({
label: '',
styles: {
color: "#EFFE4D",
fontSize: "14px",
hOffset:this.controls.warning_con.outerWidth+5,
vOffset:20,
},
}).appendTo(this.controls.weather_con);
this.controls.citytemp = new KONtx.element.Text({
label: "",
styles: {
color: "#FFFFFF",
fontSize: "19px",
hOffset: this.controls.warning_con.outerWidth+5,
vOffset: 40,//this.controls.cityname.outerHeight,
},
}).appendTo(this.controls.weather_con);
//BEGIN DEFAULT CON
this.controls.default_con=new KONtx.element.Container({
styles:{
hAlign:'center',
vAlign:'center',
}
}).appendTo(this);
this.controls.default_label = new KONtx.element.Text({
label: "The Weather Network",
styles: {
color: "#FFFFFF",
fontSize: "20px",
},
}).appendTo(this.controls.default_con);
this.myCode=this.config.data.myCode;
this.myID=this.config.data.id;
    },
    focusView:function(){
    },
    
    updateView: function(){
city_obj.currentIndex=this.myID;
if(city_obj.citylist.length>1)
this.controls.cityname.setText(this.config.data.name.substr(0, this.config.data.name.lastIndexOf(",")));
fetchWeather(this.myCode);
this.registerMessageCenterListenerCallback(this.weatherUpdate);
//snippetLoader=this.config.data.myCode;
var lc = currentAppData.get("TWN_lastcity");
var lcc=currentAppData.get("TWN_lastcitycode");
//No last code?  Show the default view.  Else, show the weather info
if(city_obj.citylist.length<1){
this.controls.default_con.visible=true;
this.controls.weather_con.visible=false;
} else {
this.controls.weather_con.visible=true;
this.controls.default_con.visible=false;
}
    },    
    weatherUpdate: function(event){
if (event.payload.key == "loadedWeatherData") {
var weatherData = event.payload.value;
//The current weather page uses info from both the Obs and UVObs nodes
var cw=weatherData.Observation;
if(cw.icon=="")
cw.icon="BLANK";
temp=evaluateTemp(cw.temperature_c);
this.controls.citytemp.setText(temp);
this.controls.weather_con.removeChild(this.controls.weatherIcon);
this.controls.weatherIcon=new KONtx.element.Image({
src: "Images/Yahoo_wxIcons/-.png",
styles: {
height: 75,
hOffset:5,
vOffset:5,
width: 87,
}
}).appendTo(this.controls.weather_con);
this.controls.weather_con.removeChild(this.controls.cityname);
this.controls.cityname = new KONtx.element.Text({
label: '',
styles: {
color: "#EFFE4D",
fontSize: "14px",
hOffset:this.controls.warning_con.outerWidth+5,
vOffset:20,
},
}).appendTo(this.controls.weather_con);
this.controls.cityname.setText(weatherData.loadedCity)
this.controls.weatherIcon.src=icons_obj[cw.icon].en.path;
}
    },
});


Can someone give me a shove in the right direction?
Reply
buddy16 Sep 2011 1:12 PM
I&#39;ve fixed my own issue. &nbsp;If anyone has a problem with snippets merging, combining, blocking each other out, or just plain redrawing wrong, check your messagecenter listeners. &nbsp;I was using such a listener to identify when data had been loaded and display it on the snippet. &nbsp;However, unlike the typical sidebar views, snippets that scroll &quot;offscreen&quot; do not hide/unload. &nbsp;Because of this, their listeners are also activated when the data comes in and all data is writtren to the active snippet. &nbsp;What I did was keep an array of all generated snippets at the root level and then use a simple function to kill any listeners. &nbsp;Here is that function:<br><div>function clearSnippetListeners(){<div>&nbsp;&nbsp;&nbsp;&nbsp;for(nona=0; nona&lt;createdSnippets.length; nona++)<div><span class="Apple-tab-span" style="white-space:pre;"> </span>createdSnippets[nona]._unregisterMessageCenterListeners();<div>}<br><br>I then reorganized some of the snippet-level code. &nbsp;It now works in the simulator and on the television. &nbsp;Someone need to tell Accuweather because their snippets exhibit the same overwriting behavior mine were.<br><br><br><br><br><div class="quote "><div class="quotetop ">QUOTE<cite>(buddy @ 13 Sep 2011 2:23 PM)</cite><blockquote class="quotemain"><span style="font-size:12px;"></span>I have a weather app with scrollable snippets. &nbsp;The data for these snippets is assembled at launch and the snippet itself displays live weather data. &nbsp;In the simulator, everything works fine: &nbsp;The snippet draws correctly everytime. &nbsp;However, on the television (Samsung), only the first draw appears correctly. &nbsp;Every snippet scrolled to after that shows every previous snippet&#39;s data underneath the new data for the now current snippett. &nbsp;I have tried a variety of methods for creating the snippet without success. &nbsp; &nbsp;I am hoping someone here can point me in the right direction.<br><br><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>********** CODE CODE CODE CODE CODE CODE **********<br><br>Can someone give me a shove in the right direction?</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></blockquote></div></div></div></div></div></div>
Reply
buddy9 Nov 2011 2:25 PM
Hey everyone.&nbsp; If you are looking for help on this issue, DO NOT do what I did.&nbsp; It is apparently against Yahoo! protocol to retain references in the &quot;global&quot; realm.&nbsp; I have no idea how to fix this problem at the current time.&nbsp; It&#39;d be nice if Y! could give more support beyond &quot;Don&#39;t do that&quot;. A response here letting me know that it was against their standards before I submitted my widget would have been cool too, but they must be busy with other projects.&nbsp; I will now be slogging my way through the docs and framework, hoping that another solution appears.<br><br><div class="quote"><div class="quotetop">QUOTE<cite>(buddy @ 16 Sep 2011 1:12 PM)</cite></div><blockquote class="quotemain">I&#39;ve fixed my own issue. &nbsp;If anyone has a problem with snippets merging, combining, blocking each other out, or just plain redrawing wrong, check your messagecenter listeners. &nbsp;I was using such a listener to identify when data had been loaded and display it on the snippet. &nbsp;However, unlike the typical sidebar views, snippets that scroll &quot;offscreen&quot; do not hide/unload. &nbsp;Because of this, their listeners are also activated when the data comes in and all data is writtren to the active snippet. &nbsp;What I did was keep an array of all generated snippets at the root level and then use a simple function to kill any listeners. &nbsp;Here is that function:<br><div>function clearSnippetListeners(){<div>&nbsp;&nbsp;&nbsp;&nbsp;for(nona=0; nona&lt;createdSnippets.length; nona++)<div><span class="Apple-tab-span" style="white-space:pre;"> </span>createdSnippets[nona]._unregisterMessageCenterListeners();<div>}<br><br>I then reorganized some of the snippet-level code. &nbsp;It now works in the simulator and on the television. &nbsp;Someone need to tell Accuweather because their snippets exhibit the same overwriting behavior mine were.<br><br><br><br><br><div class="quote "><div class="quotetop ">QUOTE<cite>(buddy @ 13 Sep 2011 2:23 PM)</cite><blockquote class="quotemain"><span style="font-size:12px;"></span>I have a weather app with scrollable snippets. &nbsp;The data for these snippets is assembled at launch and the snippet itself displays live weather data. &nbsp;In the simulator, everything works fine: &nbsp;The snippet draws correctly everytime. &nbsp;However, on the television (Samsung), only the first draw appears correctly. &nbsp;Every snippet scrolled to after that shows every previous snippet&#39;s data underneath the new data for the now current snippett. &nbsp;I have tried a variety of methods for creating the snippet without success. &nbsp; &nbsp;I am hoping someone here can point me in the right direction.<br><br><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div><div>********** CODE CODE CODE CODE CODE CODE **********<br><br>Can someone give me a shove in the right direction?</div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></div></blockquote></div></div></div></div></div></div></blockquote></div>
Reply
Vivek Jani11 Nov 2011 10:24 AM
How about making one more check in your if statement of the message listener, whether the current update is for this particular snippet or not? One way to do this is to somehow return the citycode in your response and match it with this.config.data.myCode.<br><br>Thanks,<br>Vivek
Reply
buddy11 Nov 2011 11:45 AM
Thanks for the note Vivek. &nbsp;This is the exact solution I used. &nbsp;Sorry if i came off as crabby when I wrote my response....it&#39;s been a frustrating week. &nbsp;I know you guys are working with limited resources and you are doing an great job.&nbsp;<br><br><div class="quote "><div class="quotetop ">QUOTE<cite>(Vivek Jani @ 11 Nov 2011 10:24 AM)</cite><blockquote class="quotemain">How about making one more check in your if statement of the message listener, whether the current update is for this particular snippet or not? One way to do this is to somehow return the citycode in your response and match it with this.config.data.myCode.<br><br>Thanks,<br>Vivek</blockquote></div></div>
Reply