Archive

Posts Tagged ‘flex sdk’

Flex SDK easy Background-Position

August 21st, 2008

One feature that current FLEX SDK skin lacks is the CSS background-position (it centers the image no metter what), here is a quick way to fix this.

CSS:

Box{
   border-skin:ClassReference('ro.huddle.skins.hallo.HalloBorderWithImagePositioning');
   background-image:Embed('/assets/browser_footer.jpg');
   background-position:left,bottom;
}

the HalloBorderWithImagePositioning class:

package ro.huddle.skins.hallo
{
	import flash.display.DisplayObject;
	import flash.display.Shape;

	import mx.core.EdgeMetrics;
	import mx.core.IChildList;
	import mx.core.IContainer;
	import mx.core.IRawChildrenContainer;
	import mx.skins.halo.HaloBorder;

	public class HalloBorderWithImagePositioning extends HaloBorder
	{

		 override public function layoutBackgroundImage():void{
		 	super.layoutBackgroundImage();
		 	if(!hasBackgroundImage) return;

		 	var style:Object = getStyle("backgroundPosition");
		 	// the default alignment is center center
		 	if(!(style is Array) || (style[0]=='center' && style[1]=='center')) return;
		 	var posHorizontal:String = style[0];
		 	var posVertical:String = style[1];

		 	var p:DisplayObject = parent;
		 	var bm:EdgeMetrics = p is IContainer ?
                             IContainer(p).viewMetrics :
                             borderMetrics;
			var childrenList:IChildList = parent is IRawChildrenContainer ?
                                         IRawChildrenContainer(parent).rawChildren :
                                         IChildList(parent);		 	

		 	var backgroundImage:DisplayObject = childrenList.getChildAt(1);

            // default position is center center, or middle,middle
			var bgX:int = backgroundImage.x;
			var bgY:int = backgroundImage.y;

			if(posHorizontal == 'left') bgX = bm.left;
			if(posHorizontal == 'right') bgX = p.width-bm.right-backgroundImage.width;

			if(posVertical == 'top') bgY = bm.top;
			if(posVertical == 'bottom') bgY = p.height-bm.bottom-backgroundImage.height;

		 	backgroundImage.x = bgX;
        	backgroundImage.y = bgY;

        	const backgroundMask:Shape = Shape(backgroundImage.mask);
        	backgroundMask.x = bgX;
        	backgroundMask.y = bgY;
		 }  

	}
}

Because of the RectangularBorder having most of it’s properties private instead of protected, some hacks need to be applied, like getting image from the childsList instead of getting it from the parent by name.

Anyway hope this helps somebody else, it did help me a couple of times.

Radu Cocieru Thoughts , , ,