バリデータでユーザーの入力値をチェックしたら、いよいよデータをサーバに送信します。データの送信には、郵便番号APIのところでも触れた、HTTPServiceコンポーネントを利用します。

のタグのurlにデータを受け取るサーバのCGIを指定し、送信するユーザー情報のパラメータを、タグにXML形式で指定します。

<mx:HTTPService id="form_sender"
    url="http://localhost/send.php"
    result="sender_onResult()"
    fault="sender_onFault(event)"
    resultFormat="text"
    method="POST">
    <mx:request>
        <name>{name_txt.text}</name>
        <zip>{zip_txt.text}</zip>
        <address>{addr_txt.text}</address>
        <mail>{mail_txt.text}</mail>
        <order>{order_txt.text}</order>
        <memo>{memo_txt.text}</memo>
    </mx:request>
</mx:HTTPService>

送信するパラメータ<mx:request>タグで、ユーザーが入力するテキストボックス(TextInput)の値を直接指定しています。これは「データバインディング」と言う仕組みで、コントロール間のデータの受け渡しを簡単に記述できます。ここでは、それぞれのテキストボックスのテキストを、HTTPServiceのパラメータとして直接指定しています。

ユーザーの注文内容をメールで通知するPHPプログラム(send.php)は以下のようになります。以下のPHPプログラムの送信先、メールアドレスを書き直してWebサーバにアップします。その後、Flexのプログラム中のhttp://localhost/send.phpをそのサーバのURLに書き換えてご利用ください(その他、サーバの仕様上、書き換えが必要な場合は、必要に応じて書き換えてください)。

<?php
// 注文を送信する (send.php)
// ------------------------------------------
// 初期設定
// ------------------------------------------
$mail_subject = "[注文]";
$mail_address = "info@example.com";
mb_language(ja);
mb_internal_encoding("EUC-JP") ;
// ------------------------------------------
// 注文内容 ($_POST)をテキストにまとめる
// ------------------------------------------
$body = "";
foreach ($_POST as $key => $val) {
  $body .= "$key=$val\n";
}
if ($body == "") { echo "ng\n"; exit(); }
// ------------------------------------------
// メールで送信する
// ------------------------------------------
$body   = mb_convert_encoding($body, "iso-2022-jp", "utf-8");
$header = "From:".$mail_address;
mb_send_mail($mail_address, $mail_subject, $body, $header);
echo "ok\n";
?>

完成したプログラム

完成したサンプルプログラムは、実際にこのURLで動作させています。

本稿のサンプルプログラムのコード中では、「<mx:Script>」から「</mx:Script>」の間が、コンポーネントではなくプログラム(ActionScript 3.0)を記述している部分です。大部分は、コンポーネントの動作を補うために書いたプログラムとなっています。プログラム中で「function YenFormat(..)」とfunctionで始まるのが関数です。YenFormatは、数字を3桁に区切る関数です。「changeFormPage」はViewStackのページを切り替える関数です。また、「getAddressFromZip」は、郵便番号を調べる際Web APIからデータを取得するために、入力された郵便番号を取得します。

その他の関数は、データを送信した結果を表示したり、失敗したときのメッセージを表示するという動作をするものです。できるだけ、コンポーネントをMXMLで記述して終わりにしたいのですが、プログラムとして書いたほうがすっきり書ける場合は、このようにして、「<mx:Script>」タグの中に関数として書いておきます。