サーバーへのデータの送信 -- Flex 2.01

フォームデータは、通常、クライアントでローカルに処理されるのではなく、サーバーで処理されます。したがって、送信イベントリスナーには、サーバーへの送信用にフォームデータをパックし、サーバーから返された結果を処理するメカニズムが必要です。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 サービスの使用の詳細については、RPC コンポーネントの使用を参照してください。

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 コンテナは閉じられ、アプリケーションの別の領域に送信結果が表示されます。送信が失敗した場合はエラーメッセージが表示され、TitleWindow コンテナは表示されたままとなります。

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

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