前回の
Flex：PHP経由でMYSQLを参照してみた
ではTextInputとDataGridの連携をしました。
ドロップダウンリスト（以下、ComboBox）とTextInputの連携も同じ要領でいけると思ったのですが、思わぬところではまってしまいました。
実際のサンプルはこちらから確認できます。
【Flex】ドロップダウンリストとDB（MYSQL）を連携してみた
１．起動時、MYSQLからデータのID一覧を取得する。
２．ComboBoxに格納する。
３．ComboBoxからIDを選択し、TextInputへそのIDの各情報を表示する。
という処理の流れになります。
１．MYSQLからデータのID一覧をFlexに取得する
1-1．起動時にDBへ接続してデータを取得するにはまず、mx:ApplicationタグにcreationCompleteをセットします。
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" creationComplete="send_data();"
layout="absolute" width="100%" height="100%" horizontalAlign="left">
1-2．send_data();という関数は前回も書きましたが
private function send_data():void
{
userRequest.send();
}
と書いてidがuserRequestのHTTPServiceを実行します。
（渡す引数がない場合もこの書き方が普通なのかは不明）
<mx:HTTPService id="userRequest" url="http://hogehoge/getid.php" useProxy="false" method="POST">
</mx:HTTPService>
1-3．MYSQLからデータのIDを取得する部分はPHP（getid.php）になります。
<?php
//dbconnect.phpはMYSQL接続部分を記述したファイル
include('dbconnect.php');
//DB接続関数呼び出し
db_con();
//SQL処理
$Query = "select id from testdata order by id;";
$Result = mysql_query($Query);
//データからXMLデータを作成
$Return = "<users>";
while($rec = mysql_fetch_array($Result))
{
$Return .= "<user>";
$Return .= "<id>".$rec['id']."</id>";
$Return .= "</user>";
}
$Return .= "</users>";
mysql_free_result($Result);
print $Return;
?>
printで出力したデータがFlexへ返されます。
２．FlexのComboBoxに格納する
PHPから返されたIDの一覧を格納するComboBoxは、
<mx:Form x="10" y="10" width="393" height="66">
<mx:FormItem label="id" id="aaa">
<mx:ComboBox change="view_data();" labelField="id" id="tableid" dataProvider="{userRequest.lastResult.users.user}"></mx:ComboBox>
</mx:FormItem>
</mx:Form>
となります。
これで起動時にComboBoxへIDが格納されます。
３．ComboBoxからIDを選択し、TextInputへそのIDの各情報を表示する。
3-1．まず選択したIDをPHPへ渡します。
これはComboBoxタグ内の
change="view_data();"
で設定し、view_data()はsend_data()同様、
private function view_data():void
{
userRequest2.send();
}
とし、
idをuserRequest2とするHTTPServiceは
<mx:HTTPService id="userRequest2" url="http://hogehoge/getdata.php" useProxy="false" method="POST" result="view_data2();">
<mx:request xmlns="">
<tableid>{tableid.text}</tableid>
</mx:request>
</mx:HTTPService>
とします。
肝は、
result="view_data2();"
でした。
ここでかなりはまりました。
resultがわからなかった時はuserRequest2.send()とそれによってデータを受け取る部分を一括で書いてしまっていました。
↓
private function view_data():void
{
userRequest2.send();
txtusername.text = userRequest2.lastResult.users.user.username;
txtkana.text = userRequest2.lastResult.users.user.kana;
txtsex.text = userRequest2.lastResult.users.user.sex;
txtzipcode.text = userRequest2.lastResult.users.user.zipcode;
txtaddress.text = userRequest2.lastResult.users.user.address;
}
しかしこれでは、オブジェクトがnullで参照ができないといった旨のエラーが出ます。
リファレンスなどをきちんと読んでいなかったのがいけなかったのですが、
result イベントは、lastResult にバインドされているプロパティを更新するトリガとして機能します。
とオンライン開発ガイドに書いてありました。
したがってこの場合は関数を分けてやり、resultで呼ぶ関数にデータを受け取って表示する部分を書きます。
↓
private function view_data():void
{
userRequest2.send();
}
private function view_data2():void
{
txtusername.text = userRequest2.lastResult.users.user.username;
txtkana.text = userRequest2.lastResult.users.user.kana;
txtsex.text = userRequest2.lastResult.users.user.sex;
txtzipcode.text = userRequest2.lastResult.users.user.zipcode;
txtaddress.text = userRequest2.lastResult.users.user.address;
}
3-2．少し前後しますがIDを渡されたPHP（getdata.php）がデータを返すスクリプトはこんな感じです。
<?php
if(isset($_POST['tableid']))
{
$id = $_POST['tableid'];
}
//dbconnect.phpはMYSQL接続部分を記述したファイル
include('dbconnect.php');
//DB接続関数呼び出し
db_con();
//SQL処理
if($id != "")
{
$Query = "select * from testdata where id='" . $id . "';";
}
$Result = mysql_query($Query);
//データからXMLデータを作成
$Return = "<users>";
$rec = mysql_fetch_array($Result);
$Return .= "<user>";
$Return .= "<username>".mb_convert_encoding($rec['name'],"utf-8","auto")."</username>";
$Return .= "<kana>".mb_convert_encoding($rec['kana'],"utf-8","auto")."</kana>";
$sextmp = $rec['sex'];
($sextmp == 0)?$sex="男":$sex="女";
$Return .= "<sex>".mb_convert_encoding($sex,"utf-8","auto")."</sex>";
$Return .= "<zipcode>".$rec['postal']."</zipcode>";
$Return .= "<address>".mb_convert_encoding($rec['address'],"utf-8","auto")."</address>";
$Return .= "</user>";
$Return .= "</users>";
mysql_free_result($Result);
print $Return;
?>
以上、こんな感じの連携でドロップダウンリストからTextInputへMYSQLデータを表示できました。
Ajax＋PHPで実装するのとどちらが簡単かといえば、仕組みが大体でも理解できればどっちもどっちかと思いますが、非同期通信部分の汎用化を考えるとFlexでの実装の方が自分は楽かもしれません。
Ajaxは既に広く出回っているライブラリがたくさんありそれをそのまま使う分にはすごく楽ですが、改造しようとすると結構はまりますんで・・・＾＾；（完全に力量不足ですｗ）
Flex独自のおもしろいコンポーネントなどもありますので今後はそういった部分も試していけたらと考えています。
何かしら参考になりましたらクリックをよろしくお願いします
レベルが高すぎてわからないですけど^^
わかるようになりたい…気持ちだけは前向きに^^
いつも勉強させて頂いています。
コメントありがとうございます m(＿ ＿)m
愛美さんのブログはSEO関連の新しい情報などで参考にさせていただいています。
ザッピング早速導入してみましたよｗ