バリデータでユーザーの入力値をチェックしたら、いよいよデータをサーバに送信します。データの送信には、郵便番号APIのところでも触れた、HTTPServiceコンポーネントを利用します。
<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>」タグの中に関数として書いておきます。