0

Image fails to appear

CODE
_cellCreator: function() { 
//We need to setup a "Cell" to be created insode the Grid
var cell = new KONtx.control.GridCell({
styles: $content.styles.main.cell, //Style information for the Grid Cell from 960x540.js
events: {
onSelect: function () {

},
}
});
//Create a Text Element to hold the title
cell.title = new KONtx.element.Text({
styles: $content.styles.main.title
}).appendTo(cell);
//Create a Text Element to hold the description
cell.desc = new KONtx.element.Text({
styles: $content.styles.main.desc
}).appendTo(cell);

//Create a Text Element to hold the date
cell.pubDate = new KONtx.element.Text({
styles: $content.styles.main.pubDate
}).appendTo(cell);

//Create a Text Element to hold the image
cell.enclosure = new KONtx.element.Image({
styles: $content.styles.main.enclosure
}).appendTo(cell);

return cell;
},

_cellUpdater: function(cell, dataitem) {
//This function will be used to loop through the diplayed cells and update their template created by the _cellCreator
cell.desc.setText(dataitem.desc); //Set the description
cell.title.setText(dataitem.title); //Set the title
cell.pubDate.setText(dataitem.pubDate); //Set the pubDate
cell.enclosure.setSource(dataitem.enclosure); //Set the image
},

_updateItemList: function(items) {
if(this.controls.items instanceof KONtx.element.Grid) {
this.controls.items.changeDataset(items, items.length < 1);
}
},

updateView: function() {
this.config.RSSFeed_items = []; //We are resetting the RSSFeed information so we do not continue to add new updates to the end of the last RSSFeed_items

//We need to stop the view from running through the RSS Feed if we do not have any RSS information yet
if(!this.config.RSSFeed_XML)
{
print('No RSS Information');
return;
}

//Let's create a new object
var list = this.config.RSSFeed_XML.evaluate('rss/channel/item');
//Let's loop through the object and pull out want we want
for(var i=0; i<list.length;i++)
{

//Add the information to the this.config.RSSFeed_items Array as a small Object
this.config.RSSFeed_items.push({title: list.item(i).evaluate('string(title)'),
desc: list.item(i).evaluate('string(description)'),
enclosure: list.item(i).evaluate('string(enclosure)'),
pubDate: list.item(i).evaluate('string(pubDate)')

});
}


These is a part of my codes of a widget that shows the news title, description,date and image. I have a problem with my image as it could not show in my widget. Is my code having some problem? Below is the source code of the RSS feeds i used.

CODE
<item>

<title>Open House at the Biennale!</title>

<link>http://events.insing.com/feature/open-house-at-the-biennale/id-9d1f3100?ref=RSS</link>

<description><![CDATA[The third Singapore Biennale returns.]]></description>

<enclosure url="http://staticc04.insing.com/images/5b/54/0e/00/pc_90x68.jpg" type="image/jpeg" length="1000" />

<pubDate>Tue, 08 Mar 2011 14:09:00 +0800</pubDate>
<guid>http://events.insing.com/feature/open-house-at-the-biennale/id-9d1f3100?ref=RSS</guid>

<dc:creator>inSing.com</dc:creator>
</item>

by
5 Replies
  • QUOTE (askayang @ Mar 14 2011, 08:28 PM) <{POST_SNAPBACK}>
    CODE
    _cellCreator: function() { 
    //We need to setup a "Cell" to be created insode the Grid
    var cell = new KONtx.control.GridCell({
    styles: $content.styles.main.cell, //Style information for the Grid Cell from 960x540.js
    events: {
    onSelect: function () {

    },
    }
    });
    //Create a Text Element to hold the title
    cell.title = new KONtx.element.Text({
    styles: $content.styles.main.title
    }).appendTo(cell);
    //Create a Text Element to hold the description
    cell.desc = new KONtx.element.Text({
    styles: $content.styles.main.desc
    }).appendTo(cell);

    //Create a Text Element to hold the date
    cell.pubDate = new KONtx.element.Text({
    styles: $content.styles.main.pubDate
    }).appendTo(cell);

    //Create a Text Element to hold the image
    cell.enclosure = new KONtx.element.Image({
    styles: $content.styles.main.enclosure
    }).appendTo(cell);

    return cell;
    },

    _cellUpdater: function(cell, dataitem) {
    //This function will be used to loop through the diplayed cells and update their template created by the _cellCreator
    cell.desc.setText(dataitem.desc); //Set the description
    cell.title.setText(dataitem.title); //Set the title
    cell.pubDate.setText(dataitem.pubDate); //Set the pubDate
    cell.enclosure.setSource(dataitem.enclosure); //Set the image
    },

    _updateItemList: function(items) {
    if(this.controls.items instanceof KONtx.element.Grid) {
    this.controls.items.changeDataset(items, items.length < 1);
    }
    },

    updateView: function() {
    this.config.RSSFeed_items = []; //We are resetting the RSSFeed information so we do not continue to add new updates to the end of the last RSSFeed_items

    //We need to stop the view from running through the RSS Feed if we do not have any RSS information yet
    if(!this.config.RSSFeed_XML)
    {
    print('No RSS Information');
    return;
    }

    //Let's create a new object
    var list = this.config.RSSFeed_XML.evaluate('rss/channel/item');
    //Let's loop through the object and pull out want we want
    for(var i=0; i<list.length;i++)
    {

    //Add the information to the this.config.RSSFeed_items Array as a small Object
    this.config.RSSFeed_items.push({title: list.item(i).evaluate('string(title)'),
    desc: list.item(i).evaluate('string(description)'),
    enclosure: list.item(i).evaluate('string(enclosure)'),
    pubDate: list.item(i).evaluate('string(pubDate)')

    });
    }


    These is a part of my codes of a widget that shows the news title, description,date and image. I have a problem with my image as it could not show in my widget. Is my code having some problem? Below is the source code of the RSS feeds i used.

    CODE
    <item>

    <title>Open House at the Biennale!</title>

    <link>http://events.insing.com/feature/open-house-at-the-biennale/id-9d1f3100?ref=RSS</link>

    <description><![CDATA[The third Singapore Biennale returns.]]></description>

    <enclosure url="http://staticc04.insing.com/images/5b/54/0e/00/pc_90x68.jpg" type="image/jpeg" length="1000" />

    <pubDate>Tue, 08 Mar 2011 14:09:00 +0800</pubDate>
    <guid>http://events.insing.com/feature/open-house-at-the-biennale/id-9d1f3100?ref=RSS</guid>

    <dc:creator>inSing.com</dc:creator>
    </item>

    You need to extract the image url from the url attribute node of the enclosure element node. See this for an example.
    0
  • QUOTE (Benjamin Toll @ Mar 14 2011, 09:16 PM) <{POST_SNAPBACK}>
    You need to extract the image url from the url attribute node of the enclosure element node. See this for an example.


    Thanks for your reply. I have another question though. May I ask what are the meaning of the following:

    var u = new URL(); //I know this is creating a new URL variable called u
    u.callback
    u.location
    u.response
    u.result
    0
  • QUOTE (askayang @ Mar 21 2011, 12:17 AM) <{POST_SNAPBACK}>
    Thanks for your reply. I have another question though. May I ask what are the meaning of the following:

    var u = new URL(); //I know this is creating a new URL variable called u
    u.callback
    u.location
    u.response
    u.result

    Instantiating the URL constructor returns an object that allows you to make asynchronous requests. See the following links which should answer all of your questions:
    http://developer.yahoo.com/connectedtv/faq...ml#asynchronous
    http://manual.widgets.yahoo.com/wwhelp/wwh...nc.html#1171423
    0
  • Thanks.

    CODE
     
    var drawingArea = new KONtx.element.Container({

    styles: {

    width: this.width,

    height: 300,

    vOffset: this.controls.backButton.outerHeight,

    backgroundColor: '#e5f4f9'

    }

    }).appendTo(this);






    this.controls.title = new KONtx.element.Text({



    styles: {

    color: '#000000',

    fontSize: KONtx.utility.scale(14),

    fontWeight: 'bold',

    hAlign: 'left',

    width: this.width - 120,

    wrap: true,

    vOffset: 10,

    hOffset: 110

    }

    }).appendTo(drawingArea);



    this.controls.description = new KONtx.element.Text({



    styles: {

    color: '#121212',

    fontSize: KONtx.utility.scale(12),

    hAlign: 'left',

    width: this.width-20,

    wrap: true,

    vOffset: 135,

    hOffset: 10

    }

    }).appendTo(drawingArea);



    this.controls.enclosure = new KONtx.element.Image({

    styles: {

    'hAlign': 'top',

    'vAlign': 'left',

    width: 95,

    height: 120,

    backgroundColor: '#EEEEEE',

    hOffset: 10,

    vOffset: 10

    }

    }).appendTo(drawingArea);





    this.controls.button2 = new KONtx.control.TextButton({

    label: 'Check and Post Comments',



    styles: {

    width: 294,

    height: 25,

    textAlign: "left",

    vOffset: 440

    }, //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('view-CommentView', {title: this.title.data,

    //description: this.description.data,

    enclosure: this.enclosure.src

    });


    },

    }

    }).appendTo(this);



    },



    updateView: function() {

    this.controls.title.setText(this.persist.title);

    this.controls.description.setText(this.persist.description);

    this.controls.enclosure.setSource(this.persist.enclosure);

    },


    I have the error of this.title not defined. Why does it happen?
    0
  • QUOTE (askayang @ Mar 28 2011, 05:38 PM) <{POST_SNAPBACK}>
    Thanks.

    CODE
     
    var drawingArea = new KONtx.element.Container({

    styles: {

    width: this.width,

    height: 300,

    vOffset: this.controls.backButton.outerHeight,

    backgroundColor: '#e5f4f9'

    }

    }).appendTo(this);






    this.controls.title = new KONtx.element.Text({



    styles: {

    color: '#000000',

    fontSize: KONtx.utility.scale(14),

    fontWeight: 'bold',

    hAlign: 'left',

    width: this.width - 120,

    wrap: true,

    vOffset: 10,

    hOffset: 110

    }

    }).appendTo(drawingArea);



    this.controls.description = new KONtx.element.Text({



    styles: {

    color: '#121212',

    fontSize: KONtx.utility.scale(12),

    hAlign: 'left',

    width: this.width-20,

    wrap: true,

    vOffset: 135,

    hOffset: 10

    }

    }).appendTo(drawingArea);



    this.controls.enclosure = new KONtx.element.Image({

    styles: {

    'hAlign': 'top',

    'vAlign': 'left',

    width: 95,

    height: 120,

    backgroundColor: '#EEEEEE',

    hOffset: 10,

    vOffset: 10

    }

    }).appendTo(drawingArea);





    this.controls.button2 = new KONtx.control.TextButton({

    label: 'Check and Post Comments',



    styles: {

    width: 294,

    height: 25,

    textAlign: "left",

    vOffset: 440

    }, //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('view-CommentView', {title: this.title.data,

    //description: this.description.data,

    enclosure: this.enclosure.src

    });


    },

    }

    }).appendTo(this);



    },



    updateView: function() {

    this.controls.title.setText(this.persist.title);

    this.controls.description.setText(this.persist.description);

    this.controls.enclosure.setSource(this.persist.enclosure);

    },


    I have the error of this.title not defined. Why does it happen?

    It's a scoping issue. Try this:
    CODE
    this.getView().controls.title.data
    0

Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets