| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11gリリース1 (11.1.1.7.0) B52029-07 |
|
前 |
次 |
この章では、カスタムADF Facesリッチ・クライアント・コンポーネントの作成方法を説明します。
この章では、次の項目について説明します。
ADF Facesコンポーネント・ライブラリには、ユーザー要件の大部分をカバーするUIコンポーネントの包括的なセットが用意されています。ただし、アプリケーションに固有のカスタム・リッチ・コンポーネントを作成する必要がある場合があります。カスタム・リッチ・コンポーネントによって、カスタム動作が可能になり、アプリケーションのニーズに最適なアクションを実行できます。
|
注意: カスタム標準JSFコンポーネントの作成については、多くの本、記事、WebサイトおよびJavaServer Facesの仕様で取り上げられているため、このガイドでは説明しません。この章では、ADF Facesコンポーネントの作成方法を説明します。 |
JSFテクノロジは、コンポーネントとその他のフレームワーク部分を自己登録できるように構築されています。コアJSFランタイムでは、Webアプリケーションの起動時にクラス・パスのすべてのJARファイルを検査することで、自己登録が行われます。/META-INF/faces-config.xmlファイルにJSFアーティファクトが含まれるすべてのJARファイルがロードされます。そのため、カスタムADF FacesコンポーネントをJARファイルにパッケージ化し、Webプロジェクトに簡単に追加できます。
各ADF Facesコンポーネントにはサーバー側コンポーネントがあり、クライアント側コンポーネントがある場合もあります。サーバーでは、JSPの場合、レンダー・キットによって、マークアップ言語とJavaScriptの複雑な組合せを調整するためのベースが提供されます。サーバー側フレームワークではカスタム・ライフサイクルも追加され、部分ページ・コンポーネント・レンダリングのAPIフックを利用できます。クライアントでは、ADF Facesにより、様々な重要なタスクを処理する構造化されたJavaScriptフレームワークが提供されます。それらのタスクには、部分ページ・レンダリングを使用した状態の同期化が含まれます。ADF Facesアーキテクチャの詳細は、第3章「ADF Facesアーキテクチャの使用」を参照してください。
ADF Facesコンポーネントは、Apache MyFaces Trinidadコンポーネント・ライブラリから導出されます。このため、カスタムADF Facesコンポーネントを作成するときに拡張するクラスの多くは、実際にはMyFaces Trinidadのクラスとなります。ADF Facesの履歴(その発展を含む)の詳細は、第1章「ADF Facesリッチ・クライアントの概要」を参照してください。
JSPコンポーネントとJSFコンポーネントの間にApplicationクラスがあります。タグ・ライブラリでは、applicationオブジェクトに対してファクトリ・メソッドが使用され、componentTypeと呼ばれるニーモニックを使用して具体的なコンポーネント・インスタンスがインスタンス化されます。
コンポーネントでは独自のマークアップをレンダリングできますが、それがベスト・プラクティスであるとは考えられていません。プレゼンテーションのレンダリングの方法に焦点を当てたレンダー・キットを定義する方法をお薦めします。コンポーネントは、レンダー・キットに対してファクトリ・メソッドを使用して、特定のコンポーネントに関連付けられているレンダラを取得します。コンポーネントがFaceletsを使用するアプリケーションで消費される場合、コンポーネント・ハンドラによって、コンポーネントが作成されます。
作成するすべてのカスタム・コンポーネントでは、機能面に加え、その他のADF Facesコンポーネントで正しく表示されるようにするために、ADF Facesスキンを使用する必要があります。スキンを使用するには、コンポーネントのスキニング・キーとプロパティを作成して登録する必要があります。この章では、カスタム・コンポーネントのスキンの作成方法および登録方法のみ説明します。一般的なスキンの使用方法および作成方法の詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
|
ヒント: ADF Facesコンポーネントを使用するには、 |
ADF Facesコンポーネントは、クライアント側リソースとサーバー側リソースの両方で構成されています。クライアント側には、クライアント・コンポーネント、コンポーネント・ピア(コンポーネント・プレゼンタ)、およびクライアント・コンポーネントに関連付けられているすべてのイベントがあります。
サーバー側には、サーバー・コンポーネント、サーバー・コンポーネント・イベントおよびイベント・リスナーがあります。また、コンポーネント・レンダラ、コンポーネントJSPタグ、コンポジット・リソース・ローダー、JavaScriptリソース・ローダーおよびリソース・バンドルもあります。
コンポーネントには、いくつかの構成ファイルとサポート・ファイルもあります。これらのクラス、JavaScriptおよび構成ファイルは、JARファイルにまとめてパッケージ化されているため、ライブラリとしてアプリケーションにインポートして、他のアプリケーションと同様に使用できます。
JDeveloperを使用して、カスタム・コンポーネントを開発するアプリケーション・ワークスペースおよびプロジェクトを設定できます。ワークスペースおよびプロジェクトを作成したら、カスタム・コンポーネントを構成する必須のクラス、JavaScriptファイルおよび構成ファイルに対して、基礎作業ファイルを追加します。開発時には、カスタム・コンポーネントに固有のそれらのファイルをそれぞれ編集し、ファイルにコードを追加します。
開発プロセスは次のとおりです。
開発の環境として、アプリケーション、ワークスペースおよびプロジェクトを作成します。これには、ライブラリ依存性の追加、XMLスキーマの登録が含まれます。コンポーネントは、そのコンポーネントを使用する予定があるアプリケーションには作成しないでください。
JARファイルにコンポーネントをパッケージ化するためのデプロイメント・プロファイルを作成します。
次の基礎構成ファイルとサポート・ファイルを作成します。
faces-config.xml: コンポーネントで使用される多くのアーティファクトを登録するために使用します。
trinidad-skins.xml: コンポーネントが使用するスキンを登録するために使用します。
Cascading Style Sheet: スキンのスタイル・プロパティを定義するために使用します。
レンダー・キット・リソース・ローダー: コンポーネントで必要とされるすべてのリソースをアプリケーションでロードできるようにします。
adf-js-features.xml: コンポーネントをJavaScriptパーティションの一部にできます。パーティションの詳細は、1.2.1.2項「JavaScriptライブラリのパーティション化」を参照してください。
JSPタグ・ライブラリ・ディスクリプタ(TLD)(JSPの場合): JSFページで使用するタグを定義します。
コンポーネント・ハンドラ(Faceletsの場合): コンポーネントのレンダリングに使用されるハンドラを定義します。
次のクライアント側JavaScriptファイルを作成します。
クライアント・コンポーネント: クライアントのコンポーネントとその属性を表します。
クライアント・ピア: コンポーネントのDocument Object Model(DOM)を管理します。
クライアント・イベント: クライアントでの処理を起動し、オプションでサーバーに処理を伝播します。
次のサーバー側Javaファイルを作成します。
サーバー・コンポーネント・クラス: サーバーのコンポーネントを表します。
サーバー・イベント・リスナー・クラス: イベントをリスニングして、応答します。
サーバー・イベント・クラス: サーバーのイベントを起動します。
サーバー・レンダラ・クラス: コンポーネントの表示を決定します。
リソース・バンドル・クラス: コンポーネントで使用されるテキスト文字列を定義します。
JavaScriptおよびJavaコードをテストおよびデバッグして、コンポーネントの開発をさらに進めます。JDeveloperデバッガを使用して、ブレークポイントを設定し、コードを段階的に開発できます。Javaロギング機能を使用して、コンポーネントの実行をトレースすることもできます。
JARファイルにコンポーネントをデプロイします。
コンポーネントをアプリケーションに追加してテストします。
表32-1には、カスタム・コンポーネントのクライアント側およびサーバー側コンポーネントのアーティファクトがリストされています。この表には構成ファイルおよびサポート・ファイルは含まれていません。
表32-1 カスタム・コンポーネントのクライアント側およびサーバー側アーティファクト
| クライアント | サーバー |
|---|---|
|
コンポーネント・クラス:
拡張:
|
コンポーネント:
拡張:
|
|
イベント:
拡張:
|
イベント:
拡張:
|
|
イベント・リスナー:
拡張:
|
|
|
コンポーネント・ピア:
拡張:
|
|
|
コンポーネント・レンダラ:
拡張:
|
|
|
コンポーネントJSPタグ(JSPのみ):
拡張:
|
|
|
コンポジット・リソース・ローダー:
拡張:
|
|
|
JavaScriptリソース・ローダー:
拡張:
|
|
|
リソース・バンドル:
拡張:
|
カスタム・コンポーネントの作成について説明するために、手順全体でtagPaneという名前のカスタム・コンポーネントを例として使用します。tagPaneカスタム・コンポーネントは、再利用の目的で作成されます。tagPaneのプレゼンテーションは、既存の様々なコンポーネントを使用して実装可能ですが、単一のカスタム・コンポーネントを作成するとページ開発者の作業が単純化されます。この場合、コンポーネント開発者とページ開発者間の生産性においてトレードオフが生じることがあります。この特定のビューを複数回作成する必要がある場合、開発チームはコード行を減らし、ビジネス・プロセスの自動化タスクを単純化することで、コストを削減できます。
tagPaneコンポーネントは、ファイル・セットに対する一連のタグとその出現の重み付けを表示します。最も頻繁に使用されるタグは最大フォント・サイズで表示され、最も使用されないタグは最小フォント・サイズで表示されます。各タグはイベントをトリガーするリンクでもあり、トリガーされたイベントはサーバーに伝播されます。サーバーでは、そのタグを含むすべてのファイルが表に表示されます。図32-1に、tagPaneコンポーネントを示します。
tagPaneコンポーネントは、Java Mapコレクションのタグのコレクションを受け取ります。マップのキーはタグ名です。値はタグに割り当てられた重みです。重みはタグの出現回数であり、多くの場合、タグに関連付けられているファイル数です。タグ名はリンクのボディ・テキストに表示され、名前の表示に使用されるフォント・サイズが重みを表します。各タグのフォント・サイズは、ファイル・セット内のすべてのタグに割り当てられている重みの最大と最小に基づき、最大フォント・サイズと最小フォント・サイズ内で相対的に計算されます。これらの機能を実行するには、tagPaneカスタム・コンポーネントにクライアント側とサーバー側の両方の動作を設定する必要があります。
サーバー側では、コンポーネントはHTMLハイパーリンクをレンダリングすることでタグのマップを表示します。基本的なマークアップ・レンダリングはサーバー側で実行されます。コンポーネントには、ユーザーによるリンクのクリックを処理し、関連ファイルを表示するためのカスタム・イベントを定義します。これらのサーバー側の動作は、値式およびメソッド式を使用して定義します。
たとえば、tagPaneコンポーネントには次のものが含まれます。
タグのMap<String, Number>コレクションを設定するtagプロパティ。
タグのリンクをクリックしたときにサーバーで起動されるtagSelectionListenerメソッド・バインディング・イベント。
重みの降順で左から右に一連のタグを表示する、またはアルファベットの昇順にタグのリンクを表示するためのorderByプロパティ。
各タグをその重み(出現回数)に比例したフォント・サイズで表示するために、フォント・サイズはインライン・スタイルを使用して制御されます。ただし、各タグとコンポーネントのルート・マークアップ・ノードもスタイル・クラスを使用します。
例32-1に、tagPaneコンポーネントのJSFページでの使用方法を示します。
例32-1 JSFページのtagPaneカスタム・コンポーネント・タグ
<acme:tagPane id="tagPane" tags="#{explorer.navigatorManager.tagNavigator.tags}"
tagSelectListener="#{explorer.navigatorManager.tagNavigator.onTagSelect}"
orderBy="alpha"
partialTriggers="tagCountLabel"/>
tagPaneコンポーネントは、他のADF Facesコンポーネントとともに使用される必要があるため、同じスキンを使用する必要があります。そのため、すべてのスタイル設定は、Cascading Style Sheet(CSS)および対応するスキン・セレクタを使用して実現されます。たとえば、tagPaneコンポーネントでは、ルート要素を指定し、リンクのコンテナのスタイルおよびハイパーリンクの表示方法を定義するために、スキン・セレクタが必要です。例32-2に、tagPaneコンポーネントのCSSファイル内のスタイル・セレクタのサンプル・セットを示します。
例32-2 サンプル・カスタム・コンポーネントのCSSスタイル・セレクタ
acme|tagPane - root element acme|tagPane::content - container for the links acme|tagPane::tag - tag hyperlink
サーバー側のカスタム・コンポーネントに必要なHTMLコードを指定する必要がある場合もあります。
例32-3に、tagPaneコンポーネントで使用されるHTMLサーバー側のコードを示します。
例32-3 サーバー側のHTMLコード
<div class=" acme|tagPane">
<span class=" acme|tagPane::content ">
<a class=" acme|tagPane::tag" href="#" style="font-size:9px;">Tag1</a>
<a class=" acme|tagPane::tag" href="#" style="font-size:10px;">Tag2</a>
</span>
</div>
クライアント側のコンポーネントには、クライアント側の動作を定義する、対応するJavaScriptコンポーネントとコンポーネント・ピアが必要です。DOMとのすべての対話は、ピアを使用して行われます(詳細は、第3章「ADF Facesアーキテクチャの使用」を参照してください)。コンポーネント・ピアでは、タグ名を囲むハイパーリンクのクリックがリスニングされます。リンクがクリックされると、ピアによってクライアント側でカスタム・イベントが発生し、そのイベントがサーバー側に伝播されて、追加処理されます。
表32-2には、tagPaneコンポーネントのクライアント側とサーバー側のアーティファクトがリストされています。表32-1のネーミング規則を参照すると、component_packageはcom.adfdemo.acme、prefixはAcmeです。
表32-2 tagPaneカスタム・コンポーネントのクライアント側およびサーバー側アーティファクト
| クライアント | サーバー |
|---|---|
|
コンポーネント:
拡張:
|
コンポーネント
拡張:
|
|
イベント:
拡張:
|
イベント:
拡張:
|
|
イベント・リスナー:
拡張:
|
|
|
コンポーネント・ピア:
拡張:
|
|
|
コンポーネント・レンダラ:
拡張:
|
|
|
コンポーネントJSPタグ:
拡張:
|
|
|
コンポジット・リソース・ローダー:
拡張:
|
|
|
JavaScriptリソース・ローダー:
拡張:
|
|
|
リソース・バンドル:
拡張:
|
JDeveloperを使用して、カスタム・コンポーネントを開発するためのアプリケーションおよびプロジェクトを設定します。スケルトン・プロジェクトを作成すると、JARファイルにコンポーネントをパッケージ化するためのデプロイメント・プロファイルを追加できます。
開発の初期段階では、開発を可能にするための基礎構成ファイルとサポート・ファイルを作成します。これらのファイルはプロセス中に追加および編集することもできます。次の構成ファイルを作成します。
META-INF/faces-config.xml: すべてのJSFベースのアプリケーションに必要な構成ファイルです。最終的にコンポーネントがインポートされるアプリケーションで、コンポーネントがfaces-config.xmlファイルを使用する間は、開発でこの構成ファイルが必要になります。
META-INF/trinidad-skins.xml: コンポーネントが使用できるスキンの構成情報です。新規コンポーネントを含めるために、ADF Facesによって提供される簡単なスキンを拡張します。
META-INF/package_directory/styles/skinName.css: コンポーネントをスキンするために必要なスタイル・メタデータです。
META-INF/servlets/resources/name.resources: コンポーネントJARファイルからスタイルシートとイメージをロードするレンダー・キット・リソース・ローダーです。リソース・ローダーは、Webアプリケーションのリソース・サーブレットによって集約され、リソース・サーブレットを構成するために使用されます。サーブレットでリソース・ローダー・ファイルを見つけるには、ファイルをMETA-INF/servlets/resourcesディレクトリに配置する必要があります。
META-INF/adf-js-features.xml: 機能を定義するために使用する構成ファイルです。通常、定義には、コンポーネント名またはコンポーネントが提供する機能の説明、およびクライアント側のコンポーネントを実装するために使用するファイルが含まれます。
META-INF/prefix_name.tld(JSPの場合): コンポーネントのタグ定義ライブラリです。使用WebアプリケーションでJSPを使用している場合、カスタム・コンポーネントに定義済のTLDが必要です。TLDファイルは、faces-config.xmlファイルおよびtrinidad-skins.xmlファイルとともにMETA-INFフォルダに配置されます。
META-INF/prefix_name.taglib.xml(Faceletsの場合): 使用アプリケーションでFaceletsを使用する場合のコンポーネントのタグ定義ライブラリです。このファイルは、コンポーネントのハンドラを定義します。
たとえば、tagPaneコンポーネントには次の構成ファイルが必要です。
META-INF/faces-config.xml
META-INF/trinidad-skins.xml
META-INF/acme/styles/acme-simple-desktop.css
META-INF/servlets/resources/acme.resources
META-INF/acme.tld
META-INF/acme.taglib.xml
META-INF/adf-js-features.xml
ファイルをJDeveloperで設定した後、これらにコンテンツを追加します。次に、クライアント側のファイルとサーバー側のファイルを作成します。詳細は、32.3項「クライアント側の開発」および32.4項「サーバー側の開発」を参照してください。
この章では、ユーザーがJDeveloperの使用経験があり、アプリケーションの作成およびデプロイに伴う手順に精通していると仮定しています。JDeveloperを使用したアプリケーションの作成の詳細は、第2章「ADF Faces概説」を参照してください。デプロイメントの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』の「Fusion Webアプリケーションのデプロイ」の章を参照してください。
JDeveloperでカスタム・コンポーネントの開発環境を設定する手順:
コンポーネントの開発コンテナとして機能するアプリケーションを作成します。JDeveloperを使用して、ワークスペースおよびプロジェクトを作成します。アプリケーションの作成手順については、2.2項「アプリケーション・ワークスペースの作成」を参照してください。アプリケーションのテンプレートを選択する場合、汎用アプリケーションのテンプレートを選択します。
|
注意: 他のアプリケーション・テンプレートを選択したり、他のテクノロジをアプリケーションに追加したりしないでください。カスタム・コンポーネントはJARファイルにパッケージ化されるため、Webアプリケーションに固有のテンプレートを使用するときまたはWebテクノロジを追加するときに、デフォルトでJDeveloperによって作成される |
新しいデプロイメント・プロファイルを作成し、プロジェクトをJARファイルとしてデプロイできるようにします。
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で、「デプロイメント・プロファイル」→「ADFライブラリのJARファイル」を選択して、「OK」をクリックします。
「デプロイメント・プロファイルの作成」ダイアログで、「デプロイメント・プロファイル名」に名前を入力します。たとえば、tagPaneコンポーネントの場合は、adf-richclient-demo-acmeを使用します。
「JARデプロイメント・プロファイルのプロパティの編集」ダイアログで、「OK」をクリックします。
「プロジェクト・プロパティ」ダイアログで、ライブラリ依存性を追加します。
左ペインで「ライブラリとクラスパス」を選択します。
「ライブラリの追加」をクリックします。
「ライブラリの追加」ダイアログで、ADF Faces Runtime 11、Facelets Runtime(Faceletsを使用する場合)、JSF 1.2、JSP Runtimeを選択して、「OK」をクリックします。
「OK」をクリックして、「プロジェクト・プロパティ」ダイアログを閉じます。
XMLスキーマを登録します。
カスタム・コンポーネントには、複数のXML構成ファイルが必要です。JDeveloperを使用して、それらの構成ファイルに関連付けられているXMLスキーマを登録できます。faces-config.xml、trinidad-skins.xmlおよびtrinidad-config.xmlの3つの構成ファイルのスキーマを追加する必要があります。これらのスキーマを事前登録することにより、マークアップ構造の詳細を理解できなくても、テンプレートXML構成ファイルを作成できます。スキーマの名前と場所は、JDeveloperのベース・インストールによって想定されます。
「ツール」→「プリファレンス」を選択します。「設定」ダイアログの左ペインで「XMLスキーマ」を選択し、「追加」をクリックします。
表32-3に示すように、「スキーマの追加」ダイアログで「参照」をクリックして、JDeveloperビルドに含まれているXMLスキーマに移動します。
|
注意: 「スキーマの追加」ダイアログでは、「拡張子」が |
表32-3 XMLスキーマの場所
| XML構成ファイル | スキーマの場所 |
|---|---|
|
|
|
|
|
|
|
|
|
|
|
|
カスタム・コンポーネントは使用アプリケーションのfaces-config.xmlファイルに登録されますが、開発中は、ワークスペースにfaces-config.xmlファイルが必要です。
|
注意: JDeveloperの宣言ウィザードやダイアログを使用して |
カスタム・コンポーネントのfaces-config.xmlファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」の「一般」を展開し、「XML」→「XMLスキーマからXMLドキュメント」の順に選択し、「OK」をクリックします。
XMLスキーマからXMLを作成ダイアログで、次のように設定します。
XMLファイル: faces-config.xmlと入力します。
ディレクトリ: ディレクトリ・エントリの最後に\src\META-INFを追加します。
「登録済のスキーマを使用」を選択して、「次へ」をクリックします。
次の内容を入力します。
ターゲット・ネームスペース: http://java.sun.com/xml/ns/javaeeを選択します。
ルート要素: faces-configを選択します。
他のフィールドはデフォルトのままにして、「終了」をクリックします。
新しいファイルがXMLエディタで自動的に開きます。
ファイルの最初の行の後に次のスキーマ情報を追加します。
<?xml version="1.0" encoding="US-ASCII"?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee">
スキーマを追加することで、より多くのWYSIWYGツール・サポートを得られます。
MyFaces Trinidadスキン・ファイルを追加して、コンポーネントのスタイルを定義するために使用するコンポーネントのCSSファイルを登録します。
カスタム・コンポーネントのtrinidad-skins.xmlファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「XML」を選択します。
「XMLスキーマからXMLドキュメント」を選択し、「OK」をクリックします。
XMLスキーマからXMLを作成ダイアログで、次のように設定します。
XMLファイル: trinidad-skins.xmlと入力します。
ディレクトリ: ディレクトリ・エントリの最後に\src\META-INFを追加します。
「登録済のスキーマを使用」を選択して、「次へ」をクリックします。
次の内容を入力します。
ターゲット・ネームスペース: http://myfaces.apache.org/trinidad/skinを選択します。
ルート要素: skinsを選択します。
「終了」をクリックします。新しいファイルがXMLエディタで自動的に開きます。
Cascading Style Sheetを追加して、コンポーネントのスタイルを定義します。
カスタム・コンポーネントのCascading Style Sheetを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「ファイル」を選択して「OK」をクリックします。
「ファイルの作成」ダイアログで、次のように設定します。
ファイル名、たとえばacme-simple-desktop.cssを入力します。
\src\META-INF\component_prefix\stylesをディレクトリ・エントリの最後に追加します。component_prefixは、コンポーネント・ライブラリで使用される接頭辞です。たとえば、tagPaneコンポーネントの場合、acmeが接頭辞になるため、追加する文字列は\META-INF\acme\stylesになります。
空のファイルを作成し、カスタム・リソース・ローダーへの完全修飾クラスパスを追加します。
カスタム・コンポーネントのリソース・ローダーを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「ファイル」を選択して「OK」をクリックします。
「ファイルの作成」ダイアログで、次のように設定します。
「ファイル名」にcomponent_prefix.resourcesと入力します。component_prefixは、コンポーネント・ライブラリで使用される接頭辞です。たとえば、tagPaneコンポーネントの場合、acmeが接頭辞になるため、入力する文字列はacme.resourcesになります。
ディレクトリ・エントリの最後に\src\META-INF\sevlets\resources\を追加します。
JSFページを使用するにはJSP TLDファイルが必要です。
カスタム・コンポーネントのJavaServer Pages TLDファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を開き、「JSP」を選択します。
「JSPタグ・ライブラリ」を選択し、「OK」をクリックします。
「JavaServer Pageタグ・ライブラリ作成」ダイアログで「デプロイ可能」を選択し、「次へ」をクリックします。
次の内容を入力します。
タグ・ライブラリ・ディスクリプタのバージョン: 2.1を選択します。
短縮名: 名前を入力します。たとえば、tagPaneコンポーネントの場合、acmeと入力します。
タグ・ライブラリURI: タグ・ライブラリのURIを入力します。たとえば、tagPaneコンポーネントの場合、http://oracle.adfdemo.acmeと入力します。
「次へ」をクリックし、オプションで追加のタグ・ライブラリ情報を入力して、「終了」をクリックします。
機能ファイルを追加して、カスタム・コンポーネントに関連付けられているJavaScriptファイルを定義します。クライアント・コンポーネント、クライアント・ピアおよびクライアント・イベントのファイルが含まれます。
カスタム・コンポーネントのadf-js-features.xmlファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「XML」を選択します。
右ペインで「XMLスキーマからXMLドキュメント」を選択し、「OK」をクリックします。
XMLスキーマからXMLを作成ダイアログで、次のように設定します。
XMLファイル: adf-js-features.xmlと入力します。
ディレクトリ: ディレクトリ・エントリの最後に\src\META-INFを追加します。
「登録済のスキーマを使用」を選択して、「次へ」をクリックします。
次のように設定します。
ターゲット・ネームスペース: http://xmlns.oracle.com/adf/faces/featureを選択します。
ルート要素: featuresを選択します。
「終了」をクリックします。新しいファイルがXMLエディタで自動的に開きます。
使用アプリケーションでFaceletsを使用する場合、コンポーネントにハンドラを定義する必要があります。
Faceletsタグ・ライブラリ・ファイルの作成手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「XML」を選択します。
右ペインで「XMLドキュメント」を選択し、「OK」をクリックします。
「XMLファイルの作成」ダイアログで、次を入力します。
ファイル名: prefix_name.taglib.xmlと入力します。
ディレクトリ: ディレクトリ・エントリの最後に\src\META-INFを追加します。
例32-4に示すコードをコピーして貼り付けます。
例32-4 Faceletsタグ・ライブラリ構成ファイルのコード
<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE facelet-taglib
PUBLIC "-//Sun Microsystems, Inc.//DTD Facelet Taglib 1.0//EN" "http://java.sun.com/dtd/facelet-taglib_1_0.dtd">
<facelet-taglib xmlns="http://java.sun.com/JSF/Facelet">
<namespace>http://xmlns.oracle.adfdemo/acme</namespace>
<tag>
<tag-name>tagPane</tag-name>
<handler-class>
oracle.adfinternal.view.faces.facelets.rich.RichComponentHandler
</handler-class>
</tag>
</facelet-taglib>
太字のネームスペースとタグ名のコードを、使用するアプリケーションに適したコードで置き換えます。
JDeveloperワークスペースおよび構成ファイルを作成すると、クライアント側のJavaScriptファイルを作成およびコーディングできます。クライアント側の開発が終了したら、32.4項「サーバー側の開発」で説明されているように、サーバー側のファイルを作成します。
|
ベスト・プラクティス: JavaScriptライブラリにはネームスペースがないため、カスタム・コンポーネントのすべてのJavaScriptオブジェクト名は、同じ接頭辞を使用して作成する必要があります。サーバー側のJavaパッケージ名では名前の競合が回避されるため、サーバー側では同じ接頭辞を使用する必要はありません。たとえば、 |
クライアント・コンポーネントは、対応するDOM要素内で定義されていないプロパティの状態を保持します。これらのプロパティは、clientIdを使用して関連するDOM要素にバインドされます。clientIdによって、ページを表すコンポーネント・ツリーにサーバー側コンポーネントが一意に定義されます。DOM要素では、Id属性内にclientIdが保持されます。
|
注意: ベスト・プラクティスおよび一貫性の点から、各JavaScriptオブジェクトはそれぞれの独自のソース・ファイルに配置してください。 |
クライアント側コンポーネントの開発では、コンポーネント、ピアおよびコンポーネント・イベントのJavaScriptファイルを作成する必要があります。
クライアント・コンポーネントに加えて、クライアント側のイベントも定義する必要があります。tagPaneコンポーネントのクライアント側のイベントは、ユーザーが3つのファイル・タイプのいずれかをクリックすると起動して、サーバーに伝播されます。サーバーに渡されたクライアント・イベントは、ターゲット・サーバー側のコンポーネントが適切なアクションを実行できるようにキューイングされます。
さらに、カスタム・コンポーネントにはクライアント・ピアが必要です。ピアはコンポーネント・プレゼンタです。ピアは、クライアント・コンポーネントと関連するDOM要素間のリンクとして機能します。クライアント・ピアによってクライアントの動作が追加されます。ピアは、登録メソッドを使用してコンポーネントにバインドする必要があります。
クライアント・コンポーネントに関連付けられているピアは、コンポーネントのclientIdを使用してDOM要素にバインドされます。ピアには、ステートフルとステートレスの2つのタイプがあります。
一部の複雑なクライアント・コンポーネントでは、ピアで状態を保持する必要があるため、ステートフル・ピアを使用する必要があります。このタイプのピアは、常にDOM要素にバインドされます。ステートフル・ピアよりも、ステートレス・ピアの方が一般的です。
ステートレス・ピアでは状態は保持されないので、1つのピアを複数のコンポーネントにバインドできます。クライアントのフットプリントが削減されるため、ステートレス・ピアはパフォーマンスの点では最適なオプションです。このタイプのピアでは、コンポーネントへのコンテンツの遅延配信が実行されます。
ピアでは、DOMイベントを動的に登録およびリスニングすることで、コンポーネントに動作が追加されます。概念的には、ピアの機能はマネージドBeanの役割と似ています。ただし、サーバー側コンポーネントはビュー・モデル(#{backingbean.callback})にバインドされますが、クライアント・コンポーネントはELを使用してピアにはバインドされません。ピアは、InitSubclass (AdfRichUIPeer.addComponentEventHandlers("click"))コールバック・メソッドでクライアント・コンポーネント・イベントに登録されます。コールバックでは、ネーミング規則(<Peer>.prototype.HandleComponent<Event>)を使用することが前提となっています。ピアでは、サーバー側コンポーネントがマネージドBeanへのELバインディングを使用してリンクを処理する、DOMイベント・コールバックが管理されます。クライアント側アーキテクチャ(ピアを含む)の詳細は、3.1項「ADF Facesアーキテクチャの使用の概要」を参照してください。
次の項では、カスタム・コンポーネント開発テンプレート環境がすでに設定されていると仮定しています。この開発環境には、アプリケーション・ワークスペース、プロジェクトおよびデプロイメント・プロファイルの設定、およびスキーマの登録が含まれます。まだ設定していない場合は、32.2項「ワークスペースと基礎ファイルの設定」を参照してください。
JDeveloperを使用して、コンポーネントのJavaScriptファイルを作成します。JavaScriptファイルに、コンポーネントのコンポーネント・タイプを定義します。
コンポーネントのJavaScriptファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」をクリックします。
「新規ギャラリ」で「Web層」を開き、「HTML」を選択します。
「JavaScriptファイル」を選択し、「OK」をクリックします。
「JavaScriptファイルの作成」ダイアログで、次のように設定します。
ファイル名: クライアント側コンポーネントの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeTagPane.jsと入力します。
|
ヒント: ネーミングの競合を回避するために、名前をコンポーネントの接頭辞で開始します。 |
ディレクトリ: srcディレクトリの下のサブディレクトリに、コンポーネントのディレクトリ・パスを入力します。たとえば、tagPaneコンポーネントの場合、adfrichclient-demo-acme\src\oracle\adfdemo\acme\js\componentと入力します。
エディタでJavaScriptファイルを開き、コンポーネント・コードを追加して、コンポーネント・タイプを定義します。例32-5に、tagPaneコンポーネントで使用されるコードを示します。
JDeveloperを使用して、イベントのJavaScriptファイルを作成します。イベントが起動されたとき(マウス・クリックなど)に必要な機能を実行するためのコードをJavaScriptに追加します。
イベントのJavaScriptを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を開き、「HTML」を選択します。
「JavaScriptファイル」を選択し、「OK」をクリックします。
「JavaScriptファイルの作成」ダイアログで、次のように設定します。
ファイル名: クライアント側イベントの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeTagSelectEvent.jsと入力します。
|
ヒント: ネーミングの競合を回避するために、名前をコンポーネントの接頭辞で開始します。 |
ディレクトリ: srcディレクトリの下のサブディレクトリに、イベントのディレクトリ・パスを入力します。たとえば、tagPaneコンポーネントの場合、adf-richclient-demo-acme\src\oracle\adfdemo\acme\js\eventと入力します。
エディタでJavaScriptファイルを開き、イベント・コードを追加します。例32-6に、tagPaneコンポーネントに追加されるイベント・コードを示します。
例32-6 tagPaneイベントのJavaScript
/**
* Fires a select type event to the server for the source component
* when a tag is clicked.
*/
function AcmeTagSelectEvent(source, tag)
{
AdfAssert.assertPrototype(source, AdfUIComponent);
AdfAssert.assertString(tag); this.Init(source, tag);
}
// make AcmeTagSelectEvent a subclass of AdfComponentEvent
AdfObject.createSubclass(AcmeTagSelectEvent, AdfComponentEvent);
/**
* The event type
*/
AcmeTagSelectEvent.SELECT_EVENT_TYPE = "tagSelect";
/**
* Event Object constructor
*/
AcmeTagSelectEvent.prototype.Init = function(source, tag)
{
AdfAssert.assertPrototype(source, AdfUIComponent);
AdfAssert.assertString(tag);
this._tag = tag;
AcmeTagSelectEvent.superclass.Init.call(this, source, AcmeTagSelectEvent.SELECT_EVENT_TYPE);}
/**
* Indicates this event should be sent to the server
*/
AcmeTagSelectEvent.prototype.propagatesToServer = function()
{
return true;
}
/**
* Override of AddMarshalledProperties to add parameters * sent server side.
*/
AcmeTagSelectEvent.prototype.AddMarshalledProperties = function( properties)
{
properties.tag = this._tag;
}
/**
* Convenient method for queue a AcmeTagSelectEvent.
*/
AcmeTagSelectEvent.queue = function(component, tag)
{
AdfAssert.assertPrototype(component, AdfUIComponent);
AdfAssert.assertString(tag);
AdfLogger.LOGGER.logMessage(AdfLogger.FINEST, "AcmeTagSelectEvent.queue(component, tag)");
new AcmeTagSelectEvent(component, tag).queue(true);
}
/**
* returns the selected file type
*/
AcmeTagSelectEvent.prototype.getTag = function()
{
return this._tag;}
/**
* returns a debug string
*/
AcmeTagSelectEvent.prototype.toDebugString = function()
{
var superString = AcmeTagSelectEvent.superclass.toDebugString.call(this);
return superString.substring(0, superString.length - 1)
+ ", tag="
+ this._tag + "]";
}
/*
*
* Make sure that this event only invokes immediate validators
* on the client.
*/
AcmeTagSelectEvent.prototype.isImmediate = function()
{
return true;
}
JDeveloperを使用して、ピアのJavaScriptファイルを作成します。コードを追加してピアを登録し、コンポーネントにバインドします。
ピアのJavaScriptファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を開き、「HTML」を選択します。
「JavaScriptファイル」を選択し、「OK」をクリックします。
「JavaScriptファイルの作成」ダイアログで、次のように設定します。
ファイル名: クライアント側ピアの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeTagPanePeer.jsと入力します。
|
ヒント: ネーミングの競合を回避するために、名前をコンポーネントの接頭辞で開始します。 |
ディレクトリ: srcディレクトリの下のサブディレクトリに、イベントのディレクトリ・パスを入力します。たとえば、tagPaneコンポーネントの場合、adf-richclient-demo-acme\src\oracle\adfdemo\acme\js\componentと入力します。
エディタでJavaScriptファイルを開き、ピアのコードを追加します。このコードで、ピアを作成し、DOMに関するイベント処理を追加し、ピアをコンポーネントに登録する必要があります。例32-7に、tagPaneコンポーネントに追加されるコードを示します。
例32-7 tagPaneのJavaScriptピア
AdfRichUIPeer.createPeerClass(AdfRichUIPeer, "AcmeTagPanePeer", true);
AcmeTagPanePeer.InitSubclass = function()
{
AdfLogger.LOGGER.logMessage(AdfLogger.FINEST,
"AcmeTagPanePeer.InitSubclass()");
AdfRichUIPeer.addComponentEventHandlers(this,
AdfUIInputEvent.CLICK_EVENT_TYPE);
}
AcmeTagPanePeer.prototype.HandleComponentClick = function(componentEvent)
{
AdfLogger.LOGGER.logMessage(AdfLogger.FINEST, "AcmeTagPanePeer.HandleComponentClick(componentEvent)");
// if the left mouse button was pressed
if (componentEvent.isLeftButtonPressed())
{
// find component for the peer
var component = this.getComponent();
AdfAssert.assertPrototype(component, AcmeTagPane);
// find the native dom element for the click event
var target = componentEvent.getNativeEventTarget();
if (target && target.tagName == "A")
{
AdfLogger.LOGGER.logMessage(AdfLogger.FINEST, "File type element (A)
found: " + componentEvent.toString());
var tag = target.firstChild.nodeValue;
AdfAssert.assertString(tag);
AdfLogger.LOGGER.logMessage(AdfLogger.FINEST, "tag :" + tag);
// fire a select event
AcmeTagSelectEvent.queue(component, tag);
//cancel the native dom onclick to prevent browser actions based on the
//'#' hyperlink. The event is of type AdfIEUIInputEvent. This event
//will cancle the native dom event by calling
//AdfAgent.AGENT.preventDefault(Event)
componentEvent.cancel();
}
// event has dom node
}
}
// Register the peer with the component. This bit of script must
// be invoked after the AcmeTagPane and AcmeTagSelectEvent objects
// are created. This is enforced by the ordering of the script files
// in the
oracle.asfdemo.acme.faces.resource.AcmeResourceLoader.
AcmeScriptsResourceLoader.AdfPage.PAGE.getLookAndFeel()
.registerPeerConstructor("oracle.adfdemo.acme.TagPane",
"AcmeTagPanePeer");
これで、コンポーネントのすべてのJavaScriptファイルを作成しました。作成したコンポーネントをadf-js-features.xmlファイルに追加できます。A.9.1項「JavaScript機能の作成方法」で説明する手順に従う場合、XMLファイルをすでに作成しているため、その作成手順は省略されます。例32-8に、tagPaneコンポーネントに使用されるadf-js-features.xmlファイルを示します。
例32-8 tagPaneコンポーネントのadf-js-features.xmlファイル
<?xml version="1.0" encoding="UTF-8" ?>
<features xmlns="http://xmlns.oracle.com/adf/faces/feature">
<feature>
<feature-name>AcmeTagPane</feature-name>
<feature-class>
oracle/adfdemo/acme/js/component/AcmeTagPane.js
</feature-class>
<feature-class>
oracle/adfdemo/acme/js/event/AcmeTagSelectEvent.js
</feature-class>
<feature-class>
oracle/adfdemo/acme/js/component/AcmeTagPanePeer.js
</feature-class>
</feature>
</features>
サーバー側の開発には、次のものに対するJavaクラスの作成が含まれます。
イベント・リスナー: このクラスは、イベントをリスニングして、そのイベントを処理するための処理ロジックを起動します。
イベント: 関連付けられたリスナーでロジックを起動するためのイベントを作成します。
コンポーネント: このクラスは、コンポーネントの動作を定義するプロパティを保持します。
リソース・バンドル: このクラスは、コンポーネントのテキスト文字列を保持します。
レンダラ: このクラスは、クライアントでのコンポーネントの表示方法を決定します。
リソース・ローダー: このクラスは、スキニングに必要なイメージがコンポーネントに含まれている場合のみ必要です。
これらのクラスを作成したら、コンポーネント・クラスおよびレンダラ・クラスをfaces-config.xmlファイルに追加します。その後、32.2項「ワークスペースと基礎ファイルの設定」で開始した構成ファイルを完了させます。
ADF FacesイベントAPIには、イベントを処理するためのイベント・リスナー・インタフェースが必要です。カスタム・コンポーネントにはイベントに対する依存性があり、イベントにはイベント・リスナー・インタフェースに対する依存性があります。Javaのimport文に、これらの依存性を反映させる必要があります。コンポーネントのcomponentTypeも定義する必要があります。
EventListenerクラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaインタフェース」を選択し、「OK」をクリックします。
Javaインタフェース・ファイルの作成ダイアログで、次のように設定します。
名前: リスナーの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagSelectListenerと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.eventと入力します。
エディタでJavaファイルを開き、次の内容を追加します。
リスナーでjavax.faces.event.FacesListenerインタフェースを拡張します。
import文を追加して、FacesListenerクラス、およびイベントが依存するすべてのクラスをインポートします。
新規イベントを処理するメソッド・シグネチャを追加します。実際のイベントを作成していない場合でも、ここで入力しておけば、後で入力する必要がなくなります。
例32-9に、tagPaneイベント・リスナーのコードを示します。
例32-9 tagPaneイベント・リスナーのJavaコード
package oracle.adfdemo.acme.faces.event;
import javax.faces.event.AbortProcessingException;
import javax.faces.event.FacesListener;
public interface TagSelectListener
extends FacesListener
{
/**
* <p>Process the {@link TagSelectEvent}.</p>
* @param event fired on click of a tag link
* @throws AbortProcessingException error processing {@link TagSelectEvent}
*/
public void processTagSelect(TagSelectEvent event)
throws AbortProcessingException;
}
32.3.2項「イベントのJavaScriptファイルの作成方法」で作成したJavaScriptイベントに対応するサーバー側のイベントを作成する必要があります。サーバー側のJSFイベントは、リクエスト値の適用ライフサイクル・フェーズ中にコンポーネントによってキューに入れられます。イベントは、レスポンスのレンダリング・フェーズ以外のすべてのフェーズの後にUIViewRootクラスまで伝播されます。キューイングされたイベントは、関連付けられたコンポーネントにブロードキャストされます。
サーバー側のJavaコンポーネントでは、サーバー側のイベントを呼び出す必要があるため、最初にイベント・ソース・ファイルを作成して、コンパイル依存性を解決する必要があります。
サーバー側イベント・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: イベントの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagSelectEventと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.eventと入力します。
拡張: イベント・クラスで拡張するクラスの名前を入力します。この名前は通常、javax.faces.event.FacesEventです。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
例32-10に、イベント・クラスのコードを示します。
例32-10 tagPaneイベントのJavaコード
package oracle.adfdemo.acme.faces.event;
import javax.faces.component.UIComponent;
import javax.faces.event.FacesEvent;
import javax.faces.event.FacesListener;
public class TagSelectEvent
extends FacesEvent
{
/**
* <p>Tag selected on the client.</p>
*/
private String tag = null;
/**
* <p>Overloade constructor passing the <code>source</code>
* {@link oracle.adfdemo.acme.faces.component.TagPane} component and the
* selected <code>tag</code>.
* </p>
* @param source component firing the event
* @param tag selected tag link type
*/
public TagSelectEvent(UIComponent source,
String tag)
{
super(source);
this.tag = tag;
}
/**
* <p>Returns <code>true</code> if the <code>facesListener</code> is a
* {@link TagSelectListener}.</p>
*
* @param facesListener listener to be evaluated
* @return <code>true</code>
* if <code>facesListener</code> instancof {@link TagSelectListener}
*/
public boolean isAppropriateListener(FacesListener facesListener)
{
return (facesListener instanceof TagSelectListener);
}
/**
* <p>Delegates to the <code>processTagSelect</code>
* method of a <code>FacesListener</code>
* implementing the {@link TagSelectListener} interface.
*
* @param facesListener target listener realizing {@link TagSelectListener}
*/
public void processListener(FacesListener facesListener)
{
((TagSelectListener) facesListener).processTagSelect(this);
}
/**
* @return the tag that was selected triggering this event
*/
public String getTag()
{
return tag;
}
}
JSFコンポーネントは、プロパティの状態ホルダーであると言えます。それらのプロパティでは、レンダリングの動作、およびコンポーネントがユーザー・インタフェース・アクションにどのように応答するかを定義します。コンポーネント・クラスを開発する場合、必要なプロパティのタイプを識別する必要があります。また、MyFaces Trinidadフレームワークから拡張される基本コンポーネントも定義します。たとえば、tagPaneコンポーネントは、MyFaces TrinidadのUIXObjectを拡張します。
大部分のコンポーネントには、実装する必要があるプロパティが複数あります。ベース・クラスから継承されるプロパティもあれば、リッチ・クライアント・フレームワークに必須のプロパティもあります。他のプロパティはベスト・プラクティスであるため、必要となります。また、一部のプロパティは、カスタム・コンポーネントの機能に固有のものです。
たとえば、tagPaneコンポーネントには、表32-4に示されているプロパティがあります。
表32-4 tagPaneカスタム・コンポーネントのコンポーネント・プロパティ
| 元 | プロパティ | データ型 | 説明 |
|---|---|---|---|
|
継承 |
|
|
コンポーネントの識別子。 |
|
|
|
コンポーネント・レンダラとして登録されている論理識別子。 |
|
|
|
|
コンポーネントがレンダリングされているかどうかを判断するTrueまたはFalseのフラグ。 |
|
|
|
|
マネージドBeanにコンポーネント・インスタンスを格納するバインディング値式。 |
|
|
リッチ・クライアント・フレームワーク |
|
|
クライアント側コンポーネントが生成されるかどうかを判断するTrueまたはFalseのフラグ。 |
|
|
|
コンポーネントのクライアント・リスナーを登録するバインディング式。 |
|
|
|
|
コンポーネントのclient属性。この属性は、サーバー側のJSFコンポーネントとクライアント側の対応するコンポーネントの両方に追加されます。 |
|
|
ベスト・プラクティス: |
|
|
ルート・コンポーネントのclass属性に適用されるCSSスタイル。 |
|
|
|
コンポーネントのclass属性に追加されるCSSスタイル。 |
|
|
|
|
コンポーネントの可視性が戻されるかどうかを示すTrueまたはFalseのフラグ。visibleプロパティは、renderedプロパティとは異なります。visible属性は、コンポーネントのCSSルートのCSSスタイルに影響します。 |
|
|
|
|
部分的なページの更新をトリガーする必要があるコンポーネントのID。 |
|
|
tagPaneに固有 |
|
|
重み付けされたタグのマップ。キーによって、タグ名と値が数値で表されます。 |
|
|
|
タグがレンダリングされる順序。有効な列挙は、 |
|
|
|
|
|
ADF FacesおよびMyFaces Trinidadコンポーネント・ライブラリは、他のライブラリとは異なる定義がされます。JSFコンポーネントには、attributesと呼ばれるコレクションがあり、MAPインタフェースを介したコンポーネント・プロパティへのアクセスを提供します(JavaのシンプルなBean仕様を使用)。このコレクションは、コンポーネントのプロパティに対応しない値のペアも保持します。この概念は、属性の透過性と呼ばれます。JSFランタイム(MyFaces TrinidadおよびJSF参照実装の両方)では、JavaリフレクションAPIを使用してこの概念が実装されます。
My Faces Trinidadでは、JavaリフレクションAPIを使用しない独自の内部コレクションが定義されます。この違いは、ベース実装よりも効率的であることを意味します。MyFaces Trinidadのソリューションでは、コンポーネント・プロパティに関するより多くのメタデータが収集されます。このメタデータによって状態プロパティが宣言され、ベース・クラスによって、ベース・クラス内にStateHolderインタフェースを完全に実装できます。
My Faces Trinidadでは、org.apache.trinidad.component.UIXComponentクラスによってjavax.faces.component.UIComponentクラスが拡張され、その後に完全なコンポーネント階層が拡張されます。コード・メンテナンスを容易にするために、フレームワークには構成ファイルとテンプレートに基づいてコードを生成するストラテジが用意されています。
このコンポーネント・ストラテジは、開発の点におけるトレードオフとなります。プロパティを定義するには、より多くのコーディングが必要となりますが、コンポーネントごとにStateHolderインタフェースの2つのメソッド(saveState、restoreState)をコーディングする必要はありません。
|
注意: カスタム・コンポーネントを、ADF Facesの実装パッケージから拡張しないでください。これらの実装は固有のものであり、変更される可能性があります。 |
JDeveloperを使用して、コンポーネントのJavaファイルを作成します。プロパティ情報を保持するType Beanを作成し、各プロパティのPropertyKeyを定義します。次に、private属性のアクセッサを生成します。
コンポーネント・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaクラス」を選択します。「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: コンポーネントの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagPaneと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.componentと入力します。
拡張: コンポーネント・クラスで拡張するクラスの名前を入力します。たとえば、tagPaneコンポーネントの場合、org.apache.myfaces.trinidad.component.UIXObjectと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
ソース・エディタで、コンポーネント・プロパティ情報を含むType Beanを作成します。この静的クラス属性によって、スーパー・クラス内の同じ名前を持つ属性がシャドウされます。type属性は、コンポーネント・クラスごとに一度定義されます。Typeコンストラクタを介して、スーパー・クラスのType Beanに参照が渡され、プロパティ情報がコピーされます。たとえば、tagPaneクラスには次のコンストラクタが含まれます。
static public final FacesBean.Type TYPE = new FacesBean.Type(UIXObject.TYPE);
プロパティごとに、プロパティ状態へのアクセスに使用される静的PropertyKeyを定義します。TYPE参照を使用して、新規属性を登録します。クラス参照を使用して、プロパティ・タイプを指定します。コンポーネントのデータ型は、コンポーネント・プロパティと対応している必要があります。状態情報を指定できるようにするregisterKeyメソッドの別のオーバーロードもあります。デフォルトでは、プロパティはpersistentであるとみなされます。例32-11に、tagPaneコンポーネントのPropertyKeyメソッドを示します。
例32-11 PropertyKeyの定義
/**
* <p>Custom CSS applied to the style attribute of the root markup node.</p>
*/
static public final PropertyKey INLINE_STYLE_KEY =
TYPE.registerKey("inlineStyle", String.class);
/**
* <p>Custom CSS class to the class attribute of the root markup node.</p>
*/
static public final PropertyKey STYLE_CLASS_KEY =
TYPE.registerKey("styleClass", String.class);
エディタ内で右クリックし、「アクセッサの生成」を選択します。「アクセッサの生成」ダイアログで「すべて選択」をクリックして、スコープがPublicに設定されていることを確認し、「OK」をクリックします。これで、JDeveloperでprivate属性のgetメソッドおよびsetメソッドを生成できます。
その後、private属性を削除して、getProperty(PropertyKey)およびgetProperty(PropertyKey)へのコールで置き換えます。
例32-12に、private属性を置き換えた後のコードを示します。
例32-12 コンポーネントのプロパティ
public void setInlineStyle(String newinlineStyle)
{
// inlineStyle = newinlineStyle;
setProperty(INLINE_STYLE_KEY, newinlineStyle);
}
/**
* <p>CSS value applied to the root component's style attribute.</p>
*
* @return newinlineStyle CSS custom style text
*/
public String getInlineStyle()
{
// return inlineStyle;
return (String) getProperty(INLINE_STYLE_KEY);
}
コンポーネントの特定の機能を実行するには、メソッドをオーバーライドする必要がある場合があります。たとえば、コンポーネントが部分ページ・レンダリング(PPR)に参加できるようにするには、例32-13に示すように、getBeanTypeメソッドをオーバーライドする必要があります。
例32-13
/**
* <p>Exposes the <code>FacesBean.Type</code> for this class through a protected
* method. This method is called but the <code>UIComponentBase</code> superclass
* to setup the components <code>ValueMap</code> which is the container for the
* <code>attributes</code> collection.</p>
*
* @return <code>TagPane.TYPE</code> static property
*/
@Override
protected FacesBean.Type getBeanType()
{
return TYPE;
}
コンポーネントが展開するクラスや、オーバーライドする必要があるメソッドの詳細は、『ADF Faces JavaDoc』を参照してください。
tagPaneコンポーネントの場合、コンポーネントはクライアント・コンポーネントから起動されるイベントで動作する必要があります。ソース・コンポーネントへの参照は、パラメータとしてイベントのコンストラクタに渡されます。
tagPaneコンポーネントの場合、仮パラメータを使用して渡されたイベントがTagSelectEventであるかどうかが、broadcastメソッドによって確認されます。そうである場合、broadcastメソッドによって、tagSelectListener属性に保持されているメソッド式が呼び出されます。
大部分のイベントには、イベントを起動するライフサイクル・フェーズを指定するimmediateブール・プロパティがあります。immediate属性がtrueの場合、イベントは値の適用フェーズで処理され、falseの場合は、アプリケーションの起動フェーズで処理されます。詳細は、第4章「ADF FacesでのJSFライフサイクルの使用」を参照してください。
例32-14に、tagPaneコンポーネントのオーバーライドされるbroadcastメソッドを示します。
例32-14 tagPaneコンポーネントのbroadcastメソッド
/**
* @param facesEvent faces event
* @throws AbortProcessingException exception during processing
*/
@Override
public void broadcast(FacesEvent facesEvent)
throws AbortProcessingException
{
// notify the bound TagSelectListener
if (facesEvent instanceof TagSelectEvent)
{
TagSelectEvent event = (TagSelectEvent) facesEvent;
// utility method found in UIXComponentBase for invoking method event
// expressions
broadcastToMethodExpression(event, getTagSelectListener());
}
super.broadcast(facesEvent);
}
コンポーネント・クラスを作成したら、コンポーネントを/META-INF/faces-config.xmlファイルに追加して登録します。JARプロジェクトにパッケージされているFaces構成ファイルにコンポーネントを定義することで、Webアプリケーションの起動時に、JSFランタイムによってコンポーネントが自動的に認識されます。
コンポーネントを登録するには、コンポーネント・タイプを入力します。これは、コンポーネントのインスタンスをインスタンス化するアプリケーション・ファクトリで使用される論理名です。たとえば、tagPaneコンポーネントのタイプはoracle.adfdemo.acme.TagPaneになります。また、コンポーネントの完全修飾クラス・パス(oracle.adfdemo.acme.faces.component.TagPaneなど)も追加する必要があります。
カスタム・コンポーネントを登録する手順:
アプリケーション・ナビゲータで、faces-config.xmlファイルをダブルクリックします。
「概要」タブをクリックして、「コンポーネント」ナビゲーション・タブをクリックします。
「追加」アイコンをクリックして、コンポーネントのタイプとクラスを入力します。
オプションで、任意の属性、プロパティまたはファセットを追加します。
例32-15に、faces-config.xmlファイルに定義されているtagPaneコンポーネントを示します。
例32-15 faces-config.xmlファイルに追加されたtagPaneコンポーネント
<?xml version="1.0" encoding="UTF-8" ?> <faces-config version="1.2" xmlns="http://java.sun.com/xml/ns/javaee"> <application> </application> <component> <component-type>oracle.adfdemo.acme.TagPane</component-type> <component-class>oracle.adfdemo.acme.faces.component.TagPane </component-class> </component>
リソース・バンドルは、コンポーネントの情報(ラベルやメッセージのテキストなど)、およびアプリケーションでロケールの切替えが許可されている場合に使用される翻訳されたテキストを格納するために使用されます。スキンでも、コンポーネントのテキストを保持するためにリソース・バンドルが使用されます。カスタム・コンポーネントでは少なくとも簡単なスキンを使用する必要があるため、少なくともそのスキンのリソース・バンドルを作成する必要があります。カスタム・コンポーネントの場合は、リソース・バンドルのJavaファイルを作成します。リソース・バンドル・クラスの詳細は、20.3項「スキン・スタイル・プロパティの定義」を参照してください。
|
ヒント: リソースのプロパティ・ファイルを使用することもできます。 |
リソース・バンドル・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: リソース・バンドルの名前を入力します。名前には、使用するスキンを反映させる必要があります。たとえば、サンプル・コンポーネントの場合、AcmeSimpleDesktopBundleと入力します。
パッケージ: パッケージの名前を入力します。たとえば、サンプル・コンポーネントの場合、oracle.adfdemo.acme.faces.resourceと入力します。
拡張: リソース・バンドルの場合、java.util.ListResourceBundleと入力する必要があります。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
必要に応じてキーを追加し、テキストを定義します。スキンのリソース・バンドルの作成の詳細は、20.3.1項「テキストへのスキンの適用方法」を参照してください。
例32-16に、tagPaneコンポーネントのリソース・バンドル・コードを示します。
例32-16 tagPaneのリソース・バンドルのJavaコード
package oracle.adfdemo.acme.faces.resource;
import java.util.ListResourceBundle;
/**
* <p>Holds properties used by the components bundled in the jar project.
* This bundle is part of the trinidad component skin that is configured
* in the "/META-INF/trinidad-skins.xml" file. Component Renderers
* will use the <code>RenderingContext</code> to lookup a key by calling
* the <code>getTranslatedString(key)</code> method.</p>
*/
public class AcmeSimpleDesktopBundle
extends ListResourceBundle
{
/**
* <p>Returns a two dimensional object array that represents a resource bundle
. * The first
* element of each pair is the key and the second the value.</p>
*
* @return an array of value pairs
*/
protected Object[][] getContents()
{
return new Object[][]
{
{"AcmeTagPane_tag_title","Tag Weight: {0}"}
};
}
}
簡単なデスクトップ・スキンおよび他の必要なスキンのリソース・バンドルを登録するには、/META-INF/trinidad-skins.xmlファイルをダブルクリックして開き、次のように設定します。
構造ウィンドウで、skin-additionを選択します。
プロパティ・インスペクタでスキンIDを入力します。簡単なスキンIDの場合、simple.desktopと入力します。
構造ウィンドウでskin-additionを右クリックし、「skin-additionの中に挿入」→bundle-nameと選択します。
プロパティ・インスペクタで、作成したリソース・バンドルの完全修飾名を入力します。
|
注意: JDeveloperでは、 |
例32-17に、tagPaneリソース・バンドルを簡単なスキンに登録するためのコードを示します(この後の手順でstyle-sheet-name要素値を追加します)。
ADF Facesコンポーネントでは、コンポーネントの機能はコンポーネント・クラスに、使用アプリケーションでJSPを使用する場合はコンポーネントの表示はレンダラに委任されます。デフォルトでは、ADF Facesのすべてのタグが、関連付けられたコンポーネント・クラスとHTMLレンダラを結合し、HTMLレンダー・キットの一部になっています。ADF Facesには、デスクトップおよびPDAデバイスの両方に表示できるように、HTMLレンダー・キットが含まれています。
レンダラは、ファミリとレンダラ・タイプによってレンダー・キットで修飾されます。ファミリはコンポーネントの一般カテゴリであり、スーパー・クラスに定義されているファミリと同じにする必要があります。コンポーネントは継承によってメソッドを取得するため、コンポーネント内のgetFamily()メソッドをオーバーライドする必要はありません。
レンダラ・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: レンダラの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagPaneRendererと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.renderと入力します。
拡張: oracle.adf.view.rich.render.RichRendererと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
必要な機能を追加します。たとえば、スキン機能では、コンポーネントのレンダリング中に指定のCSSセレクタのCSSスタイル・プロパティの取得に使用できるAPIが提供されます。このAPIは、スタイルの設定内容に基づいて条件付レンダリングを実行する必要がある場合に役立ちます。詳細は、http://myfaces.apache.org/trinidad/trinidad-1_2/trinidad-api/apidocs/index.htmlにあるMyFaces TrinidadのJavadocのRenderingContext#getStylesおよびStyles#getSelectorStyleMapを参照してください。
レンダラを作成したら、faces-config.xml構成ファイルを使用して登録します。カスタム・コンポーネントを他のADF Facesコンポーネントと組み合せて機能させる場合、そのADF Facesコンポーネントが使用しているのと同じレンダー・キットIDを使用する必要があります。
|
ヒント: JSFでレンダー・キットを定義できる最も高いレベルはビュー・ルートです。 |
レンダー・キットおよびレンダラを登録する手順:
アプリケーション・ナビゲータで、faces-config.xmlファイルをダブルクリックして、エディタで開きます。
「概要」タブをクリックして、「レンダー・キット」ナビゲーション・タブを選択します。
「レンダー・キット」の「追加」アイコンをクリックして、レンダー・キットIDにoracle.adf.richと入力します。
「レンダラ」の「追加」アイコンをクリックしてレンダラを登録し、次のように設定します。
ファミリ: コンポーネントで拡張するクラスを入力します。たとえば、tagPaneコンポーネントの場合、org.apache.myfaces.trinidad.Objectと入力します。
Type: コンポーネントのタイプを入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.TagPaneと入力します。これは、レンダラ・タイプと一致している必要があります。
クラス: 32.4.7項「レンダラのクラスの作成方法」で作成したレンダラの完全修飾クラス・パスを入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.render.TagPaneRendererと入力します。
例32-18に、tagPaneコンポーネントのレンダー・キットおよびレンダラの登録を示します。
例32-18 faces-config.xmlファイルに追加されたtagPaneのレンダラ
<render-kit>
<render-kit-id>oracle.adf.rich</render-kit-id>
<renderer>
<component-family>org.apache.myfaces.trinidad.Object</component-family>
<renderer-type>oracle.adfdemo.acme.TagPane</renderer-type>
<renderer-class>oracle.adfdemo.acme.faces.render.TagPaneRenderer
</renderer-class>
</renderer>
</render-kit>
JSPページでコンポーネントを使用するには、カスタム・コンポーネントをインスタンス化するカスタム・タグを作成します。コンポーネントのレンダラは実際に該当タスクを実行するため、JSPタグはレンダラとは関係ありません。JSF 1.1では、JSPタグは、コンポーネントを作成してコンポーネント・ツリーに追加してから、コンポーネントのレンダリングを開始します。これにより、JSF/JSP以外のタグが同じレスポンス・ライターに書き込むため、問題が生じていました。コンポーネントが自身の子コンポーネントをレンダリングした場合、インターリービングのタイミングがうまく機能しませんでした。
|
注意: (Faceletsを使用するアプリケーションでは、ハンドラを使用してコンポーネントをインスタンス化します。詳細は、32.2.8「Faceletsタグ・ライブラリ構成ファイルの追加方法」を参照)。 |
JSF 1.2、Java EE 5(Servlet 2.5、JSP 2.1)のターゲットでは、JSPの問題の大部分は修正されています。JSF/JSPコンポーネントは、コンポーネントの作成のみを行うコンポーネント・ファクトリとして機能します。これは、レンダリング・レスポンス・フェーズが2つの手順に分割されていることを意味します。コンポーネント・ツリーの作成時にコンポーネントがレンダリングされるかわりに、まずコンポーネント・ツリーが作成されてからそのツリーがレンダリングされます。この機能は、ビュー全体がJSFコンポーネントによって表されるようにすることで可能になっています。JSF/JSP以外では、暗黙的にJSF Verbatimコンポーネントとなるマークアップが生成されます。
JSF 1.2におけるこのような仕組みの変更の結果として、カスタムJSPタグによってjavax.faces.webapp.UIComponentELTagクラスが拡張されます。JSPタグのencodeBegin、encodeChildrenおよびencodeEndメソッドは非推奨となっています。これらのメソッドは、以前はコンポーネントへの対応するコールを行っていました。JSF 1.2ではビュー・ルートでレンダリングが行われるため、すべての機能はdoStartTagメソッドおよびdoEndTagメソッドで実行できます。MyFaces Trinidadには、使用できるこのベース・クラス独自のバージョンがあります。org.apache.myfaces.Trinidad.webapp.UIComponentELTagがコンポーネントのプロパティ・バッグにフックされ、JSPのコーディングが単純化されます。
タグ・クラスには、コンポーネントのプロパティの作成が含まれます。タグ・プロパティは慎重に選択する必要があります。一部のプロパティはタグの実装では無視できても、TLD属性として必要な場合があります。
次の3つの属性は、スーパー・クラスによって実装され、Java継承を介して多くのコンポーネントで共有されます。
id
binding
rendered
id属性はスーパー・クラスjavax.faces.webapp.UIComponentTagBaseによって実装されるため、id属性を実装しないでください。スーパー・クラスjavax.faces.webapp.UIComponentELTagによって、それ以外のbindingとrenderedという2つの属性が実装されます。そのため、この2つの属性をタグ・クラスに追加する必要はありません。
JSPタグを追加する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: タグの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagPaneTagと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.taglibと入力します。
Class: org.apache.myfaces.trinidad.webapp.UIXComponentELTagと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
ソース・エディタで、ファイルにすべての属性を追加します。
例32-19に、TagPaneTagクラスの属性のコードを示します。
例32-19 TagPaneTagクラスの属性
public class TagPaneTag
extends UIXComponentELTag
{
private ValueExpression _partialTriggers = null;
private ValueExpression _visible = null;
private ValueExpression _inlineStyle = null;
private ValueExpression _styleClass = null;
private ValueExpression _tags = null;
private ValueExpression _orderBy = null;
private MethodExpression _tagSelectListener = null;
属性のアクセッサ・メソッドを宣言的に生成するには、ソース・エディタでファイルを右クリックして、「アクセッサの生成」を選択します。
「アクセッサの生成」ダイアログで「すべて選択」をクリックして、スコープをpublicに設定し、「OK」をクリックします。
レンダー・タイプとコンポーネント・タイプをクラスに追加します。コンポーネント・タイプは、アプリケーションのファクトリ・メソッド、createComponent(componentType)を使用してコンポーネントをインスタンス化するためにスーパー・クラスによって使用されます。
例32-20に、コンポーネント・タイプとレンダー・タイプがいずれもoracle.adfdemo.acme.TagPaneであるTagPaneTagクラスのコードを示します。
例32-20 TagPaneTagクラスのコンポーネント・タイプとレンダー・タイプ
public String getComponentType()
{
return COMPONENT_TYPE;
}
public String getRendererType()
{
return RENDERER_TYPE;
}
/**
* <p>This component's type, <code>oracle.adfdemo.acme.TagPane</code></p>
*/
static public final String COMPONENT_TYPE =
"oracle.adfdemo.acme.TagPane";
/**
* <p>Logical name given to the registered renderer for this component.</p>
*/
static public final String RENDERER_TYPE = "oracle.adfdemo.acme.TagPane";
単一の仮パラメータのタイプFacesBeanを持つスーパー・クラスからsetPropertiesメソッドをオーバーライドします。これは、ベースUIComponentELTagのMyFaces Trinidadバージョンですが、コンポーネント参照のかわりにコンポーネントの状態ホルダーが渡されます。setPropertiesメソッドの役割は、JSPタグ属性値をコンポーネントにプッシュすることです。
例32-21に、tagPaneTagクラスのオーバーライド・メソッドを示します。
例32-21 TagPaneTagクラスのsetPropertiesメソッドのオーバーライド
@Override
protected void setProperties(FacesBean facesBean) {
super.setProperties(facesBean);
setStringArrayProperty(facesBean, TagPane.PARTIAL_TRIGGERS_KEY,
_partialTriggers);
setProperty(facesBean, TagPane.VISIBLE_KEY, _visible);
setProperty(facesBean, TagPane.INLINE_STYLE_KEY, _inlineStyle);
setProperty(facesBean, TagPane.STYLE_CLASS_KEY, _styleClass);
setProperty(facesBean, TagPane.TAGS_KEY, _tags);
setProperty(facesBean, TagPane.ORDER_BY_KEY, _orderBy);
facesBean.setProperty(TagPane.TAG_SELECT_LISTENER_KEY,
_tagSelectListener);
}
タグ・ライブラリ・ディスクリプタ(TLD)は、Javaクラスの詳細をJSPコンパイル・エンジンとIDEツールに提供します(TLDは、Faceletsを使用するアプリケーションでは使用されません)。
開始する前に:
タグ・ライブラリをURIに関連付け、バージョンを割り当てて名前を付けます。この手順は、32.2.6項「JavaServer Pagesタグ・ライブラリ・ディスクリプタ・ファイルの追加方法」でタグ・ライブラリ・スタブ・ファイルを作成したときに実行されている必要があります。
TLDを構成する手順:
スケルトンTLDファイルを開きます。
コンポーネント・パレットから、tag要素をドラッグ・アンド・ドロップします。
「タグの挿入」ダイアログで、次のように設定します。
name: コンポーネントの名前を入力します。たとえば、tagPaneコンポーネントの場合、tagPaneと入力します。
body-content: JSPと入力します。
tag-class: 省略ボタンをクリックして、コンポーネントのタグ・クラス・ファイルに移動します。
各属性を定義します。各属性に対して次のように設定します。
構造ウィンドウで tag要素を右クリックし、「tag > attributeの中に挿入」と選択します。
「属性の挿入」ダイアログで、名前の値を入力します。この名前はタグ・クラスで指定した名前と同一にする必要があります。
構造ウィンドウで属性を選択し、プロパティ・インスペクタで属性の値を設定します。
各属性に定義する要素は3タイプあります。<id>要素は単純な文字列です。追加の属性は、deferred-value属性またはdeferred-method属性となります。これらにより、式を遅れて(deferred)評価できます。これで、JSPとJSFで同じELエンジンを共有するようになったため、コンパイル済のELをコンポーネントに直接渡すことができます。
例32-22に、tagPaneコンポーネントのTLDを示します。
例32-22 tagPaneのacme.tldタグ・ライブラリ・ディスクリプタ・コード
<?xml version = '1.0' encoding = 'UTF-8'?>
<taglib xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
xsi:schemaLocation="http://java.sun.com/xml/ns/javaee
http://java.sun.com/xml/ns/javaee/web-jsptaglibrary_2_1.xsd"
version="2.1" xmlns="http://java.sun.com/xml/ns/javaee">
<description>Acme Corporation JSF components</description>
<display-name>acme</display-name>
<tlib-version>1.0</tlib-version>
<short-name>acme</short-name>
<uri>http://oracle.adfdemo.acme</uri>
<tag>
<description>
</description>
<name>tagPane</name>
<tag-class>oracle.adfdemo.acme.faces.taglib.TagPaneTag</tag-class>
<body-content>JSP</body-content>
<attribute>
<name>id</name>
<rtexprvalue>true</rtexprvalue>
</attribute>
<attribute>
<name>rendered</name>
<deferred-value>
<type>boolean</type>
</deferred-value>
</attribute>
<attribute>
<name>tagSelectListener</name>
<deferred-method>
<method-signature>void
</method-signature>
myMethod(oracle.adfdemo.acme.faces.event.TagSelectEvent)
</deferred-method>
</attribute>
<attribute>
<name>visible</name>
<deferred-value>
<type>boolean</type>
</deferred-value>
</attribute>
<attribute>
<name>partialTriggers</name>
<deferred-value>
</deferred-value>
</attribute>
<attribute>
<name>inlineStyle</name>
<deferred-value/>
</attribute>
<attribute>
<name>inlineClass</name>
<deferred-value/>
</attribute>
<attribute>
<name>tags</name>
<deferred-value/>
</attribute>
<attribute>
<name>binding</name>
<deferred-value/>
</attribute>
<attribute>
<name>orderBy</name>
<deferred-value/>
</attribute>
</tag>
</taglib>
リソース・ローダーは、コンポーネントのスキニングに必要なイメージ・ファイルがカスタム・コンポーネントに含まれている場合のみ必要です。イメージ・ファイルはJARプロジェクトにパッケージ化されているため、コンポーネント・ライブラリのコンシューマは、JARをそのWebプロジェクトのクラス・パスに入れ、いくつかのエントリをそのWebデプロイ・ディスクリプタ・ファイル(web.xml)に追加する必要があります。リッチ・クライアント・フレームワークでは、リソース・サーブレットを使用してイメージが配信されます。web.xmlファイルにこのサーブレットを登録してから、リソース・ローダー・クラスを作成する必要があります。コンポーネント・ライブラリには、リソース・サーブレットで自動ロードされるリソース・ローダーが必要です。サーブレットのURLパターン・フォルダ・マッピングを作成します。これは、カスタム・コンポーネント・ライブラリ内でリソースを見つけて特定する場合に使用されます。
リソース・ローダー・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を開き、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: リソース・ローダーの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeResourceLoaderと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.resourcesと入力します。
拡張: タグで拡張するクラスの名前を入力します。たとえば、tagPaneコンポーネントの場合、org.apache.myfaces.trinidad.resource.RegexResourceLoaderと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
ソース・エディタで、より具体的なリソース・ローダーにマップされる正規表現を登録します。たとえば、イメージ・ディレクトリの下にあるイメージ・リソースにマップする式を作成できます。
例32-23に、カスタム・コンポーネントJARの/META-INFフォルダと相対的な場所にある/acme/images/ディレクトリにマップするtagPaneコンポーネントの式を示します。登録すると、カスタム・コンポーネントのイメージは/META-INF/acme/imagesの下に配置されます。
例32-23 tagPaneコンポーネントのリソース・ローダー
public class AcmeResourceLoader
extends RegexResourceLoader
{
public AcmeResourceLoader()
{
// any resource in "/acme/" with the following suffixes will be
// loaded from the base folder of "META-INF".
// The servlet pattern match "/acme/*" should exist under "META-INF".
// For example URL : context-root/acme/images/type1.gif
// map to: META-INF/acme/images/type1.gif
register("(/.*\\.(jpg|gif|png|jpeg))",
new ClassLoaderResourceLoader("META-INF"));
/META-INF/servlet/resources/name.resourcesファイルを開いてライブラリ・リソース・ローダーを登録し、URIパターンにバインドされているリソース・ローダー・クラスの完全修飾名を追加します。
MyFaces TrinidadのResourceServletでは、サーブレット・コンテキストを使用して、Webアプリケーションのクラス・パス内のJARファイルをすべてスキャンします。サーブレットは、Webデプロイメント・ディスクリプタで自身のURIマッピングを調べて、このリソース・ファイルの場所を構築します。このファイルには、URIパターンにバインドされるJavaクラスの完全修飾名を含める必要があります。起動時、ResourceServletは、FacesServletがfaces-config.xmlファイルを探して使用する場合と同様に、このファイルを見つけて使用します。
tagPaneコンポーネントの場合、acme.resourcesファイルには、コンポジット・リソース・ローダーのための次のエントリが含まれます。
oracle.adfdemo.acme.faces.resource.AcmeResourceLoader
各ページのスタイルシートを挿入するかわりに、アプリケーション全体に対して1つ以上のスキンを使用します。各コンポーネントでは、スキンに記述されているスタイルが自動的に使用されます。設計時のコード変更は必要ありません。
ADF Facesコンポーネントはすべてスキンを使用します。デフォルトのスキンはskyrosスキンです。カスタム・コンポーネントは、他のADF Facesコンポーネントとともに使用されるため、既存のADF Facesスキンにスタイル・セレクタを追加します。Skyrosスキンは、簡単なスキンからスタイルを継承するので、セレクタを簡単なスキンに追加するだけで、すべてのスキンでそのセレクタを使用できるようになります。ただし、スキンごとにセレクタのスタイルを変えたい場合があります。そのようなスタイルは、作成したCSSファイルに設定します。このファイルは、コンポーネントが使用されるアプリケーションの他のCSSスタイルとマージされます。
スキンで使用されるテキストは、リソース・バンドル内で定義されます。カスタム・リソース・バンドルを作成してテキストを作成し、表示するテキストを宣言します。カスタム・リソース・バンドルを作成した後、スキンにそれを登録します。リソース・バンドルとCSSを組み合せることで、コンポーネントで複数のロケールをサポートするためのメソッドが提供されます。
スキンの詳細は、第20章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
作成した/META-INF/trinidad-skins.xmlファイルは、CSSファイルおよびリソース・バンドルをADF Facesスキンに登録するために使用されます。
コンポーネントのスタイルを作成する手順:
32.2.4項「Cascading Style Sheetの追加方法」で作成したCSSファイルを開きます。
コンポーネントのルート・スタイル・セレクタを定義します。このスタイルは、コンポーネントを確立する<DIV>要素と関連付けられます。
必要に応じてその他のスタイル・セレクタを追加します。例32-24に、tagPaneコンポーネントのCSSファイルを示します。
例32-24 tagPaneコンポーネントのCSSファイル
acme|tagPane - root element acme|tagPane::content - container for the links acme|tagPane::tag - tag hyperlink
スキンで使用される、コンポーネントのCSSの作成の詳細は、20.3項「スキン・スタイル・プロパティの定義」を参照してください。
コンポーネントに必要なリソース・バンドルをすべて作成します。
CSSをADF Facesスキンに登録するには、/META-INF/trinidad-skins.xmlファイルを開きます。
構造ウィンドウでskin-addition要素を選択し、プロパティ・インスペクタで次のように設定します。
skin-id: カスタム・コンポーネント・セレクタを追加するADF Facesスキンを入力します。セレクタとADF Facesコンポーネントとの互換性を得るには、少なくともsimple.desktopスキンにセレクタを登録する必要があります。
|
注意: コンポーネントがOracle WebCenter Portalアプリケーションで使用される可能性がある場合は、 |
style-sheet-name: ドロップダウン・メニューを使用して「編集」を選択し、作成したCSSファイルに移動します。
リソース・バンドルを作成している場合は、バンドルの完全修飾パスを<bundle-name>要素の値として追加します。
例32-25に、tagPaneコンポーネントのコードを示します。
例32-25 tagPaneのtrinidad-skins.xmlコード
<?xml version="1.0" encoding="UTF-8" ?> <skins xmlns="http://myfaces.apache.org/trinidad/skin"> <skin-addition> <skin-id>simple.desktop</skin-id> <style-sheet-name>acme/styles/acme-simple-desktop.css</style-sheet-name> <bundle-name>oracle.adfdemo.acme.faces.resource.AcmeSimpleDesktopBundle </bundle-name> </skin-addition> </skins>
カスタム・コンポーネントで使用するイメージのイメージ・フォルダを追加します。このフォルダは、META-INFディレクトリの下にある必要があります。カスタム・コンポーネントで使用するすべてのイメージをこのフォルダに配置します。
tagPaneの場合、イメージ・フォルダは/META-INF/acme/imagesです。
カスタム・コンポーネント・ライブラリを作成したら、Webアプリケーションで使用できるデプロイ可能なアーティファクトを作成する必要があります。Javaアーカイブ(JAR)ファイルを作成できるようにするには、作成した多くのリソースを追加して、プロジェクトのデプロイメント・プロファイルを更新する必要があります。
デプロイメントのJARファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトをダブルクリックし、「プロジェクト・プロパティ」ダイアログを開きます。
左ペインで、「コンパイラ」を選択します。
右側で、デプロイするすべてのファイル・タイプが「ファイル・タイプの出力ディレクトリへのコピー」テキスト・フィールドにリストされるようにします。
|
注意:
|
左ペインで、「デプロイ」を選択します。
右側の「Deployment Profiles」で、「ADFライブラリのJARファイル」を選択して、「編集」をクリックします。
左ペインで、「JARオプション」を選択します。
ADFライブラリのJARファイルを格納するためのデフォルトのディレクトリ・パスを確認するか、新規パスを入力します。「Manifestファイルを含める」が選択されていることを確認して、「OK」をクリックします。
デプロイするには、プロジェクトを右クリックし、ポップアップ・メニューから「デプロイ」→Project_nameを選択します。デフォルトでは、プロジェクト・ディレクトリ内のデプロイメント・ディレクトリにJARファイルがデプロイされます。
コンポーネントを作成し、ADFライブラリを作成すると、そのコンポーネントを別のアプリケーションにインポートして使用できるようになります。ただし、開発中のアプリケーションでコンポーネントを使用する前には、テスト・アプリケーションで使用してコンポーネントが予想どおりに機能することを確認する必要があります。テストするには、カスタム・ライブラリをテスト・アプリケーションにインポートします。手順は、『Oracle Fusion Middleware Oracle Application Development Framework Fusion開発者ガイド』のプロジェクトへのADFライブラリ・コンポーネントの追加に関する項を参照してください。
ライブラリを追加したら、Webデプロイメント・ディスクリプタを構成して、リソース・サーブレット・マッピングを追加します。コンポーネントを使用してテスト・アプリケーションを実行すると、コンポーネントのデバッグが必要であることがわかる場合があります。そのため、プロジェクトに対してロギングとアサーションを有効にしておくと役立ちます。
|
ヒント: ライブラリをアプリケーションにインポートすると、JDeveloperのコンポーネント・パレットにカスタム・コンポーネントを表示できます。 |
コンポーネント・リソース・ローダーは、サーブレット・リソース・マッピングを前提とするように構成されています(たとえば、tagPaneコンポーネントの場合、マッピングはacmeです)。そのため、想定されるリソース・サーブレット・マッピングを使用アプリケーションのweb.xmlファイルに追加する必要があります。
デフォルトでは、MyFaces Trinidadのスキニングでは、CSS 3をCSS 2に正規化するときに、CSSクラスが圧縮されます。コンポーネントのデバッグ時にはこの圧縮を無効にします。本番のデプロイメントでは、この設定を無効に切り替えます。
web.xmlファイルを構成する手順:
アプリケーション・ナビゲータで、web.xmlファイルをダブルクリックして開きます。
概要エディタで、「サーブレット」ナビゲーション・タブを選択し、「追加」アイコンをクリックして新しいサーブレットを追加します。
サーブレット表で次のように設定します。
名前: resourcesと入力します。
サーブレット・クラス: org.apache.myfaces.trinidad.webapp.ResourceServletと入力します。
表の下にある「サーブレット・マッピング」タブをクリックして、「追加」アイコンをクリックします。
URIの接頭辞を入力します。この接頭辞で始まるリソースは、サーブレットによって処理されます。たとえば、tagPaneコンポーネントの場合、接頭辞/acme/*と入力します。
スタイルシートの圧縮を無効にする手順:
「アプリケーション」を選択します。
「コンテキスト初期化パラメータ」の「追加」アイコンをクリックします。
「名前」にorg.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONと入力し、「値」にtrueと入力します。
JavaScriptデバッグは難しいタスクです。この動的言語の型確認なしでのデバッグをサポートするために、リッチ・クライアントJavaScriptライブラリには、Javaロギングに似たロギング・メカニズムが用意されています。クライアント・スクリプトをより型保証されたスクリプトにするアサーション・ストラテジもあります。これらの機能はいずれも、web.xmlファイルの構成パラメータを使用して有効にします。ロギング・ルーチンとアサーション・ルーチンはブラウザ固有です。クライアントJavaScriptライブラリでは、Gecko、Internet Explorer、OperaおよびSafariバージョンのブラウザ・エージェントがサポートされます。詳細は、A.2.3.4項「リソース・デバッグ・モード」を参照してください。
ロギングとアサーションを有効にする手順:
アプリケーション・ナビゲータで、web.xmlファイルをダブルクリックします。
概要エディタで、「アプリケーション」ナビゲーション・タブをクリックします。
「アプリケーション」ページで、「コンテキスト初期化パラメータ」の「追加」アイコンをクリックします。
次のパラメータを追加して、デバッグを有効にします。
名前: org.apache.myfaces.trinidad.resource.DEBUG
値: true
この設定により、MyFaces Trinidadで、JavaScriptのようなリソースに対してキャッシュ・ヘッダーが設定されなくなります。ブラウザでのリソースのキャッシングも行われなくなります。
次のパラメータを追加して、クライアント側JavaScriptのデバッグ・レベルを設定します。
名前: oracle.adf.view.rich.LOGGER_LEVEL
値: ALL
有効な値は、OFF、SEVERE、WARNING、INFO、CONFIG、FINE、FINER、FINEST、ALLです。デフォルトは、OFFです。
次のパラメータを追加して、クライアント側のスクリプト・アサーションを有効にします。
名前: oracle.adf.view.rich.ASSERT_ENABLED
値: true
この設定はロギングと連携して機能します。このスイッチを有効に切り替えると、デバッグ情報がブラウザで使用可能になります。アサーションとロギングの表示は、ブラウザによって異なります。Internet Explorerの場合、子ブラウザ・ウィンドウがアクティブ・ウィンドウと並んで表示されます。FireFoxにFire Bugプラグインをインストールしている場合、デバッグ情報はFire Bugコンソールから使用できます。
カスタム・コンポーネントをJSFページに追加する手順:
ソース・エディタでjspxページを開きます。
TLDネームスペースをルート・タグに追加します。
たとえば、tagPaneコンポーネントの場合、タグ・ライブラリのURIはhttp://adf-richclient-demo-acmeなので、次の内容を追加します。
xmlns:acme="http://oracle.adfdemo.acme"
コンポーネント・パレットを使用して、コンポーネントをページに追加します。プロパティ・インスペクタを使用して、属性を設定します。
|
ヒント: JDeveloper以外でアプリケーションを開発している場合は、TLDの短縮名とコンポーネント名を使用します。また、属性の任意の値を追加します。たとえば、 <acme:tagPane> <visible="true"> <orderBy="alpha"> <tagSelectionListener=#(tagBean.onTagSelect) </tagPane> |
この章の説明に従ってtagPaneコンポーネントを作成し、アプリケーションで使用する場合、バッキングBeanを使用して、カスタム・コンポーネントをアプリケーション・コンポーネントにバインドする必要があります。
例32-26に、tagPaneコンポーネントをFile Explorerアプリケーションにバインドするために使用されるバッキングBeanのコードを示します。
例32-26 tagPaneカスタム・コンポーネントのバッキングBeanロジック
public Map<String, Number> getTags()
{
if (_tags == null)
{
_tags = new TreeMap<String, Number>();
List<FileItem> nameToFileItems = feBean.getDataFactory().getFileItemList();
_doDeepTagCollection(_tags, nameToFileItems);
}
return _tags;
}
public void onTagSelect(TagSelectEvent event)
{
_selectedTag = event.getTag();
CriteriaFileItemFilter criteria = new CriteriaFileItemFilter(_selectedTag);
List<FileItem> nameToFileItems = _feBean.getDataFactory().getFileItemList();
if (_selectedTagFileItemList == null) {
_selectedTagFileItemList = new ArrayList<FileItem>();
else {
_selectedTagFileItemList.clear();
}
_doDeepTagSearch(criteria, _selectedTagFileItemList, nameToFileItems);
_selectedTagResultsTableModel = new SortableModel(_selectedTagFileItemList);
}
