Flex - Easy way to set border on image

Question

Is there an easy way to add a simple border to an image?

I'm loading in image thumbs, and would like to add a border at runtime, instead of having to edit all the thumbs.

I'm using Spark Image.

Thanks!

EDIT: I need to add a 1 px white border around these thumbs. I set the size of the tumbs to be 90x90, to make them fit if they are either horisontal or vertical, but the actual images in my example scales down to 90x51 (this is not fixed, only 90x90 as a maximum is fixed)

This is my code for adding thumbNails to a TileGroup (loading the gallery from an xml file):

private function loadPopUpThumbs():void{
            if(curThumbImg <= totThumbImg){
                var thumbImg:Image = new Image();
                var _loader:Loader = new Loader();
                var imageNr:int = curThumbImg;
                var thumbContainer:BorderContainer = new BorderContainer();

                _loader.contentLoaderInfo.addEventListener(Event.COMPLETE,function(e:Event):void{ 
                    thumbImg.source = e.currentTarget.content;
                    popUpImgGroup.addElement(thumbImg);

                    thumbImg.width = 90;
                    thumbImg.height = 90;
                    thumbImg.scaleMode = "letterbox";
                    thumbImg.verticalAlign = "bottom";
                    thumbImg.smooth = true;
                    thumbImg.id = "thumbImg" + imageNr;

                    //thumbImg.drawRoundRect(0,0,thumbImg.width,thumbImg.height, null, 0xffffff);

                    thumbImg.addEventListener(MouseEvent.CLICK, function(evt:MouseEvent):void{
                        popUpThumbClicked(imageNr.toString());
                    });

                    trace("Thumb added: " + popUpXMLList.(attribute('nr')==imageNr.toString()).@thumbURL);
                    curThumbImg++;
                    loadPopUpThumbs();
                });

                _loader.load(new URLRequest(encodeURI(popUpXMLList.(attribute('nr')==imageNr.toString()).@thumbURL)));

            }else{
                trace("DONE Adding thubs!!!");
            }
        }

Also: Would it be possible to add a linebreak in the items added to the TileGroup? In my XML file I've defined a group attribute, so that I'm able to devide the images into groups. If I click a image from one group, I can skip next/prev within that group, but not to the next group. Is there any way for me to insert a linebreak to my TileGroup, so that I can listen for when the prevGroup != curGroup, and then add in some sort of spacing before continuing adding the next thumbs? All I need is a way to skip a line in the tileGroup :)

Thanks!

Answer 1

You can create new custom Image Class, extends spark Image. Very simple and clean. And set border size and color with css. See example:

package classes
{
    import flash.display.CapsStyle;
    import flash.display.JointStyle;
    import flash.display.LineScaleMode;

    import spark.components.Image;

    public class ImageBorder extends Image
    {

        public function ImageBorder()
        {
            super();
        }

        override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
        {
            super.updateDisplayList(unscaledWidth, unscaledHeight); 

            if (imageDisplay && imageDisplay.bitmapData)
            {
                var borderSize:Number   = getStyle("borderSize") || 0;
                var borderColor:Number  = getStyle("borderColor") || 0xffffff;

                var half:Number = borderSize/2;
                imageDisplay.left = imageDisplay.top = imageDisplay.right =  imageDisplay.bottom = borderSize;

                graphics.clear();
                graphics.lineStyle(borderSize, borderColor, 1, false, LineScaleMode.NONE, CapsStyle.NONE, JointStyle.MITER);

                graphics.moveTo(0, half);
                graphics.lineTo(unscaledWidth -half, half);
                graphics.lineTo(unscaledWidth - half, unscaledHeight-half);
                graphics.lineTo(half, unscaledHeight-half);
                graphics.lineTo(half, half);

            }
        }
    }
}

In application use with css:

<fx:Style>
    @namespace s "library://ns.adobe.com/flex/spark";
    @namespace mx "library://ns.adobe.com/flex/mx";
    @namespace classes "classes.*";

    classes|ImageBorder 
    {
        borderSize : 10;
        borderColor : "0xff00ff";
    }

</fx:Style>

<classes:ImageBorder source=" your source url " />

Answer 2

Spark image is a SkinnableComponent.

1. You can create your custom skin that supports borders in any convenient way, like styles or properties.
2. Or you can set that skin if you want to see border or remove it if you don't want
3. Or you can put it inside BorderContainer, and set borderVisible to true when you want to see the border.