Flexで画面を担当しているファイルは2つです。HelloS2BlazeDS.mxmlとHelloWorldForm.mxmlです。
このMXMLは、特に画面描画は何もしていません。ポイントは2点あります。
メインの実行可能アプリケーションはアプリケーションパッケージのルートに作成しておきたいので、このように空のアプリケーションをルートに置いてあります。画面が複数ある一般的なアプリケーションでは、このようなMXML(に結び付いたロジッククラス)にアプリケーション全体での共通の設定や処理を記述することが多いです。
このMXMLはメインの画面描画処理を行っています。このファイルの処理は「サンプル解説:全体像」の1、2の処理に相当します。
処理の詳細としては、まずVBox(垂直に自動整列する箱)にボタンとラベルを配置します。
ロジッククラスの指定
次に、画面のロジックはできるだけLogicクラスに書くようにします。LogicクラスはViewHelperクラスと呼ばれることもあります。下記処理で画面で利用するロジッククラスを指定しています。
<!-- Logicクラスの設定 --> |
こうしておくことにより、以後idで指定した「helloWorldLogic」で処理を呼べるようになります。
ボタンのクリックイベントのハンドラを設定している
click="helloWorldLogic.onHelloButtonClickHandler(event)" |
ボタンなどのコンポーネントで発生する「イベント」に対して「イベントハンドラ」を設定して、処理を記述します。イベントハンドラは「コールバック」などと呼ばれることもあります。ここでは、クリックされたらロジッククラスのonHelloButtonClickHandlerメソッドを呼ぶように指定しています。「event」と書いておくと、メソッドの引数にイベントに関連したオブジェクト(ここではボタン)の情報がメソッドに渡されます。メソッド名が長いですが、ここでは以下のような命名規則にしてみました。
on + コンポーネントのid + イベント名 + Handler |
何らかの規則をもってメソッド名を付けておくと分かりやすいです。
リモートオブジェクトの指定
今回のサンプルアプリケーションでは、リモートにあるアプリケーションサーバのオブジェクトをあたかも「直接」呼び出しているように処理を記述できる形式「リモートオブジェクト(RemoteObject)」を利用しています(「Flexにおける通信処理」は後述)。下記コードでリモートオブジェクト指定をしています。
<mx:RemoteObject id="srv" destination="helloWorldService"> |
まず、<RemoteObject>タグでサーバ側のHelloWorldServiceを「srv」という名前で参照できるように指定しています。S2BlazeDSのサイトの説明では「Flexの<RemoteObject>タグのdestination属性で指定する名前は、 Serviceクラスのクラス名の先頭を小文字にしたものにします。例えば、XxxServiceの場合、xxxServiceになります」とあります。
さらに、RemoteObjectの子タグとして<method>タグを指定し、HelloWorldServiceの各メソッドの結果イベントと失敗イベントが発生した場合のイベントハンドラを指定しています。結果イベント=処理成功、失敗イベント=処理失敗という感じです。イベントハンドラの命名規則は先のボタンのクリックイベントのときと同じ感じです。今回はgetWorldというメソッドを呼び出したいので、上記のようにgetWorldメソッドに対するイベントハンドラを指定しています。
以後、このHelloWorldForm.mxmlを「HelloWorldFormクラス」と呼ぶことにします。MXMLで記述されるファイルも結局ASで記述するクラスと同様に「クラス」ですので、そう呼ぶことにします。
Flexで画面ロジックを担当しているファイルは1つです。HelloWorldLogic.asです。今回のサンプルアプリケーションではサーバへのリクエスト処理とサーバからのレスポンス処理の2つの処理を行っています。
public function onHelloButtonClickHandler(event:MouseEvent):void { |
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 { |
このメソッドには引数があり、ResultEventオブジェクトが渡されています。このオブジェクトのresultプロパティにはサーバからの処理がFlexにより自動的に詰め込まれています。
サーバ側のHelloWorldServiceクラスのgetWorldメソッドの戻り値はHelloWorldResponseDtoと定義されています(後述)ので、event.resultがHelloWorldResponseDtoそのものになります。そのため、event.resultはもともとObject型なのでそれをキャストして使いやすいようにしています(【い】の処理)。
DTOはあくまで器ですので、目的のDB検索結果はその中に入っています。【ろ】の処理で検索結果のTestオブジェクトを取得しています。
最後に、Testオブジェクトのnameプロパティを取得して画面に反映させます(【は】の処理)。
前述のとおり、本アプリケーションでは、通信処理にRemoteObjectを使っています。Flexで通信を行う場合には、主に3種類の通信パターンが用意されています。
既存のWebアプリケーションでポピュラーに利用されていた通信方式であるHTTPを使った通信処理です。このコンポーネントを使うと、サーブレット/JSPやPHP、Ruby on Rails、ASP、ColdFusion、Perlなどさまざまな言語で作成されたサーバ処理と通信ができます。
HTTPServiceコンポーネントでの処理は、以下の2つのようなシンプルな形です。
従来のHTMLアプリケーションであればこのレスポンスのHTML(画面構成要素+データ)をそのまま表示していたのですが、Flexではデータさえもらえれば画面描画はFlexが担当するので、HTTPServiceを用いた際のサーバからのレスポンスはXMLを利用するのがポピュラーです。
HTTPServiceコンポーネントのMXMLとActionScriptでの実装のスタイルはRemoteObjectの場合とあまり変わりません。
Flexでは、WSDL 1.1ドキュメントでインターフェイスが定義されたWebサービスと通信ができます。WebServiceコンポーネントのMXMLとASでの実装のスタイルはRemoteObjectの場合とあまり変わりません。
引き続き次ページでは、RemoteObjectコンポーネントやサーバサイドのJavaのソースコードを解説していきます。
Copyright © ITmedia, Inc. All Rights Reserved.