【Flex】ユーザーコントロールで入力制限

実装側( Main.mxml )

inputType というプロパティの記述で動作を定義しています

1) num
	0123456789 のみキー入力可能

2) pass
	パスワードフィールド

3) none
	編集不可
	
4) NumberValidator
	Validator フィールド

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	initialize="initData();"
	xmlns="control.*"
>

<!-- *************************************************** -->
<!-- 外部ソース -->
<!-- *************************************************** -->
<mx:Style source="extern/Style.css" />
<mx:Script source="extern/Script.as" />

<!-- *************************************************** -->
<!-- 入力フォーム -->
<!-- *************************************************** -->
<mx:Form width="90%" height="90%">
	
	<mx:FormItem
		label="restrict : 0123456789"
		labelStyleName="labelAlign"
		paddingBottom="30"
	>
		<LboxText
			id="fld1"
			inputType="num"
			keyDown="userKeyDown(event)"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="displayAsPassword : true"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld2"
			inputType="pass"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="editable : false"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld3"
			inputType="none"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="NumberValidator"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld4"
			inputType="NumberValidator"
			cError="入力値が不正です"
		/>

	</mx:FormItem>
	<mx:FormItem
		label="NumberValidator(必須入力)"
		labelStyleName="labelAlign"
		 paddingBottom="30"
	>
		<LboxText
			id="fld5"
			inputType="NumberValidator"
			iError="?"
			noEmpty="true"
		/>

	</mx:FormItem>


</mx:Form>

</mx:Application>

定義側( LboxText.mxml )

public な [Bindable] の利用は、getter setter のメソッド定義とほぼ同義です。
[Bindable] では、視覚的に実装を行い、getter setter は、従来からのコード
的な実装です。

但し、複雑な処理を行うプロパティ処理は、getter setter を利用します。
ここでは、[Bindable] な変数は、内部クラス(のような)として定義された NumberValidator
への値の橋渡しを行っています。

サンプルとしての構築なので、NumberValidator のプロパティ実装が不完全ですが、
外部からのプロパティによって NumberValidator コントロールのプロパティ制御
が可能となっています。

errorTip クラスは、Validator のエラーメッセージのふきだしのスタイルを決定
します。ここでの値は、サイズ以外はデフォルトの設定です

<?xml version="1.0" encoding="utf-8"?>
<mx:TextInput
	xmlns:mx="http://www.adobe.com/2006/mxml"
	creationComplete="initControl(event)"
	keyDown="keyDownEvent(event)"
	keyUp="keyUpEvent(event)"
>

<mx:Style>
.errorTip {
	color: #FFFFFF;
	fontSize: 16;
	fontWeight: "bold";
	shadowColor: #000000;
	borderColor: #CE2929;
	borderStyle: "errorTipRight";
	paddingBottom: 4;
	paddingLeft: 4;
	paddingRight: 4;
	paddingTop: 4;
}
</mx:Style>

<mx:Script>
<![CDATA[

	import mx.managers.*;
	import mx.events.*;

	private var _inputType:String; 
	[Bindable] public var iError:String = "整数値を入力して下さい";
	[Bindable] public var cError:String = "整数値を入力して下さい";
	[Bindable] public var noEmpty:Boolean = false;
	[Bindable] public var EmptyError:String = "必須入力です";

	// *****************************************************
	// 新しいプロパティ
	// *****************************************************
	public function get inputType():String { 
		return _inputType; 
	}
	public function set inputType(str:String):void { 
		_inputType = str;

		if ( _inputType == "num" ) {
			this.restrict = "0123456789";
		}

		if ( _inputType == "pass" ) {
			this.displayAsPassword = true;
		}
		else {
			this.displayAsPassword = false;
		}

		if ( _inputType == "none" ) {
			this.editable = false;
		}

		if ( _inputType == "NumberValidator" ) {
			option.source = this;
		}


		// ルートアプリケーションの参照
		mx.core.Application.application.firebug( _inputType );
	}

	// *****************************************************
	// 
	// *****************************************************
	private function keyDownEvent(e:KeyboardEvent):void {

		mx.core.Application.application.firebug( "innerKeyDown" );

	}
	// *****************************************************
	// 
	// *****************************************************
	private function keyUpEvent(e:KeyboardEvent):void {

		mx.core.Application.application.firebug( "innerKeyUp" );

	}

	// *****************************************************
	// 初期処理
	// *****************************************************
	private function initControl(e:FlexEvent):void {

		// イベント追加
		this.addEventListener(FlexEvent.ENTER, focusControl);

	}

	// *************************************************
	// ENTER to TAB
	// *************************************************
	private function focusControl(event:FlexEvent):void{

		var fm:FocusManager = FocusManager(this.focusManager);
		var target:Object = fm.getNextFocusManagerComponent();
		target.setFocus();

	}

]]>
</mx:Script>

<mx:NumberValidator
	id="option"
	property="text"
	domain="int"
	integerError="{iError}"
	required="{noEmpty}"
	requiredFieldError="{EmptyError}"
	invalidCharError="{cError}"
	triggerEvent="enter"
/>

</mx:TextInput>