0
Sidebar Grid of images issue
Hi all
Just started playing with ConnectedTV and have ran into a problem of sorts
Basically I am fetching a live JSON feed, and parsing that. A grid is then being used to create x number of cells which I would like to populate with the images from the JSON feed. I have verified that the images are publicly visible, etc - so there are no issues there. Furthermore the terminal is showing the correct URLS are being pulled. The problem is the grid simply isnt being created
Any help would be appreciated - my code is below in full:
Just started playing with ConnectedTV and have ran into a problem of sorts
Basically I am fetching a live JSON feed, and parsing that. A grid is then being used to create x number of cells which I would like to populate with the images from the JSON feed. I have verified that the images are publicly visible, etc - so there are no issues there. Furthermore the terminal is showing the correct URLS are being pulled. The problem is the grid simply isnt being created
Any help would be appreciated - my code is below in full:
CODE
var SampleSidebarView = new KONtx.Class({
title: 'SampleSidebarView',
Extends: KONtx.system.SidebarView,
initView: function() {
// normally you wouldn't need to do this but once on startup (KONtx.application's onApplicationStartup for example), but for illustrative purposes doing it often here
// this._profileConnection();
},
createView: function() {
this.topContainer = new KONtx.control.EmptySpace({
styles: {
height: 52
}
}).appendTo(this);
this.sectionImage = new KONtx.element.Image({
src: 'Images/960x540/icon-logo-large.png',
styles: {
width: Theme.viewSpecs.SIDE_BAR.width,
height: 52
}
}).appendTo(this.topContainer);
this.myPhotosContainer = new KONtx.control.EmptySpace({
styles: {
vOffset: this.topContainer.outerHeight
}
}).appendTo(this);
this.myPhotos = new KONtx.element.Text({
label: 'My Photos',
styles: {
fontSize: '26px',
height: 30,
color: '#AAAAAA'
}
}).appendTo(this.myPhotosContainer);
this.fetchData();
},
fetchData: function() {
var u = new URL();
u.location = 'xxxx.xxxx.com/etc/blah/blah';
u.fetchAsync(this.handleFetchResponse.bindTo(this));
},
handleFetchResponse: function(u) {
if(u.response != 200) {
// request failed
return;
}
// do whatever you need to do to format the data and store in "result"
else {
var my_data_struct = JSON.parse(u.result);
this.showImages(my_data_struct);
}
},
showImages: function(data){
var self = this;
var introContainer = new KONtx.control.EmptySpace({
styles: {
vOffset: this.myPhotosContainer.outerHeight
}
}).appendTo(self);
var images = data.feed.entry;
var mygrid = new KONtx.control.Grid({
dataSet: images,
rows: 4,
columns: 1,
cellCreator: function () {
var cell = new KONtx.control.GridCell({
styles: {
height: 77,
width: 77
}
});
cell.imageBox = new KONtx.element.Container({
styles: { width:77, height:77},
}).appendTo(cell);
cell.image = new KONtx.element.Image({
styles: {
width: 77,
height: 77
}
}).appendTo(cell.imageBox);
return cell;
},
cellUpdater: function (cell, dataItem) {
//log("data " + dataItem.links[2].mediaGroup[0].thumbnail[0].url);
cell.image.src = dataItem.links[2].mediaGroup[0].thumbnail[0].url;
}
}).appendTo(introContainer);
var thumbNail = new KONtx.element.Image({
src: data.feed.entry[0].links[2].mediaGroup[0].thumbnail[0].url,
styles: {
width: 77,
height: 77
}
}).appendTo(introContainer);
},
updateView: function() {
//this.fetchData(); //ignore this
},
_profileConnection: function() {
//KONtx.speedtest.profileConnection(function(speed) { KONtx.messages.store("bandwidthBitrate", speed); });
}
});
20 Replies
-
- Jeremy Johnstone
- Feb 2, 2010
-
