OpenLaszloアドバンスド・テクニック
連載:Flexのクライアントサイドをオープンソースで制覇する
(最終回)

Flexのフレームワーク、Cairngormで
検索アプリ完成

ダイヤモンドコンピューターサービス
SI技術部 技術推進グループ
吉田 靖宏
2006/10/13

サーバサイドとの連携

 今回は、サーバサイドのサービスをRemote Objectとして実装しましたが、サーバサイドのサービスを必ずしもRemote Objectで実装しなければならないということではありません。Flexでは、サーバサイドに連携する方法として、Remote ObjectのほかにHTTP ServiceとWeb Serviceがあります(下図参照)。

図1 サーバサイドとの連携方法

  Remote Objectは、AMF(Action Message Format)というFlash独自の方式でサーバと通信します。AMFの特徴として、バイナリフォーマットであるため、オブジェクトの中身をXMLなどのテキストに変換せずに、オブジェクト同士でそのままやりとりできる点があります。Flexには、前回説明したように、Action ScriptオブジェクトとJavaオブジェクトを自動的に相互変換する仕組みが備わっています。

 HTTP Serviceは、HTTPのGETリクエストやPOSTリクエストを使ってサーバと通信します。HTTPは、テキストベースのプロトコルであるため、オブジェクトをそのままパラメータとして送信することはできません。リクエストパラメータに分解して送るか、XMLデータに変換してからサーバに送信する必要があります。Strutsなどの既存のWebアプリケーションにFlexを併用する場合などには、使用することも多いかと思います。

 Web Serviceは、SOAPというプロトコルを使ってサーバと通信します。SOAPは、XMLベースのプロトコルですが、WSDLにサービスのメソッドやデータ型を定義しておくことによって、あたかもオブジェクト同士でやりとりしているかのように扱えます。そういう意味では、Remote Objectに近いといえます。しかし、Webサービスを実行するためには、別途Webサービスのエンジン(Apache Axisなど)が必要であり、実装するには少し敷居が高い部分があります。SOAの普及などで、Webサービス化が進んでいけば使用する場面も多くなると思います。

FlexとSeasar2の連携

DIコンテナであるSeasar2を開発しているSeasarファウンデーションでは、Seasar2とFlexを連携するためのS2Flexというプロダクトを公開しています。このプロダクトを使用すると、Flash Player上のFlexアプリケーションからS2Container上に登録されているコンポーネントを簡単に呼び出せるようになります。

また、Flex2とSeasar2を連携するためのS2Flex2というプロダクトも公開されています。こちらは、sandboxでの公開ということで、正式なリリースはまだされていません。

Seasar 2とFlexを連携させてみたいと思っている方は、ぜひ、これらのプロダクトを使ってみてください。

サンプルアプリケーションの動作確認

 それでは、サンプルアプリケーションを動かしてみましょう。動かす手順は、ログインサンプルのときの手順と同じです。まず、パッケージエクスプローラ上のcairngorm-sampleプロジェクトを右クリックして、[実行]→ [Run On Server]を選択してください。すると、以下のようなダイアログが表示されるので、開発環境構築時に設定したTomcatを選択し、次へボタンを押します。

画面1 サーバの選択

 すると、以下のようなダイアログが表示されるので、右側のConfigured projects欄にcairngorm-sampleプロジェクトが追加されていることを確認します。確認したら終了ボタンを押します。

画面2 プロジェクトの追加

 以下のように、Serversビューにcairngorm-sampleプロジェクトが加わり、Tomcatが起動します。StatusがStartedになったら起動完了なので、ブラウザから以下のURLにアクセスしてください。

http://localhost:8080/cairngorm-sample/sample/view/APServerList.mxml

画面3 Tomcatの起動を確認

 検索条件(製品コード)に何も入力せずに検索ボタンを押すと、アプリケーションサーバの全件を返すようになっているので、以下のように3件のアプリケーションサーバがデータグリッドに表示されるはずです。検索以外にも実装した登録、更新、削除の処理も試してみてください。

画面4 検索条件なしで検索を実行したときの画面

まとめ

 以上で、サンプルアプリケーションの作成は終了となります。今回は、サンプルということで、データベースへのアクセスを行わなかったり、例外処理や画面回りの細かい制御を省略したりしています。アプリケーションとしては、まだ作り込みが足りない部分がありますので、余裕のある方はぜひ、足りない部分の処理を実装してみてください。

 この連載中にFlex 2も正式リリースされ、先日日本語版のFlex Builder 2が出荷されました。ドキュメントも日本語化が整い、いよいよFlex 2を使う基盤が整ってきました。CairngormもAdobe Labsにフューチャーされ、Flex 2に対応したCairngorm 2も正式リリースされています(こちらのページからダウンロードできます)。

 今回は、Flex 1.5ベースの連載でしたので、読者の皆さんにはぜひ、今回の連載を参考にしていただき、新しいFlex 2でCairngorm 2を使っていってほしいと思います。

 本連載は、今回で最終回となります。最後までお付き合いくださいまして、どうもありがとうございました。

2/2  

 INDEX

連載:Flexのクライアントサイドをオープンソースで制覇する(5)
 Flexのフレームワーク、Cairngormでサンプルアプリ
  Page1 BusinessDelegateの作成
Servicesの作成/サービス(Remote Object)の作成
Page2 サーバサイドとの連携
サンプルアプリケーションの動作確認/まとめ




HTML5 + UX フォーラム 新着記事
@ITメールマガジン 新着情報やスタッフのコラムがメールで届きます(無料)

注目のテーマ

HTML5+UX 記事ランキング

本日 月間