連載
» 2007年11月21日 00時00分 UPDATE

現場で使えるFlex実践テクニック(5):バリデータとフォーマッタで“使える”Flexアプリを作ろう (1/2)

[成瀬勉,クラスメソッド株式会社]

データの検証を行うバリデータが使える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 次のページへ

Copyright© 2017 ITmedia, Inc. All Rights Reserved.

@IT Special

- PR -

TechTargetジャパン

この記事に関連するホワイトペーパー

RSSについて

アイティメディアIDについて

メールマガジン登録

@ITのメールマガジンは、 もちろん、すべて無料です。ぜひメールマガジンをご購読ください。