2008年08月04日

Flex:ドロップダウンリストからMYSQLデータを表示

今回は、Flex - PHP - MYSQLの連携でドロップダウンリストからMYSQLのデータをTextInputへ表示させてみました。

前回の
Flex:PHP経由でMYSQLを参照してみた
ではTextInputとDataGridの連携をしました。
ドロップダウンリスト(以下、ComboBox)とTextInputの連携も同じ要領でいけると思ったのですが、思わぬところではまってしまいました。




実際のサンプルはこちらから確認できます。

【Flex】ドロップダウンリストとDB(MYSQL)を連携してみた


1.起動時、MYSQLからデータのID一覧を取得する。
2.ComboBoxに格納する。
3.ComboBoxからIDを選択し、TextInputへそのIDの各情報を表示する。

という処理の流れになります。


1.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へ返されます。


2.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が格納されます。


3.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は既に広く出回っているライブラリがたくさんありそれをそのまま使う分にはすごく楽ですが、改造しようとすると結構はまりますんで・・・^^;(完全に力量不足ですw)

Flex独自のおもしろいコンポーネントなどもありますので今後はそういった部分も試していけたらと考えています。

何かしら参考になりましたらクリックをよろしくお願いします
にほんブログ村 IT技術ブログへ   人気ブログランキング    
タグ:flex ria PHP MySQL
この記事へのコメント
こんばんは〜トモヒロさん
レベルが高すぎてわからないですけど^^
わかるようになりたい…気持ちだけは前向きに^^

いつも勉強させて頂いています。

Posted by 愛美 at 2008年08月05日
>> 愛美さん

コメントありがとうございます m(_ _)m
愛美さんのブログはSEO関連の新しい情報などで参考にさせていただいています。
ザッピング早速導入してみましたよw


Posted by トモヒロ at 2008年08月05日
コメントを書く
お名前: [必須入力]

メールアドレス:

ホームページアドレス:

コメント: [必須入力]

認証コード: [必須入力]


※画像の中の文字を半角で入力してください。

この記事へのトラックバック
×

この広告は1年以上新しい記事の投稿がないブログに表示されております。