How to apply border to KONtx.element.Image?

Hi All,
I am using GridCell to which I am appending three image objects (KONtx.element.Image) slightly overlapping each other.
I want to apply 10 px border around all three image objects. I haven't found any property for this.
How to archive this programmatically?

Thanks for any help.

2 Replies
  • You can put them into a container and then style the background color for your border adding 20px in height and width to the container - usually our approach.
  • In the sample widgets (my apologies, not sure which one off the top of my head) there is a file called "image_function_library.js" inside the Javascript/libs folder. By including that file, it augments the KONtx.element.Image class by adding a few extra methods. These methods are:

    setTopLeftCorner(imageSrc, width, height, horizontalOverlap, verticalOverlap)
    setTopRightCorner(imageSrc, width, height, horizontalOverlap, verticalOverlap)
    setBottomLeftCorner(imageSrc, width, height, horizontalOverlap, verticalOverlap)
    setBottomRightCorner(imageSrc, width, height, horizontalOverlap, verticalOverlap)
    setTopBorder(imageSrc, height, overlap, leftGap, rightGap)
    setRightBorder(imageSrc, width, overlap, topGap, bottomGap)
    setBottomBorder(imageSrc, height, overlap, leftGap, rightGap)
    setLeftBorder(imageSrc, width, overlap, topGap, bottomGap)
    setTopOverlay(imageSrc) // this will be top aligned over the source image
    setBottomOverlay(imageSrc) // this will be bottom aligned over the source image

    The implementation isn't the best (it's a little over 2 year old code that I wrote when I first joined the team), but it does provide you with several methods to add borders around images which can include rounded corners, shadowing, etc (all done via the asset images).

    The way you would use these methods is inside an onLoaded event handler on the image in which you are wrapping. Here's a sample from the Yahoo! News widget:

    		this.controls.newsImage = new KONtx.element.Image({
    missingSrc: $news.styles.images.big_missing_img,
    styles: {
    visible: false,
    events: {
    'onLoaded': function() {
    var shortEdge = 8;
    var longEdge = 16;
    var overall = 33;

    this.aspectSizeBestFit(this.owner.width - overall, this.owner.height - overall, "width");

    // sadly, we can't use auto centering when using borders
    this.element.vOffset = (this.owner.height - this.element.height) / 2;
    this.element.hOffset = (this.owner.width - this.element.width) / 2;

    this.visible = true;

    this.setTopBorder('Images/detail/border-t.png', shortEdge, 2, 1, 1);
    this.setRightBorder('Images/detail/border-r.png', longEdge, 1, 2, 0);
    this.setBottomBorder('Images/detail/border-b.png', longEdge, 0, 1, 1);
    this.setLeftBorder('Images/detail/border-l.png', longEdge, 1, 2, 0);

    this.setTopLeftCorner('Images/detail/border-tl.png', longEdge, shortEdge, 1, 2);
    this.setTopRightCorner('Images/detail/border-tr.png', longEdge, shortEdge, 1, 2);
    this.setBottomLeftCorner('Images/detail/border-bl.png', longEdge, longEdge, 1, 0);
    this.setBottomRightCorner('Images/detail/border-br.png't, longEdge, longEdge, 1, 0);


Recent Posts

in Getting Started / Beginners - Yahoo! TV Widgets