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




実装側( Main.mxml )
inputType というプロパティの記述で動作を定義しています

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

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

3) none
	編集不可
	
4) NumberValidator
	Validator フィールド
01.<?xml version="1.0" encoding="utf-8"?>
02.<mx:Application
03.    xmlns:mx="http://www.adobe.com/2006/mxml"
04.    initialize="initData();"
05.    xmlns="control.*"
06.>
07. 
08.<!-- *************************************************** -->
09.<!-- 外部ソース -->
10.<!-- *************************************************** -->
11.<mx:Style source="extern/Style.css" />
12.<mx:Script source="extern/Script.as" />
13. 
14.<!-- *************************************************** -->
15.<!-- 入力フォーム -->
16.<!-- *************************************************** -->
17.<mx:Form width="90%" height="90%">
18.     
19.    <mx:FormItem
20.        label="restrict : 0123456789"
21.        labelStyleName="labelAlign"
22.        paddingBottom="30"
23.    >
24.        <LboxText
25.            id="fld1"
26.            inputType="num"
27.            keyDown="userKeyDown(event)"
28.        />
29. 
30.    </mx:FormItem>
31.    <mx:FormItem
32.        label="displayAsPassword : true"
33.        labelStyleName="labelAlign"
34.         paddingBottom="30"
35.    >
36.        <LboxText
37.            id="fld2"
38.            inputType="pass"
39.        />
40. 
41.    </mx:FormItem>
42.    <mx:FormItem
43.        label="editable : false"
44.        labelStyleName="labelAlign"
45.         paddingBottom="30"
46.    >
47.        <LboxText
48.            id="fld3"
49.            inputType="none"
50.        />
51. 
52.    </mx:FormItem>
53.    <mx:FormItem
54.        label="NumberValidator"
55.        labelStyleName="labelAlign"
56.         paddingBottom="30"
57.    >
58.        <LboxText
59.            id="fld4"
60.            inputType="NumberValidator"
61.            cError="入力値が不正です"
62.        />
63. 
64.    </mx:FormItem>
65.    <mx:FormItem
66.        label="NumberValidator(必須入力)"
67.        labelStyleName="labelAlign"
68.         paddingBottom="30"
69.    >
70.        <LboxText
71.            id="fld5"
72.            inputType="NumberValidator"
73.            iError="?"
74.            noEmpty="true"
75.        />
76. 
77.    </mx:FormItem>
78. 
79. 
80.</mx:Form>
81. 
82.</mx:Application>
定義側( LboxText.mxml )
public な [Bindable] の利用は、getter setter のメソッド定義とほぼ同義です。
[Bindable] では、視覚的に実装を行い、getter setter は、従来からのコード
的な実装です。

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

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

errorTip クラスは、Validator のエラーメッセージのふきだしのスタイルを決定
します。ここでの値は、サイズ以外はデフォルトの設定です
001.<?xml version="1.0" encoding="utf-8"?>
002.<mx:TextInput
003.    xmlns:mx="http://www.adobe.com/2006/mxml"
004.    creationComplete="initControl(event)"
005.    keyDown="keyDownEvent(event)"
006.    keyUp="keyUpEvent(event)"
007.>
008. 
009.<mx:Style>
010..errorTip {
011.    color: #FFFFFF;
012.    fontSize: 16;
013.    fontWeight: "bold";
014.    shadowColor: #000000;
015.    borderColor: #CE2929;
016.    borderStyle: "errorTipRight";
017.    paddingBottom: 4;
018.    paddingLeft: 4;
019.    paddingRight: 4;
020.    paddingTop: 4;
021.}
022.</mx:Style>
023. 
024.<mx:Script>
025.<![CDATA[
026. 
027.    import mx.managers.*;
028.    import mx.events.*;
029. 
030.    private var _inputType:String;
031.    [Bindable] public var iError:String = "整数値を入力して下さい";
032.    [Bindable] public var cError:String = "整数値を入力して下さい";
033.    [Bindable] public var noEmpty:Boolean = false;
034.    [Bindable] public var EmptyError:String = "必須入力です";
035. 
036.    // *****************************************************
037.    // 新しいプロパティ
038.    // *****************************************************
039.    public function get inputType():String {
040.        return _inputType;
041.    }
042.    public function set inputType(str:String):void {
043.        _inputType = str;
044. 
045.        if ( _inputType == "num" ) {
046.            this.restrict = "0123456789";
047.        }
048. 
049.        if ( _inputType == "pass" ) {
050.            this.displayAsPassword = true;
051.        }
052.        else {
053.            this.displayAsPassword = false;
054.        }
055. 
056.        if ( _inputType == "none" ) {
057.            this.editable = false;
058.        }
059. 
060.        if ( _inputType == "NumberValidator" ) {
061.            option.source = this;
062.        }
063. 
064. 
065.        // ルートアプリケーションの参照
066.        mx.core.Application.application.firebug( _inputType );
067.    }
068. 
069.    // *****************************************************
070.    //
071.    // *****************************************************
072.    private function keyDownEvent(e:KeyboardEvent):void {
073. 
074.        mx.core.Application.application.firebug( "innerKeyDown" );
075. 
076.    }
077.    // *****************************************************
078.    //
079.    // *****************************************************
080.    private function keyUpEvent(e:KeyboardEvent):void {
081. 
082.        mx.core.Application.application.firebug( "innerKeyUp" );
083. 
084.    }
085. 
086.    // *****************************************************
087.    // 初期処理
088.    // *****************************************************
089.    private function initControl(e:FlexEvent):void {
090. 
091.        // イベント追加
092.        this.addEventListener(FlexEvent.ENTER, focusControl);
093. 
094.    }
095. 
096.    // *************************************************
097.    // ENTER to TAB
098.    // *************************************************
099.    private function focusControl(event:FlexEvent):void{
100. 
101.        var fm:FocusManager = FocusManager(this.focusManager);
102.        var target:Object = fm.getNextFocusManagerComponent();
103.        target.setFocus();
104. 
105.    }
106. 
107.]]>
108.</mx:Script>
109. 
110.<mx:NumberValidator
111.    id="option"
112.    property="text"
113.    domain="int"
114.    integerError="{iError}"
115.    required="{noEmpty}"
116.    requiredFieldError="{EmptyError}"
117.    invalidCharError="{cError}"
118.    triggerEvent="enter"
119./>
120. 
121.</mx:TextInput>