Custom Image Component With Border

I have been looking for a image component with border but suddenly i thought y cant i build my own custom component and finally came up with this.

ImageBorder.as

package comps
{
import flash.display.Graphics;
import flash.display.Shape;
import flash.events.Event;

import mx.controls.Alert;
import mx.controls.Image;
import mx.controls.Text;
import mx.controls.TextArea;
import mx.controls.TextInput;
import mx.core.UIComponent;

[Style(name="borderColor", type="uint", inherit="no")]

public class ImageBorder extends UIComponent
{
protected var borderArea:Shape;
protected var img:Image;
protected var borderThickness:Number;

private var borderWidth:Number=0;
private var borderHeight:Number=0;
private var borderColor:uint;

public function ImageBorder()
{
super();
borderArea=new Shape();
img=new Image();
img.addEventListener(Event.COMPLETE,imgLoaded);
}
private function imgLoaded(e:Event):void
{

borderWidth=img.content.width+(2*borderThickness);
borderHeight=img.content.height+(2*borderThickness);
invalidateSize();
invalidateDisplayList();
}
override protected function createChildren():void
{
super.createChildren();
addChild(borderArea);
addChild(img);
}
override protected function measure():void
{
super.measure();
img.x=borderArea.x+borderThickness;
img.y=borderArea.y+borderThickness;
if(img.content)
{
borderWidth=img.content.width+(2*borderThickness);
borderHeight=img.content.height+(2*borderThickness);
img.width=img.content.width;
img.height=img.content.height;
}
borderArea.width=borderWidth;
borderArea.height=borderHeight;

}
override protected function updateDisplayList(unscaledWidth:Number, unscaledHeight:Number):void
{
super.updateDisplayList(unscaledWidth,unscaledHeight);
borderColor=getStyle(“borderColor”);
borderArea.graphics.clear();
borderArea.graphics.lineStyle(borderThickness,borderColor);
borderArea.graphics.drawRect(0, 0,borderWidth, borderHeight);
borderArea.width=getExplicitOrMeasuredWidth();
borderArea.height=getExplicitOrMeasuredHeight();
invalidateSize();
}
public function set borderThick(val:Number):void
{
borderThickness=val;
invalidateSize();
invalidateDisplayList();

}
public function set imageSource(val:String):void
{
img.unloadAndStop(true);
img.source=val;
}
}
}

Application

<?xml version=”1.0″ encoding=”utf-8″?>
<mx:Application xmlns:mx=”http://www.adobe.com/2006/mxml” xmlns:comps=”comps.*”
width=”100%” height=”100%”
backgroundColor=”0xFFFFFF”
layout=”vertical” viewSourceURL=”srcview/index.html”>
<mx:Style>
.mystyle
{
borderColor:#00ff00;
}
</mx:Style>

<comps:ImageBorder id=”img” width=”100%” borderThick=”1″ height=”50%” styleName=”mystyle” imageSource=”images/JPEG-File-icon.png” />
</mx:Application>

In this component i have extended UIComponent with  rectangle shape and image component as childs.So i have overridden create children method to create the two child components.

I have Overridden the measure method and have set the rectangle width to image content width plus twice the border thickness .The borderthickness property represents the thickness of border  ,similarly the rectangle height is also set.

Update displaylist method is overridden to draw a rectangle with the measured height and width

Setting the border or changing the source should affect the display so invalidatedisplaylist method is called so that updatedisplaylist is called to redraw the display area .

Download Source

http://www.box.net/shared/7kgp7auduu

Screen Shot

Image Component with Border