Flex个人知识库8之ip组件

[size=large]此组件为同事所绘制，记录于此便于学习查阅：
IpInputView:

<?xml version="1.0" encoding="utf-8"?>
<s:BorderContainer xmlns:fx="http://ns.adobe.com/mxml/2009" cornerRadius="2" height="25" width="170"
		 xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="creationCompleteHandler(event)"
		 xmlns:mx="library://ns.adobe.com/flex/mx" borderColor="#14f5f2">
	<s:layout>
		<s:HorizontalLayout verticalAlign="bottom" paddingLeft="2" paddingRight="2"/>
	</s:layout>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>

	<fx:Script>
		<![CDATA[
			import mx.events.FlexEvent;
			import mx.utils.StringUtil;

			import spark.events.TextOperationEvent;

			public static const MIN_WIDTH:Number = 150;

			public static const MIN_HEIGHT:Number = 22;

			public static const MAX_HEIGHT:Number = 30;

			public static const STRING_NULL:String = "";

			private const TO_RIGHT:uint = 37;

			private const TO_LEFT:uint = 39;

			private var ipsArr:Array;

			private var textArr:Array;

			protected function creationCompleteHandler(event:FlexEvent):void
			{
				ipsArr = new Array();
				ipsArr.push("");
				ipsArr.push("");
				ipsArr.push("");
				ipsArr.push("");
				textArr = new Array();
				textArr.push(firstIP);
				textArr.push(secondIP);
				textArr.push(thirdIP);
				textArr.push(fourthIP);
			}

			override public function set width(value:Number):void {
				if(value < MIN_WIDTH) {
					value = MIN_WIDTH;
				}
				super.width = value;
			}

			override public function set height(value:Number):void {
				if(value < MIN_HEIGHT) {
					value = MIN_HEIGHT;
				}else if(value > MAX_HEIGHT){
					value = MAX_HEIGHT;
				}
				super.height = value;
			}


			public static function isEmpty(str:String):Boolean {
					return str == null || StringUtil.trim(str).length == 0;
				}

			public function set value(value:String):void {
				if(isEmpty(value)) {
					if(textArr != null) {
						for(var j:int = 0;j < textArr.length;j++) {
							TextInput(textArr[j]).text = ipsArr[j] = ""; 
						}
					}
					return;
				}
				var arr:Array = value.split(".");
				for(var i:int = 0;i < arr.length;i++) {
					TextInput(textArr[i]).text = ipsArr[i] = arr[i]; 
				}
			}

			public function get value():String {
				var ip:String = "";
				if(ipsArr.length == 4) {
					ip = ipsArr[0] + "." + ipsArr[1] + "." + ipsArr[2] + "." + ipsArr[3];
				}
				return ip;
			}

			private function formatIP(ip:String):String {
				if(isEmpty(ip)) {
					ip = "";
				}else {
					ip = ip.replace("/[^0-9]/g",STRING_NULL);
				}
				if(ip == "00" || ip == "000") {
					ip = "0"
				}	
				if(Number(ip) > 255) {
					ip = "255";
				}
				return ip;
			}

			protected function changeHandler(event:TextOperationEvent):void
			{
				// TODO Auto-generated method stub
				var currentText:TextInput = event.target as TextInput;
				var index:int = textArr.indexOf(currentText);
				currentText.text = ipsArr[index] = formatIP(currentText.text);
				if(currentText.text.length == 3) {
					setFocusToNextText(currentText);
				}
			}

			protected function textKeyUpHandler(event:KeyboardEvent):void
			{
				var currentText:TextInput = event.currentTarget as TextInput;
				if(TO_RIGHT == event.keyCode) {
					setFocusToPreText(currentText);
				}else if(TO_LEFT == event.keyCode) {
					setFocusToNextText(currentText);
				}
			}

			private function setFocusToPreText(text:TextInput):void {
				var index:int = textArr.indexOf(text);
				if(index > 0) {
					var preText:TextInput = textArr[index - 1];
					preText.setFocus();
				}
			}

			private function setFocusToNextText(text:TextInput):void {
				var index:int = textArr.indexOf(text);
				if(index < 3) {
					var nextText:TextInput = textArr[index + 1];
					nextText.setFocus();
				}
			}
		]]>
	</fx:Script>

	<s:TextInput width="23%" id="firstIP" maxChars="3" borderVisible="false" textAlign="center"
				 focusThickness="0" color="#14f5f2" fontWeight="bold" restrict="0-9"
				 change="changeHandler(event)" keyUp="textKeyUpHandler(event)"/>
	<s:Label paddingBottom="4" text="." width="5" fontWeight="bold" color="#14f5f2"/>
	<s:TextInput id="secondIP" width="23%" maxChars="3" borderVisible="false"  textAlign="center"
				 focusThickness="0" color="#14f5f2"  fontWeight="bold" restrict="0-9"
				 change="changeHandler(event)" keyUp="textKeyUpHandler(event)"/>
	<s:Label paddingBottom="4" text="." width="5" fontWeight="bold" color="#14f5f2"/>
	<s:TextInput width="23%" id="thirdIP" maxChars="3" borderVisible="false"  textAlign="center"
				 focusThickness="0" color="#14f5f2"  fontWeight="bold" restrict="0-9"
				 change="changeHandler(event)" keyUp="textKeyUpHandler(event)"/>
	<s:Label paddingBottom="4" text="." width="5" fontWeight="bold" color="#14f5f2"/>
	<s:TextInput width="23%" id="fourthIP" maxChars="3" borderVisible="false"  textAlign="center"
				 focusThickness="0" color="#14f5f2"  fontWeight="bold" restrict="0-9"
				 change="changeHandler(event)" keyUp="textKeyUpHandler(event)"/>
</s:BorderContainer>

[/size]