0

Image in FullScreenView

Hi, may i ask if images can be displayed in FullScreenView? If yes, I have some problem in displaying the image. My codes are below,

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

Extends: KONtx.system.FullscreenView,

initView: function() {

},

createView: function() {
var self = this;

this.controls.previous = new KONtx.control.TextButton({
label: "Previous",
wrap: true,
styles: {
width: 220,
height: 40,
textAlign: "center",
hOffset: 720,
vOffset: 100
}, //Style information for the Button stored in our 960x540.js file
events: {
//Setup a onSelect Event to handle the button action
onSelect:function(event){
KONtx.application.loadView('fullView-Video');
}
},
textStyles: {
fontSize: '15px',
color: 'white',
hAlign: 'center',
vAlign: 'center'

}

}).appendTo(this);


this.controls.next = new KONtx.control.TextButton({
label: "Next",
wrap: true,
styles: {
width: 220,
height: 40,
textAlign: "center",
hOffset: 720,
vOffset: 60
}, //Style information for the Button stored in our 960x540.js file
events: {
//Setup a onSelect Event to handle the button action
onSelect:function(event){
KONtx.application.loadView('fullView-Video');
}
},
textStyles: {
fontSize: '15px',
color: 'white',
hAlign: 'center',
vAlign: 'center'

}

}).appendTo(this);



this.controls.item1 = new KONtx.element.Grid({

rows: 1, //Number of Rows in the Grid link

columns: 1, //Number or Colums in the Grid

guid: "item_grid",

cellCreator: this.cell_Creator, //Setup the function to layout the template for each Grid Cell

cellUpdater: this.cell_Updater, //Setup the function to handle updating the items created in the cellCreator Function

styles: {

backgroundColor: '#96b4e4',

width: 700,

height: 550,

hOffset: 2

}

}).appendTo(this);

},

cell_Creator: function() {

//We need to setup a "Cell" to be created insode the Grid

var gridcell = new KONtx.control.GridCell({

styles: {

width: this.width

},

events: {

onSelect: function () {}

}

});



gridcell.imageBox = new KONtx.element.Container({

styles: {

width: $content.styles._width,

height: 200
}

}).appendTo(gridcell);



gridcell.weatherIconUrl = new KONtx.element.Image({

src: "image/sgMap.jpg",

styles: {

'hAlign': 'top',

'vAlign': 'left',

width: $content.styles._width,

height: 200

}

}).appendTo(gridcell.imageBox);



return gridcell;

},



cell_Updater: function(gridcell, dataitem) {





},

});


The grid itself with the background color is being displayed, however the image does not show at all. Any idea what might be the problem? Thanks in advance.

by
8 Replies
  • I think you have your hAlign and vAlign values mixed up... ;)
    0
  • Hi, Thanks for the reply. I have removed the hAlign and vAlign however the image is still not showing.

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

    Extends: KONtx.system.FullscreenView,

    initView: function() {

    },

    createView: function() {
    var self = this;

    this.controls.previous = new KONtx.control.TextButton({
    label: "Previous",
    wrap: true,
    styles: {
    width: 220,
    height: 40,
    textAlign: "center",
    hOffset: 720,
    vOffset: 100
    }, //Style information for the Button stored in our 960x540.js file
    events: {
    //Setup a onSelect Event to handle the button action
    onSelect:function(event){
    KONtx.application.loadView('fullView-Video');
    }
    },
    textStyles: {
    fontSize: '15px',
    color: 'white',
    hAlign: 'center',
    vAlign: 'center'

    }

    }).appendTo(this);


    this.controls.next = new KONtx.control.TextButton({
    label: "Next",
    wrap: true,
    styles: {
    width: 220,
    height: 40,
    textAlign: "center",
    hOffset: 720,
    vOffset: 60
    }, //Style information for the Button stored in our 960x540.js file
    events: {
    //Setup a onSelect Event to handle the button action
    onSelect:function(event){
    KONtx.application.loadView('fullView-Video');
    }
    },
    textStyles: {
    fontSize: '15px',
    color: 'white',
    hAlign: 'center',
    vAlign: 'center'

    }

    }).appendTo(this);



    this.controls.item1 = new KONtx.element.Grid({
    rows: 1, //Number of Rows in the Grid link
    columns: 1, //Number or Colums in the Grid
    guid: "item_grid",
    cellCreator: this.cell_Creator, //Setup the function to layout the template for each Grid Cell
    cellUpdater: this.cell_Updater, //Setup the function to handle updating the items created in the cellCreator Function
    styles: {
    backgroundColor: '#96b4e4',
    width: 700,
    height: 550,
    hOffset: 2
    }
    }).appendTo(this);

    },

    cell_Creator: function() {
    //We need to setup a "Cell" to be created insode the Grid
    var gridcell = new KONtx.control.GridCell({
    styles: {
    width: this.width
    },
    events: {
    onSelect: function () {}
    }
    });

    gridcell.imageBox = new KONtx.element.Container({
    styles: {
    width: $content.styles._width,
    height: 200
    }
    }).appendTo(gridcell);

    gridcell.weatherIconUrl = new KONtx.element.Image({
    src: "image/sgMap.jpg",
    styles: {
    width: $content.styles._width,
    height: 200
    }
    }).appendTo(gridcell.imageBox);

    return gridcell;
    },

    cell_Updater: function(gridcell, dataitem) {


    },

    updateView: function() {

    },

    hideView: function() {
    },

    });



    I have checked and tested the image URL and it is working on other sidebarView but not in this view. Any idea what might be the problem? Thanks in advance!
    0
  • Are you sure this is correct?
    CODE
    $content.styles._width

    Try replacing with just hard value.
    0
  • Thanks i have tried that before, but it doesn work for me. The weird thing is that the functions cell_Creator, cell_Updater and the Grid (item1) is copied from another javscript that defines another sidebar view and it is working perfectly fine. So i m quite confuse about what the error might be.
    0
  • you are not setting the cells.... You never call the grid to create and cells in your updateview. Look at the other script and seen what is happening in the changeDataset()
    0
  • You are basically setting up the Grid, but then never tell it to do anything.
    0
  • Hi, Thanks a lot for your help. You are right about the updateView(). In addition, my gridcell s' vOffset is refering to the wrong control s' outerHeight.
    Thank you once again. :r
    0
  • im a newbie to widgets. if you can you share your working code that would be great since i also want to do something similar.

    thanks in advance

    QUOTE(Wei loon Ang @ 15 May 2011 6:46 PM)
    Hi, Thanks a lot for your help. You are right about the updateView(). In addition, my gridcell s' vOffset is refering to the wrong control s' outerHeight.
    Thank you once again. :r
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets