dev.convexstyle.net | Remoting with Flex 2.0

Flex Builder 2.0 で開発のアプリケーションから AMFPHP などのサーバプログラムに通信する際には、デフォルトでは Remote Object を使用して通信するのがスタンダードで、慣れると特に問題は無いのですが、それよりも便利な Flex framework があるんではないかと検索していたら、s2flex2-components というコンポーネントがあったのでメモ。Remoting Object では少し煩わしかった services-config.xml の様な config.xml の設定やFlex compiler への設定が無くなり、少ない労力と直感的に操作できるのでかなり快適です。

ということで Remote Object と s2flex2-components を使用した Remoting の方法について対比してみたいと思います。

（前提）
Remoting 用のサーバ言語として AMFPHP 1.9 beta を使用しました。詳しい設定方法などはココを参考にしてください。またこのプラグラムは PHP 5 が動作する自分のサーバにアップロードしています。通信する際は PHP が動作するサーバにアップロードするか、local の apache などのウェブサーバのディレクトリに配置してください。PHP 4 でも動作しますので、その際は下記の記述を少し変える必要があります。Test class を下記の様に作成し、このファイルを Test.php として services/Test.php として保存します。

<?php
class Test {
    // コンストラクタ関数
    public function Test() {
        // 初期設定用のプログラムをココに記述します。
    }
    // テスト用関数
    public function test($str) {
        return 'You sent the following message !!! '.$str;
    }
}
?>

■ Remote Object を使用した Remoting の場合

（１）Remoting 用の configuration ファイル作成
下記の内容の services-config.xml というファイルを作成し、Flex Project のルートディレクトリに保存します。太字で書いた部分は任意になりますので、AMFPHP の gateway.php への URL を記述します。これが remote メソッドを動作させる configuration ファイルとなります。

<?xml version="1.0" encoding="UTF-8"?>
<services-config>
	<services>
		<service id="amfphp-flashremoting-service" class="flex.messaging.services.RemotingService" messageTypes="flex.messaging.messages.RemotingMessage">
			<destination id="amfphp">
				<channels>
					<channel ref="my-amfphp"/>
				</channels>
				<properties>
					<source>*</source>
				</properties>
			</destination>
		</service>
	</services>
	<channels>
		<channel-definition id="my-amfphp" class="mx.messaging.channels.AMFChannel">
			<endpoint uri="http://（amfphp 用のプログラムを配置した URL）/gateway.php" class="flex.messaging.endpoints.AMFEndpoint"/>
		</channel-definition>
	</channels>
</services-config>

（２） compiler arguments の追加

新規 Flex Project を作成し、Flex Compiler の compiler arguments に -services "services-config.xml" と追記する。

（３）Flex プログラム作成（＊簡略化して書いています。）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	layout="absolute">

	<mx:RemoteObject 

		id="MyServices" 

		source="Test"

		destination="amfphp"

		showBusyCursor="true" 

		fault="faultHandler(event)">

		<mx:method name="test" result="resultHandler(event)" />

	</mx:RemoteObject>

	<mx:Script>

	<![CDATA[

		import mx.rpc.events.FaultEvent;

		import mx.rpc.events.ResultEvent;

		private function resultHandler(re:ResultEvent):void {

			result_text.text = re.result.toString();

		}

		private function faultHandler(fault:FaultEvent):void {

			result_text.text = "code¥n" + fault.fault.faultCode + "Message¥n" + fault.fault.faultString + "Detail¥n" + fault.fault.faultDetail;

		}

	]]>

	</mx:Script>

	<mx:VBox>

		<mx:TextArea id="result_text" width="300" height="200" borderColor="0x000000" />

		<mx:Button label="test" click="MyServices.test.send('I am convexstyle.')" />

	</mx:VBox>

</mx:Application>

■ s2flex2-components を使用した Remoting の場合

（１）component のダウンロードと追加

ココより s2flex2-components をダウンロードし、任意のローカルディレクトリに配置する。
自分の場合は C:¥customswc に配置し、新規 Flex Project を作成する際に、Flex Build Path の Library Path にこのディレクトリを追加する。

（２）Flex プログラム作成（＊簡略化して書いています。）

<?xml version="1.0" encoding="utf-8"?>
<mx:Application
	xmlns:mx="http://www.adobe.com/2006/mxml"
	xmlns:s2="http://www.seasar.org/s2flex2/mxml"
	layout="absolute">

	<s2:S2Flex2Service 

		id="S2Services"

		gatewayUrl="http://（amfphp 用のプログラムを配置した URL）/gateway.php" 

		destination="Test"

		result="test_onResult(event)"

		fault="test_onFault(event)"

		showBusyCursor="true" />

	<mx:Script>

	<![CDATA[

		import mx.rpc.events.ResultEvent;

		import mx.rpc.events.FaultEvent;

		private function test_onResult(event:ResultEvent):void {

			result_text.text = event.result.toString();

		}

		private function test_onFault(fault:FaultEvent):void {

			result_text.text = fault.fault.message;

		}

		private function clickHandler(evt:MouseEvent):void {

			S2Services.test(msg_text.text);

		}

	]]>

	</mx:Script>

	<mx:VBox>

		<mx:TextArea id="result_text" width="300" height="300" />

		<mx:TextInput id="msg_text" width="300" height="20" />

		<mx:Button label="test" click="clickHandler(event)" />

	</mx:VBox>

</mx:Application>

やはり s2flex2-components を使用した方法の方が設定ファイルなどを新規で作成する手間が無いので、間違いも少なく直感的ですね。自分の開発の際はこちらを使わせてもらってます。