Eclipse3.3 + Dolteng + S2Flex2 の環境作るよ

20080402 public プロパティ対応について追記

ActionScript に少し慣れてきたので S2Flex2 - AMF3Gateway with DI Container - でサーバー側との連携をやってみるテスト。

前提

とりあえず下記のプロダクトは先に入れておく。

• JDK 1.5
• Tomcat 5.5
• Eclipse 3.3
• Eclipse 3.3 日本語化 プラグイン Pleiades_1.2.2.p4
• Sysdeo Eclipse Tomcat Launcher plugin 3.2.1
• Adobe Flex Builder 3 plugin

環境構築

blog などを見てると「Dolteng で S2Flex2 のプロジェクトが爆速作成！」とのことなので、まず Dolteng を入れる。S2Flex2 Blank プロジェクト なんてのがあるけど気にしてはいけない。

Eclipse のヘルプ -> ソフトウェア更新 -> 検索およびインストール で「インストールする新規フィーチャーを検索」を選択して「次へ」　「新規リモート・サイト」で URL に http://eclipse.seasar.org/updates/3.2/ を入れる。名前は任意を入力。今作ったサイトにチェックがついているのを確認して「終了」　「インストールするフィーチャーの選択」から Dolteng にチェックを入れて「次へ」　あとは画面の指示どおりすすめばインストール完了。

S2Flex2 プロジェクトの作成

ファイル -> 新規 -> プロジェクト -> Chura プロジェクトを選択。プロジェクト名、基本設定のルート・パッケージ名に任意の名前を入力、プロジェクト・タイプを S2Flex2 + S2Dao を選択し、終了。

ちなみにプロジェクト名は s2flex2test ルート・パッケージ名は testroot にしている。

ここで場合によっては、Flex SDK のバージョンの選択、というダイアログが出るが、デフォルトの SDK を使用する(現在は "Flex 3") ので OK 押す。

「プロジェクトのロード中にエラーが発生しました」とか「プロジェクトプロパティファイルを読み取ることができませんでした。」みたいなエラーが出る場合は Eclipse を再起動する。20080401 時点では Dolteng（もしくは S2Flex2 + S2Dao のプロジェクトタイプが？） がビミョーに Eclipse 3.3 に対応しきれず、Eclipse のプロジェクトファイルを上手く作れてないんじゃないか、と予想。再起動するとエラーでなくなるから、大して問題じゃなさげ。

ここまできたらプロジェクトを一回ビルドする。

プロジェクトを右クリック -> Tomcat プロジェクト -> コンテキスト定義を更新する。

この状態で Tomcat を起動し、Alt+Shift+D,F で Flex をデバッグ起動してブラウザが立ち上がるかテスト。

「起動に失敗しました」エラーが出てデバッグモードで Flex が起動しない場合、プロジェクト右クリック -> プロパティ -> Flex コンパイラ -> HTML ラッパーの必要な Flash Player バージョンを 9.0.0 から 9.0.28 （Flex 3 の場合）にする。これ変えなくても動く場合もあったりするからよくわからん。設定時に Flex プロジェクトのアップデート警告が出るけど無視する。

起動に成功するとブラウザに Hello World !! が表示されることを確認する。

これでプロジェクトの作成は完了。

サンプル作成

S2Flex2 Example S2Flex2-1.1.0対応 の足し算サンプルレベルのものを動かせるようになるまでの手順について。

作成手順については Flex入門 ã‚„ Flex User Group - Dolteng 0.17.0 (S2Flex2+S2Dao)でのFlex2-Java連携サンプル を参考にした。

Flex 開発プロジェクトパースペクティブで プロジェクト右クリック -> 新規 -> MXML コンポーネント -> Child.mxml を作成。mxml の名前は任意。

Child.mxml の中身を作る。とりあえずテキトーに、というか S2Flex2 Example S2Flex2-1.1.0対応 の丸コピ。

Main.mxml のデザインビューを開く。コンポーネント -> カスタムに先ほど作成した Child コンポーネントがあるので、それを Main.mxml に貼り付ける。貼り付ける、ってのは Button とか Grid とかみたいに、カスタムにある Child を貼り付けるって意味。

次に Java 側のサービスを作成する。Flex 側からはこの interface に書かれたサービスを呼び出すことになる。

Child.mxml を右クリック - > Dolteng -> サービスの作成→終了。testroot.web.s2flex2test.ChildService と testroot.web.s2flex2test.impl.ChildServiceImpl が自動生成される。選択した *.mxml に対応したサービスが作られるのでサービスのインタフェース名は、[mxml 名 + Service] になっている。

次に Dto を作成する。このクラスが Java と Flex 間でやりとりされるデータオブジェクトになる。これは自力で作る。DB 連携がある場合は他ツールで自動生成することになると思う。

Java パースペクティブで WEB-INF/src/main/java のソース・フォルダーの testroot/dto 以下に AddDto クラスを作成する。クラス名は任意だけど [任意 + Dto] という名前にする必要がある。クラス作成時、実装インタフェースに Serializable を追加、クラス作成後 Ctrl+1 とかでテキトーな serialVersionUID を入れて警告を消しといたほうがいいと思う。

AddDto の中身はこんな感じの public プロパティで構成されたファイルにする。例によってサンプルの丸コピ。getter/setter は今は作らない。

public int arg1;

public int arg2;

public int sum;

次に Java 側のサービスの実装を行う。

testroot.web.s2flex2test.ChildService に↓を追加。例によってサンプルの（ｒｙ

public AddDto calculate(AddDto addDto);

testroot.web.s2flex2test.impl.ChildServiceImpl に↓を追加。

public AddDto calculate(AddDto addDto) {

    addDto.sum = addDto.arg1 + addDto.arg2;

    return addDto;

}

次に Flex 側の Java と連携する部分の作成を行う。

まず AddDto クラスに対応する ActionScript のクラスを作成する。

AddDto.java を右クリック -> Dolteng -> 新規 AS Dto の作成。Select Action Script Folder で s2flex2test を選択。s2flex2test はプロジェクト名。s2flex2test/testroot/web/dto/AddDto.as が自動生成される。ホントは ActionScript 用に切ったソースディレクトリを指定する方がいいんだろうけど、メンドイので mxml が置いてあるディレクトリを指定する。

次に mxml に S2Flex2 Service のコードを埋め込む。

Child.mxml を開いて空白行にカーソルを置く。これはカーソル位置にタグが埋め込まれるための措置。Child.mxml を右クリック -> Dolteng -> S2Flex2 サービスの追加、ChildService を入力・選択する。これで↓のような Flex-Java 間通信用のタグが埋め込まれる。

ここで埋め込んだ連携サービスのタグが起動されるかどうか確認する。

プロジェクトをビルド、Tomcat を起動して Flex を起動する。

すると、↓な感じのエラーが出るかもしれない。

param count mismatch

   virt params=3 optional=1 mx.rpc::AbstractService/setRemoteCredentials()

   over params=2 optional=0 mx.rpc::AbstractService/setRemoteCredentials()
param count mismatch

   virt params=3 optional=1 mx.rpc::AbstractService/setCredentials()

   over params=2 optional=0 mx.rpc::AbstractService/setCredentials()

VerifyError: Error #1053: org.seasar.flex2.rpc.remoting.S2Flex2Service の S2Flex2Service のオーバーライドが無効です。

この現象と解決法については http://ml.seasar.org/archives/seasar-user/2008-March/013214.html に報告されている。

> > エラーを見る限り、Flex3で作成されているように思いますが
> > あっていますでしょうか。
>
> 確かにFlex3で作成されているんです。
>
> > s2flex2-tutorial/WEB-INF/lib/swc以下のs2flex2-components.swcを
>
> >
> http://s2flex2.sandbox.seasar.org/download/2007-12-28/S2Flex2-components-2.0.0-Beta1.zip
>
> > のものと入れ替えてみていただけますでしょうか。

http://ml.seasar.org/archives/seasar-user/2008-March/013214.htm より抜粋

指示通り s2flex2test/WEB-INF/lib/swc/s2flex2-components.swc を http://s2flex2.sandbox.seasar.org/download/2007-12-28/S2Flex2-components-2.0.0-Beta1.zip 中の s2flex2-components/target/swc/s2flex2-components.swc と置き換える。置き換えた後、ビルドして、念のため Tomcat 再起動。これでさっきのエラーは出なくなるはず。

たぶんだけど Dolteng が自動で入れてくれる s2flex2-components.swc は Flex2 の AMF 仕様に対応したものだからこんなエラーが出るっぽい。なので Flex 3 用のファイルに入れ替えしてやる必要があるみたい。Flex 3 の正式版が出たからそのうち s2flex2-components の beta も取れるのかな。もしくは S2Flex3 がリリースされるのかな。

次に mxml に対応する ActionScript ページ を生成する。

Child.mxml 右クリック -> Dolteng-> ActionScript ページの作成、Select ActionScript Dto Class ... で AddDto.as を選択する。これで Child.mxml に↓のようなタグが埋め込まれる。

同時に Child.mxml に対応した ChildPage.as が作成される。ここに Flex から Java のサービスを呼び出すコードを書く。

Child.mxml の S2Flex2Service に ChildPage のハンドラを設定するコードを追加する。

Child.mxml のボタンの click にハンドラを追加する。

ChildPage.as をテキトーに実装する。

public function calculate():void {

    var addDto:AddDto = new AddDto();

    addDto.arg1=int(document.arg1_txt.text);

    addDto.arg2=int(document.arg2_txt.text);			

    remoteCall(service.calculate(addDto), calculateOnSuccess, calculateOnFault);

}

public function calculateOnSuccess(e:ResultEvent, token:Object=null):void {

    var retObj:AddDto = e.result as AddDto;

    document.ans_text.text=retObj.sum.toString();

    document.hoge.text=retObj.hoge.toString();

}

これで実行すると下記のようなエラーが出る。

Error: Error #2030: ファイルの終端 (EOF) が検出されました。

対処は S2Flex2の導入，その2 - Paradigm Shift Design にあるように *Dto に getter/setter を定義する。public プロパティでおｋ、って書いてあるとこもあったけどダメみたい。public プロパティがホントーに上手く動かないのか、S2 の設定が足りないのかはよくわからない。

public プロパティ対応について。

> > S2Flex2はpublicフィールドに対応しているか
> > どうかを教えて頂けないでしょうか？
>
> 確認したところ、現在のところ対応していないようです。
(中略)
コミットしていますので、SNAPSHOTを取得していただけると
確認できるかと想います。

http://ml.seasar.org/archives/akabana-user/2008-January/000168.html

とのこと。

これで足し算が動くようになるはず。