| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
 前 |
 次 |
| Oracle® Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド 11g リリース2(11.1.2.4.0) B66719-05 |
|
前 |
次 |
この章では、カスタムADF Facesコンポーネントの作成方法を説明します。
この章では、次の項目について説明します。
ADF Facesコンポーネント・ライブラリには、ユーザー要件の大部分をカバーするUIコンポーネントの包括的なセットが用意されています。ただし、アプリケーションに固有のカスタム・リッチ・コンポーネントを作成する必要がある場合があります。カスタム・リッチ・コンポーネントによって、カスタム動作が可能になり、アプリケーションのニーズに最適なアクションを実行できます。
|
注意: カスタムJSF Faceletコンポーネントの作成については、多くの本、記事、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アーキテクチャの詳細は、第4章「ADF Facesクライアント側アーキテクチャの使用方法」を参照してください。
ADF Facesコンポーネントは、Apache MyFaces Trinidadコンポーネント・ライブラリから導出されます。このため、カスタムADF Facesコンポーネントを作成するときに拡張するクラスの多くは、実際にはMyFaces Trinidadのクラスとなります。ADF Facesの履歴(その発展を含む)の詳細は、第1章「ADF Facesの概要」を参照してください。
JSPコンポーネントとJSFコンポーネントの間にApplicationクラスがあります。タグ・ライブラリでは、applicationオブジェクトに対してファクトリ・メソッドが使用され、componentTypeと呼ばれるニーモニックを使用して具体的なコンポーネント・インスタンスがインスタンス化されます。
コンポーネントでは独自のマークアップをレンダリングできますが、これがベスト・プラクティスであるとは考えられていません。プレゼンテーションのレンダリングの方法に焦点を当てたレンダー・キットを定義する方法をお薦めします。コンポーネントは、レンダー・キットに対してファクトリ・メソッドを使用して、特定のコンポーネントに関連付けられているレンダラを取得します。コンポーネントがFaceletを使用するアプリケーションで消費される場合、コンポーネント・ハンドラによってそのコンポーネントが作成されます。
作成するすべてのカスタム・コンポーネントでは、機能面に加え、その他のADF Facesコンポーネントで正しく表示されるようにするために、ADF Facesスキンを使用する必要があります。スキンを使用するには、コンポーネントのスキニング・キーとプロパティを作成して登録する必要があります。この章では、カスタム・コンポーネントのスキンの作成方法および登録方法のみ説明します。一般的なスキンの使用方法および作成方法の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
|
ヒント: ADF Facesコンポーネントを使用するには、カスタム・コンポーネントで少なくともADF Facesの |
ADF Facesコンポーネントは、クライアント側リソースとサーバー側リソースの両方で構成されています。クライアント側には、クライアント・コンポーネント、コンポーネント・ピア(コンポーネント・プレゼンタ)、およびクライアント・コンポーネントに関連付けられているすべてのイベントがあります。
サーバー側には、サーバー・コンポーネント、サーバー・コンポーネント・イベントおよびイベント・リスナーがあります。また、コンポーネント・レンダラ、コンポーネントJSPタグ、コンポジット・リソース・ローダー、JavaScriptリソース・ローダーおよびリソース・バンドルもあります。
コンポーネントには、いくつかの構成ファイルおよびサポート・ファイルもあります。これらのクラス、JavaScriptおよび構成ファイルは一緒に1つのJARファイルにパッケージ化され、ライブラリとしてアプリケーションにインポートして、他のコンポーネントと同様に使用できます。
JDeveloperを使用して、カスタム・コンポーネントを開発するアプリケーション・ワークスペースおよびプロジェクトを設定できます。ワークスペースおよびプロジェクトを作成したら、カスタム・コンポーネントを構成する必須のクラス、JavaScriptファイルおよび構成ファイルに対して、基礎作業ファイルを追加します。開発時には、カスタム・コンポーネントに固有のそれらのファイルをそれぞれ編集し、ファイルにコードを追加します。
開発プロセスは次のとおりです。
開発の環境として、アプリケーション、ワークスペースおよびプロジェクトを作成します。これには、ライブラリ依存性の追加、XMLスキーマの登録が含まれます。コンポーネントは、そのコンポーネントを使用する予定があるアプリケーションには作成しないでください。
JARファイルにコンポーネントをパッケージ化するためのデプロイメント・プロファイルを作成します。
次の基礎構成ファイルとサポート・ファイルを作成します。
faces-config.xml: コンポーネントで使用される多くのアーティファクトを登録するために使用します。
trinidad-skins.xml: コンポーネントが使用するスキンを登録するために使用します。
Cascading Style Sheet: スキンのスタイル・プロパティを定義するために使用します。
レンダー・キット・リソース・ローダー: コンポーネントで必要とされるすべてのリソースをアプリケーションでロードできるようにします。
adf-js-features.xml: コンポーネントをJavaScriptパーティションの一部にできます。パーティションの詳細は、4.9項「JavaScriptライブラリのパーティション化」を参照してください。
JSPタグ・ライブラリ・ディスクリプタ(TLD) (JSP用): JSFページで使用するタグを定義します。
コンポーネント・ハンドラ(Facelet用): コンポーネントのレンダリングに使用するハンドラを定義します。
次のクライアント側JavaScriptファイルを作成します。
クライアント・コンポーネント: クライアントのコンポーネントとその属性を表します。
クライアント・ピア: コンポーネントのDocument Object Model(DOM)を管理します。
クライアント・イベント: クライアントでの処理を起動し、オプションでサーバーに処理を伝播します。
次のサーバー側Javaファイルを作成します。
サーバー・コンポーネント・クラス: サーバーのコンポーネントを表します。
サーバー・イベント・リスナー・クラス: イベントをリスニングして、応答します。
サーバー・イベント・クラス: サーバーのイベントを起動します。
サーバー・レンダラ・クラス: コンポーネントの表示を決定します。
リソース・バンドル・クラス: コンポーネントで使用されるテキスト文字列を定義します。
JavaScriptおよびJavaコードをテストおよびデバッグして、コンポーネントの開発をさらに進めます。JDeveloperデバッガを使用して、ブレークポイントを設定し、コードを段階的に開発できます。Javaロギング機能を使用して、コンポーネントの実行をトレースすることもできます。
JARファイルにコンポーネントをデプロイします。
コンポーネントをアプリケーションに追加してテストします。
表31-1には、カスタム・コンポーネントのクライアント側およびサーバー側コンポーネントのアーティファクトがリストされています。この表には構成ファイルおよびサポート・ファイルは含まれていません。
表31-1 カスタム・コンポーネントのクライアント側およびサーバー側アーティファクト
| クライアント | サーバー |
|---|---|
|
コンポーネント・クラス:
拡張:
|
コンポーネント:
拡張:
|
|
イベント:
拡張:
|
イベント:
拡張:
|
|
イベント・リスナー:
拡張:
|
|
|
コンポーネント・ピア:
拡張:
|
|
|
コンポーネント・レンダラ:
拡張:
|
|
|
コンポーネントJSPタグ(JSP専用):
拡張:
|
|
|
コンポジット・リソース・ローダー:
拡張:
|
|
|
JavaScriptリソース・ローダー:
拡張:
|
|
|
リソース・バンドル:
拡張:
|
カスタム・コンポーネントの作成について説明するために、手順全体でtagPaneという名前のカスタム・コンポーネントを例として使用します。tagPaneカスタム・コンポーネントは、再利用の目的で作成されます。tagPaneのプレゼンテーションは、既存の様々なコンポーネントを使用して実装可能ですが、単一のカスタム・コンポーネントを作成するとページ開発者の作業が単純化されます。この場合、コンポーネント開発者とページ開発者間の生産性においてトレードオフが生じることがあります。この特定のビューを複数回作成する必要がある場合、開発チームはコード行を減らし、ビジネス・プロセスの自動化タスクを単純化することで、コストを削減できます。
tagPaneコンポーネントは、ファイル・セットに対する一連のタグとその出現の重み付けを表示します。最も頻繁に使用されるタグは最大フォント・サイズで表示され、最も使用されないタグは最小フォント・サイズで表示されます。各タグはイベントをトリガーするリンクでもあり、トリガーされたイベントはサーバーに伝播されます。サーバーでは、そのタグを含むすべてのファイルが表に表示されます。図31-1に、tagPaneコンポーネントがFile Explorerアプリケーションの「検索」ペインの下に追加された場合にどのように表示されるかを示します。
tagPaneコンポーネントは、Java Mapコレクションのタグのコレクションを受け取ります。マップのキーはタグ名です。値はタグに割り当てられた重みです。File Explorerアプリケーションでは、重みはタグの出現回数であり、多くの場合、タグに関連付けられているファイル数です。タグ名はリンクのボディ・テキストに表示され、名前の表示に使用されるフォント・サイズが重みを表します。各タグのフォント・サイズは、ファイル・セット内のすべてのタグに割り当てられている重みの最大と最小に基づき、最大フォント・サイズと最小フォント・サイズ内で相対的に計算されます。これらの機能を実行するには、tagPaneカスタム・コンポーネントにクライアント側とサーバー側の両方の動作を設定する必要があります。
サーバー側では、コンポーネントはHTMLハイパーリンクをレンダリングすることでタグのマップを表示します。基本的なマークアップ・レンダリングはサーバー側で実行されます。コンポーネントには、ユーザーによるリンクのクリックを処理し、関連ファイルを表示するためのカスタム・イベントを定義します。これらのサーバー側の動作は、値式およびメソッド式を使用して定義します。
たとえば、tagPaneコンポーネントには次のものが含まれます。
タグのMap<String, Number>コレクションを設定するtagプロパティ。
タグのリンクをクリックしたときにサーバーで起動されるtagSelectionListenerメソッド・バインディング・イベント。
重みの降順で左から右に一連のタグを表示する、またはアルファベットの昇順にタグのリンクを表示するためのorderByプロパティ。
各タグをその重み(出現回数)に比例したフォント・サイズで表示するために、フォント・サイズはインライン・スタイルを使用して制御されます。ただし、各タグとコンポーネントのルート・マークアップ・ノードもスタイル・クラスを使用します。
例31-1に、tagPaneコンポーネントのJSFページでの使用方法を示します。
例31-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コンポーネントでは、ルート要素を指定し、リンクのコンテナのスタイルおよびハイパーリンクの表示方法を定義するために、スキン・セレクタが必要です。例31-2に、tagPaneコンポーネントのCSSファイル内のスタイル・セレクタのサンプル・セットを示します。
例31-2 サンプル・カスタム・コンポーネントのCSSスタイル・セレクタ
acme|tagPane - root element acme|tagPane::content - container for the links acme|tagPane::tag - tag hyperlink
サーバー側のカスタム・コンポーネントに必要なHTMLコードを指定する必要がある場合もあります。
例31-3に、tagPaneコンポーネントで使用されるHTMLのサーバー側のコードを示します。
例31-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とのすべての対話は、ピアを使用して行われます(詳細は、第4章「ADF Facesクライアント側アーキテクチャの使用方法」を参照してください)。コンポーネント・ピアでは、タグ名を囲むハイパーリンクのクリックがリスニングされます。リンクがクリックされると、ピアによってクライアント側でカスタム・イベントが発生し、そのイベントがサーバー側に伝播されて、追加処理されます。
表31-2には、tagPaneコンポーネントのクライアント側とサーバー側のアーティファクトがリストされています。表31-1のネーミング規則を参照すると、component_packageはcom.adfdemo.acme、prefixはAcmeです。
表31-2 tagPaneカスタム・コンポーネントのクライアント側およびサーバー側アーティファクト
| クライアント | サーバー |
|---|---|
|
コンポーネント:
拡張:
|
コンポーネント
拡張:
|
|
イベント:
拡張:
|
イベント:
拡張:
|
|
イベント・リスナー:
拡張:
|
|
|
コンポーネント・ピア:
拡張:
|
|
|
コンポーネント・レンダラ:
拡張:
|
|
|
コンポーネントJSPタグ:
拡張:
|
|
|
コンポジット・リソース・ローダー:
拡張:
|
|
|
JavaScriptリソース・ローダー:
拡張:
|
|
|
リソース・バンドル:
拡張:
|
JDeveloperを使用して、カスタム・コンポーネントを開発するためのアプリケーションおよびプロジェクトを設定します。スケルトン・プロジェクトを作成すると、JARファイルにコンポーネントをパッケージ化するためのデプロイメント・プロファイルを追加できます。
開発の初期段階では、開発を可能にするための基礎構成ファイルとサポート・ファイルを作成します。これらのファイルはプロセス中に追加および編集することもできます。次の構成ファイルを作成します。
META-INF/faces-config.xml: すべてのJSFベースのアプリケーションに必要な構成ファイルです。最終的にコンポーネントがインポートされるアプリケーションで、コンポーネントがfaces-config.xmlファイルを使用する間は、開発でこの構成ファイルが必要になります。JDeveloperは、アプリケーション作成時にユーザーにかわってこのファイルを作成します。
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 (Facelet用): 使用アプリケーションがFaceletを使用する場合のコンポーネントのタグ・ライブラリ定義です。このファイルではコンポーネントのハンドラを定義します。
たとえば、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に設定されたら、ファイルにコンテンツを追加します。次に、クライアント側のファイルとサーバー側のファイルを作成します。詳細は、31.3項「クライアント側の開発」および31.4項「サーバー側の開発」を参照してください。
この章では、ユーザーがJDeveloperの使用経験があり、アプリケーションの作成およびデプロイに伴う手順に精通していると仮定しています。JDeveloperを使用したアプリケーションの作成の詳細は、第3章「ADF FacesとJDeveloperの概要」を参照してください。デプロイの詳細は、『Oracle Fusion Middleware Fusion Oracle Application Development Framework開発者ガイド』の「Fusion Webアプリケーションの開発」の章を参照してください。
始める前に:
カスタムADF Facesコンポーネントに必要なワークスペースおよび基礎ファイルについて理解しておくと役立ちます。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
JDeveloperでカスタム・コンポーネントの開発環境を設定する手順:
コンポーネントの開発コンテナとして機能するアプリケーションを作成します。JDeveloperを使用して、ワークスペースおよびプロジェクトを作成します。アプリケーション作成の手順は、第3.2項「アプリケーション・ワークスペースの作成」を参照してください。アプリケーション・テンプレートを選択する場合は、「カスタム・アプリケーション」テンプレートを選択します。
|
注意: 他のアプリケーション・テンプレートを選択したり、他のテクノロジをアプリケーションに追加したりしないでください。カスタム・コンポーネントはJARファイルにパッケージ化されるため、Webアプリケーションに固有のテンプレートを使用するときまたはWebテクノロジを追加するときに、デフォルトでJDeveloperによって作成される |
ライブラリ依存性を追加します。
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「プロジェクト・プロパティ」を選択します。
左ペインで「ライブラリとクラスパス」を選択します。
「ライブラリの追加」をクリックします。
「ライブラリの追加」ダイアログで、ADF Faces Runtime 11、Faceletランタイム(Faceletを使用する場合)、JSF 2.0およびJSP Runtimeを選択して、「OK」をクリックします。
「OK」をクリックして、「プロジェクト・プロパティ」ダイアログを閉じます。
新しいデプロイメント・プロファイルを作成し、プロジェクトをJARファイルとしてデプロイできるようにします。
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で、「デプロイメント・プロファイル」→「ADFライブラリのJARファイル」を選択して、「OK」をクリックします。
「デプロイメント・プロファイルの作成」ダイアログで、「デプロイメント・プロファイル名」に名前を入力します。たとえば、tagPaneコンポーネントの場合は、adf-richclient-demo-acmeを使用します。
「JARデプロイメント・プロファイルのプロパティの編集」ダイアログで、「OK」をクリックします。
XMLスキーマを登録します。
カスタム・コンポーネントには、複数のXML構成ファイルが必要です。JDeveloperを使用して、それらの構成ファイルに関連付けられているXMLスキーマを登録できます。次の3つの構成ファイル、trinidad-skins.xml、trinidad-config.xmlおよびadf-js-features.xmlに対してスキーマを追加する必要があります。これらのスキーマを事前登録することにより、マークアップ構造の詳細を理解できなくても、テンプレートXML構成ファイルを作成できます。スキーマの名前と場所は、JDeveloperのベース・インストールによって想定されます。
「ツール」→「設定」を選択します。「設定」ダイアログの左ペインで「XMLスキーマ」を選択し、「追加」をクリックします。
表31-3に示すように、「スキーマの追加」ダイアログで「参照」をクリックして、JDeveloperビルドに含まれているXMLスキーマに移動します。
|
注意: 「スキーマの追加」ダイアログでは、「拡張子」が |
表31-3 XMLスキーマの場所
| XML構成ファイル | スキーマの場所 |
|---|---|
|
|
|
|
|
|
|
|
|
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を追加して、コンポーネントのスタイルを定義します。
始める前に:
カスタムADF Facesコンポーネントに必要なワークスペースおよび基礎ファイルについて理解しておくと役立ちます。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
カスタム・コンポーネントのCascading Style Sheetを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を選択し、「ファイル」を選択して、「OK」をクリックします。
「ファイルの作成」ダイアログで、次のように設定します。
ファイル名、たとえばacme-simple-desktop.cssを入力します。
\src\META-INF\component_prefix\stylesを「ディレクトリ」エントリの終わりに追加します(component_prefixはコンポーネント・ライブラリで使用される接頭辞です)。たとえば、tagPaneコンポーネントの場合、acmeが接頭辞であるため、追加する文字列は\META-INF\acme\stylesになります。
空のファイルを作成し、カスタム・リソース・ローダーへの完全修飾クラスパスを追加します。
始める前に:
カスタムADF Facesコンポーネントに必要なワークスペースおよび基礎ファイルについて理解しておくと役立ちます。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
カスタム・コンポーネントのリソース・ローダーを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「ファイル」を選択して、「OK」をクリックします。
「ファイルの作成」ダイアログで、次のように設定します。
「ファイル名」にcomponent_prefix.resourcesを入力し、component_prefixはコンポーネント・ライブラリで使用される接頭辞になります。たとえば、tagPaneコンポーネントの場合、acmeが接頭辞であるため、入力する文字列はacme.resourcesになります。
ディレクトリ・エントリの最後に\src\META-INF\sevlets\resources\を追加します。
JSFページを使用するにはJSP TLDファイルが必要です。
始める前に:
カスタムADF Facesコンポーネントに必要なワークスペースおよび基礎ファイルについて理解しておくと役立ちます。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
カスタム・コンポーネントのJavaServer Pages TLDファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」ノードを開き、「JSP」を選択します。
「JSPタグ・ライブラリ」を選択し、「OK」をクリックします。
「JavaServer Pageタグ・ライブラリ作成」ダイアログで「デプロイ可能」を選択し、「次へ」をクリックします。
次の内容を入力します。
タグ・ライブラリ・ディスクリプタのバージョン: 2.1を選択します。
短縮名: 名前を入力します。たとえば、tagPaneコンポーネントの場合、acmeと入力します。
タグ・ライブラリURI: タグ・ライブラリのURIを入力します。たとえば、tagPaneコンポーネントの場合、http://oracle.adfdemo.acmeと入力します。
「次へ」をクリックし、オプションで追加のタグ・ライブラリ情報を入力して、「終了」をクリックします。
機能ファイルを追加して、カスタム・コンポーネントに関連付けられているJavaScriptファイルを定義します。クライアント・コンポーネント、クライアント・ピアおよびクライアント・イベントのファイルが含まれます。
始める前に:
カスタムADF Facesコンポーネントに必要なワークスペースおよび基礎ファイルについて理解しておくと役立ちます。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
カスタム・コンポーネントの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エディタで自動的に開きます。
使用アプリケーションでFaceletを使用する場合、そのコンポーネントにハンドラを定義する必要があります。
始める前に:
カスタムADF Facesコンポーネントに必要なワークスペースおよび基礎ファイルについて理解しておくと役立ちます。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
Faceletタグ・ライブラリ・ファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「XML」を選択します。
右ペインで「XML文書」を選択し、「OK」をクリックします。
「XMLファイルの作成」ダイアログで、次の入力を行います。
ファイル名: prefix_name.taglib.xmlを入力します。
ディレクトリ: ディレクトリ・エントリの最後に\src\META-INFを追加します。
例31-4に示すコードをコピーし、貼り付けます。
例31-4 Faceletタグ・ライブラリ構成ファイルのコード
<?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ファイルを作成およびコーディングできます。クライアント側の開発が終了したら、31.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イベント・コールバックが管理されます。クライアント側アーキテクチャ(ピアを含む)の詳細は、4.1項「ADF Facesアーキテクチャの使用について」を参照してください。
次の項では、カスタム・コンポーネント開発テンプレート環境がすでに設定されていると仮定しています。この開発環境には、アプリケーション・ワークスペース、プロジェクトおよびデプロイメント・プロファイルの設定、およびスキーマの登録が含まれます。まだ設定していない場合は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
JDeveloperを使用して、コンポーネントのJavaScriptファイルを作成します。JavaScriptファイルに、コンポーネントのコンポーネント・タイプを定義します。
始める前に:
カスタムADF Facesコンポーネントのクライアント側の開発について理解しておくと役立ちます。詳細は、31.3項「クライアント側の開発」を参照してください。
ワークスペースを設定し、構成ファイルを作成しておく必要もあります。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
コンポーネントのJavaScriptファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」をクリックします。
「新規ギャラリ」で「Web層」を開き、「HTML」を選択します。
「JavaScriptファイル」を選択し、「OK」をクリックします。
「JavaScriptファイルの作成」ダイアログで、次のように設定します。
ファイル名: クライアント側コンポーネントの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeTagPane.jsと入力します。
|
ヒント: ネーミングの競合を回避するために、名前をコンポーネントの接頭辞で開始します。 |
ディレクトリ: srcディレクトリの下のサブディレクトリに、コンポーネントのディレクトリ・パスを入力します。たとえば、tagPaneコンポーネントの場合、adfrichclient-demo-acme\src\oracle\adfdemo\acme\js\componentと入力します。
エディタでJavaScriptファイルを開き、コンポーネント・コードを追加して、コンポーネント・タイプを定義します。例31-5に、tagPaneコンポーネントで使用されるコードを示します。
JDeveloperを使用して、イベントのJavaScriptファイルを作成します。イベントが起動されたとき(マウス・クリックなど)に必要な機能を実行するためのコードをJavaScriptに追加します。
始める前に:
カスタムADF Facesコンポーネントのクライアント側の開発について理解しておくと役立ちます。詳細は、31.3項「クライアント側の開発」を参照してください。
ワークスペースを設定し、構成ファイルを作成しておく必要もあります。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
イベントのJavaScriptを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を開き、「HTML」を選択します。
「JavaScriptファイル」を選択し、「OK」をクリックします。
「JavaScriptファイルの作成」ダイアログで、次のように設定します。
ファイル名: クライアント側イベントの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeTagSelectEvent.jsと入力します。
|
ヒント: ネーミングの競合を回避するために、名前をコンポーネントの接頭辞で開始します。 |
ディレクトリ: srcディレクトリの下のサブディレクトリに、イベントのディレクトリ・パスを入力します。たとえば、tagPaneコンポーネントの場合、adf-richclient-demo-acme\src\oracle\adfdemo\acme\js\eventと入力します。
エディタでJavaScriptファイルを開き、イベント・コードを追加します。tagPaneコンポーネントに追加されるイベント・コードを示す例は、第F.2.1項「JavaScriptのイベント・コード」を参照してください。
JDeveloperを使用して、ピアのJavaScriptファイルを作成します。コードを追加してピアを登録し、コンポーネントにバインドします。
始める前に:
カスタムADF Facesコンポーネントのクライアント側の開発について理解しておくと役立ちます。詳細は、31.3項「クライアント側の開発」を参照してください。
コンポーネント用のJavaScriptファイルも作成しておく必要があります。詳細は、31.3.1項「コンポーネントのJavaScriptファイルの作成方法」を参照してください。
ピアのJavaScriptファイルを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「Web層」を開き、「HTML」を選択します。
「JavaScriptファイル」を選択し、「OK」をクリックします。
「JavaScriptファイルの作成」ダイアログで、次のように設定します。
ファイル名: クライアント側ピアの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeTagPanePeer.jsと入力します。
|
ヒント: ネーミングの競合を回避するために、名前をコンポーネントの接頭辞で開始します。 |
ディレクトリ: srcディレクトリの下のサブディレクトリに、イベントのディレクトリ・パスを入力します。たとえば、tagPaneコンポーネントの場合、adf-richclient-demo-acme\src\oracle\adfdemo\acme\js\componentと入力します。
エディタでJavaScriptファイルを開き、ピアのコードを追加します。このコードで、ピアを作成し、DOMに関するイベント処理を追加し、ピアをコンポーネントに登録する必要があります。例31-6に、tagPaneコンポーネントに追加されるコードを示します。
例31-6 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ファイルに追加できます。
始める前に:
カスタムADF Facesコンポーネントのクライアント側の開発について理解しておくと役立ちます。詳細は、31.3項「クライアント側の開発」を参照してください。
コンポーネント用のJavaScriptファイルも作成しておく必要があります。詳細は、31.3.1項「コンポーネントのJavaScriptファイルの作成方法」を参照してください。
カスタム・コンポーネントをJavaScriptライブラリ機能構成ファイルに追加する手順:
4.9.1項「JavaScript機能の作成方法」に記述されている手順に従い、XMLファイルがすでに作成されている場合は、その手順を省略します。例31-7に、tagPaneコンポーネントで使用されるadf-js-features.xmlファイルを示します。
例31-7 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ファイルに追加します。そして、31.2項「ワークスペースと基礎ファイルの設定」で作成を開始した構成ファイルを完成させます。
ADF FacesイベントAPIには、イベントを処理するためのイベント・リスナー・インタフェースが必要です。カスタム・コンポーネントにはイベントに対する依存性があり、イベントにはイベント・リスナー・インタフェースに対する依存性があります。Javaのimport文に、これらの依存性を反映させる必要があります。コンポーネントのcomponentTypeも定義する必要があります。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
ワークスペースを設定し、構成ファイルを作成しておく必要もあります。詳細は、31.2項「ワークスペースと基礎ファイルの設定」を参照してください。
EventListenerクラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「Java」を選択します。
「Javaインタフェース」を選択し、「OK」をクリックします。
Javaインタフェース・ファイルの作成ダイアログで、次のように設定します。
名前: リスナーの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagSelectListenerと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.eventと入力します。
エディタでJavaファイルを開き、次の内容を追加します。
リスナーでjavax.faces.event.FacesListenerインタフェースを拡張します。
import文を追加して、FacesListenerクラス、およびイベントが依存するすべてのクラスをインポートします。
新規イベントを処理するメソッド・シグネチャを追加します。実際のイベントを作成していない場合でも、ここで入力しておけば、後で入力する必要がなくなります。
例31-8に、tagPaneイベント・リスナーのコードを示します。
例31-8 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;
}
31.3.2項「イベントのJavaScriptファイルの作成方法」で作成したJavaScriptイベントに対応するサーバー側のイベントを作成する必要があります。サーバー側のJSFイベントは、リクエスト値の適用ライフサイクル・フェーズ中にコンポーネントによりキューに入れられます。イベントは、レスポンスのレンダリング・フェーズ以外のすべてのフェーズの後にUIViewRootクラスまで伝播されます。キューイングされたイベントは、関連付けられたコンポーネントにブロードキャストされます。
サーバー側のJavaコンポーネントでは、サーバー側のイベントを呼び出す必要があるため、最初にイベント・ソース・ファイルを作成して、コンパイル依存性を解決する必要があります。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
イベント・リスナー・クラスも作成しておく必要があります。詳細は、31.4.1項「イベント・リスナーのクラスの作成方法」を参照してください。
サーバー側イベント・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: イベントの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagSelectEventと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.eventと入力します。
拡張: イベント・クラスで拡張するクラスの名前を入力します。この名前は通常、javax.faces.event.FacesEventです。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
例31-9に、イベント・クラスのコードを示します。
例31-9 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を拡張します。
大部分のコンポーネントには、実装する必要があるプロパティが複数あります。ベース・クラスから継承されるプロパティもあれば、ADF Facesフレームワークに必須のプロパティもあります。他のプロパティはベスト・プラクティスであるため、必要となります。また、一部のプロパティは、カスタム・コンポーネントの機能に固有のものです。
たとえば、tagPaneコンポーネントには、表31-4に示されているプロパティがあります。
表31-4 tagPaneカスタム・コンポーネントのコンポーネント・プロパティ
| 元 | プロパティ | データ型 | 説明 |
|---|---|---|---|
|
継承 |
|
|
コンポーネントの識別子。 |
|
|
|
コンポーネント・レンダラとして登録されている論理識別子。 |
|
|
|
|
コンポーネントがレンダリングされているかどうかを判断するTrueまたはFalseのフラグ。 |
|
|
|
|
マネージドBeanにコンポーネント・インスタンスを格納するバインディング値式。 |
|
|
ADF Facesフレームワーク |
|
|
クライアント側コンポーネントが生成されるかどうかを判断する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属性のアクセッサを生成します。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。作成するクラスについても理解する必要があります。詳細は、31.4.3項「コンポーネントの作成」を参照してください。
イベント・クラスも作成しておく必要があります。詳細は、31.4.2項「イベントのクラスの作成方法」を参照してください。
コンポーネント・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「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であるとみなされます。例31-10に、tagPaneコンポーネントのPropertyKeyメソッドを示します。
例31-10 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)へのコールで置き換えます。
例31-11に、private属性を置き換えた後のコードを示します。
例31-11 コンポーネントのプロパティ
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)に関与できるようにするには、例31-12に示すように、getBeanTypeメソッドをオーバーライドする必要があります。
例31-12
/**
* <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の場合は、アプリケーションの起動フェーズで処理されます。詳細は、第5章「ADF FacesでのJSFライフサイクルの使用」を参照してください。
例31-13に、tagPaneコンポーネントのオーバーライドされるbroadcastメソッドを示します。
例31-13 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など)も追加する必要があります。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。作成するクラスについても理解する必要があります。詳細は、31.4.3項「コンポーネントの作成」を参照してください。
コンポーネント・クラスも作成しておく必要があります。詳細は、31.4.4項「コンポーネントのクラスの作成方法」を参照してください。
カスタム・コンポーネントを登録する手順:
アプリケーション・ナビゲータで、faces-config.xmlファイルをダブルクリックします。
「概要」タブをクリックして、「コンポーネント」ナビゲーション・タブをクリックします。
「追加」アイコンをクリックして、コンポーネントのタイプとクラスを入力します。
オプションで、任意の属性、プロパティまたはファセットを追加します。
例31-14に、faces-config.xmlファイルに定義されているtagPaneコンポーネントを示します。
例31-14 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ファイルを作成します。詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
|
ヒント: リソースのプロパティ・ファイルを使用することもできます。 |
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。作成するクラスについても理解する必要があります。詳細は、31.4.3項「コンポーネントの作成」を参照してください。
コンポーネントも登録しておく必要があります。詳細は、31.4.5項「faces-config.xmlファイルへのコンポーネントの追加方法」を参照してください。
リソース・バンドル・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: リソース・バンドルの名前を入力します。名前には、使用するスキンを反映させる必要があります。たとえば、サンプル・コンポーネントの場合、AcmeSimpleDesktopBundleと入力します。
パッケージ: パッケージの名前を入力します。たとえば、サンプル・コンポーネントの場合、oracle.adfdemo.acme.faces.resourceと入力します。
拡張: リソース・バンドルの場合、java.util.ListResourceBundleと入力する必要があります。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
必要に応じてキーを追加し、テキストを定義します。スキンのリソース・バンドル作成の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
例31-15に、tagPaneコンポーネントのリソース・バンドル・コードを示します。
例31-15 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では、 |
例31-16に、tagPaneリソース・バンドルを簡単なスキンに登録するためのコードを示します(この後の手順でstyle-sheet-name要素値を追加します)。
ADF Facesコンポーネントでは、コンポーネントの機能はコンポーネント・クラスに委任され、使用アプリケーションがJSPを使用する場合、コンポーネントの表示はレンダラに委任されます。デフォルトでは、ADF Facesのすべてのタグが、関連付けられたコンポーネント・クラスとHTMLレンダラを結合し、HTMLレンダー・キットの一部になっています。ADF Facesには、デスクトップおよびPDAデバイスの両方に表示できるように、HTMLレンダー・キットが含まれています。
レンダラは、ファミリとレンダラ・タイプによってレンダー・キットで修飾されます。ファミリはコンポーネントの一般カテゴリであり、スーパークラスに定義されているファミリと同じにする必要があります。コンポーネントは継承によってメソッドを取得するため、コンポーネント内のgetFamily()メソッドをオーバーライドする必要はありません。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。作成するクラスについても理解する必要があります。詳細は、31.4.3項「コンポーネントの作成」を参照してください。
リソース・バンドルも作成しておく必要があります。詳細は、31.4.6項「リソース・バンドルのクラスの作成方法」を参照してください。
レンダラ・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: レンダラの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagPaneRendererと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.renderと入力します。
拡張: oracle.adf.view.rich.render.RichRendererと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
必要な機能を追加します。RichRenderクラスで使用可能なメソッドおよびフィールドの詳細は、ADF Faces JavaDocを参照してください。
|
注意: スキニング機能には、コンポーネントのレンダリング中に、指定されたCSSセレクタのCSSスタイル・プロパティの取得に使用できるAPIが用意されています。このAPIは、設定されているスタイリングに基づいて、条件付きのレンダリングを行う必要がある場合に便利です。詳細は、 |
|
注意: DOM構造で拡大がサポートされている場合、コンポーネントがコンポーネント・ツリーで唯一のビジュアル・ルート・コンポーネントであり、ドキュメント・コンポーネントが拡大できるように構成されていれば、そのコンポーネントをブラウザのビューポートいっぱいに自動的に拡大できます(詳細は、9.2.5項「documentタグの構成方法」を参照してください)。 コンポーネントを自動的に拡大させるには、 このメソッドでは、コンポーネントがビジュアル・ルート・コンポーネントでない場合にはNULLを返し、ビジュアル・ルート・コンポーネントである場合は、DIVをブラウザのビューポートいっぱいに拡大するスタイルの |
レンダラを作成したら、faces-config.xml構成ファイルを使用して登録します。カスタム・コンポーネントを他のADF Facesコンポーネントと組み合せて機能させる場合、そのADF Facesコンポーネントが使用しているのと同じレンダー・キットIDを使用する必要があります。
|
ヒント: JSFでレンダー・キットを定義できる最も高いレベルはビュー・ルートです。 |
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
レンダー・キットおよびレンダラも作成しておく必要があります。詳細は、31.4.7項「レンダラのクラスの作成方法」を参照してください。
レンダー・キットおよびレンダラを登録する手順:
アプリケーション・ナビゲータで、trinidad-config.xmlファイルをダブルクリックして、このファイルをソース・エディタで開きます。
「概要」タブをク選択して、「レンダー・キット」ナビゲーション・タブを選択します。
「レンダー・キット」の「追加」アイコンをクリックして、レンダー・キットIDにoracle.adf.richと入力します。
「レンダラ」の「追加」アイコンをクリックしてレンダラを登録し、次のように設定します。
ファミリ: コンポーネントで拡張するクラスを入力します。たとえば、tagPaneコンポーネントの場合、org.apache.myfaces.trinidad.Objectと入力します。
タイプ: コンポーネントのタイプを入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.TagPaneと入力します。これは、レンダラ・タイプと一致している必要があります。
クラス: 31.4.7項「レンダラのクラスの作成方法」で作成したレンダラの完全修飾クラス・パスを入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.render.TagPaneRendererを入力します。
例31-17に、tagPaneコンポーネントのレンダー・キットおよびレンダラの登録を示します。
例31-17 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タグで同じレスポンス・ライターに書込みが行われていたために、これが問題の原因となりました。インターリーブのタイミングが、独自の子コンポーネントをレンダリングしたコンポーネントに対してうまく合いませんでした。
|
注意: Faceletを使用するアプリケーションでは、コンポーネントのインスタンス化にハンドラを使用します。詳細は、31.2.7項「Faceletタグ・ライブラリ構成ファイルの追加方法」を参照してください。 |
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つの属性をタグ・クラスに追加する必要はありません。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
この項のこれまでの手順をこの時点までに完了しておくことも必要です。
JSPタグを追加する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: タグの名前を入力します。たとえば、tagPaneコンポーネントの場合、TagPaneTagと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.taglibと入力します。
クラス: org.apache.myfaces.trinidad.webapp.UIXComponentELTagと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
ソース・エディタで、すべての属性をファイルに追加します。
例31-18に、TagPaneTagクラスの属性のコードを示します。
例31-18 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)を使用してコンポーネントをインスタンス化するためにスーパークラスによって使用されます。
例31-19に、コンポーネント・タイプとレンダー・タイプがいずれもoracle.adfdemo.acme.TagPaneであるTagPaneTagクラスのコードを示します。
例31-19 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タグ属性値をコンポーネントにプッシュすることです。
例31-20に、tagPaneTagクラスのオーバーライド・メソッドを示します。
例31-20 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ツールに提供します(Faceletを使用するアプリケーションではTLDは使用されません)。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
この項のこれまでの手順をこの時点までに完了し、タグ・ライブラリをURIに明確に関連付け、バージョンを割当て、それに名前を指定しておくことも必要です。この手順は、31.2.5項「JavaServer Pagesタグ・ライブラリ・ディスクリプタ・ファイルの追加方法」でタグ・ライブラリ・スタブ・ファイルを作成したときに実行されている必要があります。
TLDを構成する手順:
スケルトンTLDファイルを開きます。
コンポーネント・パレットから、tag要素をドラッグ・アンド・ドロップします。
「タグの挿入」ダイアログで、次のように設定します。
name: コンポーネントの名前を入力します。たとえば、tagPaneコンポーネントの場合、tagPaneと入力します。
body-content: JSPと入力します。
tag-class: 省略ボタンをクリックして、コンポーネントのタグ・クラス・ファイルに移動します。
各属性を定義します。各属性に対して次のように設定します。
構造ウィンドウでtag要素を右クリックし、「tagの中に挿入」→「属性」を選択します。
属性の挿入ダイアログで、名前の値を入力します。この名前はタグ・クラスで指定した名前と同一にする必要があります。
構造ウィンドウで属性を選択し、プロパティ・インスペクタで属性の値を設定します。
各属性に定義する要素は3タイプあります。<id>要素は単純な文字列です。追加の属性は、deferred-value属性またはdeferred-method属性となります。これらにより、式を遅れて(deferred)評価できます。これで、JSPとJSFで同じELエンジンを共有するようになったため、コンパイル済のELをコンポーネントに直接渡すことができます。
tagPaneコンポーネントのTLDの例は、第F.2.2項「タグ・ライブラリ・ディスクリプタ・ファイルのコード例」を参照してください。
リソース・ローダーは、カスタム・コンポーネントにコンポーネントのスキニングに必要なイメージ・ファイルがある場合にのみ必要です。イメージ・ファイルはJARプロジェクトにパッケージされているため、コンポーネント・ライブラリの使用者は、自分のWebプロジェクトのクラス・パスにJARを含め、Webデプロイ・ディスクリプタ・ファイル(web.xml)にいくつかのエントリを追加することが必要になります。ADF Facesフレームワークでは、イメージの配信にリソース・サーブレットが使用されます。このサーブレットをweb.xmlファイルに登録してから、リソース・ローダー・クラスを作成する必要があります。コンポーネント・ライブラリには、リソース・サーブレットにより自動ローディングされるリソース・ローダーが必要です。サーブレットのためにURLパターン・フォルダ・マッピングを作成すると、これがカスタム・コンポーネント・ライブラリ内でのリソースの検索および識別に使用されます。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
この項のこれまでの手順をこの時点までに完了しておくことも必要です。
リソース・ローダー・クラスを作成する手順:
アプリケーション・ナビゲータで、プロジェクトを右クリックし、「新規」を選択します。
「新規ギャラリ」で「一般」を展開し、「Java」を選択します。
「Javaクラス」を選択し、「OK」をクリックします。
Javaクラス・ファイルの作成ダイアログで、次のように設定します。
名前: リソース・ローダーの名前を入力します。たとえば、tagPaneコンポーネントの場合、AcmeResourceLoaderと入力します。
パッケージ: パッケージの名前を入力します。たとえば、tagPaneコンポーネントの場合、oracle.adfdemo.acme.faces.resourcesと入力します。
拡張: タグで拡張するクラスの名前を入力します。たとえば、tagPaneコンポーネントの場合、org.apache.myfaces.trinidad.resource.RegexResourceLoaderと入力します。
「オプション属性」セクションで、次のように選択します。
「アクセス修飾子」セクションで、「public」を選択します。
下部で、「スーパークラスからのコンストラクタ」および「抽象メソッドの実装」を選択します。
ソース・エディタで、より具体的なリソース・ローダーにマップされる正規表現を登録します。たとえば、イメージ・ディレクトリの下にあるイメージ・リソースにマップする式を作成できます。
例31-21に、カスタム・コンポーネントJARの/META-INFフォルダと相対的な場所にある/acme/images/ディレクトリにマップするtagPaneコンポーネントの式を示します。登録すると、カスタム・コンポーネントのイメージは/META-INF/acme/imagesの下に配置されます。
例31-21 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
スキンはCSS 3.0構文に基づくスタイルシートで、アプリケーション全体用に1箇所で指定されます。各ページのスタイルシートを挿入するかわりに、アプリケーション全体に対して1つ以上のスキンを使用します。各コンポーネントで自動的に、スキンで記述されているスタイルが使用されます。設計時のコードの変更は必要ありません。
Oracle ADF Facesには、アプリケーションで使用するスキンが3つ用意されています。
blafplus-rich : ADF Facesコンポーネントのデフォルトのスタイルを定義します。このスキンは、blafplus-mediumスキンを拡張します。
blafplus-medium : 適度な数のスタイル設定が提供されます。このスタイルは、simpleスキンを拡張します。
simple : 最低限の書式設定のみが含まれています。
スキンには、標準のCSSスタイルやレイアウトを設定するよりも多くのオプションがあります。スキンのCSSファイルは、スキン・フレームワークによって処理され、スキン・プロパティとアイコンが抽出されてSkinオブジェクトに登録されます。スタイルシート・ルールには、要素を識別するスタイル・セレクタ、およびコンポーネントの外観を説明する一連のスタイル・プロパティが含まれます。
ADF Facesコンポーネントはすべてスキンを使用します。デフォルトのスキンは簡単なスキンです。カスタム・コンポーネントは、他のADF Facesコンポーネントとともに使用されるため、既存のADF Facesスキンにスタイル・セレクタを追加します。リッチ・スキンとミディアム・スキンは、簡単なスキンからスタイルを継承するので、セレクタを簡単なスキンに追加するだけで、すべてのスキンでそのセレクタを使用できるようになります。ただし、スキンごとにセレクタのスタイルを変えたい場合があります。そのようなスタイルは、作成したCSSファイルに設定します。このファイルは、コンポーネントが使用されるアプリケーションの他のCSSスタイルとマージされます。
スキンで使用されるテキストは、リソース・バンドル内で定義されます。カスタム・リソース・バンドルを作成してテキストを作成し、表示するテキストを宣言します。カスタム・リソース・バンドルを作成した後、スキンにそれを登録します。リソース・バンドルとCSSを組み合せることで、コンポーネントで複数のロケールをサポートするためのメソッドが提供されます。
作成した/META-INF/trinidad-skins.xmlファイルは、CSSファイルおよびリソース・バンドルをADF Facesスキンに登録するために使用されます。
始める前に:
カスタムADF Facesコンポーネントのサーバー側の開発について理解しておくと役立ちます。詳細は、31.4項「サーバー側の開発」を参照してください。
この項のこれまでの手順をこの時点までに完了しておくことも必要です。
コンポーネントのスタイルを作成する手順:
31.2.3項「カスケーディング・スタイル・シートの追加方法」で作成したCSSファイルを開きます。
コンポーネントのルート・スタイル・セレクタを定義します。このスタイルは、コンポーネントを確立する<DIV>要素と関連付けられます。
必要に応じてその他のスタイル・セレクタを追加します。例31-22に、tagPaneコンポーネントのCSSファイルを示します。
例31-22 tagPaneコンポーネントのCSSファイル
acme|tagPane - root element acme|tagPane::content - container for the links acme|tagPane::tag - tag hyperlink
スキンで使用されるCSSコンポーネントの作成の詳細は、第28章「スタイルおよびスキンを使用した外観のカスタマイズ」を参照してください。
コンポーネントに必要なリソース・バンドルをすべて作成します。
CSSをADF Facesスキンに登録するには、/META-INF/trinidad-skins.xmlファイルを開きます。
構造ウィンドウで「skin-addition」要素を選択し、プロパティ・インスペクタで次のように設定します。
skin-id: カスタム・コンポーネント・セレクタを追加するADF Facesスキンを入力します。セレクタとADF Facesコンポーネントとの互換性を得るには、少なくともsimple.desktopスキンにセレクタを登録する必要があります。
|
注意: コンポーネントがOracle WebCenterアプリケーションで使用される可能性がある場合は、 |
style-sheet-name: ドロップダウン・リストを使用して「編集」を選択し、作成したCSSファイルに移動します。
リソース・バンドルを作成している場合は、バンドルの完全修飾パスを<bundle-name>要素の値として追加します。
例31-23に、tagPaneコンポーネントのコードを示します。
例31-23 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)ファイルを作成できるようにするには、作成した多くのリソースを追加して、プロジェクトのデプロイメント・プロファイルを更新する必要があります。
始める前に:
31.3項「クライアント側の開発」で説明されているように、コンポーネントのクライアント側のファイルを作成しておく必要があり、31.4項「サーバー側の開発」で説明されているように、サーバー側のファイルも作成しておく必要があります。
デプロイメントの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クラスが圧縮されます。コンポーネントのデバッグ時にはこの圧縮を無効にします。本番のデプロイメントでは、この設定を無効に切り替えます。
始める前に:
アプリケーションへのカスタム・コンポーネントの追加について理解しておくと役立ちます。詳細は、31.6項「アプリケーションへのカスタム・コンポーネントの追加」を参照してください。
web.xmlファイルを構成する手順:
アプリケーション・ナビゲータで、web.xmlファイルをダブルクリックして開きます。
概要エディタで「サーブレット」ナビゲーション・タブを選択し、「追加」アイコンをクリックして新規のサーブレットを追加します。
サーブレット表で次のように設定します。
名前: resourcesと入力します。
サーブレット・クラス: org.apache.myfaces.trinidad.webapp.ResourceServletと入力します。
表の下にある「サーブレット・マッピング」タブをクリックして、「追加」アイコンをクリックします。
URIの接頭辞を入力します。この接頭辞で始まるリソースは、サーブレットによって処理されます。たとえば、tagPaneコンポーネントの場合、接頭辞/acme/*と入力します。
スタイルシートの圧縮を無効にする手順:
「アプリケーション」を選択します。
「コンテキスト初期化パラメータ」の「追加」アイコンをクリックします。
「名前」にorg.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONと入力し、「値」にtrueと入力します。
JavaScriptデバッグは難しいタスクです。この動的言語の型確認なしでのデバッグを助けるために、ADF Faces JavaScriptライブラリには、Javaロギングに似たロギング・メカニズムが用意されています。クライアント・スクリプトをより型保証されたスクリプトにするアサーション・ストラテジもあります。これらの機能はいずれも、web.xmlファイルの構成パラメータを使用して有効にします。ロギング・ルーチンとアサーション・ルーチンはブラウザ固有です。クライアントJavaScriptライブラリでは、Gecko、Internet Explorer、OperaおよびSafariバージョンのブラウザ・エージェントがサポートされます。詳細は、A.2.3.4項「リソース・デバッグ・モード」を参照してください。
始める前に:
アプリケーションへのカスタム・コンポーネントの追加について理解しておくと役立ちます。詳細は、31.6項「アプリケーションへのカスタム・コンポーネントの追加」を参照してください。
デプロイメント・ディスクリプタも構成しておく必要があります。詳細は、31.6.1項「Webデプロイメント・ディスクリプタの構成方法」を参照してください。
ロギングとアサーションを有効にする手順:
アプリケーション・ナビゲータで、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コンソールから使用できます。
始める前に:
アプリケーションへのカスタム・コンポーネントの追加について理解しておくと役立ちます。詳細は、31.6項「アプリケーションへのカスタム・コンポーネントの追加」を参照してください。
デプロイメント・ディスクリプタも構成しておく必要があります。詳細は、31.6.1項「Webデプロイメント・ディスクリプタの構成方法」を参照してください。
カスタム・コンポーネントを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を使用して、カスタム・コンポーネントをアプリケーション・コンポーネントにバインドする必要があります。
例31-24に、tagPaneコンポーネントをFile Explorerアプリケーションにバインドするために使用されるバッキングBeanのコードを示します。
例31-24 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);
}
