My favorites | Sign in
t-2
Project Home Downloads Wiki Issues Source
READ-ONLY: This project has been archived. For more information see this post.
Search
for
GettingStarted_T2AMF  

en , ja
Updated Mar 24, 2011 by shinpei.ohtani@gmail.com

T2とFlexでRIA開発を始めるための具体的なセットアップや動かし方を学びます.

はじめに

この章ではT2とFlexを使う場合の具体的なセットアップややり方を学びます. T2の機能の一つであるT2AMFを使うと驚くほど簡単にFlexとAMFを使って通信できます.AMFとはAction Message Formatの略で、Flexと高速かつ高効率に通信するときに使うフォーマットです. JSONやXMLを使った通信の4倍から10倍のパフォーマンスが出るといわれています.

必要なもの

実行環境を用意する

T2とFlexの開発には、以下のものが必要です.

  • JDK6
  • FlexBuilder3(Eclipseプラグイン版推奨)
    • Flex(mxmlとActionScript)の開発のため.
  • Webコンテナ
    • Servlet2.5/JSP2.0以上のWebコンテナ.Tomcatならばバージョン6系です.その他Webコンテナでも最新のものであれば動作します.
  • T2 0.6.0以降

てっとり早く環境を準備するのであれば、T2+Flexブランクプロジェクトをダウンロードしてください. このチュートリアルでは、ブランクプロジェクトを使って解説します.

環境の確認

フォルダ構成の確認

まずは環境の確認です.ダウンロードしたt2amf-blankはEclipseプロジェクト形式になっているので、そのままFlexBuilderでインポートしてください. フォルダ構成は下記のようになっています.
  • /src/main/java
    • javaファイルの配置場所です.
  • /src/main/resources
    • ログ出力設定など、サーバサイド設定ファイルの配置場所です.
  • /src/main/webapp
    • Webアプリケーションとして動作するときのルートです.この配下のWEB-INFにweb.xmlと使用するjarファイルが配置されています.
  • /src/main/flex
    • FlexのmxmlとActionScriptファイルの配置場所です.コンパイルすると、/src/main/webappに実行ファイル(html/swf)が配置されるように設定されています.
  • /bootstrap
    • 軽量Webコンテナ(SDLoader)を起動するコードが配置されています.このクラスをMain実行すれば簡単に動作を確認できます.

jarの確認

jarファイルも確認しておきます.t2amf-blankは最小限のjarしか同梱していません. 必須jarは以下のとおりです.
  • t2-0.6.0.jar(またはそれ以降のバージョン)
    • T2本体
  • commons-0.6.0.jar(またはそれ以降のバージョン)
    • T2プロジェクト全般で使うユーティリティ
  • sl4j-api-.1.5.6.jar
    • ログライブラリのAPI
  • logback-core-0.9.15.jar
    • ログライブラリ実装
  • logback-classic-0.9.15.jar
    • ログライブラリ実装
オプションのライブラリは下記のとおりです.
  • sdloader-jsp21-0.3.1.jar
    • 軽量Webコンテナ.サンプルの簡易起動に使用しています.

設定の確認

T2の設定を確認しましょう.T2自体はweb.xmlにフィルタを設定するだけです.t2amf-blankではあらかじめ初期設定は終わっています. 確認すべき重要な点は、Filterのinit-param項目で、以下の2点です.
  • t2.rootpackageでルートパッケージを指定します
  • t2.container.adapterでどのDIコンテナと連携するかを指定します.t2amf-blankでは自前管理のSimpleContainerAdapterになっています.

設定ファイル全文は以下のようになっています.

<?xml version="1.0"?>
<web-app version="2.4" xmlns="http://java.sun.com/xml/ns/j2ee"
	xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
	xsi:schemaLocation="http://java.sun.com/xml/ns/j2ee http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd">
	<context-param>
		<param-name>t2.encoding</param-name>
		<param-value>UTF-8</param-value>
	</context-param>
	<filter>
		<filter-name>t2</filter-name>
		<filter-class>org.t2framework.t2.filter.T2Filter</filter-class>
		<init-param>
			<param-name>t2.rootpackage</param-name>
			<param-value>org.t2framework.examples.page</param-value>
		</init-param>
		<init-param>
			<param-name>t2.container.adapter</param-name>
			<param-value>
				org.t2framework.t2.adapter.SimpleContainerAdapter
			</param-value>
		</init-param>
		<init-param>
			<param-name>t2.exclude-resources</param-name>
			<param-value>css, js</param-value>
		</init-param>
	</filter>
	<filter-mapping>
		<filter-name>t2</filter-name>
		<url-pattern>/*</url-pattern>
	</filter-mapping>
	<welcome-file-list>
		<welcome-file>main.html</welcome-file>
	</welcome-file-list>
</web-app>

実装して動かしてみよう

まずは実装すべきものを確認しましょう.今回のサンプルでは、実用的かつ最も簡単な例にしました. その中ではFlexとT2で通信させるには、以下のクラスを書きます.
  • サーバサイド側
    1. Pageクラス(POJOのクラスで、@Pageとつけたもの)
    2. 通信用のJavaのDTO
  • クライアントサイド側
    1. mxml(画面のデザイン)とActionScript(画面の振る舞い)
    2. 通信用のActionScriptのDTO

サーバサイド側

サーバサイド側では、まずPageクラスを作成します.PageクラスはFlex側からの通信を受け取る役割です. 最小限のPageクラスは以下のようになります.

@Page("hello")
public class HelloPage {

	@Amf
	public Navigation execute(RequestDto requestDto) {
		ResponseDto responseDto = new ResponseDto();
		responseDto.setMessage("Hello T2AMF from server-side!");
		return AmfResponse.to(responseDto);
	}
}
このサンプルではFlexから、
  hello.execute(requestDto)
という形で呼び出されます.今はわからなくても大丈夫です.まずは一個一個みていきましょう.

@PageとPageクラス

@PageはT2がクラスをPageクラスと認識するためのアノテーションです.Flexと通信させるためには、@Pageをつけておく必要があります. また、1つある引数は、Flexと通信する場合の目的地(destination)です. Flex(ActionScript)側から、この値と同じ値を設定しておくことで通信できます.このサンプルの場合はhelloがdestinationになります.

@Amfと呼び出せるメソッド

@AmfはFlexからの通信可能なメソッドにつけておくアノテーションです.戻り値は必ずNavigationにする必要があります. 通常@Amfとつけておくと、そのメソッド名が呼び出し元のFlexからコールされます.上記のサンプルではexecuteというメソッド名です. T2で呼び出されるメソッドはアクションメソッドと呼んでいます.

引数について

引数は原則どのような型でも受け取る事が出来ます.勿論自分でクラス(JavaBeans)を定義したものを使う事も出来ますし、IntegerやStringのようなJDKの型も受け取ることが出来ます. ただし自分で作ったクラスを使う場合、ActionScriptにも同様のクラスが必要になります.詳細はクライアントサイド側で解説します.

この例では、RequestDtoという自分で作ったクラスでデータをFlex側から受け取っています. 実プロジェクトにおいては、自分で作ったクラスでデータをやり取りすることが一般的なので、このサンプルもそれにあわせています.

戻り値について

戻り値はFlexと通信させる場合は常にAmfResponseになります. AmfResponseは引数を1つとるtoメソッドがあり、この引数に返したいオブジェクトを指定します.上記の例であれば、ResponseDtoを返しています. 返すオブジェクトも原則何も制限は無いですが、引数のときと同様自分で作ったクラスを使う場合、ActionScriptにも同様のクラスが必要になります.

以上でサーバサイドは終了です.

クライアントサイド側

次にクライアントサイドを作っていきましょう.クライアントサイドでは、主に3つのリソース種類があります.
  • 画面デザインを決めるmxml
  • イベント発生時の振る舞いを決めるコントローラ(ActionScript)
  • 送信・受信に使うデータの器のDto(ActionScript)

今回のサンプルでは、mxmlに直接画面の振る舞いを決めるActionScriptをそのまま書きます.

mxml

mxmlは非常にシンプルなデザインになります.ボタンを押すと、サーバサイドにデータを送信して結果をテキストで表示します. 以下コードのRemoteObjectの定義部分に注目してください. サーバサイド側の説明にも書いたように、Flexから通信する際にはRemoteObjectを使って通信します.この際に重要なポイントは2点です.
  • どこを目的地(destination)とするか
    • destination属性で指定します.サーバサイドの@Pageの値をそのまま指定するだけです.
  • エンドポイントをどこにするか
    • T2を使う場合は慣例的にt2.amfとしておきます.値が入っていれば何であれ問題ありません.

mxmlのデザイン部分は以下のようになります.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init();" backgroundColor="white">
	<mx:Script>
		<![CDATA[
			...(コントローラ部分後述)...
		]]>
	</mx:Script>
	<mx:RemoteObject id="remote" destination="hello" endpoint="t2.amf" />
	<mx:Text id="showText" text="aaa"  x="36" y="29" width="254" height="38" fontSize="16" color="blue" />
	<mx:Button id="button" label="Execute!"  x="83" y="100" width="165" height="34"/>
</mx:Application>

コントローラ

コントローラ部分は本サンプルではmxmlに直接書きます. また、コントローラの部分はT2固有のものは一つもありません.全てFlexでAMF通信するときの通常通りのお作法で記述するだけです.

では重要な部分だけピックアップして見ていきましょう.まず下記のbuttonHandlerはボタンが押下されたときのイベントハンドラです. この時にサーバサイドにデータを送信します.送信するデータはRequestDtoというDtoになっています. 送信するにはRemoteObjectを使って、RemoteObjectのid名.呼び出したいメソッド名(引数)とすれば呼び出すことが出来ます. しかしここですぐに呼び出すわけではなく、Flashプレーヤが都合のよいタイミングでリクエスト送信が行われます. そのため、イベントハンドラを登録します.ここでは成功時のイベントハンドラとして、successHandlerを登録しておきます. successHandlerでは、サーバサイドからの結果を受け取り、ResponseDtoにキャストしてデータを取り出します.
通信の部分のコードは以上です.

			private function buttonHandler(e:MouseEvent):void
			{
				var requestDto:RequestDto = new RequestDto();
				requestDto.name = "shot";
				requestDto.age = 31;
				var token:AsyncToken = remote.execute(requestDto);
				token.addResponder(new AsyncResponder(successHandler, faultHandler));
			}
			
			private function successHandler(e:ResultEvent, object:Object = null):void
			{
				var responseDto:ResponseDto = e.result as ResponseDto;
				showText.text = responseDto.message;
			}

mxmlとコントローラの全サンプルのコードは以下のようになります.

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"
	creationComplete="init();" backgroundColor="white">
	<mx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import org.t2framework.examples.dto.ResponseDto;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.AsyncResponder;
			import mx.rpc.AsyncToken;
			import org.t2framework.examples.dto.RequestDto;
			private function init():void
			{
				button.addEventListener(MouseEvent.CLICK, buttonHandler);
			}
			
			private function buttonHandler(e:MouseEvent):void
			{
				var requestDto:RequestDto = new RequestDto();
				requestDto.name = "shot";
				requestDto.age = 31;
				var token:AsyncToken = remote.execute(requestDto);
				token.addResponder(new AsyncResponder(successHandler, faultHandler));
			}
			
			private function successHandler(e:ResultEvent, object:Object = null):void
			{
				var responseDto:ResponseDto = e.result as ResponseDto;
				showText.text = responseDto.message;
			}
			
			private function faultHandler(e:FaultEvent, object:Object = null):void
			{
				Alert.show(e.message.toString());
			}
		]]>
	</mx:Script>
	<mx:RemoteObject id="remote" destination="hello" endpoint="t2.amf" />
	<mx:Text id="showText" text="aaa"  x="36" y="29" width="254" height="38" fontSize="16" color="blue" />
	<mx:Button id="button" label="Execute!"  x="83" y="100" width="165" height="34"/>
</mx:Application>

Dto

Dtoはデータ送受信の受け皿となるActionScriptクラスです. Dto部分もT2固有のものは一つもありません.全てFlexでAMF通信するときの通常通りのお作法で記述するだけです.

AMFで送信するためにDtoを使う場合、RemoteClassメタデータでサーバサイドのどのクラスとマッピングするかを指定する必要があります. 以下のRequestDto.asは、org.t2framework.examples.dto.RequestDto.javaとマッピングされます. このときにプロパティ名は同一にしておく必要があります.一例としてRequestDtoを見てましょう.

RequestDto.asは以下のようになります.
package org.t2framework.examples.dto
{
	//Dto for sending request to server-side application.
	//リクエスト送信用のDTOです
	[RemoteClass(alias="org.t2framework.examples.dto.RequestDto")]
	public class RequestDto
	{
		public var name:String;
		
		public var age:int;
		
		public function RequestDto()
		{
		}

	}
}
RequestDto.javaは以下のようになります.
package org.t2framework.examples.dto;

public class RequestDto {

	String name;

	int age;

	public String getName() {
		return name;
	}

	public void setName(String name) {
		this.name = name;
	}

	public int getAge() {
		return age;
	}

	public void setAge(int age) {
		this.age = age;
	}

}
ResponseDto.asは下記のとおりです.
package org.t2framework.examples.dto
{
	//Dto for coming response from server-side application.
	//レスポンス受信用のDTOです
	[RemoteClass(alias="org.t2framework.examples.dto.ResponseDto")]
	public class ResponseDto
	{
		public var message:String;
		
		public function ResponseDto()
		{
		}

	}
}

動作確認

では動作させてみましょう.コンパイルして、Bootstrap.javaをEclipseから起動させるだけで起動します. Windowsであれば、自動的にお使いのブラウザに表示されます. MacやUNIXであれば、http://localhost:8080/t2amf-blank/main.html にアクセスしてみてください.

以上で初期チュートリアルは終了です. これより更に詳細な情報が欲しい方は、以下を見てみてください.

TOPに戻る

Powered by Google Project Hosting