0

Async updates to snippet test

Hi all,

I've just started with the Yahoo! TV widgets and I'm trying to build a really simple notification widget. For now, the basic idea is that the widget will periodically ping a URL and then update the Snippet view in the Dock with the text it reads from that URL.

I'm not really sure how to do this, this is what I'm trying right now:
1. I've taken the HelloWorld example from http://developer.yahoo.net/forum/index.php?showtopic=4007
2. I've modified it by adding a function makeRequest():
CODE
function makeRequest(){
log(prefix + "Making an XHR request");
var request = new XMLHttpRequest();
log(prefix + "Got an object XHR request");
request.open( "GET", "http://myUrl.com", false );
log(prefix + "Opened");
request.send();
log(prefix + "Sent");
if ( request.status == 200 ){
print( request.responseText );
log(prefix + "Setting the label to the text we got back");
viewReference.controls.text.setText(request.responseText);
}
else{
log(prefix + "Response was not 200 " + request.status);
}
}


3. Right now, I'm calling this in updateView.
4. viewReference is set to 'this' when within createView so that I can access the controls later when the request completes
5. I'm trying to get makeRequest() get invoked periodically and I found
CODE
helpers.later()
so I added a call to that method. However, I see an error in the logs with
CODE
this.helpers.later(5000, makeRequest, this, null, true);
in createView which reads
CODE
WE 00:00:02:224: [T:27582] TypeError: this.helpers has no properties (widget.js: Line 26)


So my complete code is
CODE
include("Framework/kontx/1.1/src/all.js");

var prefix = "HELLOWORLD: ";

var viewReference = null;

var StaticSnippetView = new KONtx.Class({
ClassName: 'StaticSnippetView',

Extends: KONtx.system.AnchorSnippetView,

createView: function() {
log(prefix + "Hello World Wiget being created");
this.controls.text = new KONtx.element.Text({
label: "Wassup World",
styles: {
fontSize: KONtx.utility.scale(20),
vAlign: "center",
hAlign: "center",
color: "#FFFFFF"
},
}).appendTo(this);

log(prefix + "Hello World Widget control created");

this.helpers.later(5000, makeRequest, this, null, true);

log(prefix + "Registered timer");

viewReference = this;


},

updateView: function() {
log(prefix + "Some update happened");
// we have no dynamic data in this snippet, so no need to update. If you did (like the Finance widget for example), you would have code here
//this.controls.text.label = "Something new";
//makeRequest();

}
});

function makeRequest(){
log(prefix + "Making an XHR request");
var request = new XMLHttpRequest();
log(prefix + "Got an object XHR request");
request.open( "GET", "http://myUrl.com", false );
log(prefix + "Opened");
request.send();
log(prefix + "Sent");
if ( request.status == 200 ){
print( request.responseText );
log(prefix + "Setting the label to the text we got back");
viewReference.controls.text.setText(request.responseText);
}
else{
log(prefix + "Response was not 200 " + request.status);
}
}

var MainView = new KONtx.Class({
ClassName: 'MainView',

Extends: KONtx.system.SidebarView,

createView: function() {
this.controls.button1 = new KONtx.control.TextButton({
label: "Push Me",
guid: "button1",
events: {
onSelect: function(event) {
log(prefix + "you pushed the button!");
}
},
styles: {
width: Theme.viewSpecs.SIDE_BAR.width,
height: KONtx.utility.scale(35),
vOffset: 0,
}
}).appendTo(this);
}
});

KONtx.application.init({
views: [
{ id: 'view-Main', viewClass: MainView },
{ id: 'view-Settings', viewClass: KONtx.views.AboutBox },
{ id: 'snippet-main', viewClass: StaticSnippetView },
],
defaultViewId: 'view-Main',
settingsViewId: 'view-Settings',
});


What I want to achieve is to be able to periodically call the makeRequest() function to get some data over the network and display that as the Snippet's text.

I realize this probably isn't the best way to write a widget but JavaScript really isn't really my forte and this widget is just a small part of a bigger project so I right now, I'm focused on just getting it to work without putting in too many hours into getting it perfect. But nevertheless, I would appreciate any pointers on doing it the 'right way'!

Thanks!

by
2 Replies
  • A couple points of feedback/guidance.
    - You will want to put your Timer outside the view.
    - Take a events fired when the widget is starting up.
    - It probably make sense to start your timer when the during one of those events.
    - Make sure you are ONLY using async calls for network requests.
    - I am not sure why the Hello World example uses non-async calls, but it will cause problems if you attempt to navigate the QA process.
    - Good rule of thumbs is that all network requests MUST be async.
    - Take a look at the message center functionality
    - it allows you to store data easily and attach listeners for when the information is updated.
    - You can then have your Snippet view listening for the information to be updated.

    Hope this helps.
    0
  • waxyzwaxyz,
    have you finished development of your widget? if yes, could you please share a code?
    I am interested in the development of similiar widget, so it would be quite useful for me.
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets