ロジックやハンドラ、リモートオブジェクトを画面に指定
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クラスと呼ばれることもあります。下記処理で画面で利用するロジッククラスを指定しています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
こうしておくことにより、以後idで指定した「helloWorldLogic」で処理を呼べるようになります。
ボタンのクリックイベントのハンドラを設定している
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
ボタンなどのコンポーネントで発生する「イベント」に対して「イベントハンドラ」を設定して、処理を記述します。イベントハンドラは「コールバック」などと呼ばれることもあります。ここでは、クリックされたらロジッククラスのonHelloButtonClickHandlerメソッドを呼ぶように指定しています。「event」と書いておくと、メソッドの引数にイベントに関連したオブジェクト(ここではボタン)の情報がメソッドに渡されます。メソッド名が長いですが、ここでは以下のような命名規則にしてみました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
何らかの規則をもってメソッド名を付けておくと分かりやすいです。
リモートオブジェクトの指定
今回のサンプルアプリケーションでは、リモートにあるアプリケーションサーバのオブジェクトをあたかも「直接」呼び出しているように処理を記述できる形式「リモートオブジェクト(RemoteObject)」を利用しています(「Flexにおける通信処理」は後述)。下記コードでリモートオブジェクト指定をしています。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
まず、<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つの処理を行っています。
サーバへのリクエスト処理
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
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」であると指定しました。
*** 一部省略されたコンテンツがあります。PC版でご覧ください。 ***
このメソッドには引数があり、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つのようなシンプルな形です。
- フォームにname&valueペアを設定するような形でリクエストを実行
- レスポンスは何らかのテキスト形式のデータ(XMLやHTML)で受け取る
従来のHTMLアプリケーションであればこのレスポンスのHTML(画面構成要素+データ)をそのまま表示していたのですが、Flexではデータさえもらえれば画面描画はFlexが担当するので、HTTPServiceを用いた際のサーバからのレスポンスはXMLを利用するのがポピュラーです。
HTTPServiceコンポーネントのMXMLとActionScriptでの実装のスタイルはRemoteObjectの場合とあまり変わりません。
【2】WebServiceコンポーネント
Flexでは、WSDL 1.1ドキュメントでインターフェイスが定義されたWebサービスと通信ができます。WebServiceコンポーネントのMXMLとASでの実装のスタイルはRemoteObjectの場合とあまり変わりません。
引き続き次ページでは、RemoteObjectコンポーネントやサーバサイドのJavaのソースコードを解説していきます。
Copyright © ITmedia, Inc. All Rights Reserved.