S2BlazeDSを用いたFlex＋Javaアプリの【いろは】：業務用RIAの本命!? Flex＋Java開発入門（2）（3/4 ページ）

» 2008年06月26日 00時00分公開

[福田寅成，クラスメソッド株式会社]

ロジックやハンドラ、リモートオブジェクトを画面に指定

　Flexで画面を担当しているファイルは2つです。HelloS2BlazeDS.mxmlとHelloWorldForm.mxmlです。

HelloS2BlazeDS.mxml

　このMXMLは、特に画面描画は何もしていません。ポイントは2点あります。

＜Application＞タグで「xmlns:web="flex.samples.web.*"」とネームスペースを指定している。これで、web:○○でflex.samples.web.*に作成したMXMLをタグで呼び出せる
＜web:HelloWorldForm /＞で画面をインクルードしている

　メインの実行可能アプリケーションはアプリケーションパッケージのルートに作成しておきたいので、このように空のアプリケーションをルートに置いてあります。画面が複数ある一般的なアプリケーションでは、このようなMXML（に結び付いたロジッククラス）にアプリケーション全体での共通の設定や処理を記述することが多いです。

HelloWorldForm.mxml

　このMXMLはメインの画面描画処理を行っています。このファイルの処理は「サンプル解説：全体像」の1、2の処理に相当します。

HelloWorldFormのボタンがクリックされて、クリックイベントが発生
クリックイベントのハンドラに指定されていたHelloWorldLogicのメソッドが呼ばれる

　処理の詳細としては、まずVBox（垂直に自動整列する箱）にボタンとラベルを配置します。

　ロジッククラスの指定

　次に、画面のロジックはできるだけLogicクラスに書くようにします。LogicクラスはViewHelperクラスと呼ばれることもあります。下記処理で画面で利用するロジッククラスを指定しています。

<!-- Logicクラスの設定 -->

              <logic:HelloWorldLogic id="helloWorldLogic" />

　こうしておくことにより、以後idで指定した「helloWorldLogic」で処理を呼べるようになります。

　ボタンのクリックイベントのハンドラを設定している

click="helloWorldLogic.onHelloButtonClickHandler(event)"

　ボタンなどのコンポーネントで発生する「イベント」に対して「イベントハンドラ」を設定して、処理を記述します。イベントハンドラは「コールバック」などと呼ばれることもあります。ここでは、クリックされたらロジッククラスのonHelloButtonClickHandlerメソッドを呼ぶように指定しています。「event」と書いておくと、メソッドの引数にイベントに関連したオブジェクト（ここではボタン）の情報がメソッドに渡されます。メソッド名が長いですが、ここでは以下のような命名規則にしてみました。

on ＋コンポーネントのid ＋イベント名＋ Handler

　何らかの規則をもってメソッド名を付けておくと分かりやすいです。

　リモートオブジェクトの指定

　今回のサンプルアプリケーションでは、リモートにあるアプリケーションサーバのオブジェクトをあたかも「直接」呼び出しているように処理を記述できる形式「リモートオブジェクト（RemoteObject）」を利用しています（「Flexにおける通信処理」は後述）。下記コードでリモートオブジェクト指定をしています。

<mx:RemoteObject id="srv" destination="helloWorldService">

                <mx:method name="getWorld" 

                  result="helloWorldLogic.onGetWorldResult(event)"     fault="helloWorldLogic.onFault(event)" />

              </mx:RemoteObject>

　まず、＜RemoteObject＞タグでサーバ側のHelloWorldServiceを「srv」という名前で参照できるように指定しています。S2BlazeDSのサイトの説明では「Flexの＜RemoteObject＞タグのdestination属性で指定する名前は、 Serviceクラスのクラス名の先頭を小文字にしたものにします。例えば、XxxServiceの場合、xxxServiceになります」とあります。

　さらに、RemoteObjectの子タグとして＜method＞タグを指定し、HelloWorldServiceの各メソッドの結果イベントと失敗イベントが発生した場合のイベントハンドラを指定しています。結果イベント＝処理成功、失敗イベント＝処理失敗という感じです。イベントハンドラの命名規則は先のボタンのクリックイベントのときと同じ感じです。今回はgetWorldというメソッドを呼び出したいので、上記のようにgetWorldメソッドに対するイベントハンドラを指定しています。

　以後、このHelloWorldForm.mxmlを「HelloWorldFormクラス」と呼ぶことにします。MXMLで記述されるファイルも結局ASで記述するクラスと同様に「クラス」ですので、そう呼ぶことにします。

Flex画面のロジックでリクエストとレスポンス

　Flexで画面ロジックを担当しているファイルは1つです。HelloWorldLogic.asです。今回のサンプルアプリケーションではサーバへのリクエスト処理とサーバからのレスポンス処理の2つの処理を行っています。

サーバへのリクエスト処理

    public function onHelloButtonClickHandler(event:MouseEvent):void {

                      // リモートメソッド呼び出し用の検索条件を作成 ……【い】

                      var test:Test = new Test();

                      test.id = 777;

              

                      // DTOの準備 ……【ろ】

                      var requestDto:HelloWorldRequestDto 

                          = new HelloWorldRequestDto();

                      requestDto.test = test;

              

                      // リモートメソッドを呼び出す ……【は】

                      view.srv.getWorld(requestDto);

                  }

　Helloボタンがクリックされると、このメソッドが呼ばれます。TESTテーブルにはidカラムとnameカラムがあり、idが777のレコードはnameがWorld!に設定されています。

　そのため、idを777に設定したTestエンティティを検索条件としてサーバ側に渡すことにします（【い】の処理）。また、そのTestエンティティをそのまま渡してもいいのですが、FlexとJavaが通信をする際は必ず「DTO」にまとめて送受信することにします（【ろ】の処理）。今回のケースだとDTOの中身が1個になります。

　サーバ側のHelloWorldServiceは、すでにHelloWorldFormクラスで「srv」という名前で呼び出せるように設定してあります。また、親ロジッククラスとHelloWorldLogic.as下部の簡単な処理でHelloWorldFormクラスはviewという名前で参照できるようになっています。従って、「view.srv.getWorld(requestDto)」でサーバ側のHelloWorldServiceのgetWorldメソッドを引数付きで呼び出しています（【は】の処理）。

サーバからのレスポンス処理

　HelloWorldFormクラスのRemoteObjectタグでサーバ側のHelloWorldServiceクラスのgetWorldメソッドを呼び出した結果処理が「onGetWorldResult」であると指定しました。

        public function onGetWorldResult(event:ResultEvent):void {

                        // DTOを取得 ……【い】

                        var responseDto:HelloWorldResponseDto 

                             = event.result as HelloWorldResponseDto;

              

                        // 結果を取得……【ろ】

                        var test:Test = responseDto.test;

              

                        // 処理結果を画面に反映……【は】

                        view.worldLable.text = test.name;

                   }

　このメソッドには引数があり、ResultEventオブジェクトが渡されています。このオブジェクトのresultプロパティにはサーバからの処理がFlexにより自動的に詰め込まれています。

　サーバ側のHelloWorldServiceクラスのgetWorldメソッドの戻り値はHelloWorldResponseDtoと定義されています（後述）ので、event.resultがHelloWorldResponseDtoそのものになります。そのため、event.resultはもともとObject型なのでそれをキャストして使いやすいようにしています（【い】の処理）。

　DTOはあくまで器ですので、目的のDB検索結果はその中に入っています。【ろ】の処理で検索結果のTestオブジェクトを取得しています。

　最後に、Testオブジェクトのnameプロパティを取得して画面に反映させます（【は】の処理）。

いろいろな言語と連携できる3種類のFlex通信処理

　前述のとおり、本アプリケーションでは、通信処理にRemoteObjectを使っています。Flexで通信を行う場合には、主に3種類の通信パターンが用意されています。

【1】HTTPServiceコンポーネント

　既存のWebアプリケーションでポピュラーに利用されていた通信方式であるHTTPを使った通信処理です。このコンポーネントを使うと、サーブレット／JSPやPHP、Ruby on Rails、ASP、ColdFusion、Perlなどさまざまな言語で作成されたサーバ処理と通信ができます。

　HTTPServiceコンポーネントでの処理は、以下の2つのようなシンプルな形です。