Back to General - Yahoo! TV Widgets Forum
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
Report Abuse
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);	   
    	}
    });
    Report Abuse
    0
  • Hi Steve,

    Your answer solved my problem!
    Many thanks!

    Tinh
    Report Abuse
    0
Ask a Question

Recent Posts

in General - Yahoo! TV Widgets