JDeveloper 11g によるリッチクライアント開発

第1章 ADF Faces Rich Clientとは

ADF Faces Rich Clientは、JavaServer Faces（JSF）に準拠し、Ajaxの技術を活用したユーザー・インタフェースのコンポーネントとライブラリを提供する、オラクルのリッチクライアント・ソリューションです。今回はまず、JSFについて簡単に説明した後、ADF Faces Rich Clientの概要を紹介しています。すでにJSFに関する知識がある方は、「ADF Faces Rich Clientとは」以降をお読みください。

目次

• JavaServer Faces（JSF）とは
• ADF Face Rich Clientとは
• ADF Faces Rich Clientの主な機能
• ADF Data Visualization Components

JavaServer Faces（JSF）とは

近年はWebベースの企業システムが広く普及していますが、それ以前の企業システムはクライアント/サーバー型に基づくGUIアプリケーションが主流でした。GUIアプリケーションと従来のWebアプリケーションでは、その開発手法に大きな違いがあります。

従来のWebアプリケーション開発において、開発者はHTTPやHTMLを強く意識する必要がありました。これは、Webアプリケーション・フレームワークの中でも特に広く普及しているApache Strutsも例外ではありません。GUIアプリケーションでは比較的簡単に実装できたイベント・ドリブンな処理（ボタンのクリックやテキストの編集などユーザーの操作をトリガーとした処理）をWebアプリケーションで同等の機能を提供するためには、JavaScriptなどJava以外のテクノロジを習得する必要があるなど、Webアプリケーションの開発者に大きな負担がかかります。
このような問題を解消するために導入されたのがJavaServer Faces（JSF）です。JSFは、HTTPやHTMLのようなWebアプリケーション固有のテクノロジには依存していないため、GUIアプリケーションと同様のイベント・ドリブンな開発手法をとることができ、フレームワークが規定するクラスを拡張する必要もないため、単体テストも容易です。また、JSFはJavaプラットフォームの標準化プロセスであるJava Community Process（JCP）によって仕様が策定されており、最新バージョンであるJSF 1.2はJSR 252により規定され、Java EE 5にも採用されています。

JSFのアーキテクチャ

JSFは、MVCモデルのビューおよびコントローラ層の機能を提供するフレームワークで、次のような機能を実現するための仕組みとAPIを標準で提供しています。

• 開発者がHTMLを意識せずに使用できる、ボタンや入力フォームなどユーザー・インタフェースを構成するコンポーネント（UIコンポーネント）
• ユーザー・インタフェースの状態管理
• ユーザーの入力データの妥当性チェックと型変換
• ユーザー・インタフェースの国際化
• ページ・フローの定義
• GUIアプリケーションと同様のイベント処理の仕組み

JSFアプリケーションは、表2の要素により構成されます。

図 1 JSFアプリケーションのアーキテクチャ

▲ ページTOPに戻る

ADF Face Rich Clientとは

ADF Facesは、JSFに準拠したコンポーネント・ライブラリであり、JSFアプリケーション開発において一連の広範な拡張UIコンポーネントを提供します。これらのコンポーネントを利用することで、HTMLはもちろんJavaScriptを記述することなく高機能なWebページのユーザー・インタフェースを簡単に構築できます。
RIA（Rich Client Application）を実現するためにADF Facesを拡張したのが、ADF Faces Rich Clientです。ADF Rich Clientは、JSFのリファレンス実装にはない、次のような機能を提供しています。

• 国際化やアクセシビリティに対応済みの100以上のUIコンポーネント
• HTMLはもちろん、PDAに対応したレンダラ
• 拡張コンバータとバリデータ
• JavaScript APIの公開
• 部分ページ・レンダリング
• ドラッグ&ドロップ・フレームワーク
• アクティブ・データ・フレームワーク
• ポップアップ・フレームワーク
• ナビゲーション・メニュー・フレームワーク
• ページ・テンプレートの作成と適用
• スキンによるアプリケーションの外観のカスタマイズ

▲ ページTOPに戻る

ADF Faces Rich Clientの主な機能

この項では、ADF Faces Rich Clientの特徴的な機能の中から次の4つをピックアップして説明します。

• 部分ページ・レンダリング
• ドラッグ&ドロップ・フレームワーク
• ポップアップ・フレームワーク
• スキンによるアプリケーションの外観のカスタマイズ

部分ページ・レンダリング

部分ページ・レンダリング（Partial Page Rendering: PPR）は、任意の領域だけをリフレッシュする機能を提供します。PPRを使用すると、ドロップ・ダウン・リストなどで選択された値に応じて、他のコンポーネントの表示を変更するようなWebページを、JavaScriptを記述せずに作成できます。

図 2 部分ページ・レンダリングの実行イメージ

ドラッグ&ドロップ・フレームワーク

GUIアプリケーションでは、データのコピーや移動などの処理をドラッグ&ドロップによる直感的な操作で実現することができます。しかし、Webアプリケーションでドラッグ&ドロップを実現するには、JavaScriptの複雑なプログラミングが必要です。ADF Faces Rich Clientは、ドラッグするデータと、ドロップする先をそれぞれタグで記述するだけでドラッグ&ドロップを実現できるフレームワークを提供しています。

図 3 ドラッグ&ドロップの使用例

ポップアップ・フレームワーク

Oracle ADF 10g（10.1.3）で提供されていたADF Facesは、ポップアップ・ダイアログを表示するためのダイアログ・フレームワークを提供していました。このダイアログ・フレームワークを使用すると、JavaScriptのプログラミングなしにダイアログによる処理を実現できますが、Webブラウザの新規ウィンドウが生成されるため、ポップアップ・ブロックが設定されている場合に処理を継続できないなどの問題もありました。
ADF Faces Rich Clientはダイアログ・フレームワークを拡張し、Webブラウザの新規ウィンドウの生成を必要としないポップアップ・ダイアログやウィンドウの他、右クリック・メニューなども簡単に実現できます。

図4 ポップアップ・メニューの使用例

スキンによるアプリケーションの外観のカスタマイズ

ADF Faces Rich Clientでは、個々のコンポーネントに対してカスケーディング・スタイルシート（Cascading Style Sheet: CSS）のスタイルを定義することができるのはもちろん、スキンによってWebアプリケーション全体の外観を変更することができます。スキンとは、ADF Faces Rich Clientを使用したWebアプリケーションに適用されるスタイル・シートです。スキンを用いると、Webブラウザの種類に応じて最適化されたCSSが生成されるため、ブラウザ間におけるCSSの解釈の違いが吸収されます。また、開発者が独自のスキンを定義することも可能です。

図5 スキンの変更

▲ ページTOPに戻る

ADF Data Visualization Components

ADF Data Visualization Componentsは、データの可視化や分析などの機能を実現するためのコンポーネントを提供しています。

図6 ADF Faces Gaugeの使用例

図7 ADF Faces Geographic Mapの使用例

まとめ

今回は、JSFのアーキテクチャとADF Faces Rich Clientが提供する主な機能について説明しました。ADF Faces Rich Clientのその他の機能やデモは 製品情報ページを参照してください。 次回は、ADF Faces Rich Clientを使用して作成されたアプリケーションの実行をとおして、ADF Faces Rich Clientが提供するコンポーネントを体感していただく予定です。

▲ ページTOPに戻る

智野 潤子 (ちの じゅんこ)
日本オラクルで主に開発ツール/フレームワーク製品を担当しています。