Earlier today I needed a container with flat edges at the top and rounded edges at the bottom for something I was building. Unfortunately there isn’t a built in method to do this in Flex. Well, heres how. Create a new skin that extends the default HaloBorder skin and override its updateDisplayList.

package
{
 
	import flash.display.*;
	import flash.geom.*;
	import flash.utils.*;
 
	import mx.core.EdgeMetrics;
	import mx.skins.halo.HaloBorder;
	import mx.utils.ColorUtil;
	import mx.utils.GraphicsUtil;
 
	public class CustomCornerBorder extends HaloBorder 
	{
 
	public function TopicMenuPopupBorder() 
	{
		super(); 
 
	}
 
	override protected function updateDisplayList
(unscaledWidth:Number, unscaledHeight:Number):void{	
 
		var g:Graphics = graphics;
 
		super.updateDisplayList(unscaledWidth, unscaledHeight);
 
		var r:Number = getStyle("cornerRadius") as Number;
		if (!r) r = 0; 
 
		var bg:uint = getStyle("backgroundColor") as uint;
		if (!bg) bg = 0x000000;
 
		drawRoundRect(0,0, unscaledWidth,unscaledHeight, 
               { tl: 0, tr: 0, br: r, bl: r }, bg, 1);
 
	}
 
 
 
	}
}

If you take a peek in the Container class definition it uses a radius object to determine which sides are to be rounded. Unfortunately it doesn’t actually expose any of this to us developers. To add insult to injury there are no styles that correspond to the radius object so we have to hard code the desired radius values into our new border class like I’ve done above. If hard coding values isn’t your thing you could subclass your container and add a custom style in for this.

Lastly don’t forget to set the borderSkin property on your container for it all to work.

border-skin: ClassReference("com.proflightinc.view.skins.TopicMenuPopupBorder");

ian News