Flex ＋ LL連携（Ruby、Python、PHP）

サーバと通信してみる

　Flex・Flashがサーバ側と通信する方法は、幾つかあります。

　一番原始的な方法は、Webサーバに対し、GET/POSTメソッドを用いて、データを送受信することです。これは、普通のHTMLのフォームで「送信」ボタンを押したときに行われるのと同じ処理を、Flex・Flashでも行うやり方です。flash.netパッケージのAPIであるURLLoaderクラス、URLRequestクラスを使います。簡単なサンプルを見てみましょう。

　Flexで、ホームページで利用するための単純なゲストブックを作るとしましょう。入力出来るのは、名前とEメールアドレス、感想の3項目です。まずはFlex側のUIを作ります。項目も少ないし、簡単ですね。「送信」ボタンが押されたら、入力されたデータをサーバに送信するようにしてみましょう。その際、入力された名前を「name」、Eメールアドレスは「email」、感想は「comment」として送信します。

　URLRequestが、要求を表現するクラスです。要求を送信する宛先URLや渡すパラメータを設定します。URLLoaderが実際の要求を実行するクラスです。要求が成功した時のハンドラ、失敗した時のハンドラなどを登録しましょう。URLLoaderは、デフォルトではGETメソッドを使って要求を送信しますが、今回はPOSTメソッドを明示的に指定します。

画面のイメージ

Guestbook.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" viewSourceURL="srcview/index.html">
         <mx:Script><![CDATA[
                   private function buttonClickHandler(e:Event):void
                   {
                            // サーバ側の処理スクリプトのURL
                            const kDestUrl:String = "http://localhost/guestbook/guestbook.php";
 
                            var request:URLRequest = new URLRequest(kDestUrl);
                            request.method = URLRequestMethod.POST;
                            var vars:URLVariables = new URLVariables();
                            vars.name = tiName.text;
                            vars.email = tiEmail.text;
                            vars.comment = tiComment.text;
                            request.data = vars;
                            lblServerResult.text = "";
                            var loader:URLLoader = new URLLoader();
                            try {
                                     loader.load(request);
                            }
                            catch (error:SecurityError){
                                     trace("リクエスト時にセキュリティエラーが発生しました.");
                            }
                            loader.addEventListener(IOErrorEvent.IO_ERROR, onIOError, false, 0, true);
                            loader.addEventListener(Event.COMPLETE, onLoadComplete, false, 0, true);
                   }
 
                   private function onIOError(event:IOErrorEvent):void
                   {
                            trace("IOエラー");
                   }
 
                   private function onSecurityError(event:SecurityErrorEvent):void
                   {
                            trace("セキュリティエラー");
                   }
 
                   private function onLoadComplete(e:Event):void
                   {
                            var result:String = URLLoader(e.target).data as String; 
                            if (result)
                            {
                                     lblServerResult.text = result;
                                     trace("サーバからのデータのロードに成功しました。受信データ: " + result);
                            }
                   }
         ]]></mx:Script>
 
         <mx:Form width="100%">
                   <mx:FormItem label="お名前">
                            <mx:TextInput id="tiName" />
                   </mx:FormItem>
                   
                   <mx:FormItem label="Eメールアドレス">
                            <mx:TextInput id="tiEmail" />
                   </mx:FormItem>
         
                   <mx:FormItem label="ひとこと">
                            <mx:TextArea id="tiComment"/>
                   </mx:FormItem>
         </mx:Form>
 
         <mx:HBox width="100%">
                   <mx:Button label="送信" left="0" click="buttonClickHandler(event)" />
 
                   <mx:Label text="サーバからの応答:"/> <mx:Label id="lblServerResult" />
         </mx:HBox>
</mx:Application>

　サーバサイドのスクリプトは以下のようになります。PHPで記述しました。サーバサイドでは、送られてきたパラメータを受け取った後、必要な処理を行います。標準出力に書き出した内容が、結果としてクライアントサイドに渡されます。

<?php
if (isset($_POST["name"]) && isset($_POST["email"]) && isset($_POST["comment"]))
{
  $name = $_POST["name"];
  $email = $_POST["email"];
  $comment = $_POST["comment"];
  print "name=$name/email=$email/comment=$comment";
}
else 
{
  print "error";
}