0

Custom Container class does not show up in fullscreen

I have a customed Container class as following:

CODE
var Toolbar = new KONtx.Class({
ClassName: 'Toolbar',
Extends: KONtx.element.Container,
config: {
},

initialize: function() {

},

initView: function() {
},

createView: function() {
var self = this;

// set the dimension of this toolbar
this.width = $_scale(960);
this.height = $_scale(38);
this.hOffset = $_scale(0);
this.vOffset = $_scale(0);

//create a background image contain the RallyCast image right in the middle
this.controls.centeredLogo = new KONtx.element.Image({
src: "./toolbar.png",
styles: {
width: $_scale(960),
height: $_scale(38),
hOffset: $_scale(0),
vOffset: $_scale(0)
}
}).appendTo(this);
},

updateView: function() {

}
});


Here is the Fullscreen view:
CODE
var Dashboard = new KONtx.Class({
ClassName: 'Dashboard',
Extends: KONtx.system.FullscreenView,
config:{
},

initialize: function() {
this.parent();
},

initView: function() {

},
createView: function() {
this.passthroughVideoEnabled = true;
this.setTVViewportSize(0, 0, 1920, 1080);

/*
If I uncomment this snippet, the image is show up in the fullscreen view nicely!!
this.controls.centeredLogo = new KONtx.element.Image({
src: "./toolbar.png",
styles: {
width: $_scale(960),
height: $_scale(38),
hOffset: $_scale(0),
vOffset: $_scale(0)
}
}).appendTo(this);
*/
var toolbar = new Toolbar().appendTo(this);

},

updateView: function() {

}
});

Then in my code I load the fullscreen view with
CODE
KONtx.application.loadView("view-Dashboard"); //view-Dashboard is the view id


Sorry for my newbie question, I'm totally new with the YDK!
Any help would be appreciated!

by
2 Replies
  • Your problem is that your extending a Container, and treating it as if your extending one of the "View" classes (SidebarView, FullscreenView, etc).

    When you extend a container, the createView, updateView, etc, life-cycle methods do not get called. Do something like the following:

    CODE
    var Toolbar = new KONtx.Class({
    ClassName: 'Toolbar',
    Extends: KONtx.element.Container,

    initialize : function() {
    this.parent();
    this.createStuff();
    }

    createStuff: function() {
    var self = this;

    // this.controls is not undefined when extending container, only created when extending a view
    // this.controls.centeredLogo = new KONtx.element.Image({
    var centeredLogo = new KONtx.element.Image({
    src: "./toolbar.png",
    styles: {
    width: $_scale(960),
    height: $_scale(38),
    hOffset: $_scale(0),
    vOffset: $_scale(0)
    }
    }).appendTo(this);
    }
    });
    0
  • Hi Steve,

    Your answer solved my problem!
    Many thanks!

    Tinh
    0

Recent Posts

in General - Yahoo! TV Widgets