Flex中的TextInput （5）：添加焦点效果

Flex中的TextInput控件在获得焦点的时候，输入框周围会出现蓝色的边框，当失去焦点的时候，蓝色边框消失。

其原理就是用一个Shape类画出蓝色边框。当TextInput获得焦点的时候，通过addChild把该Shape类对象加入显示列表；当TextInput失去焦点的时候，通过removedChild把该Shape类对象从显示列表中删除。

 

TextInputComponent.as

package {
	import Component.MyTextInput;	
	import flash.display.Sprite;

	public class TextInputComponent extends Sprite
	{
		public function TextInputComponent()
		{
			var txt1:MyTextInput = new MyTextInput(100,100,200,20);
			addChild(txt1);
			
			var txt2:MyTextInput = new MyTextInput(100,130,300,15);
			addChild(txt2);
			
		}
	}
}

MyTextInput.as

package Component
{
	import flash.display.Sprite;
	import flash.events.FocusEvent;
	import flash.text.TextField;
	import flash.text.TextFieldType;
	
	import skins.Border;
	import skins.FocusRect;

	public class MyTextInput extends Sprite
	{
		private var _w:int;
		private var _h:int;
		private var _x:int;
		private var _y:int;
		
		private var _focusRect:FocusRect;
		
		public function MyTextInput(x:int,y:int,width:int,height:int)
		{
			_x = x;
			_y = y;
			_w = width;
			_h = height;
			
			//设定焦点矩形
			_focusRect = new FocusRect(_x-2,_y-2,_w+4,_h+4);
			
			//监听焦点事件
			addEventListener(FocusEvent.FOCUS_IN, focusInHandler);
			addEventListener(FocusEvent.FOCUS_OUT, focusOutHandler);

			CreateChild();
		}
		
		public function CreateChild():void{
			//添加3D边框
			var border:Border = new Border(_x,_y,_w,_h);
			addChild(border);
			
			//添加TextField
			var txt:TextField = new TextField();
			txt.type = TextFieldType.INPUT;
			txt.x = _x + 1;
			txt.y = _y + 1;
			txt.width = _w-2;
			txt.height = _h-2;
			txt.background = true;
			txt.backgroundColor = 0xffffff;
			addChild(txt);
		}

	    protected function focusInHandler(event:FocusEvent):void
	    {
        	addChild(_focusRect);
	    }
	    
	    protected function focusOutHandler(event:FocusEvent):void
	    {
        	removeChild(_focusRect);
	    }
	}
}

Border.as

package skins
{
	import flash.display.Graphics;
	import flash.display.Shape;
	
	import mx.utils.ColorUtil;

	public class Border extends Shape
	{
		//定义高度和宽度
		private var _w:int;
		private var _h:int;
		private var _x:int;
		private var _y:int;
		
		public function Border(x:int,y:int,width:int,height:int)
		{
			_x = x;
			_y = y;
			_w = width;
			_h = height;
			drawBorder();
		}
		
		public function drawBorder():void
		{
			//定义边框颜色
			var borderColor:uint;
			var borderColorDrk1:uint
			var borderColorDrk2:uint
			var borderColorLt1:uint	
			var borderInnerColor:uint;
			
			//设定边框颜色
			borderColor = 0xb7babc;		
			borderColorDrk1 =
				ColorUtil.adjustBrightness2(borderColor, -40);
			borderColorDrk2 =
				ColorUtil.adjustBrightness2(borderColor, +25);
			borderColorLt1 = 
				ColorUtil.adjustBrightness2(borderColor, +40);				
			borderInnerColor = 0xffffff;

			//画出3D边框效果
			draw3dBorder(borderColorDrk2, borderColorDrk1, borderColorLt1,
						 Number(borderInnerColor), 
						 Number(borderInnerColor), 
						 Number(borderInnerColor));

		}
	
		public function draw3dBorder(c1:Number, c2:Number, c3:Number,
									  c4:Number, c5:Number, c6:Number):void
		{
			var g:Graphics = graphics;
			g.clear();
			
			// outside sides
			g.beginFill(c1);
			g.drawRect(_x, _y, _w, _h);
			g.drawRect(_x+1, _y, _w - 2, _h);
			g.endFill();
			
			// outside top
			g.beginFill(c2);
			g.drawRect(_x+1, _y, _w - 2, 1);
			g.endFill();
			
			// outside bottom
			g.beginFill(c3);
			g.drawRect(_x+1, _y + _h - 1, _w - 2, 1);
			g.endFill();
			
			// inside top
			g.beginFill(c4);
			g.drawRect(_x+1, _y+1, _w - 2, 1);
			g.endFill();
			
			// inside bottom
			g.beginFill(c5);
			g.drawRect(_x+1, _y + _h - 2, _w - 2, 1);
			g.endFill();
			
			// inside sides
			g.beginFill(c6);
			g.drawRect(_x+1, _y+2, _w - 2, _h - 4);
			g.drawRect(_x+2, _y+2, _w - 4, _h - 4);
			g.endFill();
		}
	}
}

 

FocusRect.as

package skins
{
	import flash.display.Graphics;
	import flash.display.Shape;

	/**
	 * 该代码改编自mx.skins.halo.HaloFocusRect
	 */
	public class FocusRect extends Shape
	{
		public function FocusRect(x:int,y:int,w:int,h:int)
		{
			super();
	        
	        //设置画图要素
			var focusBlendMode:String = "normal"; //getStyle("focusBlendMode");
			var focusAlpha:Number = 0.4;          //getStyle("focusAlpha");
			var focusColor:Number = 0x009dff;     //getStyle("focusColor");
			var cornerRadius:Number = 0;          //getStyle("cornerRadius");
			var focusThickness:Number = 2;        //getStyle("focusThickness");
			var focusRoundedCorners:String = "tl tr bl br";  //getStyle("focusRoundedCorners");
			var themeColor:Number = 0x009dff;     //getStyle("themeColor");			
			var rectColor:Number = focusColor;
			
			//画出代表焦点的矩形	
			var g:Graphics = graphics;
			g.clear();
			
			var ellipseSize:Number;
			
			// outer ring
			g.beginFill(rectColor, focusAlpha);
			ellipseSize = (cornerRadius > 0 ? cornerRadius + focusThickness : 0) * 2;
			g.drawRoundRect(x, y, w, h, ellipseSize, ellipseSize);
			ellipseSize = cornerRadius * 2;
			g.drawRoundRect(x+focusThickness, y+focusThickness,
					w - 2 * focusThickness, h - 2 * focusThickness,
					ellipseSize, ellipseSize);
			g.endFill();

			// inner ring
			g.beginFill(rectColor, focusAlpha);
			ellipseSize = (cornerRadius > 0 ? cornerRadius + focusThickness / 2 : 0) * 2;
			g.drawRoundRect(x+focusThickness / 2, y+focusThickness / 2,
					w - focusThickness, h - focusThickness,
					ellipseSize, ellipseSize);
			ellipseSize = cornerRadius * 2;
			g.drawRoundRect(x+focusThickness, y+focusThickness,
					w - 2 * focusThickness, h - 2 * focusThickness,
					ellipseSize, ellipseSize);
			g.endFill();
		}
		
	}
}

效果图：