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=40072. 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
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!
