Zedo Core i5 で、PHPとFlex連携（その３）

前回の続きで、今度はFlexでAMFPHP上のサービスを呼出します。今回はグラフをやってみたかったので、リンク付きであればフリーで使える「amCharts」という、swfベースのコンポーネントを使ってみました。しかも丁度Flex版があり、SWCのライブラリとして使えるので、ラッキーでした。

amCharts for Flexの入手

• • amCharts公式サイト

サイトの右側の「amCharts Flex components」からFlex版のページへいき、Downloadから入手します。現時点で”1.3.2.0 beta”です。

SWCコンポーネントをFlex Builderに設定

ダウンロードした「SWC」をローカルＰＣの任意のディレクトリに配置します。（例「C:\lib\flex\amchart\1.3.2.0_beta\build」）
Flex Builderで適当なFlexプロジェクトを作成します。作成したプロジェクトを右クリックして[プロパティ]を開きます。左のメニューから[Flexビルドパス]を選び、[ライブラリパス]タブを選びます。

[SWCの追加]ボタンを押し、先程ダウンロードした、バージョンが３のSWCファイルを選びます。

AMFPHPサービスの呼出

ActionScriptでは次のようにして、AMFPHP上の関数を呼びだす事ができます。
AMFPHPでサービスを呼びだす為に「flash.net.NetConnection ,ObjectEncoding ,Responder」クラスを使います。
ここで前々回作成した「amfGateway.php」の配置先を”NetConnection”接続先のURLとします。
「NetConnection」クラスのインスタンスで”AMFゲートウェイ”への接続を試みます。「Responder」クラスで接続成功時と失敗時に実行するメッソドを渡した、インスタンスを作成します。接続したコネクションの”call”メソッドの引数に「PHPクラス名.関数名の文字列とResponderのインスタンス」をとり、サービスを呼び出します。呼出しに成功したら、Flex上のコンポーネントにデータをバインドすれば、PHPとFlexの連携の完了です。

■「Chart.mxmlの抜粋」

import flash.net.NetConnection;
import flash.net.ObjectEncoding;
import flash.net.Responder;

import mx.core.Application;
import mx.utils.URLUtil;

[Bindable]
private var dataChart: ArrayCollection ;

/**
 * コネクション取得
 */
private function callAMFPHP():void {
	var time:Number = (new Date()).getTime();
	var con:NetConnection = new NetConnection();
	 //ゲートウェイへのパス
	var GATEWAY_URL:String = '/etc/amfGateway.php';
	
	// ドメイン＆ポート
	var appURL :String = Application.application.url;
	var DOMAIN_URL:String = URLUtil.getProtocol(appURL)
	  				          + "://" 
	                          + URLUtil.getServerNameWithPort(appURL);
	con.connect(DOMAIN_URL + GATEWAY_URL + '?time=' + time);
	con.objectEncoding = ObjectEncoding.AMF3;

        // Responder(呼出に成功した時のメソッド,失敗した時のメソッド)
        var responder:Responder = new Responder(onResult, onFault);

        // param1=画面の開始月,param2=画面の終了月
        // NetConnection.call(クラス名.関数名 ,レスポンダー ,引数．．．)
	con.call('Uriage.getList', responder,param1,param2);
}

/**
 * 成功
 */
private function onResult(etc:*):void {
  if (typeof etc == 'object') {
    dataChart = new ArrayCollection(etc);
  } else {
    Alert.show('オブジェクトではありません');
  }
}

/**
 * 失敗
 */
private function onFault(etc:*):void {
  Alert.show('通信に失敗しました');
}
	

こんな感じのチャートが出来ました。