フォームは、Web アプリケーションでユーザーから情報を収集する場合に最もよく使われる方法の 1 つです。フォームは、登録、購買、課金情報など、様々なデータ収集タスクに使用されます。

フォームについて

Flex は、Form レイアウトコンテナとその子コンポーネントを使用したフォームの開発をサポートします。Form コンテナでは、フォームのレイアウトを制御し、フォームフィールドが必須かオプションであるかを明示し、エラーメッセージを処理し、フォームデータを Flex データモデルにバインドしてデータのチェックと検証を実行することができます。また、スタイルシートを適用することによってフォームの外観を設定することもできます。

次の例に示すように、3 種類のコンポーネントを使用してフォームを作成します。

詳細については、『Adobe Flex リファレンスガイド』の Form、FormHeading、および FormItem を参照してください。

フォームの作成

フォームを作成する場合は、通常は以下のエレメントを定義します。

• Form コントロール
• FormHeading コンポーネント（Form コントロール内にネスト）
• FormItem コンテナ（Form コントロール内にネスト）
• ComboBox、TextInput コントロールなどの Form フィールド（FormItem コンテナ内にネスト）

フォーム内には必要に応じて、HRule コントロールなどの他のコンポーネントを含めることもできます。

Form コンテナの作成

Form コンテナは、Flex フォームの一番外側のコンテナです。Form コンテナの主な用途は、ラベルのサイズやアイテム間の間隔の設定など、フォームの内容のサイズおよびレイアウトの制御です。Form コンテナでは、フォーム内の子が常に垂直方向および左揃えで整列するよう配置されます。Form コンテナには、1 つまたは複数の FormHeading および FormItem コンテナを含めることができます。

<mx:Form> タグを使用して、Form コンテナを定義します。フォーム全体を MXML の他の場所（他のタグまたは ActionScript ブロック）から参照する場合は、id の値を指定します。

次のコード例は、フォームについての図で使用したフォームの Form コンテナ定義を示します。

<?xml version="1.0"?>
<!-- containers\layouts\FormSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Form id="myForm" width="400" height="100">

        <!-- Define FormHeading and FormItem components here -->

    </mx:Form>
</mx:Application>

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

FormHeading コントロールの作成

FormHeading コントロールは、FormItem コンテナのグループにオプションのラベルを指定します。ラベルの左端は、フォーム内部のコントロールの左端に揃えられます。フォームで複数の FormHeading コントロールを保持して、複数のコンテンツ領域を指定することができます。また、FormHeading コントロールに空白の label を使用して、フォーム内に垂直方向の領域を作成することもできます。

FormHeading コンテナを定義するには、<mx:FormHeading> タグを使用します。FormHeading を MXML の他の場所（他のタグまたは ActionScript ブロック）から参照する場合は、id の値を指定します。

次のコード例では、フォームについての図の FormHeading コントロールを定義します。

<?xml version="1.0"?>
<!-- containers\layouts\FormHeadingSimple.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Form id="myForm" width="400" height="100">

        <mx:FormHeading label="Billing Information"/>

        <!--Define FormItem containers here. -->

    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

詳細については、『Adobe Flex リファレンスガイド』を参照してください。

FormItem コンテナの作成

FormItem コンテナの定義するフォームエレメントは、次の部分から構成されます。

• 単一のラベル
• 1 つまたは複数の子コントロールまたは子コンテナ（入力コントロールなど）

ラベルは、コンテナ内の最初の子と垂直方向に揃えられます。また、コンテナの左側で右揃えに表示されます。

FormItem コンテナを定義するには、<mx:FormItem> タグを使用します。このアイテムを MXML の他の場所（他のタグまたは ActionScript ブロック）から参照する場合は、id の値を指定します。

次の例に示すように、通常は複数の FormItem コンテナが Form コンテナに含まれています。

この例では、3 つの FormItem コンテナを定義します。それぞれに対し、First Name ラベル、Last Name ラベル、Address ラベルが定義されています。Address FormItem コンテナは、ユーザーがアドレス情報を 2 行で入力できるように、2 つのコントロールを保持します。他の 2 つの FormItem コンテナには、それぞれ 1 つのコントロールが含まれています。

詳細については、『Adobe Flex リファレンスガイド』の FormItem を参照してください。

フォームアイテムの方向の指定

FormItem コンテナを作成する場合、direction プロパティに値 vertical （デフォルト）または horizontal を使用して、方向を指定します。

vertical 

子は FormItem のラベルの右側に垂直方向に配置されます。

水平方向 

子は FormItem のラベルの右側に水平方向に配置されます。すべての子を 1 行に収めることができない場合は、これらの子は同じ列サイズで複数行に分割されます。すべての子が 1 行に収まるようにするには、幅をパーセント値で指定するか、すべてのコンポーネントが収まる十分な幅を明示的に指定します。

フォームアイテムのラベルスタイルの制御

FormItem のラベルのスタイルを制御するには、labelStyleName スタイルプロパティを設定します。次の例では、FormItem のラベルの色をダークブルー、フォントサイズを 20 ピクセルに設定します。

<?xml version="1.0"?>
<!-- containers\layouts\FormItemStyle.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Style>       
        .myFormItemLabelStyle {
            color: #333399;
            fontSize: 20;
         }
         
    </mx:Style>

    <mx:Script>
        <![CDATA[
            private function processValues(zip:String, pn:String):void {
                // Validate and process data.
            }
        ]]>
    </mx:Script>

    <mx:Form id="myForm" defaultButton="{mySubmitButton}">

        <mx:FormItem label="Zip Code" 
            labelStyleName="myFormItemLabelStyle">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
    
        <mx:FormItem>
            <mx:Button label="Submit" id="mySubmitButton" 
                click="processValues(zipCode.text, phoneNumber.text);"/>
        </mx:FormItem>
    
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

例：単純なフォーム

次の例では、フォームの例の FormItem コンテナ定義が示されています。

<?xml version="1.0"?>
<!-- containers\layouts\FormComplete.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function setValues():void {                
                // Handle value setting.
            }
        ]]>
    </mx:Script>

    <mx:Form id="myForm" width="400">

        <mx:FormHeading label="Billing Information"/>

        <mx:FormItem label="First Name">
            <mx:TextInput id="fname" width="100%"/>
        </mx:FormItem>

        <mx:FormItem label="Last Name">
            <mx:TextInput id="lname" width="100%"/>
        </mx:FormItem>

        <mx:FormItem label="Address">
            <mx:TextInput id="addr1" width="100%"/>
            <mx:TextInput id="addr2" width="100%"/>
        </mx:FormItem>

        <mx:FormItem label="City / State" direction="vertical">
            <mx:TextInput id="city"/>
            <mx:ComboBox id="st" width="50"/>
        </mx:FormItem>

        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zip" width="100"/>
        </mx:FormItem>

        <mx:FormItem label="Country">
            <mx:ComboBox id="cntry"/>
        </mx:FormItem>

        <mx:FormItem>
            <mx:Button label="Submit" 
                click="setValues();"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

フォームのレイアウト

Flex では、フォームのデフォルトサイズが次の方法で決定されます。

• デフォルトの高さは、コンテナ内のすべての子のデフォルトの高さまたは明示的に指定した高さを収容し、さらにコンテナ上下のパディングと、子同士の間隔を含めた値です。
• デフォルトの幅は、最大の FormItem ラベルを収容し、さらにラベルと子コントロール間の indicatorGap と、FormItem 内で最大幅の子コントロールのデフォルト幅または明示的な幅を含めた値です。

Form コンテナの子の配置と間隔の制御

コンテナ内の Form コンテナラベルはすべて右揃えで、子はすべて左揃えです。この配置をオーバーライドすることはできません。

次の例は、制御可能な Form コンテナの子の間隔を示しています。

次の表では、間隔を制御するために使用する各スタイルプロパティについて説明し、それぞれのデフォルト値を示します。

Form コンテナの子のサイズと位置の制御

Form レイアウトコンテナでは、子は垂直列状に配置されます。子に対して指定されたコンテナの領域は、Form コンテナ全体ではありません。ラベルとして定義された領域の右側に、indicatorGap プロパティで定義された間隔を空けて配置されます。例えば、Form コンテナの幅が 500 ピクセルであり、そのうちの 100 ピクセルがラベルと indicatorGap プロパティに割り当てられている場合、子の領域の幅は 400 ピクセルです。

デフォルトでは、Flex は Form レイアウトの子を垂直方向にサイズ設定し、デフォルトの高さにします。次に、Flex はそれぞれの子のデフォルト幅を決定し、個別の子の幅を伸縮して、子の領域全体の幅の 1/4、1/2、3/4、または全体の値のうちで、最も近い値に切り上げて設定します。

例えば、コンテナに存在する 1 つの子の領域の幅が 400 ピクセルだとします。TextArea コントロールのデフォルト幅が 125 ピクセルである場合、Flex は TextArea コントロールを水平方向に伸縮し、子の領域全体の幅の 1/4、1/2、3/4、または全体の値のうちで、最も近い値に切り上げて設定します。この場合は、1/2 である 200 ピクセルの境界線が設定されます。このサイズ変更アルゴリズムは、幅が明示的に指定されていないコンポーネントにのみ適用されます。これにより、コントロールの幅が不揃いであるためにコンテナの右端が不揃いになる問題を防ぐことができます。

また、子の height プロパティおよび width プロパティを使用して、フォーム内の子の高さや幅に、ピクセル値または Form サイズに対するパーセント値を明示的に設定することもできます。

デフォルトボタンの定義

コンテナの defaultButton プロパティを使用して、デフォルトの Button コントロールを定義します。任意のフォームコントロールにフォーカスがあるときに Enter キーを押すと、Button コントロールを明示的に選択したときと同じように、デフォルトの Button コントロールのクリックイベントがトリガされます。

例えば、ログインフォームは、ユーザー名とパスワードの入力コントロールおよび送信用の Button コントロールを表示します。ユーザー名を入力し、Tab キーでパスワードフィールドに移動してパスワードを入力した後、Enter キーを押すと、ログイン情報を送信できます。Button コントロールを明示的に選択する必要はありません。このような操作を定義するには、defaultButton に、送信用 Button コントロールの id を設定します。次の例では、送信用ボタンの click イベントに対するイベントリスナーによって、Alert コントロールが表示されます。これは、いずれかのフォームフィールドにフォーカスがあるときにユーザーが Enter キーを押すと、Flex によってこのイベントがトリガされることを示します。この例の中でコメントアウトされている行は、ユーザーのログインを行うための Web サービスを起動する、実際のアクションを実行する部分です。

<?xml version="1.0"?>
<!-- containers\layouts\FormDefButton.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script> 
        <![CDATA[
            import flash.events.MouseEvent;
            import mx.controls.Alert;
    
            private function submitLogin(eventObj:MouseEvent):void {
                // Display an Alert to show the event happened.
                Alert.show("Login Requested");
                // Commented out to work without a web service.
                //myWebService.Login.send();
            }   
        ]]>
    </mx:Script>

    <mx:Form defaultButton="{mySubmitButton}">
        <mx:FormItem label="Username">
            <mx:TextInput id="username" 
                width="100"/>
        </mx:FormItem>
        <mx:FormItem label="Password">
            <mx:TextInput id="password" 
                width="100" 
                displayAsPassword="true"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="mySubmitButton" 
                label="Login" 
                click="submitLogin(event);"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

必須フィールドの指定

Flex は、フォームの必須入力フィールドの定義をサポートします。必須フィールドを定義するには、FormItem コンテナの required プロパティを指定します。このプロパティを指定すると、その FormItem コンテナのすべての子に必須のマークが付きます。

Flex は、FormItem のラベルと子の間に区切り記号として赤いアスタリスク（*）文字を挿入し、必須フィールドであることを示します。例えば、次の例では、オプションの ZIP コードフィールドと必須の ZIP コードフィールドが示されています。

次のコード例では、これらのフィールドを定義します。

<?xml version="1.0"?>
<!-- containers\layouts\FormReqField.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Form>
        <mx:FormItem label="ZIP Code">
            <mx:TextInput id="zipOptional" 
                width="100"/>
        </mx:FormItem>

        <mx:FormItem label="ZIP Code" required="true">
            <mx:TextInput id="zipRequired" 
                width="100"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

FormItem の子に対する必須インジケータを、実行時に有効にすることができます。これは、特定のフォームフィールドが入力されると別のフォームフィールドが必須になるようにする場合に便利です。例えば、ユーザーがニュースレターを購読する場合に選択する CheckBox コントロールが、フォームに配置されているとします。このチェックボックスをオンにすると、ユーザーの電子メールフィールドが必須になるようにします。次に例を示します。

<?xml version="1.0"?>
<!-- containers\layouts\FormReqFieldRuntime.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Form>
        <mx:FormItem label="Subscribe">
            <mx:CheckBox label="Subscribe?" 
                click="emAddr.required=!emAddr.required;"/>
        </mx:FormItem>

        <mx:FormItem id="emAddr" label="e-mail address">
            <mx:TextInput id="emailAddr"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

Flex は、必須フィールドを自動的に適用することはありません。フィールドに必須のマークを付けるだけです。必須フィールドを適用するには、検証ロジックをフォームに組み込む必要があります。適用ロジックの一部として、Flex バリデータを使用できます。すべての Flex バリデータに required プロパティがあり、デフォルトでは true になっています。バリデータは、必須フィールドと検証機能をどのように適用するかによって、いくつかの方法で使用できます。詳細については、データ検証を参照してください。フォームでバリデータを使用する例については、Flex データモデルによるフォームデータの保存を参照してください。

フォームデータの保存と検証

フォームの設計の一環として、フォームデータを保存する方法を考える必要があります。Flex では、次の方法から選択できます。

• データをフォームコントロール内に保存します。
• Flex データモデルを作成してデータを保存します。

データをどのように表現するかによっても、入力エラーの検出、つまり「データ検証」の方法が異なります。これは、堅牢で安定したフォームを構築する上で最も重要な作業の 1 つです。一般に、ユーザー入力の検証はデータをサーバーに送信する前に行います。ユーザー入力の検証は、送信関数内で行うことも、ユーザーがフォームにデータを入力したときに行うことも可能です。

Flex は、フォームによって収集されるデータのうち、特に使用頻度の高い種類のデータに対する様々なデータバリデータを備えています。Flex バリデータは、次の種類のデータに対して使用できます。

• クレジットカード情報
• 日付
• 電子メールアドレス
• 数値
• 電話番号
• 社会保障番号
• 文字列
• ZIP コード

データ検証は、フォーム構築プロセスの一環として、独自のカスタムロジックを使用して実行するか、Flex のデータ検証メカニズムを利用します。または、カスタムロジックと Flex データ検証を組み合わせて実行します。

次のセクションでは、フォーム内で検証機能を起動する方法について説明します。Flex データ検証の詳細な使用方法については、データ検証を参照してください。

Form コントロールによるフォームデータの保持

次の例では、Form コントロールを使用してフォームデータを保存します。

<?xml version="1.0"?>
<!-- containers\layouts\FormData.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function processValues(zip:String, pn:String):void {
                // Validate and process data.
            }
        ]]>
    </mx:Script>

    <mx:Form id="myForm" defaultButton="{mySubmitButton}">

        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
    
        <mx:FormItem>
            <mx:Button label="Submit" id="mySubmitButton" 
                click="processValues(zipCode.text, phoneNumber.text);"/>
        </mx:FormItem>
    
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

この例では、フォームが 2 つのフォームコントロールを定義します。1 つは郵便番号用、もう 1 つは電話番号用です。フォームを送信すると、各コントロールに格納されたデータに対応する 2 つのパラメータを取る関数が呼び出されます。次に、フォームデータの処理の前に、入力に対するデータ検証が送信関数によって実行されます。

データを送信関数に渡す必要はありません。次の例に示すように、送信関数はフォームコントロールデータに直接アクセスできます。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataSubmitNoArg.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function processValues():void {
                var inputZip:String = zipCode.text;
                var inputPhone:String = phoneNumber.text;
                // Check to see if pn is a number.
                // Check to see if zip is less than 4 digits.
                // Process data.
            }
        ]]>
    </mx:Script>

    <mx:Form id="myForm" defaultButton="{mySubmitButton}">

        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
    
        <mx:FormItem>
            <mx:Button label="Submit" id="mySubmitButton" 
                click="processValues();"/>
        </mx:FormItem>
    
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

しかし、このようにフォームフィールドを直接使用する方法には、関数がフォーム固有のものとなるため、他のフォームで容易に再利用できないという欠点があります。

ユーザー入力時のフォームコントロールデータの検証

ユーザー入力時にフォームデータを検証するために、アプリケーションに Flex データバリデータを追加できます。次の例では、ZipCodeValidator と PhoneNumbervalidator を使用して検証を行います。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataValidate.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <mx:Script>
        <![CDATA[
            private function processValues():void {
                var inputZip:String = zipCode.text;
                var inputPhone:String = phoneNumber.text;
                // Perform any additional validation.
                // Process data.
            }
        ]]>
    </mx:Script>

    <mx:ZipCodeValidator id="zcVal"
        source="{zipCode}" property="text" 
        domain="US or Canada"/>

    <mx:PhoneNumberValidator id="pnVal" 
        source="{phoneNumber}" property="text"/>
        
    <mx:Form id="myForm" defaultButton="{mySubmitButton}">

        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
    
        <mx:FormItem>
            <mx:Button label="Submit" id="mySubmitButton" 
                click="processValues();"/>
        </mx:FormItem>
    
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーが入力するたびに入力データを検証する場合は、送信関数内で再び検証を行わなくてもかまいません。ただし、2 つのフィールドを比較するときに両フィールドが有効であることを確認する場合など、送信関数内で再び検証を実行しなければならないこともあります。

例えば、Flex バリデータを使用して、ZIP コードフィールドとステートフィールドを個別に検証できます。ここで、フォームデータを送信する前に、特定のステートに対して ZIP コードが有効であることを検証する必要があるとします。このような場合には、送信関数内で 2 回目の検証を実行します。

バリデータの使用の詳細については、データ検証を参照してください。

Flex データモデルによるフォームデータの保存

Flex データモデルを使用すると、フォームデータを構造化して保存したり、データ検証のフレームワークを実現したりできます。データモデルでは、特定のデータセットの各部分を表すフィールドにデータが格納されます。例えば、person モデルは個人の氏名、年齢、電話番号などの情報を保存します。これにより、各モデルフィールドに保存されたデータ型に基づき、モデル内のデータを検証できます。

次の例では、2 つの値を含む Flex データモデルを定義しています。この 2 つの値は、フォームの次の 2 つの入力フィールドに対応します。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataModel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define the submit function that validates and 
        processes the data. -->
    <mx:Script>
        <![CDATA[
            private function processValues():void {
                var inputZip:String = myFormModel.zipCodeModel;
                var inputPhone:String = myFormModel.phoneNumberModel;
                // Process data.
            }
        ]]>
    </mx:Script>

    <!-- Define data model. -->
    <mx:Model id="myFormModel">
        <info>
            <zipCodeModel>{zipCode.text}</zipCodeModel>
            <phoneNumberModel>{phoneNumber.text}</phoneNumberModel>
        </info>
    </mx:Model>

    <!-- Define the form. -->
    <mx:Form borderStyle="solid">
        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="b1" 
                label="Submit" 
                click="processValues();"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

<mx:Model> タグを使用してデータモデルを定義します。データモデルのすべての子タグは、それぞれがモデルの 1 つのフィールドを定義します。モデル内のすべての子タグのボディ部分は、それぞれフォームコントロールへの「バインディング」を定義します。この例では、zipCodeModel モデルフィールドを zipCode TextInput コントロールのテキスト値にバインドし、phoneNumberModel フィールドを phoneNumber TextInput コントロールのテキスト値にバインドします。データモデルの詳細については、データの格納を参照してください。

コントロールをデータモデルにバインドすると、ユーザー入力時にコントロールのデータはモデルに自動的にコピーされます。この例では、送信関数によるデータへのアクセスが、フォームコントロールから直接行われるのではなく、モデルから行われています。

フォームモデルでの Flex バリデータの使用

次の例では、Flex データモデルによるフォームデータの保存で示した例を修正して、2 つのデータバリデータ（郵便番号フィールドと電話番号フィールドのバリデータ）を挿入しています。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataModelVal.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define the submit function that validates and processes the data -->
    <mx:Script>
        <![CDATA[
            private function processValues():void {
                var inputZip:String = myFormModel.zipCodeModel;
                var inputPhone:String = myFormModel.phoneNumberModel;
                // Process data.
            }
        ]]>
    </mx:Script>

    <!-- Define data model. -->
    <mx:Model id="myFormModel">
        <info>
            <zipCodeModel>{zipCode.text}</zipCodeModel>
            <phoneNumberModel>{phoneNumber.text}</phoneNumberModel>
        </info>
    </mx:Model>

    <!-- Define validators. -->
    <mx:ZipCodeValidator 
        source="{myFormModel}" property="zipCodeModel"
        trigger="{zipCode}" 
        listener="{zipCode}"/>
    <mx:PhoneNumberValidator 
        source="{myFormModel}" property="phoneNumberModel" 
        trigger="{b1}" 
        listener="{phoneNumber}"
        triggerEvent="click"/>

    <!-- Define the form. -->
    <mx:Form borderStyle="solid">
        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zipCode"/>
        </mx:FormItem>
        <mx:FormItem label="Phone Number">
            <mx:TextInput id="phoneNumber"/>
        </mx:FormItem>
        <mx:FormItem>
            <mx:Button id="b1" 
                label="Submit" 
                click="processValues();"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

ユーザーがデータを zipCode フォームフィールドに入力すると、データはデータモデルに自動的にコピーされます。ユーザーが zipCode フォームフィールドの入力を終えると、ZipCodeValidator バリデータが起動します。これは、バリデータの trigger プロパティ、および triggerEvent プロパティのデフォルト値である valueCommit に指定された動作です。次に、listener プロパティの指定に従い、zipCode フィールドの周囲に赤い境界線が表示されます。

ユーザーがデータを phoneNumber フォームフィールドに入力すると、データはデータモデルに自動的にコピーされます。ユーザーが Button コントロールをクリックすると、PhoneNumberValidator バリデータが起動します。これは、バリデータの trigger および triggerEvent プロパティに指定された動作です。次に listener プロパティの指定に従い、phoneNumber フィールドの周囲に赤い境界線が表示されます。

バリデータの使用の詳細については、データ検証を参照してください。

データモデルから Form コントロールへの値の入力

データモデルの別の用途として、モデルにデータを格納してフォームフィールドに値を入力することがあります。次の例では、データモデルから静的データを読み取り、フォームフィールドの値を取得するフォームを示します。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataFromModel.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define data model. -->
    <mx:Model id="myFormModel">
        <info>
            <fName>{firstName.text}</fName>
            <lName>{lastName.text}</lName>
            <department>Accounting</department>
        </info>
    </mx:Model>

    <mx:Form>
        <mx:FormItem label="First and Last Names">
            <mx:TextInput id="firstName"/>
            <mx:TextInput id="lastName"/>
        </mx:FormItem>
        <mx:FormItem label="Department">
            <mx:TextInput id="dept" text="{myFormModel.department}"/>
        </mx:FormItem>
    </mx:Form>
</mx:Application>
前の例で実行する SWF ファイルは以下のとおりです。

このフォームでは部署フィールドに対して常に同じ値が表示されるので、このデータは静的であると見なされます。また、Web サービスから部署フィールドの値を取得する動的データモデルや、ユーザー入力に基づいて計算する動的データモデルも作成できます。

データモデルの詳細については、データの格納を参照してください。

サーバーへのデータの送信

フォームデータは、通常、クライアントでローカルに処理されるのではなく、サーバーで処理されます。したがって、送信イベントリスナーには、サーバーへの送信用にフォームデータをパックし、サーバーから返された結果を処理するメカニズムが必要です。Flex では、一般的に、Web サービス、HTTP サービス、またはリモート Java オブジェクトを使用して、データをサーバーに渡します。

送信関数にロジックを組み込むことで、送信が成功した場合または失敗した場合のアプリケーションのナビゲーションを制御することもできます。送信が成功すると、多くの場合は、結果を表示するアプリケーション領域に移動します。送信が失敗したときには、ユーザーがエラーを修正できるように、フォームに制御を戻すことができます。

次の例では、フォーム入力データを処理する Web サービスを追加します。この例では、ユーザーは ZIP コードを入力してから「Submit」ボタンを押します。データ検証の実行後、送信イベントリスナーは ZIP コードに対応する町名、現在の気温、および天気予報を取得するための Web サービスを呼び出します。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataSubmitServer.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define the web service connection. 
        The specified WSDL URI is not functional. -->
    <mx:WebService id="WeatherService" 
        wsdl="/ws/WeatherService?wsdl">  
        <mx:operation name="GetWeather">
            <mx:request>
                <ZipCode>{zipCode.text}</ZipCode>
            </mx:request>
        </mx:operation>
    </mx:WebService>

    <mx:Script>
        <![CDATA[
            private function processValues():void {
                // Check to see if ZIP code is valid.
                WeatherService.GetWeather.send();
            }
        ]]>
    </mx:Script>

    <mx:Form>
        <mx:FormItem label="Zip Code">
            <mx:TextInput id="zipCode" 
                width="200" 
                text="Zip code please?"/>
            <mx:Button 
                width="60" 
                label="Submit" 
                click="processValues();"/>
        </mx:FormItem>
    </mx:Form>

    <mx:VBox>
        <mx:TextArea
            text=
              "{WeatherService.GetWeather.lastResult.CityShortName}"/>
        <mx:TextArea 
            text=
              "{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
        <mx:TextArea 
            text=
          "{WeatherService.GetWeather.lastResult.DayForecast}"/>
    </mx:VBox>
</mx:Application>

この例では、フォームの入力フィールド zipCode を、Web サービス要求の ZipCode フィールドに直接バインドします。Web サービスから取得した結果を表示するには、結果を VBox コンテナのコントロールにバインドします。

Web サービスへのデータの受け渡しは、柔軟に行うことができます。例えば、この例を修正して、入力フォームフィールドをデータモデルにバインドしてから、データモデルを Web サービス要求にバインドすることができます。Web サービスの使用の詳細については、Flex によるサーバーサイドデータへのアクセスを参照してください。

Web サービス用のイベントリスナーを追加することもできます。成功した呼び出しを処理するには result イベントを使用し、エラーの発生した呼び出しを処理するには fault イベントを使用します。エラーの状況によっては、エラーメッセージと共にエラーの内容の説明をユーザーに表示する必要があります。呼び出しが成功した場合は、アプリケーションの別のセクションに移動できます。

次の例では、load イベントと fault イベントをフォームに追加します。この例では、フォームが ViewStack コンテナの 1 つの子として定義され、フォーム結果は ViewStack コンテナの 2 番目の子として定義されています。

<?xml version="1.0"?>
<!-- containers\layouts\FormDataSubmitServerEvents.mxml -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml">

    <!-- Define the web service connection. 
        The specified WSDL URI is not functional. -->
    <mx:WebService id="WeatherService"
        wsdl="/ws/WeatherService?wsdl"  
        result="successfulCall();" 
        fault="errorCall();">   
        <mx:operation name="GetWeather">
            <mx:request>
                <ZipCode>{zipCode.text}</ZipCode>
            </mx:request>
        </mx:operation>
    </mx:WebService>

    <mx:Script>
        <![CDATA[
            import mx.controls.Alert;

            private function processValues():void {
                // Check to see if ZIP code is valid.
                WeatherService.GetWeather.send();
            }
    
            private function successfulCall():void {
                vs1.selectedIndex=1;
            }
    
            private function errorCall():void {
                Alert.show("Web service failed!", "Alert Box", Alert.OK);
            }
        ]]>
    </mx:Script>

    <mx:ViewStack id="vs1">
        <mx:Form>
            <mx:FormItem label="Zip Code">
                <mx:TextInput id="zipCode" 
                    width="200" 
                    text="Zip code please?"/>
                <mx:Button width="60" 
                    label="Submit" 
                    click="processValues();"/>
            </mx:FormItem>
        </mx:Form>
    
        <mx:VBox>
            <mx:TextArea
                text=
                    "{WeatherService.GetWeather.lastResult.CityShortName}"/>
            <mx:TextArea 
                text=
                    "{WeatherService.GetWeather.lastResult.CurrentTemp}"/>
            <mx:TextArea 
                text=
                    "{WeatherService.GetWeather.lastResult.DayForecast}"/>
        </mx:VBox>
    </mx:ViewStack>
</mx:Application>

Web サービスへの呼び出しが成功すると、successfulCall() 関数によって、現在の ViewStack の子が VBox コンテナに切り替わり、取得した結果が表示されます。Web サービスからエラーが返されると、「Alert」ボックスが表示されます。現在の ViewStack コンテナの子は変更されず、フォームは表示されたままなので、ユーザーは入力エラーを修正できます。

送信関数の結果に応じてアプリケーションでのナビゲーションを処理するオプションが多数あります。前の例では、ViewStack コンテナを使用してナビゲーションを処理します。TabNavigator コンテナや Accordion コンテナを使用して処理することもできます。

アプリケーションによっては、フォームを TitleWindow コンテナに埋め込む方法も選択できます。TitleWindow コンテナは、Adobe Flash Player の描画面に表示されるポップアップウィンドウです。このシナリオでは、ユーザーは TitleWindow コンテナからフォームデータを入力してフォームを送信します。送信が成功すると、TitleWindow コンテナは閉じられ、アプリケーションの別の領域に送信結果が表示されます。送信が失敗した場合は、Flex によってエラーメッセージが表示され、TitleWindow コンテナは表示されたままとなります。

別のタイプのアプリケーションでは、複数のパネルをダッシュボードで開くことができるダッシュボードレイアウトを使用する場合があります。フォームを送信すると、ダッシュボードの別の領域が更新され、そこに結果が表示されます。送信が失敗した場合はエラーメッセージが表示されます。

TabNavigator、Accordion、および TitleWindow コンテナの詳細については、ナビゲータコンテナの使用を参照してください。