現場で使えるFlex実践テクニック（5）
バリデータとフォーマッタで“使える”Flexアプリを作ろう

クラスメソッド株式会社
成瀬　勉
2007/11/21

データの検証を行うバリデータが使えるFlex

　入力フォームはアプリケーションにつきものですが、サーバが対応できる形式で正しいデータを送信しなければ、エラーとなってしまいます。従来のWebアプリケーションでは、サーバ側でのみデータの検証が可能でしたので、ユーザーが入力したデータが間違っているかどうかは一度サーバへリクエストを送信する必要がありました。

　しかしFlexでは、クライアント側でデータの検証を行うことができるため、余分なサーバリクエストを防ぐことができます。それがバリデータです。

■ バリデータで文字列の長さを検証

　まずは、文字列の長さを検証する簡単なサンプルを紹介します。入力は自由な文字列ですが、4文字以上かつ8文字以下であることが必須であるとします。

　サンプルを実行し、入力フィールドに文字を入力した後、タブキーなどでフォーカスを外すと、検証が実行されます。検証の結果、入力内容が正しくないと判断された場合、TextInputの周りが赤く囲まれ、マウスオーバーすると赤いフキダシでエラー内容が表示されます。

サンプル1

　Flexのバリデータでは、「どのオブジェクト」の「なんのプロパティ」を検証するかをバリデータ側で制御します。入力フィールドには一切手を加えることなく、検証の仕組みのみを適用できます。

　ここでは、StringValidatorを使用して、最低文字数を設定するminLengthに4、最大文字数を設定するmaxLengthに8を指定しています。

ValidatorSample1.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     layout="vertical">     <mx:StringValidator         minLength="4" maxLength="8"         source="{textInput}"         property="text"     />     <mx:Form>         <mx:FormItem label="文字数チェック(4文字以上8文字以下)">             <mx:TextInput id="textInput" />         </mx:FormItem>     </mx:Form> </mx:Application>

　具体的には、sourceに対象となるオブジェクト、propertyに対象のプロパティ名を指定します。今回のサンプルではtextInputのtextを対象とします。

■ イベントを“引き金”にして検証する

　下記のサンプルでは、TextInput自身のEnterEvent（エンターキーを押下したときに発生するイベント）に対して検証を実行するようにしています。

サンプル2

　デフォルトでは、フォーカスアウトのタイミングで検証が実行されますが、任意のイベントに検証の実行を関連付けできます。そのためには、triggerとtriggerEventを使用します。triggerにはイベントの発生源のオブジェクト、triggerEventにはイベントを表す文字を指定します。

ValidatorSample2.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     layout="vertical">     <mx:StringValidator         minLength="4" maxLength="8"         source="{textInput}"         property="text"         trigger="{textInput}"         triggerEvent="{FlexEvent.ENTER}"     />     <mx:Form>         <mx:FormItem label="文字数チェック(4文字以上8文字以下)">             <mx:TextInput id="textInput" />         </mx:FormItem>     </mx:Form>     <mx:Script>     <![CDATA[         import mx.events.FlexEvent;     ]]>     </mx:Script> </mx:Application>

■ プログラム上から検証を実行

　また、validateメソッドを呼ぶことで、プログラム上から検証を実行することもできます。

ValidatorSample3.mxml

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"     layout="vertical">     <mx:Script>     <![CDATA[         import mx.controls.Alert;         import mx.events.ValidationResultEvent;         private function checkStringLength():void{             var validateRelust:ValidationResultEvent                 = stringValidator.validate();             if(validateRelust.type == ValidationResultEvent.VALID){                 //有効なデータ                 Alert.show("有効なデータ");             }else{                 //不正なデータ                 Alert.show("不正なデータ");             }         }     ]]>     </mx:Script>     <mx:StringValidator id="stringValidator"         minLength="4" maxLength="8"         source="{textInput}" property="text"     />     <mx:Form>         <mx:FormItem label="文字数チェック(4文字以上8文字以下)">             <mx:TextInput id="textInput"                 enter="checkStringLength()" />         </mx:FormItem>     </mx:Form> </mx:Application>

　validateメソッドを実行すると、ValidationResultEventを返り値として取得できます。その中にtypeというプロパティが含まれており、検証が成功した場合はValidationResultEvent.VALID、検証が失敗した場合はValidationResultEvent.INVALIDの値がセットされるため、その後の処理を判断できます。

サンプル3

　続いて次ページでは、文字列表現を柔軟に指定できるフォーマッタを使った実践テクニックを解説します。

1-2

INDEX
現場で使えるFlex実践テクニック（5） バリデータとフォーマッタで“使える”Flexアプリを作ろう
	Page1 データの検証を行うバリデータが使えるFlex
	Page2 文字列表現を柔軟に指定できるフォーマッタ “使える”アプリには2重チェックが必要

＠ITメールマガジン　新着情報やスタッフのコラムがメールで届きます（無料）