レベルエンター山本大のブログ

面白いプログラミング教育を若い人たちに

JSF - Flex ブリッジプロジェクト [via TheServerSide.com]

TSSのJSF Flexの翻訳です。


2008年9月

JavaServerFaces Flexのゴールは、Flexで作られたコンポーネント
通常のJavaServerFacesのコンポーネントとしてユーザーに提供することです。
ユーザーが、通常のJSFコンポーネントとしてFlexコンポーネントを作ろうと思うと、
SWCやSWF、そして他のコンポーネントやリンクを作る必要があります。
こうなってしまうと、JSONJavaScriptActionScriptで管理されたBeanの
様々なコンポーネントを管理する時代に逆戻りします。


そうなるとAdobeFlexに馴染みのない開発者は、
それらの技術について非常に混乱してしまいますし、
アプリケーションで使う技術に関連する古い情報を追わなくてはならなくなります。


この記事では、プロジェクトのクイックオーバービューを提供します。
このプロダクトのデザインに関する技術情報の簡単な導入です。
また、下記のスナップショットに表したソフトのソースコード
ダウンロードしてビルドする方法を示します。
このプロジェクトは、未熟な状態であることに気をつけてください。
ですから将来的には変化するかもしれません。


図:JSF Flexのサンプル

JSF Flexのライフサイクル

このプロジェクト自体は、JSFのライフサイクルに便乗しようとするものです。
1つの大きな違いは、「buildComponentBegin」と「buildComponentChildren」の間で呼ばれる
「buildComponentInterlude」というステップが存在することでしょう。


以下の画像は、いくつかのステップさまざまなアプリケーションモードの
間をとる簡潔なオーバービューを表しています。
アプリケーションモードとは[debugMode, simplySWF, や productionEnv]といったものです。

(図中の文言翻訳)

  • buildComponentBegin
    • UICompornentのフィールドがアトリビュートマップから、またはメソッド呼び出しによって、フェッチされる。
  • buildComponentInterlude
    • テンプレートファイル[preMxmlファイル]が、buildComponentBeginから獲得したフィールドを使って作られる。
  • buildComponentEnd I
    • preMxmlファイルが、mxmlファイルにマージされ、アプリケーションSWFファイルが、SWCへのダイナミックリンクと共に作られる。
  • buildComponentEnd II
    • 必要なソースファイルが、それぞれのディレクトリに作られる(例えば、SWCやそのほかからSWC、SWFライブラリ)
  • buildComponentEnd III
    • JSONオブジェクトがページに作られます。onLoad上のDojoはフォーム上のすべてのonsubmitイベントとpageUnloadファンクションとを結びつけます。Flashアプリは、連携します、終わったときのページに戻って、その初期化によって、そして、コンポーネントの初期値のためにJSONオブジェクトをフェッチします。フォームのonsubmit(Flashアプリが、XMLファイルに含まれるE4Xルックアップをつかってコンポーネントの値を検査します。)そして、フォームに追加したコンポーネントの値をJsonオブジェクトとして戻します。
JSF Flexライフサイクルの概要()

一つ注意しておかなくてはならないのは、「buildComponentEnd II」のプロセスが、
1つのアプリケーション毎に1度だけ発生することです。
つまり、システムリソースが作られる前段階の、存在がチェックされるときです。
それぞれのアプリケーションは、異なった目的に合うような、さまざまなモードを許可しています。

  • debugMode : preMxml、MxmlそしてSWFファイルが、それぞれの実行時において生成されたときに、JSONオブジェクトもつくります。
  • simplySWF : ユーザーによって編集されたMxmlが存在するときに、SWFファイルとJSONオブジェクトだけを生成します。[ユーザーはmxmlファイルの編集とSWFファイルの生成のためにこれを使うことができます。]
  • productionEnv : SWFファイルが既に存在しているので、ここでは何もせず、しかしJSONオブジェクトを作ります。(これはユーザーがdevよりも上位の環境で他の2つのモードによってコンポーネントを実行しないことを保証するデフォルト値です。)

注意しておくことの1つは、システムがpreMxml、Mxml、swfディレクトリ、およびTomcatのルートディレクトリとして「servContext.getRealPath(new String())」を使用するので、上位の環境に移動する間、ワークスペースの中のそれらの対応するディレクトリに「Webcontent/swf/*」の全てのディレクトリをコピーしておくべきであるということです。例えば、メタデータに基づいてキャッシュディレクトリをフラッシュしたりします。

JSF Flex Framework

コアフレームワークとその実装を分解するために、JSF Flex
さまざまなMavenプロジェクトの中にたくさんの自身のコードを部品化しています。
それらのプロジェクトはビルド時にリンクされ、
そして実行時に実装が生成されます。
これはビルド時に特定のプロファイルIDを提供することによって、
ユーザーが好きな実装を選べるということです。
または提供しなければデフォルトの実装となります。


ビルド時に_RunnerFactoryの実装を決定し、プロジェクトは実行時にそれをインスタンス化します。
[デフォルトではDefaultRunnerFactoryImplです。]
そして、この実装は_CommonTaskRunnerと_FileManipulatorTaskRunnerおよび
_FlexTaskRunnerの実装を決定し、システムが実行時にインスタンス化します。
さらに、特定のJREバージョンのために実行時にインスタンス化するための
_AnnotationDocletParserの実装の決定はビルド時に行なわれます。


上記のプロセスに関する、もっと詳しい情報を以下に表します。
これは各Mavenプロジェクトの簡単な概要です。

JSF Flex Maven プロジェクト

jsf-flex-framework/component14」のためのreplaceMapping XMLを生成することを目的として、Javaファイルのドキュメントを検査するためのオープンソースプロジェクトである“Qdox”を便利に利用するプラグインプロジェクトです。

JSFコンポーネントに関するコードを含んでいます。プロジェクトがmyfacesプラグインTLD、faces_config.xmlやtagClassやそのほかを使っており、ビルド時に生成されます。

  • jsf-flex/examples
    • プロジェクトのためのサンプルJSFページを含むWARプロジェクトです
  • jsf-flex-framework/core
    • jsf-flex-framework/component14」プロジェクトおよび「jsf-flex-framework/component15」プロジェクトによって利用される中核となるコードを含みます。
  • jsf-flex-framework/runnerImpl/ commonTaskRunnerImpl
    • jsf-flex-framework/core」によって利用される_CommonTaskRunnerインターフェイスを実装するプロジェクトを含みます。(例えばsdkStandardCommonTaskRunnerImpl プロジェクト)
  • jsf-flex-framework/runnerImpl/ fileManipulatorTaskRunnerImpl
    • jsf-flex-framework/core」によって利用される_FileManipulatorTaskRunnerインターフェイスを実装するプロジェクトを含みます。(例えばvelocityFileManipulatorTaskRunnerImplプロジェクトです)
  • jsf-flex-framework/runnerImpl/ flexTaskRunnerImpl
    • jsf-flex-framework/core」によって利用される“_FlexTaskRunner”インターフェイスを実装するプロジェクトを含みます。(例えば、 antFlexTaskRunnerImpl プロジェクトです)
  • jsf-flex-framework/component14  (JRE が5以下)
    • component14は、ビルドの間にJavaファイルのためのドキュメント(コメント)が、JSF Flexプラグインによって検査されます。そしてreplaceMapping XMLファイルが生成されます。このreplaceMapping XMLファイルは、検査のためのフィールドについてと、それらのフィールドをJSFコンポーネントからどのように取り出すか(アトリビュートマップによるのか、メソッド起動によるのか)をチェックするために解析されます。JSFコンポーネントからフィールドを取得するために「jsf-flex-framework/core」によって利用される“_AnnotationDocletParser”インターフェイスの実装を含みます。(例えばAnnotationDocletParser14Impl).

JSF Flexによるビルドの一部

ここでは、JSF Flexでビルドをすることの一部について概要を紹介します。

チェックアウト/リポジトリからリソースを抽出する

SVNを使ってチェックアウトして、リソースを"http://jsf-flex.googlecode.com/svn/trunk/"から
抽出し、ローカルのフォルダ(例えば「C:\jsfFlexProject」)に配置します。

EclipseIDEにプロジェクトをインポートする
  1. リソースがチェックアウトされたフォルダで、EclipseIDEにプロジェクトのインポートを可能にするための以下のコマンドを実行します。(プロジェクトはビルドするためにmavenを必要とします)

mvn -D wtpversion= eclipse:eclipse

  1. 次に、リソースディレクトリ(C:\jsfFlexProject)に含まれるmvnインストールを実行します。これは、EclipseIDEのプロジェクトにインポートするだけで十分です。
  2. 新しいワークスペースを作り、ワークスペースの中でFile => Import => Existing Projectsと進めます。
  3. チェックアウトされたリソースのフォルダを選択します。 (例えば、C:\jsfFlexProject)
  4. 最後に、"M2_REPO"をワークスペースのクラスパスの値に追加します。
    1. Window => Preferences => Java => Build Path => Classpath Variablesの順に進めます。
    2. ”M2_REPO”の値は、maven2リポジトリと同じ値とします。 [私の場合は "C:/Documents and Settings/Administrator/.m2/repository"]

図:プロジェクトのインポート

まとめ

Webの世界でのWeb2.0の技術が繁栄しています。JSF Flexは、リッチインターネットアプリケーションを作るためのFlexと、サーバーサイドの堅牢なコードを管理するJavaという、それぞれの領域で秀でている2つの技術の橋渡しを可能にします。

特に、このプロジェクトは以下の機能を提供します:

  • JSFを介したレガシーシステムとのデータバインドの容易性を保ちながらFlexアプリケーションを簡単に作ること。
  • 簡単なFlexアプリケーションを作るときの、FlexBuilderの購入に換わる手段。
  • Flex技術の完全な抽象化

参照先

機能の詳細とソースコード : http://code.google.com/p/jsf-flex/

プロジェクトメンバー主な議論一覧 : http://groups.google.com/group/jsf-flex/

著者

Ji Hoon Kim (IBMのソフトウェアエンジニア)