|
GettingStarted_T2AMF
en , ja T2とFlexでRIA開発を始めるための具体的なセットアップや動かし方を学びます. はじめにこの章ではT2とFlexを使う場合の具体的なセットアップややり方を学びます. T2の機能の一つであるT2AMFを使うと驚くほど簡単にFlexとAMFを使って通信できます.AMFとはAction Message Formatの略で、Flexと高速かつ高効率に通信するときに使うフォーマットです. JSONやXMLを使った通信の4倍から10倍のパフォーマンスが出るといわれています. 必要なもの実行環境を用意するT2とFlexの開発には、以下のものが必要です.
てっとり早く環境を準備するのであれば、T2+Flexブランクプロジェクトをダウンロードしてください. このチュートリアルでは、ブランクプロジェクトを使って解説します. 環境の確認フォルダ構成の確認まずは環境の確認です.ダウンロードしたt2amf-blankはEclipseプロジェクト形式になっているので、そのままFlexBuilderでインポートしてください. フォルダ構成は下記のようになっています.
jarの確認jarファイルも確認しておきます.t2amf-blankは最小限のjarしか同梱していません. 必須jarは以下のとおりです. オプションのライブラリは下記のとおりです.
設定の確認T2の設定を確認しましょう.T2自体はweb.xmlにフィルタを設定するだけです.t2amf-blankではあらかじめ初期設定は終わっています. 確認すべき重要な点は、Filterのinit-param項目で、以下の2点です.
設定ファイル全文は以下のようになっています.<?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で通信させるには、以下のクラスを書きます. サーバサイド側サーバサイド側では、まず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をそのまま書きます. mxmlmxmlは非常にシンプルなデザインになります.ボタンを押すと、サーバサイドにデータを送信して結果をテキストで表示します. 以下コードのRemoteObjectの定義部分に注目してください. サーバサイド側の説明にも書いたように、Flexから通信する際にはRemoteObjectを使って通信します.この際に重要なポイントは2点です.
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>DtoDtoはデータ送受信の受け皿となるActionScriptクラスです. Dto部分もT2固有のものは一つもありません.全てFlexでAMF通信するときの通常通りのお作法で記述するだけです.
AMFで送信するためにDtoを使う場合、RemoteClassメタデータでサーバサイドのどのクラスとマッピングするかを指定する必要があります. 以下のRequestDto.asは、org.t2framework.examples.dto.RequestDto.javaとマッピングされます. このときにプロパティ名は同一にしておく必要があります.一例としてRequestDtoを見てましょう. RequestDto.asは以下のようになります.
RequestDto.javaは以下のようになります.
ResponseDto.asは下記のとおりです.
動作確認では動作させてみましょう.コンパイルして、Bootstrap.javaをEclipseから起動させるだけで起動します. Windowsであれば、自動的にお使いのブラウザに表示されます. MacやUNIXであれば、http://localhost:8080/t2amf-blank/main.html にアクセスしてみてください. 以上で初期チュートリアルは終了です. これより更に詳細な情報が欲しい方は、以下を見てみてください. | |