Oracle® Fusion Middleware

ADFスキンの開発

12c (12.2.1)

E69962-01(原本部品番号:E52657-01)

2015年10月

スキンを作成およびアプリケーションに適用する方法について説明する、Oracle Application Development Framework (Oracle ADF)の開発者およびユーザー・インタフェース・デザイナのためのドキュメントです。

Oracle Fusion Middleware ADFスキンの開発, 12c (12.2.1)

E69962-01

Copyright © 2014, 2015, Oracle and/or its affiliatesAll rights reserved.

原本著者: Walter Egan

原本協力著者: Laura Akel

このソフトウェアおよび関連ドキュメントの使用と開示は、ライセンス契約の制約条件に従うものとし、知的財産に関する法律により保護されています。ライセンス契約で明示的に許諾されている場合もしくは法律によって認められている場合を除き、形式、手段に関係なく、いかなる部分も使用、複写、複製、翻訳、放送、修正、ライセンス供与、送信、配布、発表、実行、公開または表示することはできません。このソフトウェアのリバース・エンジニアリング、逆アセンブル、逆コンパイルは互換性のために法律によって規定されている場合を除き、禁止されています。

ここに記載された情報は予告なしに変更される場合があります。また、誤りが無いことの保証はいたしかねます。誤りを見つけた場合は、オラクル社までご連絡ください。

このソフトウェアまたは関連ドキュメントを、米国政府機関もしくは米国政府機関に代わってこのソフトウェアまたは関連ドキュメントをライセンスされた者に提供する場合は、次の通知が適用されます。

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations. As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs. No other rights are granted to the U.S. Government.

このソフトウェアまたはハードウェアは様々な情報管理アプリケーションでの一般的な使用のために開発されたものです。このソフトウェアまたはハードウェアは、危険が伴うアプリケーション(人的傷害を発生させる可能性があるアプリケーションを含む)への用途を目的として開発されていません。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用する際、このソフトウェアまたはハードウェアを安全に使用するために、適切な安全装置、バックアップ、冗長性(redundancy)、その他の対策を講じることは使用者の責任となります。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用したことに起因して損害が発生しても、オラクル社およびその関連会社は一切の責任を負いかねます。

OracleおよびJavaはOracle およびその関連企業の登録商標です。その他の名称は、それぞれの所有者の商標または登録商標です。

Intel、Intel Xeonは、Intel Corporationの商標または登録商標です。すべてのSPARCの商標はライセンスをもとに使用し、SPARC International, Inc.の商標または登録商標です。AMD、Opteron、AMDロゴ、AMD Opteronロゴは、Advanced Micro Devices, Inc.の商標または登録商標です。UNIXはThe Open Groupの登録商標です。

このソフトウェアまたはハードウェア、そしてドキュメントは、第三者のコンテンツ、製品、サービスへのアクセス、あるいはそれらに関する情報を提供することがあります。適用されるお客様とOracle Corporationとの間の契約に別段の定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスに関して一切の責任を負わず、いかなる保証もいたしません。適用されるお客様とOracle Corporationとの間の契約に定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスへのアクセスまたは使用によって損失、費用、あるいは損害が発生しても一切の責任を負いかねます。

目次

タイトルおよび著作権情報

はじめに

- 対象読者

- ドキュメントのアクセシビリティについて

- 関連ドキュメント

- 表記規則

このガイドで説明する新機能

- 12c (12.2.1)の新機能と変更された機能

1 Webアプリケーションのスキニングについて

- 1.1 Webアプリケーションのスキニングの概要

- 1.2 ADFスキンの開発の概要

- 1.3 ADFスキンの考察

- 1.4 Oracle ADFで提供されるADFスキンの継承関係

2 テーマ・エディタの使用

- 2.1 テーマ・エディタについて

- 2.2 テーマ・エディタの設定および起動

- 2.2.1 テーマ・エディタの設定方法

- 2.2.2 テーマ・エディタで作成したADFスキンの存続方法

- 2.2.3 テーマ・エディタの起動方法

- 2.3 テーマ・エディタからのADFスキンのエクスポート

3 ADFスキン・セレクタの使用

- 3.1 ADFスキン・セレクタについて

- 3.1.1 ADFスキン・セレクタと擬似要素

- 3.1.2 ADFスキン・セレクタおよびアイコン・イメージ

- 3.1.3 グループ化したADFスキン・セレクタ

- 3.1.4 下位のADFスキン・セレクタ

- 3.2 ADFスキニング・フレームワークでの擬似クラス

- 3.3 ADFスキニング・フレームワークでのプロパティ

- 3.4 JDeveloper内からのセレクタ情報へのアクセス

4 JDeveloperのADFスキンの使用

- 4.1 JDeveloperのADFスキンのエディタについて

- 4.2 ADFスキン・デザイン・エディタの使用

- 4.2.1 デザイン・エディタのサンプル・ページをレンダリングするブラウザの変更方法

- 4.3 ADFスキン・セレクタ・エディタの使用

- 4.3.1 セレクタ・ツリーについて

- 4.3.2 セレクタ・エディタのインタラクティブ・プレビュー

- 4.4 「プロパティ」ウィンドウの使用

- 4.5 ADFスキンのナビゲート

5 ADFスキンのソース・ファイルの作成

- 5.1 ADFスキンの作成について

- 5.2 ADFスキン・ファイルの作成

- 5.2.1 JDeveloperでのADFスキンの作成方法

- 5.2.2 ADFスキンを作成した場合の処理

- 5.3 1つ以上のADFスキンを現在のADFスキンにインポートする

- 5.4 ADFライブラリJARからのADFスキンの追加

- 5.4.1 ADFライブラリJARからADFスキンを追加する方法

- 5.4.2 ADFライブラリJARからADFスキンをインポートした場合の処理

6 コンポーネント固有セレクタの使用

- 6.1 コンポーネント固有セレクタの使用について

- 6.2 ADF Facesコンポーネントのセレクタの変更

- 6.3 ADFデータ視覚化コンポーネントのセレクタの変更

- 6.4 コンポーネント固有セレクタの変更

- 6.4.1 コンポーネント固有セレクタの変更方法

- 6.4.2 コンポーネント固有セレクタを変更した場合の処理

- 6.5 メッセージに適用するADFスキン・プロパティの設定

- 6.5.1 メッセージに適用するADFスキン・プロパティの設定方法

- 6.5.2 ADFスキン・プロパティをメッセージに適用するように設定した場合の処理

- 6.6 アクセシビリティのためのADFスキンの設定

- 6.6.1 アクセシビリティを考慮したADFスキンの設定方法

7 ADFスキンのイメージおよび色の使用

- 7.1 ADFスキンのイメージおよび色の使用について

- 7.2 ADFスキン・デザイン・エディタのイメージおよび色の変更

- 7.3 ADFスキンのアンカー・カラーの使用

- 7.4 コンポーネント・セレクタのイメージの変更

- 7.4.1 イメージをプロジェクトにコピーする方法

- 7.4.2 プロジェクトにイメージをコピーした場合の処理

8 ADFスキンのテキストの使用

- 8.1 ADFスキンのテキストの使用について

- 8.2 独自のリソース・バンドルからのテキストの使用

- 8.2.1 ADFスキンに追加のリソース・バンドルを指定する方法

- 8.2.2 ADFスキンに追加のリソース・バンドルを指定した場合の処理

9 グローバル・セレクタ別名の使用

- 9.1 グローバル・セレクタ別名について

- 9.2 グローバル・セレクタ別名の作成

- 9.2.1 グローバル・セレクタ別名の作成方法

- 9.2.2 グローバル・セレクタ別名を作成した場合の処理

- 9.3 グローバル・セレクタ別名の変更

- 9.3.1 グローバル・セレクタ別名の変更方法

- 9.4 グローバル・セレクタ別名の適用

- 9.4.1 グローバル・セレクタ別名の適用方法

- 9.4.2 グローバル・セレクタ別名を適用した場合の処理

- 9.4.3 グローバル・セレクタ別名の適用に関する必知事項

- 9.5 別のセレクタからのプロパティ値の参照

- 9.5.1 別のセレクタからプロパティ値を参照する方法

- 9.5.2 別のセレクタからプロパティ値を参照した場合の処理

10 スタイル・クラスの使用

- 10.1 スタイル・クラスについて

- 10.2 スタイル・クラスの作成

- 10.2.1 スタイル・クラスの作成方法

- 10.2.2 スタイル・クラスを作成した場合の処理

- 10.3 スタイル・クラスの変更

- 10.3.1 スタイル・クラスの変更方法

- 10.4 コンポーネントの特定のインスタンスに対するスタイル・クラスの設定

- 10.4.1 コンポーネントの特定のインスタンスに対してスタイル・クラスを設定する方法

- 10.4.2 コンポーネントの特定のインスタンスに対してスタイル・クラスを設定した場合の処理

11 @ルールの使用

- 11.1 ADFスキニング・フレームワークにおける@ルールについて

- 11.2 サーバー側@ルールの使用

- 11.3 クライアント側@ルールの使用

- 11.4 ADFスキン内での@ルールの作成

- 11.4.1 @ルールの作成方法

- 11.4.2 @ルールの作成時に発生する処理

- 11.4.3 実行時の動作: ADFスキニング・フレームワークによる@ルールの適用方法

12 完成したADFスキンのWebアプリケーションへの適用

- 12.1 完成したADFスキンのアプリケーションへの適用について

- 12.2 ADFスキンの変更のテスト

- 12.2.1 ADFスキンをテストするためのパラメータの設定方法

- 12.2.2 ADFスキンのテストのためにパラメータを設定した場合の処理

- 12.3 ADFスキンのADFライブラリJARへのパッケージ化

- 12.3.1 ADFスキンをADFライブラリJARにパッケージ化する方法

- 12.3.2 ADFスキンをADFライブラリJARにパッケージ化した場合の処理

- 12.4 WebアプリケーションへのADFスキンの適用

- 12.4.1 ADFスキンをアプリケーションに適用する方法

- 12.4.2 ADFスキンをアプリケーションに適用した場合の処理

- 12.5 実行中のWebアプリケーションへのADFスキンの適用

- 12.5.1 更新済ADFスキンを受け入れるようにWebアプリケーションを構成する方法

- 12.5.2 ADFライブラリJARをMBeanサーバーにデプロイする方法

- 12.5.3 ADFスキンを実行中のアプリケーションに適用した場合の処理

13 詳細な解説

- 13.1 ADFスキンのCSSファイルにおけるURLの参照

- 13.2 ADFスキンの構成ファイル

- 13.3 Oracle ADFで提供されるADFスキン

- 13.4 ADFスキンのバージョニング

- 13.4.1 ADFスキンのバージョニング方法

- 13.4.2 ADFスキンをバージョニングした場合の処理

はじめに

ADFスキンの開発へようこそ。

対象読者

このドキュメントは、ADF Facesのリッチ・クライアント・コンポーネントのスキニングによって、アプリケーションのルック・アンド・フィールの変更を行うアプリケーション開発者およびユーザー・インタフェース・デザイナを対象としています。

ドキュメントのアクセシビリティについて

Oracleのアクセシビリティへの取り組みについては、Oracle Accessibility ProgramのWebサイト(http://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc)にアクセスしてください。

Oracleサポートへのアクセス

サポートを購入したオラクル社のお客様は、My Oracle Supportを介して電子的なサポートにアクセスできます。詳細は、http://www.oracle.com/pls/topic/lookup?ctx=acc&id=info、聴覚に障害があるお客様はhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trsを参照してください。

関連ドキュメント

詳細は、以下のドキュメントを参照してください。

- ADF FacesによるWebユーザー・インタフェースの開発

- Oracle ADF Facesタグ・リファレンス

- Oracle ADF Facesスキン・セレクタ・タグ・リファレンス

- Oracle ADF Facesデータ視覚化ツール・タグ・リファレンス

- Oracle ADFデータ視覚化ツール・スキン・セレクタ・タグ・リファレンス

表記規則

このマニュアルでは次の表記規則を使用します。

表記規則

意味

太字

太字は、操作に関連するGraphical User Interface要素、または本文中で定義されている用語および用語集に記載されている用語を示します。

イタリック

イタリックは、ユーザーが特定の値を指定するプレースホルダ変数を示します。

固定幅フォント

固定幅フォントは、段落内のコマンド、URL、サンプル内のコード、画面に表示されるテキスト、または入力するテキストを示します。

このガイドで説明する新機能

次の項では、このリリースのADFスキン(テーマとも呼ばれます)の作成に関する新機能と変更された機能を説明し、追加ソースの情報へのリンクを提供します。

12c (12.2.1)での新機能と変更された機能

リリース12c (12.2.1)には、ADFスキンを作成するための次の新機能と変更された機能が含まれます。

- 新しいOracle Alta UIシステムの一部として配布された新しいAltaスキン・ファミリを説明するために「Webアプリケーションのスキニングについて」を改訂しました。Oracle Alta UIシステムの詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/index.htmlを参照してください。

- このリリースで導入されたテーマ・エディタを設定および使用する方法を説明するために「テーマ・エディタの使用」を追加しました。テーマ・エディタは、アプリケーションの最も頻繁にスタイルが設定される要素の表示を変更するテーマを作成するわかりやすいインタフェースを提供します。ユーザーは、テーマ・エディタを使用するためのCSSまたはADF Facesコンポーネントの技術的知識を必要としません。

- ADFスキン・プロパティ(たとえば、-tr-open-animation-durationなど)がアプリケーション全体のコンポーネントのレンダリングをカスタマイズし、コンポーネントの特定のインスタンスの表示を変更するためにスタイル・クラスで使用できないことを明確にするために「ADFスキニング・フレームワークでのプロパティ」および「コンポーネントの特定のインスタンスに対するスタイル・クラスの設定」を改訂しました。

- Altaスキンを説明して非推奨のFusionおよびFusion SimpleファミリのADFスキンを除外するために「Oracle ADFで提供されるADFスキン」を改訂しました。

このリリースでOracle Application Development Framework (Oracle ADF)に加えられたその他の変更については、Oracle Technology Networkの新機能に関するページ(http://www.oracle.com/technetwork/developer-tools/jdev/documentation/index.html)を参照してください。

1 Webアプリケーションのスキニングについて

この章ではADFスキンの開発について説明します。ADFスキンを開発するプロセスの概要について説明し、ADFスキンが実装できる変更のいくつかを概観し、Oracle ADFが拡張用に用意したADFスキンの継承関係について説明します。

この章の内容は次のとおりです。

- Webアプリケーションのスキニングの概要

- ADFスキンの開発の概要

- ADFスキンの考察

- Oracle ADFで提供されるADFスキンの継承関係

このマニュアルおよびこの他のマニュアルに、なじみのない用語が出てきた場合は、用語集で定義を確認してください。

1.1 Webアプリケーションのスキニングの概要

スキニングとは、ユーザー・インタフェースにおいてADF FacesおよびADFデータ視覚化コンポーネントが使用されるWebアプリケーションに対して適用するADFスキンを開発するタスクのことです。ADFスキンがカスケード・スタイル・シート(CSS)のセレクタ、フォーマットおよびプロパティを使用することで、これらのコンポーネントの外観をカスタマイズできます。各コンポーネントにCSSファイルを指定したり、アプリケーションの各ページにスタイルシートを挿入するかわりに、Webアプリケーションに対して1つのADFスキンを作成します。ユーザー・インタフェースでのレンダリングを行うすべてのコンポーネントで、ADFスキンによって定義されたスタイルが自動的に使用されます。つまり、ADFスキンを使用すると、ページの外観を変更するために個々のページに設計時の変更を加える必要がありません。

また、ADFスキンを使用すると、アプリケーションによってレンダリングされるすべてのページで一貫性のある外観を容易に維持することもできます。アプリケーションの外観には、必要に応じて簡単に変更を加えることができます。たとえば、会社の企業ブランドにあわせて、アプリケーションの色を変更することを決定する場合があります。さらに、アプリケーションをより使いやすくするために、コンポーネントのスタイル・プロパティを定義できます。たとえば、図1-1に、ADF Faces inputTextコンポーネントを示します。

図1-1 書込み可能inputTextコンポーネント

図1-2に示す別のADF Faces inputTextコンポーネントでは、ADFスキンによって背景色がグレー表示されており、inputTextコンポーネントが読取り専用であることをエンド・ユーザーに示しています。

図1-2 背景色がグレー表示された読取り専用inputTextコンポーネント

スキニングの他の利点として、ADF Facesコンポーネントによって実行時にレンダリングされる、デフォルトのテキスト・ラベルを簡単に変更できることをあげることができます。たとえば、dialogコンポーネントのラベルのデフォルトのテキストは、コンポーネントのtypeプロパティをokCancelに設定した場合、OKおよびCancelです。dialogコンポーネントのプロパティを指定してこれらのラベルの値を変更することはできません。かわりに、たとえば、OKをSubmitに変更する場合は、リソース・バンドルを参照するADFスキンを代替文字列値で変更します。詳細は、「ADFスキンのテキストの使用」を参照してください。

前述の例は、ADFスキンのユースケースと、ADFスキンを作成する利点を示しています。アプリケーションに加えるすべての変更を1つのADFスキンで定義する必要はありません。異なる目的で使用する複数のADFスキンを作成できます。たとえば、様々な会社の企業ブランドに一致するように様々な色スキームを持つADFを作成できます。また、スキンを動的に変更するために(たとえば、エンド・ユーザーのロールに基づく、エンド・ユーザーの選択に応じるなど)、アプリケーションを構成できます。

Oracle ADFは、ADFスキンの作成タスクを支援する数多くのツールおよびリソースを提供します。「ADFスキンの開発の概要」は使用できるツールを簡単に説明し、「Oracle ADFで提供されるADFスキン」はOracle ADFがADFスキン作成プロジェクトの開始点として提供するADFスキンを説明します。このリリースで作成する新しいWebアプリケーションは、デフォルトでAltaスキンを使用します。移行されたWebアプリケーションは、引き続き既存のADFスキンを使用します。Oracle Alta UIシステムを最大限に活用するには、Altaスキンを使用する以外にOracle Alta UIの設計原則に基づいてアプリケーションを設計することをお薦めします。これらの原則を使用してアプリケーションを設計すると、コンテンツをエンド・ユーザーに明確に整理して表示するためにOracle Alta UIシステムに組み込まれているレイアウト、応答設計およびコンポーネントを利用できます。Oracle Alta UIシステムおよびOracle Alta UIの設計原則の詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/index.htmlを参照してください。Oracle Alta UIパターンの詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/patterns/index.htmlを参照してください。

このガイドでは、次のことを前提としています。

- スキンできるADF FacesおよびADFデータ視覚化コンポーネントの知識があります。このガイドでは、これらのコンポーネントの使用方法や機能については説明しません。これらのコンポーネントの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。

- CSSの知識があります。このガイドでは、CSSについては説明しません。公式仕様など、CSSの詳細は、次に示すWorld Wide Web Consortium (W3C)のWebサイトを参照してください。
http://www.w3.org/

1.2 ADFスキンの開発の概要

ADFスキンの開発は、反復プロセスです。先に進む前に、CSSの概要と、ADF FacesおよびADFデータ視覚化コンポーネントについて理解しておいてください。

Oracle ADFは、ADFスキンの開発に役立つ2つのツール(テーマ・エディタおよびJDeveloperのADFスキン用のエディタ)を提供します。テーマ・エディタは、最も頻繁にスキニングされたADF Facesコンポーネントのスタイル・プロパティを変更できるWebアプリケーションです。スタイル・プロパティの変更を行う同じブラウザ・ページのプレビュー・ペイン内で変更の結果をすぐに表示できます。

テーマ・エディタの目標は、スキニング・タスクの大部分の実現を支援することです。テーマ・エディタを使用して実現できないそれらのスキニング・タスクの場合、テーマ・エディタで完了できるタスクが完了した後にテーマ・エディタからADFライブラリJARにADFスキンをエクスポートすることをお薦めします。エクスポートされたADFライブラリJARを使用する場合、JDeveloperのADFスキンのエディタを使用してエクスポートされたテーマ・エディタのADFスキンから拡張されたADFスキンを作成して、残りのスキニング・プロジェクトを完了できます。JDeveloperのADFスキンのエディタを使用する必要があるタスクの例には、DVTコンポーネントのスタイル設定、ADF Facesコンポーネントがレンダリングするデフォルト・ラベルの代替テキスト文字列の書込みおよびWebアプリケーション・ページが特定のブラウザまたはデバイスでレンダリングする場合のルック・アンド・フィールを決定するためのADFスキンの@ルールの指定が含まれます。

注意:
ADFスキンはテーマ・エディタにインポートできません。テーマ・エディタのユーザー・インタフェースでは、ADFスキンを「テーマ」と呼びます。

テーマ・エディタのテーマ(ADFスキン)を開発するステップの概要は次のとおりです。

1. テーマ・エディタを使用して、ADFスキンを作成します。

2. テーマ・エディタで用意されたコントロールを使用してカスタマイズできるADF Facesコンポーネントのスタイル・プロパティを変更します。

3. 表示されたプレビュー・ページで変更を確認します。

4. 満たされている場合またはテーマ・エディタを使用して実現できるすべてのタスクを完了した場合、完了したADFスキンをADFライブラリJARにエクスポートします。
これらの手順の詳細は、「テーマ・エディタの使用」を参照してください。

5. 適切なオプションを選択します。

- ADFライブラリJARをADFスキンを拡張できるJDeveloperプロジェクトにインポートして、テーマ・エディタを使用して完了できなかった残りのタスクを完了します。詳細は、「ADFライブラリJARからのADFスキンの追加」を参照してください。

- 目的のWebアプリケーションで使用するために完了したADFスキンを配布します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

JDeveloperでADFスキンを開発するステップの概要は次のとおりです。

1. JDeveloperでADFスキンを作成します。
ADFスキニング・フレームワークによって公開されるセレクタの宣言を記述するJDeveloperのADFスキンを作成します。JDeveloperでADFスキンを作成する場合、拡張元となる既存のADFスキンを選択する必要があります。最初のADFスキンを作成する場合は、Oracle ADFによって提供されるいずれかのADFスキンの中から選択します。詳細は、「Oracle ADFで提供されるADFスキン」を参照してください。これらのADFスキン間の継承関係の詳細は、「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。後続のADFスキンを作成する場合は、前に作成したADFからの拡張を選択できます。

ADFスキンの作成の詳細は、「ADFスキン・ファイルの作成」を参照してください。

2. 作成したADFスキンの中のセレクタ、ルールおよび疑似要素の宣言を記述します。

JDeveloperのADFスキンのエディタには、このタスクを容易にする多くのタブが用意されています。

注意:

Skyros ADFスキンからADFスキンを拡張する場合のみ、「設計」タブが表示されます。前述のテーマ・エディタを使用して、ブラウザ・ページのAltaまたはSkyrosスキンに対する変更を編集およびプレビューできます。セレクタ・エディタは、拡張元のスキン・ファミリに関係なく表示されます。詳細は、「ADFスキン・デザイン・エディタの使用」および「ADFスキン・セレクタ・エディタの使用」を参照してください。

様々なカテゴリのセレクタ、ルールおよび擬似要素の詳細は、「ADFスキン・セレクタの使用」を参照してください。

3. 必要に応じて、ADFスキンが実行時にWebアプリケーションで参照するイメージをインポートします。詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。

4. 必要に応じて、リソース・バンドルに新しい値を入力して、ADF FacesおよびADFデータ視覚化コンポーネントに定義されたデフォルトのテキスト・ラベルをオーバーライドします。詳細は、「ADFスキンのテキストの使用」を参照してください。

5. ADFスキンに加えた変更をプレビューおよびテストして、結果が適切であることを確認します。必要に応じてADFスキンを変更します。ステップ2で説明している「設計」タブは、JDeveloperのADFスキンのエディタ内または「ADFスキン・デザイン・エディタの使用」で説明されているように「ブラウザでプレビュー」アイコンをクリックしてブラウザ内に変更を表示できる数多くのサンプル・ページを用意しています。実行中のWebアプリケーションのADFスキンのプレビューおよびテストの詳細は、「ADFスキンの変更のテスト」を参照してください。

6. ADFスキンの開発が完了したら、配布のためにADFスキンをパッケージ化できます。詳細は、「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

7. ADFスキンが完成し、配布した後、ADFスキンを使用するようにWebアプリケーションを構成します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

1.3 ADFスキンの考察

ADFスキンはカスケード・スタイル・シートの一種です。カスケード・スタイル・シートとはいくつかのことが異なります。異なる点の1つは、ADFスキニング・フレームワークによってADFスキンのソース・ファイルで公開されるセレクタのプロパティを指定できることです。ADFスキニング・フレームワークによって公開されるセレクタでは、外観を変更する対象となるADF FacesおよびADFデータ視覚化コンポーネントが識別され、これにより、コンポーネントの1つ以上のスタイル・プロパティを指定できることが、CSSセレクタに類似しています。

ADFスキニング・フレームワークによって公開されるセレクタでは、CSSプロパティとADFスキニング・フレームワークによって公開されるADFスキン・プロパティの両方の値を設定できることが、CSSセレクタとは異なります。CSSプロパティは、エンド・ユーザーのブラウザによって直接解釈されます。ADFスキン・プロパティは、-tr-という文字で始まります。これらのADFスキン・プロパティの一部は、Webアプリケーションによって読み取られ、解釈されます。これらのプロパティは、サーバー側プロパティとも呼ばれます。ユーザー・インタフェースでのレンダリングを行うコンポーネントでは、レンダリングする対象を決定する前に、これらのプロパティを読み取る場合があります。「ADFスキニング・フレームワークでのプロパティ」で説明しているように、-tr-rule-refまたは-tr-property-refなどの他のタイプのADFスキン・プロパティでは、ADFスキニング・フレームワークの機能が拡張されます。

次の例に、ADFスキン・プロパティ-tr-graphic-antialiasingおよび-tr-animation-indicatorsと、CSSプロパティbackground-colorおよびfont-familyの値を設定するgaugeコンポーネントのセレクタを示します。

af|dvt-gauge
{
/** ADF skin properties */
-tr-graphic-antialiasing: false;
-tr-animation-indicators: none;
/** CSS properties */
font-family: Geneva, Arial, Helvetica, sans-serif;
background-color: rgb(243,255,185);
}

前の例に示されているように、ADFスキニング・フレームワークで公開されたセレクタの宣言内でCSSプロパティおよびADFスキン・プロパティの値を設定できます。ADFスキニング・フレームワークでは、定義できるADFスキン・プロパティが公開されます。ADFスキン・プロパティ以外に、ADFスキニング・フレームワークでは、ADFスキンで指定できる数多くの擬似クラスと@ルールが定義されます。サポートされる@ルールと擬似クラスの例には、@platform、@agent、@accessibility-profile、:rtl、@localeなどがあります。 詳細は、「ADFスキン・セレクタの使用」を参照してください。

実行時、WebアプリケーションはADFスキンからブラウザ固有のCSSファイルを作成します。次にアプリケーションは、それがなんらかのCSSファイルであれば、そのブラウザ固有のCSSファイルを参照します。

図1-3に、ADFスキンでアプリケーションのページの外観に及ぼすことができる影響を示します。左側のページは、skyros ADFスキンを使用してレンダリングされます。右側のページは、altaスキンを使用してレンダリングされます。各ADFスキンでは、色とフォントの様々な値が定義されます。

図1-3 Skyros ADFスキンおよびAltaスキンを使用したFile Explorerアプリケーション

注意:

ADFスキンは、クライアントがユーザー・インタフェースをレンダリングするのに要する時間に影響を及ぼす場合があります。ADFスキンで使用されるスタイルが多いほど、クライアントは多くのものをロードする必要があります。このことは、低帯域幅環境や待機時間の長い環境ではパフォーマンスに影響することがあります。

1.4 Oracle ADFで提供されるADFスキンの継承関係

Oracle ADFによって提供される数多くのADFスキン・ファミリは、アプリケーションで使用したり、ADFスキンを作成するときに拡張できます。Oracle ADFで提供されるADFスキンによって、実行時にADF FacesおよびADFデータ視覚化コンポーネントによってレンダリングされる外観を、より高いレベルでカスタマイズできるようになります。

図1-4は、様々なADFスキン・ファミリ間の継承関係を示しています。skyros-v1およびalta-v1 ADFスキン・ファミリは、simple ADFスキンから拡張されています。

simple ADFスキンは他のADFスキンの拡張元であるため、すべてのADF Facesコンポーネントは少なくともこのADFスキンで定義されたスタイルを使用します。simple ADFスキンでは、WebアプリケーションでレンダリングするためにADF Facesコンポーネントに必要な最小限のスタイル・プロパティを定義します。最小限のカスタマイズでADFスキンを作成するには、simple ADFスキンから拡張してADFスキンを作成します。

図1-4 Oracle ADFで提供されるADFスキン・ファミリの継承関係

図1-4のいずれかのADFスキンまたは独自に作成したADFスキンをアプリケーションに適用できます。アプリケーションへのADFスキンの適用の詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

Oracle ADFで提供されるADFスキンの詳細は、「Oracle ADFで提供されるADFスキン」を参照してください。

2 テーマ・エディタの使用

この章では、テーマ・エディタを使用してADFスキンを作成および変更するために必要な環境の構成に役立つ情報を示します。

この章の内容は次のとおりです。

- テーマ・エディタについて

- テーマ・エディタの設定および起動

- テーマ・エディタからのADFスキンのエクスポート

2.1 テーマ・エディタについて

テーマ・エディタを使用すると、ADF Facesコンポーネントで実行時にレンダリングする色、フォントおよび他のスタイル・プロパティを選択してWebアプリケーションのルック・アンド・フィールを定義できます。このプロセスの最終結果はADFスキンの作成です。

注意:

テーマ・エディタのユーザー・インタフェースでは、ADFスキンを「テーマ」と呼びます。

テーマの作成を完了した後、ADFスキンとしてテーマ・エディタからADFライブラリJARファイルにエクスポートできます。このファイルを使用して、テーマ・エディタで作成したADFスキンをWebアプリケーションに適用します。詳細は、「完成したADFスキンのWebアプリケーションへの適用」を参照してください。

ADFスキンをさらにカスタマイズし、テーマ・エディタが必要な結果を得るためのUIコントロールを用意していない場合、ADFライブラリJARをJDeveloperのプロジェクトにインポートします。ここで、JDeveloperが用意しているデザインタイムまたはADFスキンのCSSソース・ファイル用のJDeveloperのソース・エディタを使用して、テーマ・エディタで作成したADFスキンを拡張するADFスキンを作成できます。詳細は、「ADFライブラリJARからのADFスキンの追加」を参照してください。

図2-1 テーマ・エディタのクイック・スタート・ページ

2.2 テーマ・エディタの設定および起動

Oracle ADFは、JDeveloperインストールの次のEARファイルのWebアプリケーションとしてテーマ・エディタを提供します。

\jdeveloper_install_dir\jdeveloper\skineditor\skin-editor-webapp.ear

テーマ・エディタを使用するには、JDeveloperの新規ギャラリの「EARファイルからのアプリケーション」オプションを使用してJDeveloperで新しいアプリケーションを作成し、テーマ・エディタを統合WebLogic Serverにデプロイします。詳細は、「テーマ・エディタの設定方法」を参照してください。

JDeveloperでテーマ・エディタを使用した新しいアプリケーションを作成した後、テーマ・エディタで作成するADFスキンが統合WebLogic Serverを停止および再起動した後に存続するように、アプリケーションのweb.xmlファイルを編集します。詳細は、「テーマ・エディタで作成したADFスキンの存続方法」を参照してください。

テーマ・エディタを構成してADFスキンを存続した後、「テーマ・エディタの起動方法」で説明しているように起動できます。

テーマ・エディタがEARファイルにパッケージ化されると、JDeveloperとともにインストールされる統合WebLogic Serverにデプロイできます。Enterprise Manager、Oracle WebLogic Scripting Tool (WLST)、Oracle WebLogic Server管理コンソールのいずれかを使用してデプロイすることもできます。デプロイメント・オプションの詳細は、『Oracle Application Development FrameworkによるFusion Webアプリケーションの開発』の「Fusion Webアプリケーションのデプロイ」の章を参照してください。

2.2.1 テーマ・エディタの設定方法

JDeveloperインストールのskineditorディレクトリのskin-editor-webapp.earファイルからテーマ・エディタをインポートするJDeveloperの新しいアプリケーションを作成して、テーマ・エディタを設定します。

テーマ・エディタの設定方法:

1. メイン・メニューで「ファイル」を選択し、次に「アプリケーション」→「新規」を選択します。

2. 「新規ギャラリ」の「アイテム」リストで、「EARファイルからのアプリケーション」をダブルクリックします。

3. EARファイルからのアプリケーション・ウィザードで、EARファイルの場所を入力するか、「参照」をクリックしてJDeveloperインストール・ディレクトリのskineditorディレクトリのskin-editor-webapp.earファイルに移動します。
ウィザードで不明な点がある場合は、「ヘルプ」をクリックしてください。

4. 「終了」をクリックします。

2.2.2 テーマ・エディタで作成したADFスキンの存続方法

JDeveloperインストール・ディレクトリのskineditorディレクトリのskin-editor-webapp.earファイルでOracle ADFによって提供されるすぐに使用できるテーマ・エディタは、テーマ・エディタをデプロイする統合WebLogic Serverを停止および再起動する場合に作成したADFスキンを存続しません。テーマ・エディタWebアプリケーションのweb.xmlファイルでファイル・ディレクトリの場所を指定します。テーマ・エディタは、統合WebLogic Serverを再起動した後に使用できるように作成したADFスキン(およびそのリソース)をこの場所に保存します。指定したファイル・ディレクトリにこれらのリソースを表示できますが、JDeveloperでADFスキンを拡張するか、Webアプリケーションで使用するためにADFスキンを配布する場合に、「テーマ・エディタからのADFスキンのエクスポート」の説明に従ってADFスキンをエクスポートする必要があります。

テーマ・エディタで作成したADFスキンを存続するには、次のようにします。

1. 「アプリケーション」ウィンドウで、skin-editorプロジェクトのweb.xmlファイルをダブルクリックします。

2. ソース・エディタで、次のコンテキスト初期化パラメータ・エントリを追加します。

<context-param>
<description>Set this context parameter to file so that themes get saved to a
temporary directory. Specify a directory location for
oracle.adf.view.rich.SKIN_REPOSITORY_FILE_PATH to persist changes between server
restarts.</description>
<param-name>oracle.adf.view.rich.SKIN_REPOSITORY</param-name>
<param-value>file</param-value>
</context-param>

<context-param>
<description>Set this context parameter to a directory location where
themes are saved. Use to persist changes between server restarts</description>
<param-name>oracle.adf.view.rich.SKIN_REPOSITORY_FILE_PATH</param-name>
<param-value>/home/user/themes</param-value>
</context-param>

3. 変更を保存して、web.xmlファイルを閉じます。

2.2.3 テーマ・エディタの起動方法

skin-editorプロジェクトのindex.htmlページを実行して、テーマ・エディタを起動します。

テーマ・エディタを起動するには:

- 「アプリケーション」ウィンドウで、skin-editorを展開し、index.htmlを右クリックして「実行」を選択します。
アプリケーションの初回実行時に統合WebLogic Serverで新規ドメインを起動すると「デフォルト・ドメインの作成」ダイアログが表示されます。ダイアログを使用して新しいドメインの管理者パスワードを定義します。入力するパスワードは8文字以上で、数字が含まれている必要があります。

skin-editorプロジェクト内のindex.htmlページは実行ターゲットです。ページを実行すると、JDeveloperはブラウザを起動し、テーマ・エディタの起動ページを表示します。テーマ・エディタ起動ページが表示された後、新しいADFスキンを作成したり、既存のADFスキンを編集できます。

注意:

テーマ・エディタのユーザー・インタフェースでは、ADFスキンを「テーマ」と呼びます。

2.3 テーマ・エディタからのADFスキンのエクスポート

テーマ・エディタでADFスキンの作成を完了した後、Webアプリケーションで使用するために配布できるように、ADFライブラリJARにエクスポートできます。または、JDeveloperがこの目的のために用意しているデザインタイム・ツールを使用して、詳細に編集できます。テーマ・エディタが用意しているコントロールを使用してルック・アンド・フィールを実現できない場合、この後者のシナリオが発生する可能性があります。JDeveloperのデザインタイム・ツールを使用してADFスキンを編集する場合、「ADFライブラリJARからのADFスキンの追加」の説明に従ってADFスキンをJDeveloperにインポートし、テーマ・エディタからエクスポートしたADFスキンを拡張する新しいADFスキンを作成します。

テーマ・エディタの起動ページのテーマ(ADFスキン)を選択し、図2-2に示すように「アクション」ボタンをクリックすると表示されるメニューから「エクスポート」を選択します。テーマ・エディタは、ADFスキンをADFライブラリJARにエクスポートします。このADFライブラリJARには、テーマ・エディタで行った変更を反映するエントリを使用した.CSSファイル、ADFスキンにインポートしたイメージおよびADFスキンを説明するメタデータを含むtrinidad-skins.xmlファイルなど、ADFスキンのすべての必要なリソースが含まれます。

図2-2 テーマ・エディタからのテーマのエクスポート

3 ADFスキン・セレクタの使用

この章では、ADFスキン・セレクタについて説明します。これらのセレクタと、擬似要素、擬似クラス、ADFスキン・プロパティおよびADFスキニング・フレームワーク・ルールを使用すると、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズできます。

この章の内容は次のとおりです。

- ADFスキン・セレクタについて

- ADFスキニング・フレームワークでの擬似クラス

- ADFスキニング・フレームワークでのプロパティ

- JDeveloper内からのセレクタ情報へのアクセス

3.1 ADFスキン・セレクタについて

CSSでは、ルールを定義するHTMLページ内の要素を指定するために、セレクタを使用します。たとえば、CSSの次のセレクタでは、<p>タグ内にレンダリングされるコンテンツの外観を特定するルールを定義します。

p { color: red }

同様に、ADFスキニング・フレームワークによって定義されるセレクタを使用すると、ルールとともにスタイル・プロパティを指定して、指定したタグが実行時にルールによって検出されたときに、それらのプロパティをレンダリングできるようになります。ADFスキニング・フレームワークでは、グローバル・セレクタおよびコンポーネント固有セレクタという2つのタイプのセレクタが提供されます。グローバル・セレクタでは、1つ以上のセレクタに適用するスタイル・プロパティを定義します。コンポーネント固有セレクタでは、1つのコンポーネントに適用するスタイル・プロパティを定義します。

Oracle ADFで提供されるADFスキンでは、複数のADF Facesコンポーネントによって継承される複数のグローバル・セレクタ(セレクタ・エディタのユーザー・インタフェースでの「グローバル・セレクタ別名」)を定義します。たとえば、多くのADF Facesコンポーネントでは、フォント・ファミリの指定に.AFDefaultFontFamily:aliasグローバル・セレクタを使用します。異なるフォント・ファミリを指定して、このセレクタをオーバーライドするADFスキンを作成した場合、その変更は、セレクタ定義の.AFDefaultFontFamily:aliasセレクタが含まれているすべてのコンポーネントに影響します。

図3-1に、同じページの2つのインスタンスを示します。図3-1の下部にあるページのインスタンスは、skyrosスキンの.AFDefaultFontFamily:aliasグローバル・セレクタに指定されたデフォルト値を使用してレンダリングされます。図3-1の上部にあるページのインスタンスは、.AFDefaultFontFamily:aliasおよび.AFDefaultFontグローバル・セレクタを次のように変更するADFスキンを使用してレンダリングされます。

.AFDefaultFontFamily:alias {font-family: Georgia;}
.AFDefaultFont:alias {font-size: 12pt;}

ページ上のテキストをレンダリングするコンポーネント(たとえば、af:showDetailItemはWelcomeをレンダリングし、af:linkコンポーネントはLoginをレンダリングします)は、アプリケーションで使用するADFスキンの.AFDefaultFontFamily:aliasグローバル・セレクタによって指定されたフォント・ファミリを使用してレンダリングされます。

図3-1 グローバル・セレクタ

作成したADFスキンでは、拡張元のADFスキンで定義されているグローバル・セレクタ別名を継承します。新規グローバル・セレクタ別名をADFスキン・ファイルで作成することもできます。詳細は、「グローバル・セレクタ別名の使用」を参照してください。

コンポーネント固有セレクタはADFスキニング・フレームワークによって公開されるセレクタであり、これらを使用すると、対応するADF FacesコンポーネントとADFデータ視覚化コンポーネントのうち、スタイル・プロパティを定義できるものを特定できます。たとえば、図3-2に、ソース・エディタおよびセレクタ・エディタでのADF Faces buttonコンポーネントのセレクタを示します。ボタンで表示されるフォントの色を決定するプロパティの値は「Properties」ウィンドウでRedに変更されています。

図3-2 buttonコンポーネントのスキン・セレクタ

コンポーネント固有のセレクタの詳細は、「コンポーネント固有セレクタの使用」を参照してください。グローバル・セレクタ別名の詳細は、「グローバル・セレクタ別名の使用」を参照してください。

3.1.1 ADFスキン・セレクタと擬似要素

多くのADFスキン・セレクタが擬似要素を公開しています。擬似要素は、スタイルのプロパティを定義できるコンポーネントの特定の領域を示します。疑似要素は、コロン(:)2つで始まり、その後にセレクタが表すコンポーネントの部分が続きます。たとえば、図3-3に、af|chooseDateセレクタによって公開されているweek-header-row擬似要素を使用して、カレンダ・グリッドの外観のスタイル・プロパティをどのように構成できるかを示します。図3-3では、week-header-row擬似要素のbackground-colorプロパティがGrayに設定されています。

図3-3 日付の選択コンポーネントの擬似要素

3.1.2 ADFスキン・セレクタおよびアイコン・イメージ

アイコンをレンダリングするADF Facesコンポーネントでは、ベース・アイコン・イメージのセットを使用してレンダリングします。たとえば、background-imageプロパティの値としてイメージを指定する場合はCSSコード・エントリがソース・ファイルに表示されるのとは対照的に、これらのアイコン・イメージのCSSコード・エントリはADFスキンのソース・ファイルに表示されません。かわりに、ADFスキニング・フレームワークは、レンダラで使用するアイコン・イメージを登録します。

ADFスキン・セレクタは、コンポーネントでレンダリングされるアイコン・イメージを特定する擬似要素に2つの命名規則を使用します。これらの擬似要素の名前は、-iconまたは-icon-styleで終わります。図3-4に、「パネル・アコーディオン」セレクタの疑似要素の例を示します。-icon-styleで終わる疑似要素は、図3-4に示すように、背景イメージを指定します。対照的に、-iconで終わる疑似要素は、次の例のように、背景イメージを指定しませんが、IMG要素またはテキストを参照できます。

af|panelAccordion::undisclosed-icon {content "X"}
af|panelAccordion::undisclosed-icon {content: url("http:server:port/img/img.png")}

図3-4 アイコン・イメージ用の「パネル・アコーディオン」擬似要素

図3-4では、undisclosed-icon-style擬似要素によって、panelAccordionコンポーネント内の公開されていないアイコンに使用するアイコンのスタイルを指定しています。この擬似要素は、背景イメージとしてアイコンを指定します。:hoverおよび:activeの各擬似要素を使用して、外観をカスタマイズします。たとえば、次の構文を記述して、エンド・ユーザーがアイコンの上にマウスを置くと背景が赤くなるようにします。

af|panelAccordion::undisclosed-icon-style:hover {
background-color: Red;
}

ヒント:

多くのブラウザでは、アクセシビリティ・モードの場合は背景イメージをレンダリングしません。次の例に、アクセシビリティ・モードの場合もアプリケーションによってイメージが表示される必要がある場合にこの動作を回避する方法を示します。

背景イメージとして指定されたアイコンではなく、独自のイメージを使用する場合は、最初に、背景イメージがレンダリングされないようにする必要があります。このことは、コンポーネントのセレクタ擬似要素の-tr-inhibit ADFスキン・プロパティを次のように指定することによって行います。

af|panelAccordion::undisclosed-icon-style
{
-tr-inhibit: background-image;
}

次に、undisclosed-iconセレクタのcontentプロパティの値としてレンダリングするテキストまたはイメージを指定します。たとえば、次のような構文を記述して、別のイメージを指定します。

af|panelAccordion::undisclosed-icon
{
content:url("images/undisclosed.png");
width: 10px;
height: 10px;
}

ADFスキニング・フレームワークでは、特定のアイコン・イメージが別のシナリオで使用する、数多くのグローバル・セレクタ別名も定義します。これらのグローバル・セレクタ別名は、図3-5に示すように、セレクタ・エディタのセレクタ・ツリーの「アイコン」ノードの下に表示されます。図3-5に示した.AFChangedIcon:aliasにより、変更されたアイコンが、そのアイコンを使用するすべてのコンポーネントにグローバルに設定されます。

図3-5 アイコンのグローバル・セレクタ別名

ADFスキンがSkyros ADFスキンから拡張されている場合、「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタから起動する「アイコンの置換」ダイアログを使用して、これらのアイコンを表示および変更することもできます。図3-6に、Skyros ADFスキンから拡張したADFスキン用に表示されるダイアログを示します。このダイアログを使用すると、複数のアイコンをエクスポートまたはインポートしたり、「新規アイコン・ソース」フィールドをダブルクリックして個々のアイコンを置換したりできます。

図3-6 「ステータス・アイコン」用のデザイン・エディタの「アイコンの置換」ダイアログ

詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。

3.1.3 グループ化したADFスキン・セレクタ

ADFスキンのソース・ファイル内のエントリ数を最小化するために、ADFスキン・セレクタおよびグローバル・セレクタ別名をグループ化できます。グループ化したセレクタは、図3-7に示すように、セレクタ・エディタのセレクタ・ツリー内にある「グループ化したセレクタ」ノードの下にレンダリングされます。プレビュー・ペインの「表示モード」リストには、グループ化したすべてのセレクタが表示されます。

セレクタ・エディタではグループ化したセレクタを指定する方法がないため、ソース・エディタを使用して、グループ化したセレクタに含めるセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタをカンマ(,)で区切って、グループ化したセレクタに含めます。

図3-7 セレクタ・ツリーでのグループ化したセレクタ

3.1.4 下位のADFスキン・セレクタ

レンダリングする1つのADFスキン・セレクタのコンポーネントが、そのコンポーネントをレンダリングするページ内の別のコンポーネントの下位コンポーネントである場合、下位セレクタによって、そのADFスキン・セレクタ(下位セレクタ)のスタイル・プロパティが定義されます。たとえば、inputTextコンポーネントがtableコンポーネント内にレンダリングされるときに、背景色にGreenを使用してinputTextコンポーネントのコンテンツ領域をレンダリングするとします。このシナリオでは、次の例のような下位セレクタを指定します。

af|table af|inputText::content {
background-color: Green;
}

af|inputText::content {
background-color: Red;
}

実行時に、tableコンポーネント内にレンダリングされるinputTextコンポーネントのコンテンツ領域の背景色はGreenになります。tableコンポーネントの外部にレンダリングされる他のinputTextコンポーネントの外観は、ADFスキン内の他の場所で定義されたスタイル・プロパティ(Redなど)によって決定されます。

下位セレクタは、空白で区切られた2つ以上のセレクタで構成されています。下位セレクタを構成すると、図3-8に示すように、セレクタ・エディタでは、下位セレクタが含まれているセレクタの下に下位セレクタ・ノードが表示されます。

図3-8 セレクタ・ツリーでの下位セレクタ

セレクタ・エディタでは下位セレクタを指定する方法がないため、ソース・エディタを使用して、下位セレクタに指定するセレクタまたはグローバル・セレクタ別名あるいはその両方を指定します。各セレクタは空白で区切ります。

3.2 ADFスキニング・フレームワークでの擬似クラス

CSS仕様では、セレクタが特定の状態にある場合のスタイル・プロパティを定義するために使用される:hoverや:activeなどの擬似クラスを定義しています。これらの擬似クラスは、ほとんどすべてのADF Facesコンポーネントに適用できます。また、ADFスキニング・フレームワークには、特化された機能のための、追加的な擬似クラスが備えられています。たとえば、ブラウザのロケールが右から左方向への言語(:rtl)である場合、またはドラッグ・アンド・ドロップ操作(:drag-targetおよび:drag-source)の場合に適用する擬似クラスがあります。ADFスキンのソース・ファイルで擬似クラスを指定するために含める構文では、次のフォーマットを使用します。

adfskinselector:pseudo-class

adfskinselector::pseudo-element:pseudo-class

図3-9に、エンド・ユーザーがカーソルを図3-9のリンク上に置いたときにpanelListコンポーネントのリンクがオレンジにレンダリングされるようにADFスキンのソース・ファイルで記述した:hover擬似クラスの構文(af|panelList::link:hover {color: Orange;})を示します。

図3-9 パネル・リスト・リンクの擬似クラス構文および実行時の動作

一部のコンポーネントは、他のコンポーネントに比べて擬似クラスをより活用しています。たとえば、panelBoxコンポーネントのセレクタは、擬似クラスを活用して、様々な状態(アクティブ、無効またはビジーなど)における外観を定義します。セレクタ・エディタのセレクタ・ツリーでpanelBoxコンポーネントのセレクタを選択し、Skyros ADFスキンから拡張したADFスキン内の使用可能な擬似クラスのリストを表示するために「擬似クラスの追加」アイコンをクリックした場合に表示される使用可能な擬似クラスのリストを図3-10に示します。

図3-10 panelBoxコンポーネントのセレクタの擬似クラス

擬似クラスは、セレクタによって公開されている擬似要素にも適用できます。代表的な例として、panelBoxコンポーネント・セレクタの擬似要素をあげることができます。図3-11に、セレクタ・エディタのセレクタ・ツリー内に表示された、panelBoxコンポーネント・セレクタによって公開されているcenter擬似要素が受け入れる擬似クラスのリストを示します。これらの数多くの擬似クラスを使用して、panelBoxコンポーネントの外観を、アプリケーション開発者がこのコンポーネントの属性に設定した値に応じて定義できます。たとえば、coreおよびhighlight擬似クラスでは、アプリケーション開発者がpanelBoxコンポーネントのramp属性をcoreまたはhighlightに設定した場合に対応する外観を定義します。

図3-11 center擬似要素の擬似クラス

次に、ADF Facesセレクタによって使用される一般的な擬似クラスを示します。

- ドラッグ・アンド・ドロップ: 使用可能な2つの擬似クラスとして、ドラッグを開始するコンポーネントに適用され、ドラッグが終了したら削除される:drag-source、および現在のドラッグのドロップ先のコンポーネントに適用される:drop-targetがあります。

- 標準: CSSでは、:hover、:active、:focusなどの擬似クラスは、コンポーネントの状態とみなされます。コンポーネントへのスキンの適用にも、これと同じ考え方が当てはめられます。コンポーネントの状態は、read-onlyまたはdisabledなどです。同じセレクタに状態を組み合せると、すべての状態が満たされた場合にのみセレクタが適用されます。

- 右から左: ブラウザで言語の読み方向が右から左の際に、スタイルまたはアイコンの定義を設定する場合にこの擬似クラスを使用します。その他の典型的なユース・ケースは非対称のイメージです。読み方向が右から左のイメージを使用するスキン・セレクタを設定する際には、イメージを反転する必要があります。セレクタの最後に:rtl疑似クラスを追加し、反転イメージ・ファイルを指すようにします。スキン・エディタのプレビュー・ペインは、反転イメージ・ファイルに加えた変更をレンダリングしません。次のSkyrosスキンからの例は、右から左に表記される言語を使用するブラウザでレンダリングするときにcalendarコンポーネントのtoolbar-day-hover-icon疑似要素が参照するイメージを示します。

af|calendar::toolbar-day-hover-icon:rtl {
content: url(/afr/cal_day_ovr_rtl.png);
width: 16px;
height: 16px;
}

:rtlは、スキン・アイコンへの適用にも使用できます。詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。

- インライン編集: この擬似クラスは、ブラウザで編集するために、コンポーネント・サブツリーがアプリケーションによりアクティブ化される場合に適用されます。たとえば、:inline-selectedは、アクティブでインラインでの編集が可能なサブツリーで、現在選択されているコンポーネントに適用される疑似クラスです。

- メッセージ: この擬似クラスは、:fatal、:error、:warning、:confirmationおよび:infoのCSS擬似クラスを使用して、コンポーネント・レベルのメッセージ・スタイルを設定するために使用されます。詳細は、「メッセージに適用するADFスキン・プロパティの設定」を参照してください。

注意:

セレクタ・ツリーに表示されるグローバル・セレクタ別名は、特別なタイプの擬似クラスです(:alias)。詳細は、「グローバル・セレクタ別名の使用」を参照してください。

3.3 ADFスキニング・フレームワークでのプロパティ

ADFスキニング・フレームワークでは、ADFスキン・プロパティの数を定義します。ユーザーのブラウザではなく、WebアプリケーションがADFスキン・プロパティを解釈します。構成した場合、ADFスキン・プロパティを使用して次のことを実行できます。

- -tr-rule-refプロパティを使用して、他のセレクタのスタイルを参照します。
独自のグローバル・セレクタ別名を作成し、-tr-rule-refプロパティを使用して他のセレクタと組み合せます。詳細は、「グローバル・セレクタ別名の作成」、「グローバル・セレクタ別名の変更」および「グローバル・セレクタ別名の適用」を参照してください。

- -tr-inhibitスキン・プロパティを使用して、ADFスキンで定義されたスタイルを抑制します。
-tr-inhibitスキン・プロパティを使用して、ベース・スキンから継承されたCSSプロパティを抑制またはリセットします。たとえば、-tr-inhibit:paddingプロパティは継承されたパディングを削除します。-tr-inhibit:allプロパティを使用すると、継承されたすべてのプロパティが削除(クリア)されます。抑制するプロパティ名は、ベース・スキンのプロパティ名と完全に一致する必要があります。

- -tr-property-refプロパティを使用して、別のセレクタで定義されたプロパティの値を参照します。
詳細は、「別のセレクタのプロパティ値の参照」を参照してください。

- -tr-children-themeプロパティを使用して、子コンポーネントのテーマを構成します。
Altaスキン(およびAltaスキンを拡張したスキン)はテーマを使用しません。

- スタイル・プロパティが指定されたADFスキン・セレクタ
スキン・スタイル・プロパティを使用すると、アプリケーション全体のコンポーネントのレンダリングをカスタマイズできます。CSSプロパティは、値とともにSkinオブジェクトに格納され、コンポーネントのレンダリング時に使用できます。たとえば、af|breadCrumbs{-tr-show-last-item: false}において、スキン・プロパティ-tr-show-last-itemは、breadCrumbsコンポーネントのナビゲーション・パスの最後のアイテムを非表示にするように設定されています。

すでに説明したように、ADFスキン・プロパティを使用すると、アプリケーション全体のコンポーネントのレンダリングをカスタマイズできます。これは、コンポーネントのインスタンスが後でstyleClass属性を使用して参照するスタイル・クラスのADFスキン・プロパティを構成するなどして、ADFスキン・プロパティを使用してアプリケーションのコンポーネントの特定のインスタンスをカスタマイズできないことを意味します。

ADFスキニング・フレームワークでは+および-演算子も提供されており、これらを使用して、別のセレクタの色プロパティやフォント・プロパティに設定した値に関連付けてセレクタの色プロパティやフォント・プロパティを設定できます。このことは、色の範囲をセレクタに適用したり、フォント間の相対的なサイズを維持する場合に役立ちます。

例3-1に、この機能を色プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名で背景色を定義し、別のグローバル・セレクタ別名(.fooBackgroundColorTest)で、-演算子を使用してこの背景色を適用します。例3-1でも、この機能をフォント・プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名(.FontSizeTest:alias)でフォント・サイズを定義し、.fooFontTestIncreaseで+演算子を使用してこのフォント・サイズを増やします。

図3-12に、次の例のように、コンポーネントのstyleClass属性の値としてfooFontTestIncreaseおよびfooBackgroundColorTestスタイル・クラスを指定して、af:outputLabelコンポーネントにこれらのスタイル・クラスを適用した場合、例3-1で定義したスタイル・クラスがどのように、これらのコンポーネントのインスタンスの実行時の外観に影響を与えるかを示します。

<af:outputLabel value="Increase font-size" id="ol2"
styleClass="fooFontTestIncrease"/>

図3-12 演算子を使用した色の適用とフォント・サイズの変更

スタイル・クラスの詳細は、「スタイル・クラスの使用」を参照してください。

例3-1 演算子を使用した色の適用とフォント・サイズの変更

.FontSizeTest:alias {
font-size: 30px;
}

.BaseBackgroundColor:alias {
background-color: #0099ff;
}

.fooFontTestIncrease {
-tr-rule-ref: selector(".FontSizeTest:alias");
font-size: +20px;
}

.fooBackgroundColorTest {
-tr-rule-ref: selector(".BaseBackgroundColor:alias");
background-color: -#333333;
}

af|outputLabel {
-tr-rule-ref: selector(".BaseBackgroundColor:alias");
-tr-rule-ref: selector(".FontSizeTest:alias");
color: Red;
}

3.4 JDeveloper内からのセレクタ情報へのアクセス

JDeveloperのADFスキンのエディタ内でいくつかの方法によってADFスキンで設定するADFスキン・セレクタおよびCSSプロパティの参照情報にアクセスできます。アクセスできる参照情報には、ADFスキン・セレクタ用の次の参照ドキュメントが含まれます。

- Oracle ADF Facesスキン・セレクタ・タグ・リファレンス

- Oracle ADFデータ視覚化ツール・スキン・セレクタ・タグ・リファレンス

これらの参照ドキュメントには、ドキュメント・ライブラリからアクセスするか、図3-13に示すように、セレクタ・エディタのセレクタ・ツリーで、セレクタの上にマウスを置いたときに表示される情報テキスト内のリンクをクリックして、「ヘルプ・センター」ウィンドウからアクセスできます。

図3-13 ADFスキン・セレクタの参照文献

ADFスキン・セレクタの参照情報に加えて、CSSセレクタの情報にアクセスできます。これをエディタの「ソース」タブから実行するには、図3-14で示すように、CSSプロパティを選択して[Ctrl]キーを押しながら[D]キーを押すか、セレクタを右クリックしたときに表示されるコンテキスト・メニューから、「クイック・リファレンスの表示」を選択します。

図3-14 CSSプロパティのクイック・リファレンス・ドキュメント

4 JDeveloperのADFスキンの使用

この章では、JDeveloperで用意されている、ADFスキンを作成するためのADFスキンのエディタについて説明します。また、それらのエディタの主な機能について説明します。これには、ADFスキンで構成可能なセレクタの参照に使用するセレクタ・ツリー、プロパティの設定に使用する「プロパティ」ウィンドウ、拡張するADFスキンの参照方法などがあります。

この章の内容は次のとおりです。

- JDeveloperのADFスキンのエディタについて

- ADFスキン・デザイン・エディタの使用

- ADFスキン・セレクタ・エディタの使用

- 「プロパティ」ウィンドウの使用

- ADFスキンのナビゲート

4.1 JDeveloperのADFスキンのエディタについて

JDeveloperのADFスキンのエディタは、Oracle ADFを使用してビルドされたアプリケーション用のADFスキンを作成するツールです。ここでは、ADFスキニング・フレームワークによって公開されるセレクタを編集し、変更をプレビューし、完成したADFスキンをADFライブラリJARにパッケージ化するための多くのソース・エディタおよびビジュアル・エディタが提供されています。

JDeveloperのADFスキンのエディタの主な機能には次のものがあります。

- ADFデザイン・エディタ (デザイン・エディタ)では、用意されたコントロールを使用してSkyrosまたはADFスキンから拡張されたADFスキンを宣言によって変更できます。

- ADFスキン・セレクタ・エディタ(セレクタ・エディタ)では、セレクタ・ツリー内のADFスキニング・フレームワークによって公開されるすべてのセレクタを表示できます。

- 「プロパティ」ウィンドウでは、セレクタ・ツリーで選択したセレクタのプロパティを変更できます。

4.2 ADFスキン・デザイン・エディタの使用

デフォルトでは、「ADFスキン・ファイルの作成」で説明しているように、Skyros ADFスキンから拡張するADFスキンを作成する場合にデザイン・エディタが開きます。このエディタは様々なコントロールを用意して、アプリケーションの最も一般的なスタイルに設定されたパーツを変更します。

デザイン・エディタの下部には、ボタン、リンクおよびパネル・アコーディオンなどの一般的に使用される様々なADF Facesコンポーネントをレンダリングする多くのサンプル・ページが表示されます。これらのページは、エディタの上部で様々なコントロールに加えた変更を反映するためにリフレッシュされます。「ブラウザでプレビュー」アイコンは、クリックするとブラウザでサンプル・ページがレンダリングされます。たとえば図4-1では、このアイコンをクリックするとInternet Explorerのサンプル・ページがレンダリングされます。「デザイン・エディタのサンプル・ページをレンダリングするブラウザの変更方法」で説明しているように、もう1つのブラウザでサンプル・ページをレンダリングする方法を選べます。

デザイン・エディタの上部には、アプリケーション・ページの様々な領域(ブランド領域、グローバル領域、ボタン、リンクおよびメニューなど)のセレクタを変更するためのコントロールがまとめられた様々なタブが表示されます。各タブ内に、カラー・ピッカー、入力テキスト・コンポーネントおよびダイアログを起動するためのリンクなどのユーザー・インタフェース・コントロールが表示されます。図4-1に、ADFスキンをSkyros ADFスキンから拡張した場合に表示される、デザイン・エディタ内の「一般」タブを示します。このタブでは、フィールドの横のドロップダウン矢印をクリックした場合に起動できるカラー・ピッカーがレンダリングされます。そこでは、現在の色の値、種々のフォントとフォント・サイズを選択できるドロップダウン・リスト、およびダイアログを起動するためのリンクが表示されます(そのダイアログ内では、ADFスキンが参照するイメージをステータス・アイコン、アニメーションおよびコンポーネントに置き換えることができます)。

図4-1 Skyrosで拡張したADFスキンに表示されるADFスキン・デザイン・エディタ

デザイン・エディタでコントロールを使用して加えられたいかなる変更にも、CSS構文が生成されます(ADFスキンのソース・ファイル内に記述されます)。デザイン・エディタは、アプリケーションの一般的なスタイルに設定されたパーツの変更に役立ちます。たとえば、「ブランド領域」タブを1回クリックするとダイアログが起動し、ここでアプリケーションのページのブランド領域内のロゴとしてレンダリングするための新しいイメージを選択できます。最も一般的なスタイルに設定されたパーツの変更以上のことをする必要がある場合は、「ADFスキン・セレクタ・エディタの使用」で説明しているように、セレクタ・エディタを使用することを検討します。

デザイン・エディタを使用して色およびイメージを変更する方法の詳細は、「ADFスキン・デザイン・エディタのイメージおよび色の変更」を参照してください。

4.2.1 デザイン・エディタのサンプル・ページをレンダリングするブラウザの変更方法

「ブラウザでプレビュー」アイコンをクリックした場合にデザイン・エディタのサンプル・ページをレンダリングするブラウザを変更できます。

デザイン・エディタのサンプル・ページをレンダリングするブラウザを変更するには次のようにします。

1. メイン・メニューから、「ツール」→「プリファレンス」を選択します。

2. 「プリファレンス」ダイアログで、「Webブラウザとプロキシ」ページを選択します。

3. 「Webブラウザ」リストから使用するブラウザを選択します。

4. 「OK」をクリックします。

4.3 ADFスキン・セレクタ・エディタの使用

図4-2にセレクタ・エディタを示します。各ラベル番号は、図4-2に続くリスト内の説明に対応しています。作成したADFスキンがAltaスキン・ファミリから拡張された場合、セレクタ・エディタはデフォルトで開きます。ADFスキンがSkyrosスキン・ファミリを拡張した場合は、「セレクタ」タブをクリックすることでセレクタ・エディタにアクセスできます。

図4-2 ADFスキン・セレクタ・エディタ

1. 「アプリケーション」ウィンドウの「プロジェクト」ノードに、作成したADFスキンのソース・ファイルが表示されます。また、関連する構成ファイルおよびイメージ・ファイルも表示します。デフォルトでは、JDeveloperはADFスキンをskinsという名前のディレクトリに保存します。別のディレクトリ名を指定してソース・ファイルを保存できます。ADFスキン作成の詳細は、「ADFスキンのソース・ファイルの作成」を参照してください。

2. 「構造」ウィンドウには、ADFスキン・ファイルに追加したセレクタ、グローバル・セレクタ別名、スタイル・クラスおよび@ルールが一覧表示されます。

3. セレクタ・ツリーを表示または非表示にするには、「区切りの非表示/表示」アイコンをクリックします。

4. セレクタ・ツリーに表示されるセレクタをフィルタリングします。
入力テキスト・フィールドにテキストを入力してセレクタ・ツリーに表示されるセレクタのリストをフィルタリングするか、フィルタ・アイコンを使用して次のように表示できます。

- 使用可能なセレクタ: セレクタ・ツリーのすべてのセレクタ

- 更新済セレクタ: ADFスキン内で変更したセレクタのみ

- セレクタと@ルール: 関連する@ルールがあるセレクタのみ

5. 「拡張スキン」リストには、現在のADFスキンの拡張元ADFスキンのリストが表示されます。インポート済ADFスキンも指定します。
詳細は、「ADFスキンのナビゲート」を参照してください。

6. 新規スタイル・クラス、別名セレクタまたは@ルールを作成するには、「追加」アイコンを使用します。
新規スタイル・クラスの作成の詳細は、「スタイル・クラスの使用」を参照してください。別名セレクタの作成の詳細は、「グローバル・セレクタ別名の使用」を参照してください。@ルールの作成の詳細は、「@ルールの使用」を参照してください。

7. ADFスキンに追加したセレクタを削除するには、「削除」アイコンをクリックします。

8. 「プロパティ」ウィンドウでセレクタのプロパティに変更を加えた後にプレビュー・ペインを更新するには、「リフレッシュ」アイコンをクリックします。

9. セレクタ・ツリーで選択したアイテムに擬似クラスを適用するには、「擬似クラスの追加」アイコンをクリックします。
擬似クラスの詳細は、「ADFスキニング・フレームワークでの擬似クラス」を参照してください。

10. セレクタ・ツリーで選択したアイテムに対する変更を取り消すには、「プロパティ設定のクリア」アイコンをクリックします。

11. ADFスキンで指定した擬似クラスを削除するには、スキン・ファイルからの擬似クラスの削除アイコンをクリックします。

12. 「表示モード」リストでは、セレクタ・ツリーでグローバル・セレクタ別名に加えた変更がグローバル・セレクタ別名を参照するコンポーネントに及ぼす影響をプレビューできます。「表示モード」リストには、グローバル・セレクタ別名を参照するすべてのコンポーネントが表示されます。「表示モード」リストでは、1つのコンポーネント固有セレクタのプロパティに加えた変更がそのコンポーネントのすべてのサブタイプに及ぼす影響をプレビューすることもできます。たとえば、図4-3は、graphコンポーネント(af|dvt-graph)のADFデータ視覚化コンポーネント・セレクタを示しており、すべてのグラフ・タイプに変更を適用するコンポーネント固有の一連のセレクタが表示されています。他のいずれかのタイプのグラフ(棒、ファンネル、パレートなど)でセレクタに加えた変更をプレビューするには、「表示モード」リストを使用します。

図4-3 コンポーネントの「表示モード」リスト

グローバル・セレクタ別名の詳細は、「グローバル・セレクタ別名の使用」を参照してください。

13. セレクタ・ツリーには、ADFスキンで値を構成できるセレクタ、グローバル・セレクタ別名、スタイル・クラスおよび@ルールのリストが表示されます。
詳細は、「ADFスキン・セレクタ・エディタの使用」を参照してください。

14. 「リフレッシュ」アイコン(8)をクリックすると、ADFスキンでセレクタに加えた変更のプレビューがプレビュー・ペインにレンダリングされます。

15. ADFスキン・ファイルのソースを表示することもできます。

ヒント:

ADFスキンのソース・ビューとデザイン・ビューを並べてレンダリングするには、プレビュー・ペインから起動できるコンテキスト・メニューから「ドキュメントの分割」を選択します。

16. 「プロパティ」ウィンドウでは、ADFスキンで構成できるプロパティが識別されます。
詳細は、「「プロパティ」ウィンドウの使用」を参照してください。

17. テーマのタブでは、サポートされているテーマに加える変更をプレビューできます。
Altaスキン(およびAltaスキンを拡張したスキン)はテーマを使用しません。

4.3.1 セレクタ・ツリーについて

セレクタ・ツリーには、スタイル・クラス、グローバル・セレクタ別名、およびADF FacesやADFデータ視覚化コンポーネントの外観を変更するためにプロパティを構成できるセレクタのリストが表示されます。

図4-4に、セレクタ・エディタ内のセレクタ・ツリーによって公開されるノードを示します。

- スタイル・クラス
スタイル・クラスでは、コンポーネントの特定のインスタンスに適用できる1つ以上のスタイル・プロパティを定義します。セレクタ・エディタでは、継承されたスタイル・クラスが、一般的な用途、ノート・ウィンドウおよびポップアップ用に定義されたスタイル・クラスに分類されます。詳細は、「スタイル・クラスの使用」を参照してください。

- グローバル・セレクタ別名
グローバル・セレクタ別名では、1つ以上のセレクタに適用できるスタイル・プロパティを定義します。セレクタ・エディタでは、継承されたグローバル・セレクタ別名が、一般的な用途、アイコンおよびメッセージ用に定義されたセレクタ別名に分類されます。詳細は、「グローバル・セレクタ別名の使用」を参照してください。

- グループ化したセレクタ
複数のセレクタに適用する1つの宣言にグループ化されたスタイル・プロパティが識別されます。たとえば、図4-4に、buttonおよびlinkコンポーネントのセレクタのグループ化されたセレクタを示します。

- @ルール
@ルールは、アプリケーションのページが、特定のブラウザを使用するときなどの特定の環境でレンダリングされる場合のスタイル・プロパティを定義する方法です。詳細は、「@ルールの使用」を参照してください。

- Facesコンポーネント・セレクタ
セレクタではプロパティを設定できるADF Facesコンポーネントが識別されます。セレクタ・エディタに擬似要素、コンポーネント・セレクタ別名および下位セレクタのサブカテゴリが表示されます。簡潔にするため、ADF Facesコンポーネントのノードは展開されていません。詳細は、「コンポーネント固有セレクタの使用」を参照してください。

- データ視覚化コンポーネント・セレクタ
セレクタではプロパティを設定できるADFデータ視覚化コンポーネントが識別されます。セレクタ・エディタに擬似要素、コンポーネント・セレクタ別名および下位セレクタのサブカテゴリが表示されます。詳細は、「コンポーネント固有セレクタの使用」を参照してください。

図4-4 セレクタ・ツリー

4.3.2 セレクタ・エディタのインタラクティブ・プレビュー

セレクタ・エディタのプレビュー・ペインは、セレクタ・ツリーで現在選択されているコンポーネントのインタラクティブ・プレビューを表示します。このプレビューの上にマウスを置いて、コンポーネントの外観を変更するようカスタマイズする必要がある特定の疑似要素を指定するテキストを表示します。このプレビューのパーツをクリックすると、今クリックした対象の外観を変更するようにプロパティを構成できる場所に移動します。また、図4-5に示すように、疑似要素を右クリックしてコンテキスト・メニューを起動し、そこに現在の疑似要素に含まれるセレクタ疑似要素の階層化リストを表示させることもできます。

図4-5 カレンダ・コンポーネントのインタラクティブ・プレビュー

表示されたコンテキスト・メニューのエントリをクリックするか、他のコンポーネント・セレクタの疑似要素で定義されたプロパティを使用するcalendarコンポーネントの一部をクリックすると、セレクタ・ツリー内の疑似要素に移動します。たとえば、図4-5に示すコンテキスト・メニューのaf|button::linkをクリックすると、図4-6に示すように、コンポーネント・プレビューによって、セレクタ・エディタのセレクタ・ツリー内のbuttonコンポーネント・セレクタの疑似要素の場所へと移動します。

図4-6 buttonコンポーネントのリンク疑似要素

4.4 「プロパティ」ウィンドウの使用

「プロパティ」ウィンドウの主要な機能は、ADFスキニング・フレームワークで公開されるセレクタに対するCSSプロパティおよびADFスキン・プロパティの値を設定できるようにすることですが、これ以外にも数多くの機能があります。これらの機能では、次のことを実行できます。

- ADFスキンを開発するプロジェクトにイメージをコピーします。
詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。

- 図4-7に示すように、拡張ADF(青いアイコン)スキンから値を継承するプロパティとADFスキンで構成したプロパティ(緑のアイコン) を識別します。

- 図4-7に示すように、@ルールで関連付けられたプロパティを識別します。
@ルールの詳細は、「@ルールの使用」を参照してください。

- セレクタに対して構成できるADFスキン・プロパティを示します。
詳細は、「ADFスキニング・フレームワークでのプロパティ」を参照してください。

- ADFスキンで継承されているプロパティを定義している、拡張ADFスキンのセレクタにナビゲートします(宣言に移動)。
詳細は、「ADFスキンのナビゲート」を参照してください。

- 色の値をサポートするプロパティの色を定義できるダイアログを起動します。

図4-7に、ADFスキンを編集するときに「プロパティ」ウィンドウに表示される様々なコントロールの概要を示します。

図4-7 ADFスキンの「プロパティ」ウィンドウ内のコントロール

情報ヒントを表示するために、図4-8に示すように、@ルールに関連付けられたプロパティまたはその値を継承するプロパティを示すアイコンの上にマウスを置きます。この情報ヒント内のリンクをクリックすると、@ルールまたは継承されたプロパティ値が定義されたADFスキンのソース・ファイルに移動します。

図4-8 ソース宣言へ移動するリンクを示す情報ヒント

4.5 ADFスキンのナビゲート

ADFスキンを作成するとき、「ADFスキン・ファイルの作成」で説明しているように、拡張する元となるADFスキンを選択します。新しく作成するADFスキンが継承するプロパティが定義されているADFスキンを、拡張する元として選択します。最初のADFスキンを作成する場合は、Oracle ADFによって提供されるいずれかのADFスキンを選択する必要があります。

その後作成するADFスキンでは、作成したADFスキン、またはOracle ADFで提供されるいずれかのADFスキンを拡張できます。たとえば、Oracle ADFによって提供されるsimple ADFスキンを拡張して、skinAという名前の最初のADFスキンを作成するとします。次に、skinBという名前の2番目のADFスキンを作成します。skinBを作成するときは、skinAまたはOracle ADFで提供されるいずれかのADFスキンを拡張することを選択できます。skinAからskinBを拡張することを選択した場合のADFスキン間の継承関係を図4-9に示します。

Oracle ADFで提供されるADFスキンの詳細は、「Oracle ADFで提供されるADFスキンの継承関係」および「Oracle ADFで提供されるADFスキン」を参照してください。

図4-9 ADFスキン間の継承関係の例

ビジュアル・エディタの「拡張スキン」リストには、現在のADFスキンの拡張元ADFスキンのリストが表示されます。このリストはまた、スキンが拡張したADFスキンのいずれかがインポート済スキンを含むかを識別します。図4-10に、図4-9で示した継承関係を実装した場合に表示されるADFスキンのリストを示します。表示する拡張ADFスキンを開くには、「拡張スキン」リストでその拡張ADFスキンをクリックします。

図4-10 「拡張スキン」リスト

注意:

Oracle ADFで提供されるADFスキンのセレクタのプロパティは、編集できません。ユーザーが作成した拡張ADFスキンのセレクタのプロパティのみを変更できます。

「プロパティ」ウィンドウで表示される「宣言に移動」メニューを使用して、拡張ADFスキンにおける、他のADFスキンによって継承されるスタイル・プロパティを宣言している場所に移動できます。たとえば、「ADFスキンのナビゲート」に示すように、skinA ADFスキンはaf|buttonセレクタのaccess-key擬似要素のRedの背景色を定義するとします。

図4-11 プロパティ値の宣言

skinA ADFスキンから拡張されたskinB ADFスキンは、skinA ADFスキン内で定義されたプロパティ値を継承します。「ADFスキンのナビゲート」に、background-colorプロパティの値がRedになっている、セレクタ・エディタ内のskinB ADFスキンを示します。

図4-12 拡張スキンからのプロパティ値の継承

プロパティの宣言に移動するには、次のようにします。

1. 拡張ADFスキンから値を継承するADFスキンのプロパティを特定します。図4-12に示すように、青い上矢印はこれらのプロパティを示します。

2. 図4-13に示すように、プロパティ・フィールドの上にマウスを置いた場合に表示されるアイコンをクリックしてコンテキスト・メニューを起動し、「宣言に移動」を選択します。

図4-13 「宣言に移動」コンテキスト・メニュー

図4-14に示すように、ソース・ビューで拡張ADFスキンが開きます。拡張ADFスキンが、ユーザーが作成したADFスキンである場合は、定義されているプロパティ値を変更できます。Oracle ADFで提供されるADFスキン(「Oracle ADFで提供されるADFスキン」を参照)は、読取り専用です。

図4-14 拡張ADFスキンで定義されるプロパティ値

5 ADFスキンのソース・ファイルの作成

この章では、JDeveloperでADFスキンのソース・ファイルを作成する方法について説明します。ADFライブラリJARファイルからADFスキンをインポートする方法に関する情報も提供されます。

この章の内容は次のとおりです。

- ADFスキンの作成について

- ADFスキン・ファイルの作成

- 1つ以上のADFスキンを現在のADFスキンにインポートする

- ADFライブラリJARからのADFスキンの追加

5.1 ADFスキンの作成について

ADFスキンでは、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントによって公開されるセレクタのプロパティを定義します。JDeveloperのエディタを使用して、ADFスキンのソース・ファイルを作成できます。ADFスキンのソース・ファイルはCSSファイルの一種であるため、エディタを使用しないで作成できます。ただし、エディタを使用すると、関連する構成ファイルが(ADFスキンを初めて作成したときに)作成されたり、(以降のADFスキンを作成するときに)変更されます。これらの構成ファイルの詳細は、「ADFスキンの構成ファイル」を参照してください。

5.2 ADFスキン・ファイルの作成

ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが実行時にレンダリングされる方法を定義するADFスキン・ファイルをJDeveloperで作成できます。作成するADFスキンは、Oracle ADFによって提供されるADFスキン、または作成した既存のADFスキンのいずれかを拡張したものである必要があります。Oracle ADFによって提供されるADFスキンの間では、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに対して定義されているカスタマイズのレベルが異なっています。Oracle ADFによって提供されるADFスキン間の継承関係の詳細は、「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。Oracle ADFによって提供されるADFスキンにおけるカスタマイズのレベルの詳細、および拡張するADFスキンの推奨事項は、「Oracle ADFで提供されるADFスキン」を参照してください。

デフォルトでは、JDeveloperのエディタが、org.apache.myfaces.trinidad.desktopレンダー・キット用のADFスキンを作成します。render kitは、ADF Facesコンポーネント・マップを、特定のクライアントに適したコンポーネント・タグにマップする方法を定義します。

ADFスキンの作成後、デザイン・エディタなどの用意されているエディタを使用して、ADF FacesおよびADFデータ視覚化コンポーネントが公開するセレクタの値を変更できます。そのようにしない場合は、作成したADFスキンによって、拡張元のADFスキンと同じ外観が定義されます。詳細は、「コンポーネント固有セレクタの使用」を参照してください。

Skyros ADFスキンから拡張されたADFスキンを作成する場合、デザイン・エディタを有効にします。このタブは、コントロールを使用して多くの頻繁に使用するセレクタのプロパティをセットできる概要ペインを提供します。デザイン・エディタの使用の詳細は、「ADFスキン・デザイン・エディタの使用」を参照してください。

5.2.1 JDeveloperでのADFスキンの作成方法

JDeveloperでADFスキンを作成できます。

JDeveloperでADFスキンを作成するには、次のようにします。

1. 「アプリケーション」ウィンドウで、ユーザー・インタフェースのコードが含まれるプロジェクトを右クリックし、「新規」を選択します。

2. 「新規ギャラリ」で「Web層」を展開し、「JSF/Facelets」、「ADFスキン」の順に選択し、「OK」をクリックします。

3. 「ADFスキンの作成」ダイアログの「スキン・ファイル」ページで、次を入力します。

- ファイル名: 新規ADFスキンのファイル名を入力します。

- ディレクトリ: ADFスキンのCSSソース・ファイルを保存するディレクトリへのパスを入力するか、エディタが提示したデフォルトのディレクトリを受け入れます。

- ファミリ: スキンのファミリ名の値を入力します。
新しい名前を入力するか、既存のファミリ名を指定できます。既存の値を指定した場合、同じファミリの値を持つADFスキン間の区別を行うために、「ADFスキンのバージョニング」の説明に従って、ADFスキンをバージョニングすることが必要になる場合があります。

入力した値は、作成したADFスキンを登録するtrinidad-skins.xml内の<family>要素の値として設定されます。実行時、アプリケーションのtrinidad-config.xmlファイル内の<skin-family>要素では、この値を使用して、アプリケーションで使用するADFスキンを識別します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。

- このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。このチェック・ボックスを選択すると、「ADFスキンを作成した場合の処理」で説明しているように、trinidad-config.xmlファイルが更新されます。

4. 「ADFスキンの作成」ダイアログの「基本スキン」ページで、次を入力します。

- Show Latest Versions Only: このチェック・ボックスをクリアして、すべての利用可能なバージョンのADFスキンを表示します。

- Available Skins: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。このリストには、このプロジェクトで以前に作成したすべてのADFスキンも含まれます。拡張するADFスキンの詳細および推奨事項は、「Oracle ADFで提供されるADFスキン」を参照してください。

- スキンID: 「ファイル名」に入力した値、およびADFスキンを作成する対象となるレンダー・キットのID (desktop)が連結されて表示される読取り専用フィールドです。これを拡張して別のADFスキンを作成する場合は、「拡張対象」リストからこの値を選択します。
JDeveloperによって、この値がtrinidad-skins.xmlファイル内の<id>要素に書き込まれます。

5. 「終了」をクリックします。

5.2.2 ADFスキンを作成した場合の処理

「ディレクトリ」フィールドで提示されたデフォルト値を受け入れると、拡張子が.cssのファイルが、プロジェクト内のskinsディレクトリのサブディレクトリに生成されます。

図5-1に示すように、Altaスキンを拡張するADFスキンがセレクタ・エディタで開きます。セレクタ・エディタは、Skyros ADFスキンから拡張されたADFスキンを作成した場合にも利用可能です。

図5-1 セレクタ・エディタでAltaから拡張される新規に作成されたADFスキン

図5-2に示すように、Skyros ADFスキンを拡張したADFスキンがデザイン・エディタで開きます。

図5-2 「設計」タブのSkryosから拡張される新規に作成されたADFスキン

trinidad-skins.xmlファイルは、例5-1に示すように、作成したADFスキンのメタデータを含めるように変更されます。この例では、SkyrosファミリのADFスキンから拡張したADFスキンのエントリを示しています。例5-1には、このADFスキンと関連付けられたリソース・バンドルおよびレンダー・キットを指定する値も含まれます。リソース・バンドルの詳細は、「ADFスキンのテキストの使用」を参照してください。

「ADFスキンの作成」ダイアログで「このプロジェクトのデフォルト・スキン・ファミリとして使用」チェック・ボックスを選択すると、trinidad-config.xmlファイルは、新規ADFスキンがアプリケーションのデフォルトのスキンになるように変更されます。これは、JDeveloperからアプリケーションを実行した場合、アプリケーションは新規に作成されたADFスキンを使用することを意味します。詳細は、「WebアプリケーションへのADFスキンの適用」を参照してください。次の例に、例5-1のADFスキンがアプリケーションのデフォルトとなっているtrinidad-config.xmlファイルを示します。

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>skin2</skin-family>
</trinidad-config>

ADFスキンのソース・ファイルには、次の例で示すように、コメントおよびネームスペース参照が含まれています。ADFスキンのソース・ファイル内のこれらのエントリにより、このファイルは、ファイル拡張子が.cssの非ADFスキン・ファイルと区別されます。ADFスキンのデザインまたはセレクタ・エディタで開くために、これらのエントリがソース・ファイルで必要となります。

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

プロジェクトでADFスキンを初めて作成すると、図5-1に示すように、リソース・バンドル・ファイル(skinBundle.properties)が生成されます。リソース・バンドルの使用の詳細は、「ADFスキンのテキストの使用」を参照してください。

例5-1 trinidad-skins.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
....
<skin>
<id>skin2.desktop</id>
<family>skin2</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
<bundle-name>resources.skinBundle</bundle-name>
</skin>
</skins>

5.3 1つ以上のADFスキンを現在のADFスキンにインポートする

@importルールを使用して、JDeveloperプロジェクト内の他のADFスキンを使用するADFスキンにインポートできます。これにより、後者のADFスキンで定義されたスタイル・プロパティが使用するADFスキンで利用可能になります。次の例に、ADFスキン(skinA)を現在のADFスキンにインポートする有効な構文を示します。

/** Use the following syntax if skinA.css is in the same directory **/
@import "skinA.css";
@import url("skinA.css");

/** Use the following syntax if skinA.css is in another directory **/
@import "../skinA/skinA.css";
@import url("../skinA/skinA.css");

次の、2つのADFスキンを現在のADFスキンにインポートする例に示すように、@importルールは、すべての@charsetルールに従い、他のすべての@ルールおよびADFスキン内のルール・セットに優先する必要があります。

@charset "UTF-8";

@import url("../skinA/skinA.css");
@import url("../skinB/skinB.css");

/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

af|inputText{
background-color: Green;
}
...

5.4 ADFライブラリJARからのADFスキンの追加

JARファイルにパッケージ化されたADFスキンをJDeveloperプロジェクトに追加できます。JARファイルからのADFスキンをプロジェクトに追加すると、「ADFスキン・ファイルの作成」で説明しているように、インポートしたADFスキンを新規ADFスキンの作成時に拡張できます。

ADFスキンのパッケージ化の使用に推奨されるJARファイルのタイプは、ADFライブラリJARファイルです。このタイプのJAR ファイルにADFスキンをパッケージ化する方法の詳細は、「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

5.4.1 ADFライブラリJARからADFスキンを追加する方法

JARファイルにパッケージ化されたADFスキンをプロジェクトに追加できます。

ADFライブラリJARからADFスキンを追加するには、次のようにします。

1. メイン・メニューから「アプリケーション」→「プロジェクト・プロパティ」を選択します。

2. 「プロジェクト・プロパティ」ダイアログで、「ライブラリとクラスパス」ページを選択し、「JAR/ディレクトリの追加」をクリックします。

3. 「アーカイブまたはディレクトリの追加」ダイアログで、追加するADFスキンが含まれているJARファイルに移動し、「選択」をクリックします。

JARファイルが「クラスパス・エントリ」リストに表示されます。

4. 入力後、「OK」をクリックします。

5.4.2 ADFライブラリJARからADFスキンをインポートした場合の処理

「ADFスキン・ファイルの作成」で説明しているように、JARファイルから追加したADFスキンは、新規ADFスキンの作成時に「拡張対象」リストに表示されます。JARファイルから追加したADFスキンを拡張して新規ADFスキンを作成すると、追加したADFスキンの名前が、セレクタ・エディタのプレビュー・ペインの「拡張スキン」リストに表示されます。たとえば、図5-3では、skin2.css ADFスキンは、JARファイルからプロジェクトに追加されたADFスキン、jarredskin.cssを拡張して作成されました。

図5-3 「拡張スキン」リスト内のインポートされたADFスキン

追加したADFスキンで定義されているプロパティは、青い上矢印付きで「Properties」ウィンドウに表示されます。図5-4に示すように、プロパティの上にマウスを置くと、継承関係に関する情報ヒントが表示されます。

図5-4 インポートされたADFスキンから継承されたプロパティ

6 コンポーネント固有セレクタの使用

この章では、ADFスキニング・フレームワークがADF FacesコンポーネントとADFデータ視覚化コンポーネントに対して公開するセレクタのプロパティを指定することによって、これらのコンポーネントの外観を変更する方法について説明します。また、メッセージに適用するADFスキン・プロパティの設定、ADF Facesコンポーネントに適用できるテーマ、アクセシビリティを考慮したADFスキンの設定方法についても説明します。

この章の内容は次のとおりです。

- コンポーネント固有セレクタの使用について

- ADF Facesコンポーネントのセレクタの変更

- ADFデータ視覚化コンポーネントのセレクタの変更

- コンポーネント固有セレクタの変更

- メッセージに適用するADFスキン・プロパティの設定

- アクセシビリティのためのADFスキンの設定

6.1 コンポーネント固有セレクタの使用について

ADF FacesコンポーネントまたはADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義することによって、コンポーネントの外観をカスタマイズします。外観を適切に設定するには、ADF FacesコンポーネントとADFデータ視覚化コンポーネントによって公開されるコンポーネント固有セレクタ、さらにコンポーネント固有セレクタによって参照されることがあるグローバル・セレクタ別名と下位セレクタについて理解する必要があります。ADFスキンを作成するときに拡張する元となるADFスキンでは、数多くのグローバル・セレクタ別名と下位セレクタが定義されています。コンポーネント自体と他のコンポーネントとの関連についても理解する必要があります。たとえば、図6-1に示すADF Facesのtableコンポーネントの外観をカスタマイズするには、ADF Facesのtableコンポーネントによって公開されるセレクタに加えて、af:columnコンポーネントによって公開されるrow-header-cellおよびcolumn-filter-cellセレクタのスタイル・プロパティを定義する必要があります。また、拡張したADFスキンで定義されている1つ以上のアイコンまたはメッセージのグローバル・セレクタ別名について、スタイル・プロパティを変更することも必要になる場合があります。

注意:

Skyros ADFスキンから拡張されたADFスキン内で頻繁に使用するセレクタのプロパティを変更する必要がある場合は、「ADFスキン・デザイン・エディタの使用」で説明しているように、デザイン・エディタを使用することを検討してください。このエディタは、ADFスキンがSkyros ADFスキンから拡張されていれば、デフォルトで表示されます。デザイン・エディタには、ADFスキンを迅速に変更するための様々なコントロールが用意されています。

図6-1 ADF Facesのtableコンポーネントのセレクタ

ADFスキンのセレクタ・エディタに用意されているツールを使用して、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、「JDeveloperのADFスキンの使用」を参照してください。

ADF FacesコンポーネントとADFデータ視覚化コンポーネントのセレクタを変更するときに役立つ可能性があるその他の情報ソースは、次のとおりです。

- イメージ: ADFスキンは、たとえば、ページ内でアイコンやロゴとしてレンダリングされるイメージを参照できます。ADFスキンでイメージを操作する方法の詳細は、「ADFスキンのイメージおよび色の使用」を参照してください。

- テキスト: ADFスキンには、ページ内でレンダリングされるテキスト文字列は含まれません。ただし、ページに表示するテキスト文字列を定義するリソース・バンドルを指定できます。詳細は、「ADFスキンのテキストの使用」を参照してください。

- グローバル・セレクタ別名: グローバル・セレクタ別名では、複数のADF Facesコンポーネントに同時に適用できるスタイル・プロパティを指定します。グローバル・セレクタ別名の詳細は、「グローバル・セレクタ別名の使用」を参照してください。

- スタイル・クラス: ADFスキンのスタイル・クラスでは、ADF Facesコンポーネントがスタイル関連属性(styleClassとinlineStyle)を公開する場合に値として参照できる多くのスタイル・プロパティを指定します。スタイル・クラスの詳細は、「スタイル・クラスの使用」を参照してください。

- ADF Facesリッチ・クライアント・コンポーネント・ホスト・デモ: Oracle Technology Network (OTN)のWebサイトには、ADFスキンによってADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観がどのように変更されるかのデモへのアプリケーションへのリンクがあります。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlにアクセスしてください。

6.2 ADF Facesコンポーネントのセレクタの変更

ADF Facesコンポーネントは、Webアプリケーションのボタン、リンクおよびチェック・ボックスなどのユーザー・インタフェース・コントロールをレンダリングします。ADF Facesコンポーネントには、カレンダ、他のユーザー・インタフェース・コントロールを配置するパネルおよびWebアプリケーション内の表をレンダリングするコンポーネントも含まれています。ADF Facesコンポーネントおよび提供される機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。

各ADF Facesスキン・セレクタによって公開されるプロパティを編集して、ADF Facesコンポーネントの実行時の外観を変更できます。ADF Facesコンポーネントによって公開されるセレクタの数は、コンポーネントによって異なります。たとえば、ADF Facesコンポーネントのaf:imageとaf:popupは、それぞれ1つのセレクタを公開します。対照的に、ADF Facesコンポーネントのaf:panelHeaderは、コンポーネントのユーザー・インタフェースの様々なパーツの外観を変更できる様々なセレクタを公開します。af:panelHeaderコンポーネントの指示テキスト、ヘルプ・アイコンおよびタイトルを変更できるセレクタなどがあります。

ADF Facesコンポーネントの実行時の外観を変更するための処理は、各コンポーネントで同じです。唯一の違いは、各ADF Facesコンポーネントが公開するセレクタの数です。図6-2と図6-3に、buttonコンポーネントを例として、擬似要素とコンポーネントのセレクタを使用してこのコンポーネントの外観をカスタマイズする方法を示します。図6-2に、buttonコンポーネントおよびコンポーネント・アイコンにskyrosスキンを適用した様子を示します。

図6-2 Skyros ADFスキンを適用したButtonコンポーネントのデフォルトの外観

図6-3に、コンポーネントのセレクタに次の擬似要素の値を設定した後のセレクタ・エディタ内のコンポーネントの外観を示します。

- access-key: 色プロパティがredに設定されています

- dropdown-icon-style: 枠線プロパティが2px solid blackに設定されています

図6-3 セレクタが変更されたButtonコンポーネント

ADF Facesコンポーネントによって公開されるセレクタに関する参照情報は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスにあります。

6.3 ADFデータ視覚化コンポーネントのセレクタの変更

ADFデータ視覚化コンポーネントは、データをグラフィカルな表形式で表現する機能を提供する一連のコンポーネントです。ADFデータ視覚化コンポーネントの例として、グラフ、ガント、ピボット・テーブルおよび階層ビューアがあります。ADFデータ視覚化コンポーネントおよび提供される機能の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。

各ADFデータ視覚化コンポーネント・セレクタによって公開されるプロパティを編集して、ADFデータ視覚化コンポーネントの実行時の外観を変更できます。ADFデータ視覚化コンポーネントによって公開されるセレクタの数は、コンポーネントによって異なります。

図6-4に、カスタマイズ可能なADFデータ視覚化のgaugeコンポーネントのセレクタを表示するためにノードが展開された、セレクタ・エディタ内のADFスキンを示します。

図6-4 ADFデータ視覚化コンポーネントのセレクタ

ADFデータ視覚化コンポーネントの外観をカスタマイズするには、各ADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義します。ADFスキン用のJDeveloperのセレクタ・エディタに用意されているツールを使用して、ADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、「JDeveloperのADFスキンの使用」を参照してください。

外観を適切に設定するには、ADFデータ視覚化コンポーネントによって公開されるセレクタ、コンポーネントによって参照されることがあるグローバル・セレクタ別名、およびADFスキンの作成時の拡張元となるADFスキンで定義されているグローバル・セレクタ別名について理解する必要があります。コンポーネント自体と他のコンポーネントとの関連についても理解する必要があります。たとえば、図6-5に示すADFデータ視覚化のpivotTableコンポーネントの外観をカスタマイズするには、このセレクタの擬似要素のスタイル・プロパティを定義する必要があります。拡張したADFスキンで定義されている1つ以上のグローバル・セレクタ別名のスタイル・プロパティの変更が必要になる場合もあります。

図6-5 ADFデータ視覚化のpivotTableコンポーネント

graphコンポーネントやhierarchyViewerコンポーネントのセレクタなど、多くのADFデータ視覚化コンポーネントのセレクタによって、ADFスキン・プロパティを設定する擬似要素が公開されます。これらのADFスキン・プロパティでは、擬似要素で指定されたエリアの外観を変更します。ADFスキン・プロパティの名前は、-tr-という文字で始まります。たとえば、図6-6に示す階層ビューアのlateral-navigation-buttonセレクタのプロパティは、すべて-tr-で始まっています。

図6-6 hierarchyViewerコンポーネントのlateral-navigation-button擬似要素のプロパティ

対照的に、図6-7に示すganttコンポーネントのsummary-task-leftセレクタは、このセレクタに対して設定されているプロパティの大部分がCSSプロパティであるため、4つのADFスキン・プロパティ(-tr-rule-ref、-tr-inhibit-、-tr-enable-themesおよび-tr-children-theme)のみを公開します。

ADFスキン・プロパティの詳細は、「ADFスキニング・フレームワークでのプロパティ」を参照してください。

図6-7 ganttコンポーネントのsummary-task-left擬似要素のプロパティ

ADFデータ視覚化コンポーネントによって公開されるセレクタ、擬似要素および擬似クラスに関する参照情報は、Oracle ADFデータ視覚化ツール・スキン・セレクタ・タグ・リファレンスにあります。

6.4 コンポーネント固有セレクタの変更

コンポーネント固有セレクタを変更する処理は、ADF FacesコンポーネントおよびADFデータ視覚化コンポーネントの両方の場合と同じです。セレクタ・エディタのセレクタ・ツリーでFacesコンポーネント・セレクタ・ノードまたはデータの視覚化セレクタ・ノードを開き、変更するコンポーネントのセレクタを選択します。次に、「プロパティ」ウィンドウを使用してこのセレクタの値を設定します。擬似要素のプロパティ、コンポーネント・スタイル・クラス、コンポーネント・セレクタ別名または選択したセレクタが参照する下位セレクタを設定することもできます。さらに、コンポーネント固有セレクタがサポートする擬似クラスを追加できます。擬似クラスの詳細は、「ADFスキニング・フレームワークでの擬似クラス」を参照してください。図6-8に、セレクタ・エディタのセレクタ・ツリーにおけるADF Facesのtableコンポーネントのスキン・セレクタのビューおよびこのスキン・セレクタに対して設定できる様々な擬似要素を示します。

図6-8 tableコンポーネントのセレクタ

図6-9に、ADF Facesのsimpleスキンのスタイル・プロパティを使用してデータをレンダリングするADF Facesのtableコンポーネントの実行時ビューを示します。

図6-9 simpleスキンによってレンダリングされたADF Facesのtableコンポーネント

6.4.1 コンポーネント固有セレクタの変更方法

コンポーネント固有セレクタを変更するには、セレクタ・ツリーでセレクタを選択し、「プロパティ」ウィンドウで、セレクタ、その擬似要素または下位セレクタの値を設定します。さらに、コンポーネント固有セレクタによってサポートされている場合は、擬似クラスを追加できます。

コンポーネント固有セレクタを変更するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、適切なオプションを選択します。

- ADF Facesコンポーネントのセレクタを変更する場合は、Facesコンポーネント・セレクタ・ノードを展開します。

- ADFデータ視覚化コンポーネントのセレクタを変更する場合は、データの視覚化セレクタ・ノードを展開します。

たとえば、Facesコンポーネント・セレクタ・ノード、列ノード、擬似要素ノードの順に展開し、column-header-cellセレクタを選択します。

2. 「プロパティ」ウィンドウで、手順1で選択したセレクタによってサポートされているプロパティの値を指定します。

たとえば、「プロパティ」ウィンドウの「共通」セクションで、次の属性の値を設定します。

- 背景色: 表のヘッダー行に表示する背景色を指定します。

- 色: 表の列のヘッダー行に表示されるテキストに適用する色を指定します。

3. プレビュー・ペインで、「擬似クラスの追加」アイコンをクリックして、表示されたサポートされている擬似クラスのリストからサポートされている擬似クラスを選択します。

6.4.2 コンポーネント固有セレクタを変更した場合の処理

プレビュー・ペインで「リフレッシュ」アイコンをクリックすると、セレクタに対する変更がセレクタ・エディタに表示されます。セレクタに擬似クラスを追加した場合は、プレビュー・ペインに、擬似クラスが追加されたセレクタのエントリも表示されます。たとえば、図6-10は、:hover擬似クラスが追加されたセレクタのエントリを示しています。

注意:

af|documentセレクタのプレビュー・ペインには、このセレクタに擬似クラスを追加した場合でも1つのエントリのみが表示されます。

図6-10 コンポーネント固有セレクタと擬似クラスが表示されたプレビュー・ペイン

セレクタ・エディタは、「プロパティ」ウィンドウでセレクタに対して指定された値をADFスキンのソース・ファイルにも書き込みます。次の例に、「コンポーネント固有セレクタの変更方法」で説明した変更の後でソース・ファイルに表示される変更を示します。

af|column::column-header-cell
{
color: Black;
background-color: Olive;
font-weight: bold;
}

Webアプリケーションが前述の例の値が含まれているADFスキンを使用すると、ADF Facesのtableコンポーネントによってレンダリングされた表の列のヘッダー行が図6-11のように表示されます。この表では、simpleスキンを拡張するスキンが使用されています。

図6-11 ヘッダー行がスキニングされたADF Facesのtable

6.5 メッセージに適用するADFスキン・プロパティの設定

ADF Faces入力コンポーネントに特定タイプのメッセージが関連付けられているかどうかに基づいて、入力コンポーネントにスタイルを適用できます。コンポーネントに特定タイプのメッセージが追加されると、そのコンポーネントのスタイルは、新しいステータスを反映するように自動的に変更されます。当該メッセージのタイプが定義されていない場合、コンポーネントはADFスキンに定義されているデフォルトのスタイルを使用します。

メッセージ・プロパティのタイプは次のとおりです。

- :fatal

- :error

- :warning

- :confirmation

- :info

図6-12に、simple ADFスキンを使用してレンダリングされたinputTextコンポーネントを示します。図6-12では、simple ADFスキンによって、エンド・ユーザーが警告を生成する値を入力したときにinputTextコンポーネントに適用される:warningメッセージ・プロパティのスタイル値が定義されています。

図6-12 :warningメッセージ・プロパティのスタイルを表示するinputTextコンポーネント

図6-13に、図6-12と同じinputTextコンポーネントを示します。図6-13では、エンド・ユーザーがエラーを生成する値を入力しました。その結果、inputTextコンポーネントが:errorメッセージ・プロパティに対して設定されているスタイル・プロパティを使用してレンダリングされます。

図6-13 :errorメッセージ・プロパティのスタイルを表示するinputTextコンポーネント

ADFスキニング・フレームワークには、メッセージに適用するスタイル・プロパティを定義する多くのグローバル・セレクタ別名が定義されています。図6-14に、セレクタ・エディタのセレクタ・ツリーの「メッセージ」ノードの下に表示されるグローバル・セレクタ別名のリストを示します。図6-14の右側のプレビュー・ペインは、現在セレクタ・ツリーで選択されているグローバル・セレクタ別名に対して定義されているスタイル・プロパティによって、「表示モード」リストから選択したコンポーネントがどのようにレンダリングされるかを示しています。

図6-14 メッセージのグローバル・セレクタ別名

ADFスキンでスタイル・プロパティを定義することによって、ADFスキニング・フレームワークに用意されているメッセージのグローバル・セレクタ別名をカスタマイズできます。グローバル・セレクタ別名に対して定義したスタイル・プロパティは、そのグローバル・セレクタ別名を参照するすべてのADF Facesコンポーネントに影響を及ぼします。たとえば、図6-14に示すグローバル・セレクタ別名の枠線の色を緑色に変更すると、「表示モード」リスト内のすべてのADF Facesコンポーネントが緑色の枠線でレンダリングされます。グローバル・セレクタ別名の詳細は、「グローバル・セレクタ別名の使用」を参照してください。

af|messageおよびaf|messagesセレクタでは、実行時にメッセージ・ダイアログに表示されるアイコンを変更できる擬似要素も公開されます。さらに、これらのセレクタは、エンド・ユーザーがメッセージ・ダイアログ上にマウスを置いたときにツールチップに表示されるテキストを指定するリソース文字列を定義します。「ADFスキンのテキストの使用」で説明されているように、リソース・バンドルの代替値を指定して、これらのリソース文字列をオーバーライドできます。ADF Facesコンポーネントのメッセージの構成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ヒント、メッセージおよびヘルプの表示」の章を参照してください。

6.5.1 メッセージに適用するADFスキン・プロパティの設定方法

設定するメッセージ・タイプのコンポーネントのセレクタに擬似クラスを追加します。次に、「プロパティ」ウィンドウを使用して擬似クラスのスタイル・プロパティを定義します。

メッセージに適用するADFスキン・プロパティを設定するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、Facesコンポーネント・セレクタ・セクションを開き、メッセージに適用するスタイル・プロパティを設定するADF Facesコンポーネントのセレクタを選択します。

たとえば、af|inputTextセレクタを選択して、ADF FacesのinputTextコンポーネントに適用するスタイル・プロパティを設定します。

2. 「擬似クラスの追加」アイコンをクリックして、手順1で選択したセレクタに利用できる擬似クラスのリストを表示します。

3. スタイル・プロパティを設定するメッセージに対応する擬似クラスを選択します。ADF Facesコンポーネントに対して、次の擬似クラスを利用できます。

- fatal

- error

- warning

- confirmation

- info

4. アプリケーションがコンポーネントのメッセージを表示する場合に、実行時にコンポーネントに適用するスタイル・プロパティを設定します。

6.5.2 ADFスキン・プロパティをメッセージに適用するように設定した場合の処理

セレクタ・エディタは、「プロパティ」ウィンドウでセレクタの擬似クラスに対して指定された値をADFスキンのソース・ファイルに書き込みます。たとえば、af|inputTextセレクタのerror擬似クラスのcontent擬似要素に対して、枠線プロパティの値をorangeに設定します。図6-15に、ADFスキンのソース・ファイルに記述される構文のエントリと、セレクタ・エディタのプレビュー・ペインにおける変化を示します。

図6-15 inputTextコンポーネントのエラー・メッセージのスタイル・プロパティ

6.6 アクセシビリティのためのADFスキンの設定

Oracle ADFでは、ADF Facesコンポーネントを使用して開発されたアプリケーションを障害のある方が使用できるようにするために、アプリケーションのアクセシビリティ・サポートを提供しています。アプリケーションのアクセシビリティを確保する取り組みの一環として、ADFスキンで障害のある方向けのスタイル・プロパティを定義できます。これらのスタイル・プロパティは、@accessibility-profileルールで始めます。

@accessibility-profileルールを使用すると、trinidad-config.xmlファイルで指定できるhigh-contrastおよびlarge-fontsアクセシビリティ・プロファイル設定のスタイル・プロパティを定義できます。trinidad-config.xmlファイルの詳細は、「ADFスキンの構成ファイル」を参照してください。

背景色と前景色のコントラストをはっきりさせるには、high-contrastアクセシビリティ・プロファイルのスタイル・プロパティを定義します。ユーザーにWebブラウザでのテキスト・スケーリング設定の増減を許可する必要がある場合は、large-fontsアクセシビリティ・プロファイルのスタイル・プロパティを定義します。large-fontsを定義してもフォントは大きくなりませんが、固定ピクセル・サイズではなく、スケーラブル・フォントまたはディメンションになります。

例6-1に、アプリケーションがhigh-contrastアクセシビリティ・プロファイルを使用してレンダリングするときにaf|column::sort-ascending-icon擬似要素に適用されるスタイル・プロパティを示します。

アクセシビリティを考慮したADF Facesページの開発とアクセシビリティ・プロファイルの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「アクセシビリティを考慮したADF Facesページの開発」の章を参照してください。

例6-1 @accessibility-profileを使用して定義されたスタイル・プロパティ

@accessibility-profile high-contrast {
af|calendar::calendar-icon-reminder-style,
af|calendar::calendar-icon-recurring-style,
af|calendar::calendar-icon-recurring-change-style {
-tr-inhibit: all;
}
}

6.6.1 アクセシビリティを考慮したADFスキンの設定方法

設定するセレクタまたはセレクタの擬似要素のスタイル・プロパティを定義し、そのスタイル・プロパティを@accessibility-profileルールで始めます。

アクセシビリティを考慮したADFスキンを設定するには、次のようにします。

1. 「コンポーネント固有セレクタの変更」の説明に従って、設定するセレクタおよびセレクタの擬似要素のスタイル・プロパティを定義します。

2. 例6-1に示すように、ADFスキンのソース・ファイルで、設定したスキニング・キーを@accessibility-profileルールで始めます。

7 ADFスキンのイメージおよび色の使用

この章では、ADFスキンでイメージおよび色を使用する方法について説明します。ADFで定義したカラー・パレットを迅速に変更するために、Skyrosで拡張したスキンの色カテゴリを使用する方法に加えて、用意されたエディタを使用してイメージを変更する方法などの機能を説明します。

この章の内容は次のとおりです。

- ADFスキンのイメージおよび色の使用について

- ADFスキン・デザイン・エディタのイメージおよび色の変更

- ADFスキンのアンカー・カラーの使用

- コンポーネント・セレクタのイメージの変更

7.1 ADFスキンのイメージおよび色の使用について

最小書式設定のみを含むsimpleスキン以外に、Oracle ADFで提供されるADFスキンは、色スキームおよびリファレンス・イメージを定義してアプリケーションにカラフルなルック・アンド・フィールを提供しています。ADFスキンが参照するこれらの色やイメージを変更することで、ADFスキンを使用するアプリケーションの外観が大きく異なります。図7-1はこれを、2つの異なるADFスキン(skyrosおよびsimple)でレンダリングしたあるアプリケーションの同じページを示すことで表しています。図7-1の上部に表示されているアプリケーション・ページのルック・アンド・フィールは、skyrosで定義しています。下部に表示されているsimpleスキンを使用したアプリケーション・ページよりも、多くの色とイメージを使用しています。

図7-1 イメージと色を使用したADFスキン

Oracle ADFで提供される、イメージを参照するADFスキンのセレクタのいくつかを次に示します。Webアプリケーションのスキニングで参照されるイメージが実行するロールについても簡単に説明します。

- af|document::splash-screen-icon
このコンポーネント固有セレクタは、Webアプリケーションがブラウザをロードするときにスプラッシュ画面内に表示されるアイコンを指定します。

- af|column::sorted-descending-icon-style
このコンポーネント固有セレクタは、コラムの降順ソート・インジケータ用にレンダリングされるアイコンを指定します。

- .AFFatalIcon:alias
このグローバル・セレクタ別名は、ページに致命的エラーが発生した場合に表示されるアイコンを指定します。

Oracle ADFで提供されるADFスキンで定義される色の例は、.AFHoverPrimaryColor:aliasグローバル・セレクタ別名です。このグローバル・セレクタ別名はユーザーがbuttonコンポーネントの上にカーソルを置いたときなどに背景色を定義します。もう1つの例は、ページのメイン・コンテンツ領域に使用する背景色を定義する.AFBackgroundColor:aliasグローバル・セレクタ別名です。

JDeveloperのADFスキンのエディタには、ADFスキンが使用する色およびイメージの変更を支援する機能が用意されています。これらの機能の一部または全部を使用できるかどうか、次のするように、拡張するADFスキンによって異なります。

- ADFスキンがSkyrosスキンを拡張する場合
JDeveloperによって、デザイン・エディタで種々のカラー・ピッカーやその他のコントロールを使用して、頻繁に使用するADFスキンのいくつかの色やイメージを変更できるようになります。詳細は、「ADFスキン・デザイン・エディタのイメージおよび色の変更」を参照してください。

- ADFスキンをAltaスキンから拡張する場合
「コンポーネント・セレクタのイメージの変更」で説明しているように、セレクタ・エディタを使用してイメージを変更します。

注意:

または、「テーマ・エディタの使用」で説明されているテーマ・エディタを使用して、AltaまたはSkyrosスキンから拡張したADFスキンの色およびイメージを変更します。

7.2 ADFスキン・デザイン・エディタのイメージおよび色の変更

デザイン・エディタは、Skyros ADFスキンから拡張されたADFスキンを作成した場合に表示されます。これは、開いているADFスキンの「設計」タブをクリックしてアクセスできます。 デザイン・エディタの概要については、「ADFスキン・デザイン・エディタの使用」を参照してください。

このエディタを使用して実行できるタスクの例には次のようなものがあります。

- Skyrosから拡張したADFスキンのデフォルトのテキスト・カラーを変更する

- buttonコンポーネントなどのコンポーネントの上にマウスを置いたときにハイライトする場合に表示される背景色を変更する

- アイコンを置き換える
すべてまたは個々のコンポーネント、ステータスおよびアニメーション・アイコンは、「一般」タブの「イメージ」領域内の「ステータス・アイコン」、「アニメーション」または「コンポーネント」 ボタンをクリックした場合に起動する「アイコンの置換」ダイアログを使用して変更できます。詳細は、「アイコンの置換」ダイアログの「ヘルプ」をクリックします。

図7-2に、次の変更が行われたSkyros ADFスキンから拡張したADFスキンを示します。

- 「一般」タブで、

注意:

図7-2の赤い矩形が、「一般」タブ内で変更を加えるために使用するコントロールを識別します。赤い矢印は、同じページ内で対応する結果を指します。

- メインのデフォルト・テキスト・カラーをFuchsiaに変更します。
この変更により、アンカー色であるAFTextColorグローバル・セレクタ別名の色の値が変更されます。この変更はまた、AFTextColorグローバル・セレクタ別名から色相値を派生させた色プロパティを設定するグローバル・セレクタ別名(AFTextPrimaryColorやAFTextSecondaryColor)にも影響します。この関係の詳細は、「ADFスキンのアンカー・カラーの使用」を参照してください。

- プライマリ・アクセント色をBlackに変更します。
これにより、buttonコンポーネントなどのコンポーネントの上にカーソルを置いたときにレンダリングされる色が変更されます。この色プロパティを設定するグローバル・セレクタ別名は、AFHoverPrimaryColorおよびAFButtonGradientStartHoverColorです。他のグローバル・セレクタ別名は、AFButtonGradientStartHoverColorグローバル・セレクタ別名を使用して、設定された色プロパティの色相値を派生させます。AFButtonGradientStartHoverColorグローバル・セレクタ別名から色プロパティを派生させるグローバル・セレクタ別名の例として、AFButtonBorderBottomHoverColorおよびAFButtonBorderHoverColorがあります。この関係の詳細は、「ADFスキンのアンカー・カラーの使用」を参照してください。

- 接続ステータスを示すアニメーション・アイコンの1つを変更します。
この例では、af|statusIndicator::idle-iconが参照するアニメーション・アイコンが変更されました。

- 「ブランド領域」タブで、次の操作を行います。

- ブランド領域の背景色を決定する色プロパティ(AFBrandingBackgroundColorグローバル・セレクタ別名)をtransparentに変更します。

- ブランド領域のロゴのレンダリングに使用するイメージ・ファイルを変更します。

図7-2 ADFスキン・デザイン・エディタの色およびアイコンの変更

7.3 ADFスキンのアンカー・カラーの使用

図7-3で示すように、AltaまたはSkyrosファミリのADFスキンから拡張したADFスキンは、色を3つのカテゴリのうちの1つにグループ化するグローバル・セレクタ別名を定義します。アンカー・カラーに分類されるグローバル・セレクタ別名のcolorプロパティの値を変更することで、ADFスキンが定義するカラー・パレットを迅速に変更できます。

図7-3 色カテゴリSkyrosのグローバル・セレクタ別名

- Anchor Color: これらのグローバル・セレクタ別名は、ADFスキンの基本色を定義します。たとえば、AFButtonGradientStartColorグローバル・セレクタ別名は、ボタンの最初のグラデーション色を定義します。

- Derivative Color: これらのグローバル・セレクタ別名は、アンカー・カラーから色プロパティの色相値を派生させます。例7-1のグローバル・セレクタ別名はすべて、その色相値をAFButtonGradientStartActiveColorグローバル・セレクタ別名から派生させます。JDeveloperは、アンカー・カラーに加えたあらゆる変更を派生色に伝播します。派生色は、JDeveloperのADFスキンのエディタを使用してアンカー・カラーに加えたあらゆる変更を継承します。

- Speciality Color: これらのグローバル・セレクタ別名は、色相値をアンカー・カラーから派生させず、他の色のアンカー・カラーでない色プロパティを定義します。たとえば、carouselコンポーネントにフォーカスがある場合に枠線色を定義するAFCarouselFocusBorderColorグローバル・セレクタ別名です。

図7-4に、AFButtonGradientStartActiveColorグローバル・セレクタ別名のデフォルト値を変更した結果を示します。JDeveloperのADFスキンのエディタはまた、アンカー・カラーから色相値を派生させる派生色の値を更新します。

図7-4 アンカー・カラーの変更と派生色の効果

図7-5に示すように、派生色の色プロパティを変更し、後に関連付けられているアンカー・カラーに変更を加えた場合、JDeveloperのADFスキンのエディタは、アンカー・カラーに加えた変更が派生色に加えた変更をオーバーライドすることを警告する「派生色の変更の確認」ダイアログを表示します。「OK」をクリックして、アンカー・カラーを変更するとともに、派生色に定義済の値にオーバーライドします。

図7-5 派生色にオーバーライドする

例7-1に、AFButtonGradientStartActiveColorグローバル・セレクタ別名およびその関連派生色のデフォルト値を定義するSkyros ADFスキン(skyros-v1-desktop.css)からのエントリを示します。これらのグローバル・セレクタ別名は、同じ色相値(209)を共有しますが、彩度および明度は異なる値を指定します。

例7-2に、例7-1で参照された同一のグローバル・セレクタ別名を示します。例7-2では、ADFスキンは、Skyrosから拡張し、AFButtonGradientStartActiveColorグローバル・セレクタ別名のcolorプロパティの値を#6CD5A1に変更します。JDeveloperのADFスキンのエディタは、アンカー・カラーからその色の値を派生させるグローバル・セレクタ別名の色プロパティを変更します。

例7-1 Skyrosのアンカーおよび派生色を有するグローバル・セレクタ別名

/* Anchor, hsl(209, 56%, 63%), #6AA1D5 */
.AFButtonGradientStartActiveColor:alias {
color: #6AA1D5;
}

/* Derivative of AFButtonGradientStartActiveColor, hsl(209, 32%, 54%),
#648BAF */
.AFButtonBorderTopActiveColor:alias {
color: #648BAF;
}

/* Derivative of AFButtonGradientStartActiveColor, hsl(209, 39%, 62%),
#789FC4 */
.AFButtonBorderActiveColor:alias {
color: #789FC4;
}

/* Derivative of AFButtonGradientStartActiveColor, hsl(209, 54%, 79%),
#ACCAE6 */
.AFButtonGradientEndActiveColor:alias {
color: #ACCAE6;
}

例7-2 アンカー・カラーおよび派生色の変更

.AFButtonGradientStartActiveColor:alias {
color: #6CD5A1;
}

.AFButtonBorderTopActiveColor:alias {
color: #64AF8A;
}

.AFButtonGradientEndActiveColor:alias {
color: #ADE6CA;
}

.AFButtonBorderActiveColor:alias {
color: #79C39E;
}

7.4 コンポーネント・セレクタのイメージの変更

多くのADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが、セレクタを使用してイメージを参照します。これらのイメージはコンポーネントの背景で表示されるか、コンポーネント上でアイコンまたはコントロールとしてレンダリングされます。ADFスキンを作成するとき、拡張元のADFスキンによって、これらのセレクタの値が、イメージの相対パスや高さのサイズなどとして提供されます。

図7-6に、表の列のデータを昇順でソートするコントロールをレンダリングするtableコンポーネントの実行時ビューを示します。このコントロールをレンダリングするイメージは、ADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタによって参照されます。

図7-6 sort-ascending-icon-styleセレクタによって参照されるイメージ

図7-7に、拡張ADFスキンのcolumnコンポーネントのsort-descending-icon-styleセレクタの値をADFスキンが継承するデザインタイム・ビューを示します。継承される値には、アイコンとして使用されるイメージのファイル名(colSort_asc_ena.png)、イメージの高さと幅が含まれます。

図7-7 sort-descending-icon-styleセレクタの継承される値

コンポーネントに関連付けられているイメージを参照するセレクタを公開するADF FacesコンポーネントとADFデータ視覚化コンポーネントの他の例には、次のものがあります。

- ADF Faces progressIndicatorコンポーネントはdeterminate-empty-icon-styleセレクタを公開します。

- ADF Faces panelAccordionコンポーネントはdisclosed-icon-styleセレクタを公開します。

- ADFデータ視覚化mapToolbarコンポーネントはzoomin-enable-iconセレクタを公開します。

コンポーネント・セレクタに関連付けられているイメージを変更する場合は、ADFスキンでセレクタを変更して、ADFスキンのプロジェクトにイメージをコピーする必要があります。「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーできます。

プロジェクトにイメージをインポートした後、イメージを参照するセレクタでは、ADFスキンのソース・ファイル内のURLを使用してこのイメージを参照します。「ADFスキンのADFライブラリJARへのパッケージ化」で説明しているように、ADFライブラリJARにADFスキン(と関連ファイル)をデプロイすると、このURLが更新されることに注意してください。

ヒント:

グローバル・セレクタ別名にイメージを関連付けます。このグローバル・セレクタ別名が複数のコンポーネント・セレクタによって参照されている場合に、後から異なるイメージを使用するには、1つの変更を加えるのみで済みます(グローバル・セレクタ別名に関連付けられているイメージを変更します)。グローバル・セレクタ別名の詳細は、「グローバル・セレクタ別名の作成」を参照してください。

ADFスキンがSkyros ADFスキンを拡張している場合、「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタでより頻繁に使用されるイメージのいくつかを変更できます。

7.4.1 イメージをプロジェクトにコピーする方法

コンテキスト・メニューを使用して、拡張ADFスキンによって参照されるイメージをADFスキンのプロジェクトのディレクトリにコピーします。続けて、必要な変更をイメージに加えます。

ADFスキン・イメージをプロジェクトにコピーするには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、変更するイメージを参照するセレクタを選択します。

たとえば、図7-8に示すように、ADF Faces columnコンポーネントのsort-descending-icon-styleセレクタを選択して、昇順アイコンを変更します。

図7-8 columnコンポーネントのsort-descending-icon-styleセレクタ

2. 図7-9に示すように、「Properties」ウィンドウで、「共通」セクションを開いて、「背景イメージ」リストから「イメージのコピー」を選択します。

図7-9 JDeveloperプロジェクトにイメージをインポートするための「イメージのコピー」メニュー

これは、ADFスキンのプロジェクトにイメージをコピーします。

7.4.2 プロジェクトにイメージをコピーした場合の処理

イメージは、ADFスキンのプロジェクトに生成されるサブディレクトリにコピーされます。たとえば、ADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタが参照するイメージをコピーする場合、colSort_asc_ena.pngファイルが次のディレクトリにコピーされます。

/public_html/skins/skin1/images/af_column

af_columnはADF Faces columnコンポーネントを示します。

「Properties」ウィンドウのプロパティの相対URL値が、イメージの新しい場所を参照するよう変更されます。図7-10に例を示します。

さらに、「Properties」ウィンドウで、プロパティ・ラベルの左側に緑色のアイコンが表示され、セレクタが拡張ADFスキンからイメージを継承しなくなったことが示されます。図7-10に、colSort_asc_ena.pngファイルをADFスキン用のプロジェクトにインポートした後の「Properties」ウィンドウを示します。拡張ADFスキンの「高さ」と「幅」のプロパティの値が、引き続きADFスキンによって継承されることに注意してください。

図7-10 ADFスキンにイメージをインポートした後の「Properties」ウィンドウ

最後に、ADFスキンのソース・ファイルにCSS構文が表示されます。例7-3に、図7-10に示す値に対応するCSS構文を示します。

例7-3 イメージをインポートした後のADFスキンのソース・ファイルに含まれるCSS構文

af|column::sorted-ascending-icon-style
{
background-image: url("images/af_column/colSort_des_ena.png");
}

8 ADFスキンのテキストの使用

この章では、ADFスキンでテキストを使用する方法について説明します。異なるリソース文字列によって追加のリソース・バンドルを指定する方法に加えて、実行時にADF Facesコンポーネントがレンダリングするリソース文字列がリソース・バンドルに保存される方法などの主要概念についても説明します。

この章の内容は次のとおりです。

- ADFスキンのテキストの使用について

- 独自のリソース・バンドルからのテキストの使用

8.1 ADFスキンのテキストの使用について

ADFスキンのソース・ファイルには、ADF Facesコンポーネントがアプリケーションのユーザー・インタフェースにレンダリングするテキストは保存されません。ADF Facesコンポーネントをレンダリングするアプリケーションでは、これらのコンポーネントがレンダリングするテキストをリソース文字列として抽象化し、リソース文字列をリソース・バンドルに保存します。たとえば、図8-1に、OKおよびCancelのラベルが付いたボタンをレンダリングするADF Faces dialogコンポーネントを示します。

図8-1 ADF Facesのdialogコンポーネント

これらのボタンのラベルとして表示されるテキスト(OKおよびCancel)は、リソース・バンドルで定義され、リソース文字列によって参照されます。ボタンのラベルに表示されるテキストを変更する場合は、次のリソース文字列に代替テキストを指定することによって、表示する値を定義するリソース・バンドルを作成します。

- af_dialog.LABEL_OK

- af_dialog.LABEL_CANCEL

注意:

「ADFスキン・ファイルの作成」で説明しているように、デフォルトで、新規ADFスキンの作成時にリソース・バンドル(skinBundle.properties)がプロジェクトに作成されます。

特定のコンポーネントのユーザー・インタフェースに表示されるテキストを定義するリソース文字列以外に、コンポーネントに関係なく表示されるテキストを定義する様々なリソース文字列があります。これらのリソース文字列は、グローバル・リソース文字列と呼ばれます。ADF Facesコンポーネントのリソース文字列およびグローバル・リソース文字列の詳細は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。

ADF Facesコンポーネントでは自動変換がサポートされています。ADF Facesコンポーネントのスキンに使用されるリソース・バンドルは、28の言語に変換されます。たとえば、エンド・ユーザーがブラウザでドイツ語を使用するよう設定している場合、コンポーネント内に含まれるテキストはすべて自動的にドイツ語で表示されます。このため、新規ADFスキン用のリソース・バンドルを作成した場合は、Webアプリケーションでサポートされている他の言語に対応するそのリソース・バンドルのローカライズ済バージョンも作成する必要があります。

リソース・バンドルとリソース文字列の作成およびADF Facesコンポーネントのローカライズの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ページの国際化およびローカライズ」の章を参照してください。

8.2 独自のリソース・バンドルからのテキストの使用

アプリケーションのADF Facesコンポーネントのユーザー・インタフェースにレンダリングされるデフォルトのテキスト値をオーバーライドするために、リソース・バンドルに代替テキストを入力する場合は、そのリソース・バンドルをアプリケーションに指定する必要があります。実行時に、オーバーライドするリソース文字列に対しては、リソース・バンドル内の代替テキストがアプリケーションによってレンダリングされます。オーバーライドしないリソース文字列に対しては、ベースのリソース・バンドルで定義されているテキストがレンダリングされます。たとえば、図8-4に示すADF Facesのdialogコンポーネントでは、アプリケーション開発者はaf_dialog.LABEL_OKリソース文字列のデフォルト値であるOKにYayをオーバーライドし、af_dialog.LABEL_CANCELリソース文字列のデフォルト値は変更していません。つまり、アプリケーション開発者はリソース・バンドルのaf_dialog.LABEL_CANCELリソース文字列の値を定義しておらず、アプリケーションでは、このリソース文字列の値について、ベースのリソース・バンドルを参照します。

図8-2 オーバーライドされた値とデフォルト値のリソース文字列

リソース・バンドルを作成する方法および文字列キーの値を定義する方法の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ページの国際化およびローカライズ」の章を参照してください。

8.2.1 ADFスキンに追加のリソース・バンドルを指定する方法

ADFスキンにリソース・バンドルを指定するには、その名前と場所を値としてtrinidad-skins.xmlファイルのbundle-nameプロパティに追加します。

ADFスキンに追加のリソース・バンドルを指定するには、次のようにします。

1. 「アプリケーション」ウィンドウで、アプリケーション用のtrinidad-skins.xmlファイルをダブルクリックします。デフォルトで、これはWeb Content/WEB-INFノードの下にあります。

2. 「構造」ウィンドウで、追加のリソース・バンドルを追加するskinノードを右クリックし、「skinの中に挿入」→バンドル名を選択します。

3. 「プロパティ」ウィンドウで、リソース・バンドルの名前と場所をbundle-nameプロパティの値として指定します。

たとえば、図8-3に示すように、プロジェクトで最初のADFスキンを作成した後にデフォルトで作成されるリソース・バンドルでは、<bundle-name>要素の次の値が指定されます。

<bundle-name>resources.skinBundle</bundle-name>

図8-3 ADFスキンのデフォルトのリソース・バンドル

8.2.2 ADFスキンに追加のリソース・バンドルを指定した場合の処理

trinidad-skins.xmlファイルでは、bundle-nameプロパティの値として次の例のように定義したリソース・バンドルを参照します。

<skin>
<id>skin1.desktop</id>
<family>skin1</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin1/skin1.css</style-sheet-name>
<bundle-name>resources.skinBundle</bundle-name>
</skin>

実行時に、デフォルトのテキスト値をオーバーライドするためにリソース・バンドルに指定したテキスト値が、アプリケーションによってレンダリングされます。たとえば、Yeahをaf_dialog.LABEL_OKリソース文字列の値として指定し、Oopsをaf_dialog.LABEL_CANCELの値として指定したリソース・バンドルを定義したとします。図8-4に、これらの値を使用してラベルをレンダリングするdialogコンポーネントを示します。

図8-4 カスタム・リソース・バンドルで定義されたラベルをレンダリングするダイアログ

9 グローバル・セレクタ別名の使用

この章では、グローバル・セレクタ別名の使用方法について説明します。グローバル・セレクタ別名の作成、変更および適用方法に関する情報を提供し、別のセレクタからプロパティ値を参照する方法について説明します。

この章の内容は次のとおりです。

- グローバル・セレクタ別名について

- グローバル・セレクタ別名の作成

- グローバル・セレクタ別名の変更

- グローバル・セレクタ別名の適用

- 別のセレクタからのプロパティ値の参照

9.1 グローバル・セレクタ別名について

グローバル・セレクタ別名では、複数のADF FacesコンポーネントおよびADFデータ視覚化コンポーネントに適用できるスタイル・プロパティをADFスキンの1つの場所で定義します。グローバル・セレクタ別名は、セレクタ別名または単にセレクタと呼ばれる場合もあります。「Oracle ADFで提供されるADFスキンの継承関係」および「Oracle ADFで提供されるADFスキン」で説明している、Oracle ADFで提供されるADFスキンは、グローバル・セレクタ別名を活用して、コンポーネントのテキスト、メッセージ、アイコン、色および様々なグループに関する共通のスタイル・プロパティを定義します。これらのグローバル・セレクタ別名で定義されたスタイルは、数多くのコンポーネント固有セレクタによって継承されます。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、テキストを表示するアプリケーションにおけるすべてのADF Facesコンポーネントのデフォルト・フォント・ファミリを定義します。Oracle ADFで提供されるいずれかのADFスキンを拡張して作成したADFスキンは、.AFDefaultFontFamily:aliasグローバル・セレクタ別名で定義されているプロパティを継承します。図9-1は、af|buttonセレクタによる.AFDefaultFontFamily:aliasグローバル・セレクタ別名からのフォント・ファミリ値の継承がセレクタ・エディタでどのように表示されるかを示しています。

図9-1 コンポーネント・セレクタによるグローバル・セレクタ別名からの値の継承

図9-1には、グローバル・セレクタ別名の他のカテゴリも示されています。各カテゴリでは、その目的に応じてグローバル・セレクタ別名をグループ化しています。

- 色: Oracle ADFで提供されるADFスキンで使用する色を定義します。場合によっては、このカテゴリに表示される数多くのグローバル・セレクタ別名をオーバーライドします。これは、これらの別名によって、Webアプリケーションに表示されるほとんどの色が決定されるためです。これらのグローバル・セレクタ別名に加えた変更は、「ADFスキン・セレクタおよびアイコン・イメージ」で説明している、AltaまたはSkyros ADFスキンを拡張した場合に最も大きく影響を及ぼします。アンカー・カラーに分類されるグローバル・セレクタ別名を変更することで、これらのADFスキンを拡張するADFスキンのカラー・パレットを比較的迅速に変更できます。詳細は、「ADFスキンのアンカー・カラーの使用」を参照してください。

ヒント:

他のグローバル・セレクタ別名と同様、「表示モード」リストを使用して、特定のグローバル・セレクタで定義された値を継承するコンポーネント固有セレクタを表示できます。

- コンポーネント・グループ: ボタン: ボタンをレンダリングする数多くのADF Facesコンポーネントのセレクタによって継承されるスタイル・プロパティを定義します。たとえば、.AFButtonAccessKeyStyle:aliasグローバル・セレクタ別名では、特に、ADF Facesボタンおよびdialogコンポーネントによってレンダリングされるアクセス・キーのスタイル・プロパティを定義します。

- コンポーネント・グループ: フォーム・コントロール: フォーム・コントロールのスタイル・プロパティを定義します。

- コンポーネント・グループ: リンク: リンクをレンダリングする数多くのコンポーネントのスタイル・プロパティを定義します。

- コンポーネント・グループ: メニュー: メニューをレンダリングする数多くのコンポーネントのスタイル・プロパティを定義します。

- コンポーネント・グループ: パネル・ボックスおよびリージョン: panelBoxおよびregionコンポーネントのスタイル・プロパティを定義します。

- コンポーネント・グループ: パネル・ヘッダー: panelHeaderコンポーネントのスタイル・プロパティを定義します。

- フォント: フォントのスタイル・プロパティを定義します。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、数多くのADF Facesコンポーネント・セレクタによって継承されるスタイル・プロパティを定義します。

- アイコン: 複数のコンポーネントでレンダリングするアイコンに適用するスタイル・プロパティを定義します。

- メッセージ・セレクタ: ADF Faces入力コンポーネントが異なるタイプのメッセージをレンダリングする場合に表示するメッセージのスタイル・プロパティを定義します。詳細は、「メッセージに適用するADFスキン・プロパティの設定」を参照してください。

- その他: 他のカテゴリに当てはまらないグローバル・セレクタ別名を定義します。たとえば、.AFDynamicHelpIconStyle:aliasグローバル・セレクタ別名では、動的ヘルプ・アイコンに使用するスタイルを定義します。

グローバル・セレクタ別名の詳細な説明は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。定義したグローバル・セレクタ別名は、図9-1の.UserDefined:aliasのエントリで示されているように、グローバル・セレクタ別名ノードの下に表示されます。

セレクタ・ツリーでグローバル・セレクタ別名を選択すると、「表示モード」リストには、グローバル・セレクタ別名を参照するコンポーネントのリストが表示されます。図9-2では、ユーザーがリストから「パネル・ウィンドウ」を選択していますが、これは、panelWindowコンポーネントがこのグローバル・セレクタ別名を参照しているためです。

注意:

「表示モード」リストにコンポーネントが表示されるものの、そのコンポーネントではグローバル・セレクタ別名で定義されたスタイル・プロパティによるレンダリングが行われないない場合があります。このことは、コンポーネントが、最初は拡張ADFスキンのグローバル・セレクタ別名を参照していたが、使用するADFスキンによってそのコンポーネントのグローバル・セレクタ別名がオーバーライドされたために発生することがあります。または、コンポーネント自体が、そのスタイル関連の属性(styleClassまたはinlineStyle)のいずれかを使用してグローバル・セレクタ別名をオーバーライドしたことによって発生することがあります。

図9-2に、ユーザーが.AFDefaultFontFamily:aliasグローバル・セレクタ別名の継承された値を変更し、panelWindowコンポーネントに適用した場合の変更結果を示します。.AFDefaultFontFamily:aliasグローバル・セレクタ別名の値を継承するすべてのセレクタが、ADFスキンで定義されたフォント・ファミリを使用して実行時にレンダリングします。たとえば、dialogおよびpanelWindowコンポーネントの両方がこのフォント・ファミリを使用してレンダリングします。

図9-2 ADFスキンによるグローバル・セレクタ別名の変更

すでに説明したグローバル・セレクタ別名以外に、数多くのコンポーネント・セレクタが、それらのコンポーネントに固有のセレクタ別名を定義します。これらのセレクタ別名は、セレクタ・ツリーのコンポーネント・セレクタのノードの下に表示されます。図9-3に、このようなタイプのセレクタ別名を公開する様々なコンポーネント・セレクタの例を示します。

図9-3 コンポーネント・セレクタ別名

9.2 グローバル・セレクタ別名の作成

数多くのセレクタによって参照されるスタイル・プロパティを1つの場所に定義するために、グローバル・セレクタ別名を作成できます。新規グローバル・セレクタ別名の名前を「別名セレクタの作成」ダイアログに入力します。JDeveloperのADFスキンのエディタにより、このダイアログに入力した名前にキーワード:aliasが付加され、先頭に.が追加されます。たとえば、このダイアログに名前としてmyGlobalSelectorを入力した場合は、結果としてユーザー・インタフェースおよびADFスキンのソース・ファイルに表示される名前は次のようになります。

.myGlobalSelector:alias

キーワード:aliasは、グローバル・セレクタ別名をCSS擬似クラスとして識別するのに使用され、ADFスキンのソース・ファイルでCSSコードを編成する場合の構文の支援として役立ちます。

グローバル・セレクタ別名を作成したら、そこに含めるスタイル・プロパティを定義するために変更します。詳細は、「グローバル・セレクタ別名の変更」を参照してください。

9.2.1 グローバル・セレクタ別名の作成方法

数多くのユーザー・インタフェース・コンポーネントによって使用されるスタイル・プロパティを定義するグローバル・セレクタ別名を作成できます。

グローバル・セレクタ別名を作成するには、次のようにします。

1. 図9-4に示すように、セレクタ・ツリーのセレクタ・エディタで、ドロップダウン・リストから「新規別名セレクタ」を選択します。

図9-4 セレクタ・ツリーでの「新規別名セレクタ」オプション

「別名セレクタの作成」ダイアログが開きます。

2. グローバル・セレクタ別名の名前を「別名セレクタ名」フィールドに入力します。

ヒント:

グローバル・セレクタ別名には、その目的を表す名前を入力します。たとえば、エンド・ユーザーがリンク上にマウスを置いたときにリンクの色を変更するグローバル・セレクタ別名の場合は、MyLinkHoverColorとします。

3. 「OK」をクリックします。

4. 「Properties」ウィンドウで、グローバル・セレクタ別名で構成するプロパティの値を設定します。

9.2.2 グローバル・セレクタ別名を作成した場合の処理

図9-5に示すように、グローバル・セレクタ別名は、セレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示され、コンポーネントに適用された場合のビジュアル表示がプレビュー・ペインに表示されます。

図9-5 新規作成されたグローバル・セレクタ別名

作成したグローバル・セレクタ別名のCSS構文は、ADFスキンのソース・ファイルに表示されます。次の例では、図9-5のADFスキンのソース・ファイルにあるエントリを示しています。

.MyLinkHoverColor:alias{
}

9.3 グローバル・セレクタ別名の変更

「グローバル・セレクタ別名について」で説明している、グローバル・セレクタ別名の任意のカテゴリを変更できます。ADFスキンを初めて作成したときにセレクタ・ツリーのグローバル・セレクタ別名ノードの下に表示されるグローバル・セレクタ別名を変更することは、ADFスキンの親ADFスキンで定義された継承スタイル・プロパティをオーバーライドすることを意味します。親ADFスキンとは、ADFスキンの拡張元であるADFスキンです。「ADFスキン・ファイルの作成」で説明しているように、ADFスキンを作成する場合は拡張元のADFスキンを選択します。グローバル・セレクタ別名を変更すると、そのグローバル・セレクタ別名で定義されているスタイル・プロパティを継承するコンポーネント固有セレクタは、変更された値を使用するようになります。

ADFスキンで作成したグローバル・セレクタ別名を変更しても、親ADFスキンから継承したスタイル・プロパティはオーバーライドされません。

9.3.1 グローバル・セレクタ別名の変更方法

グローバル・セレクタ別名を、「Properties」ウィンドウでその値を設定して、変更します。次に、加えた変更が意図したとおりにコンポーネント固有セレクタに適用されていることを確認します。

グローバル・セレクタ別名を変更するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、変更するグローバル・セレクタ別名を選択します。

たとえば、デフォルトのフォント・ファミリを定義するグローバル・セレクタ別名を変更する場合は、それを図9-6に示すように選択します。

図9-6 グローバル・セレクタ別名の変更

2. 「プロパティ」ウィンドウで、変更するプロパティの値を設定します。

3. セレクタ・エディタで、「表示モード」リストをクリックし、変更したグローバル・セレクタ別名で定義されているプロパティ値を継承するコンポーネント固有セレクタを選択します。

4. セレクタ・エディタで、コンポーネント固有セレクタで変更内容が意図したとおりにレンダリングされることを確認します。グローバル・セレクタ別名から継承するコンポーネント固有セレクタに対する変更が完了するまで、ステップ1から3を繰り返します。

9.4 グローバル・セレクタ別名の適用

ADFスキンでグローバル・セレクタ別名を作成した後に、そのグローバル・セレクタ別名で定義したスタイル・プロパティを使用して実行時にレンダリングするADF FacesコンポーネントとADFデータ視覚化コンポーネントを指定する必要があります。

グローバル・セレクタ別名をADF FacesコンポーネントまたはADFデータ視覚化コンポーネントに適用するには、次を実行する必要があります。

- グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。

- -tr-rule-ref-ADFスキン・プロパティの値としてグローバル・セレクタ別名を設定します。

9.4.1 グローバル・セレクタ別名の適用方法

グローバル・セレクタ別名は、-tr-rule-ref-ADFスキン・プロパティの値として指定することで適用します。

グローバル・セレクタ別名を適用するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、グローバル・セレクタ別名を適用するアイテムを選択します。

たとえば、図9-7に示すように、グローバル・セレクタ別名で定義したスタイル・プロパティをinputTextコンポーネントのラベルに適用する場合は、そのコンポーネントのcontent擬似要素を選択します。

2. 「プロパティ」ウィンドウで、Commonセクションを開き、次に-tr-rule-ref-フィールドの横の「追加」アイコンをクリックします。

3. グローバル・セレクタ別名の名前を入力します。「値」フィールドに、selectorキーワードを先頭に付け、引用符で囲んだ名前を入力します。

たとえば、グローバル・セレクタ別名の名前が.MyBackgroundColor:aliasである場合は、図9-7で示すようにselector(".MyBackgroundColor:alias")と入力します。

図9-7 inputTextコンポーネントのcontent擬似要素

4. プレビュー・ペインの「リフレッシュ」アイコンをクリックして、変更内容を表示します。

9.4.2 グローバル・セレクタ別名を適用した場合の処理

グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図9-8に、.MyBackgroundColor:aliasグローバル・セレクタ別名で定義されたスタイル・プロパティを継承する、inputTextコンポーネントのセレクタのcontent擬似要素を示します。-tr-rule-refADFスキン・プロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図9-8の「背景色」および「色」フィールドで示されているように、継承アイコンを使用するように更新されます。

実行時に、inputTextコンポーネントのコンテンツ領域は、グローバル・セレクタ別名で定義されたスタイル・プロパティを使用してレンダリングされます。

図9-8 inputTextコンポーネントに適用されたグローバル・セレクタ別名

9.4.3 グローバル・セレクタ別名の適用に関する必知事項

拡張ADFスキンのグローバル・セレクタ別名をオーバーライドした場合、–tr-rule-ref ADFスキン・プロパティを使用して親ADFスキンのスタイル・プロパティの値を判別していたコンポーネント・セレクタは、グローバル・セレクタ別名のオーバーライドされた値を使用するようになります。次の例に、ADFスキンAを拡張したADFスキンBを示します。実行時に、decorativeBoxコンポーネントの最上部はbackground-color CSSプロパティにより赤でレンダリングされますが、これは、ADFスキンBのグローバル・セレクタ別名によってADFスキンAがオーバーライドされるためです。

/** Skin A **/
/** ---------------------------------- **/
.MyBackColor:alias
{
background-color: blue
}

af|decorativeBox::top
{
-tr-rule-ref: selector(".MyBackColor:alias");
}

/** Skin B **/
/** ---------------------------------- **/

.MyBackColor:alias
{
background-color: Red
}

拡張ADFスキンのスタイル・プロパティ値を指定し、その親ADFスキンでもスタイル・プロパティの値が指定されている場合、ADFスキニング・フレームワークは拡張ADFスキンの値を適用します。例9-1に、.myClassスタイル・クラスがbackground-color CSSプロパティの値としてRedを指定しているADFスキンCを示します。アプリケーションでADFスキンD (ADFスキンCを拡張したもの)を使用する場合、.myClassスタイル・クラスを適用するコンポーネントは、background-color CSSプロパティにLimeを適用します。これは、ADFスキニング・フレームワークでは、ADFスキンの値(–tr-rule-refなど)が含まれている文の値が最初に計算されるためです。ADFスキニング・フレームワークは特定のプロパティ(background-colorなど)を次に計算します。結果として、ADFスキンDのbackground-color CSSプロパティの値(Lime)が、-tr-rule-ref ADFスキン・プロパティの値(Blue)や、ADFスキンCの継承された値(Red)をオーバーライドします。

注意:

その後、ADFスキンDで次のように.myClassスタイル・クラスをオーバーライドした場合、ADFスキニング・フレームワークがbackground-color CSSプロパティに適用する値は、Blueになります。

.myClass {-tr-rule-ref: selector(".MyBlueColor:alias")}

アプリケーションを実行して、ADFスキニング・フレームワークが実行時にセレクタに適用するスタイル・プロパティ値を特定する場合は、Mozilla Firefoxブラウザ(または類似のブラウザ)のFirebugなどのツールを使用することを検討します。詳細は、「ADFスキンの変更のテスト」を参照してください。

例9-1 ローカル・グローバル・セレクタ別名のオーバーライド

/** ADF skin C **/
/** ---------------------------------- **/
.myClass {
background-color: Red
}

/** ADF skin D **/
/** ---------------------------------- **/
.MyBackColor:alias {
background-color: Blue;
}

.myClass {
background-color: Lime;
-tr-rule-ref: selector(".MyBackColor:alias")
}

9.5 別のセレクタからのプロパティ値の参照

スタイル・プロパティを適用するセレクタごとに特定のスタイル・プロパティを設定するのではなく、-tr-property-ref ADFスキン・プロパティを使用してプロパティの値を参照できます。このADFスキン・プロパティをグローバル・セレクタ別名およびコンポーネント固有セレクタに対して構成できます。たとえば、グローバル・セレクタ別名でbackground-colorプロパティの値を定義して、他の複数のセレクタからこの値を参照できます。background-colorプロパティの値を後で変更することにした場合は、グローバル・セレクタ別名でこの値を変更します。-tr-property-ref ADFスキン・プロパティを使用してbackground-colorプロパティを参照するすべてのセレクタは、行われた変更を使用するように更新されます。-tr-property-ref ADFスキン・プロパティは、borderなど、compact CSSプロパティで使用することもできます。

9.5.1 別のセレクタからプロパティ値を参照する方法

-tr-property-ref ADFスキン・プロパティを使用して、セレクタに使用するプロパティ値を参照します。

別のセレクタからプロパティ値を参照するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、別のセレクタからプロパティ値を参照するセレクタを選択します。

たとえば、panelWindowコンポーネントのコンテンツ領域が別のセレクタで定義されたスタイル・プロパティを参照する場合は、図9-9に示すように、panelWindowコンポーネントの擬似要素ノードの下にある「content」を選択します。

図9-9 パネル・ウィンドウ・コンポーネントのcontent擬似要素

2. 「プロパティ」ウィンドウで、セレクタのプロパティ値として-tr-property-ref ADFスキン・プロパティを使用して参照するプロパティ値を指定します。

たとえば、次のグローバル・セレクタ別名を作成したとします。

.MyColor:alias {
color: rgb(255,181,99);
font-weight: bold;
}

そして、ステップ1で選択したcontent擬似要素のbackground-colorプロパティで、グローバル・セレクタ別名のcolorプロパティを参照するとします。このシナリオでは、content擬似要素のbackground-colorプロパティに次の値を入力します。

-tr-property-ref(".MyColor:alias","color");

-tr-property-refをcompact値で使用する場合は、次のような構文を入力します。

border: 10px solid -tr-property-ref(".AFDefaultColor:alias", "color");

9.5.2 別のセレクタからプロパティ値を参照した場合の処理

「プロパティ」ウィンドウでは、図9-10に示すように、-tr-property-ref ADFスキン・プロパティを使用して別のセレクタの値を参照するように値を設定されたプロパティが、その値をどのように継承しているかが示されます。

図9-10 別のセレクタのプロパティ値を参照するセレクタ・プロパティ

次の例に類似した構文がADFスキンのソース・ファイルに表示されます。

@charset "UTF-8";
/**ADFFaces_Skin_File / DO NOT REMOVE**/
@namespace af "http://xmlns.oracle.com/adf/faces/rich";
@namespace dvt "http://xmlns.oracle.com/dss/adf/faces";

.MyColor:alias {
color: rgb(255, 181, 99);
font-weight: bold;
}

.AFDefaultColor:alias {
color: Red;
}

af|panelWindow::content {
background-color: -tr-property-ref(".MyColor:alias", "color");
border: 10px solid -tr-property-ref(".AFDefaultColor:alias", "color");}

10 スタイル・クラスの使用

この章では、スタイル・クラスの使用方法について説明します。スタイル・クラスの作成、変更および適用方法に関する情報を提供し、コンポーネントの特定のインスタンスにスタイル・クラスを設定する方法について説明します。

この章の内容は次のとおりです。

- スタイル・クラスについて

- スタイル・クラスの作成

- スタイル・クラスの変更

- コンポーネントの特定のインスタンスに対するスタイル・クラスの設定

10.1 スタイル・クラスについて

スタイル・クラスを使用すると、ADF FacesまたはADFデータ視覚化コンポーネントの特定のインスタンスに適用するADFスキンの1つの場所で、数多くのスタイル・プロパティを指定できます。スタイル・クラスに対して定義するスタイル・プロパティは、コンポーネントのセレクタに対して定義するスタイル・プロパティよりも優先されます。アプリケーション開発者は、数多くのADF Facesコンポーネントによって公開されるstyleClassおよびinlineStyle属性の値としてスタイル・クラスを指定できます。実行時には、ADFスキンに定義されている他のスタイル・プロパティではなく、スタイル・クラスで定義したスタイル・プロパティがADF Facesコンポーネントに適用されます。スタイル・クラスは、複数のADF Facesコンポーネントに適用するスタイル・プロパティを定義できるグローバル・セレクタ別名(「グローバル・セレクタ別名の使用」を参照)とは異なります。

図10-1に、スタイル・クラスの様々なカテゴリのノードが展開されたADFスキンを示します。

図10-1 スタイル・クラスのカテゴリ

スタイル・クラスの各カテゴリは次の意味を持ちます。

- その他: 拡張ADFスキンから継承されたその他のスタイル・クラス。たとえば、このカテゴリにはブランド・バーのコンテナに使用できる.AFBrandingBarが含まれます。

- ノート・ウィンドウ・セレクタ: noteWindowコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- ポップアップ: popupコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- テキスト: 様々なタイプのテキスト(たとえば、アドレス・フィールドや指示テキストなど)の外観を決定する、拡張ADFスキンから継承されたスタイル・クラス。

ユーザーまたは他のユーザーが定義するスタイル・クラスは、図10-1の.UserDefinedスタイル・クラスのエントリで示されているようにスタイル・クラス・ノードの下に表示されます。Oracle ADFが用意しているADFスキンのスタイル・クラスの詳細な説明は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスを参照してください。

10.2 スタイル・クラスの作成

ADFスキンに新しいスタイル・クラスを作成することも、ADFスキンが拡張元ADFスキンから継承したスタイル・クラスをオーバーライドすることもできます。

スタイル・クラスを作成した後、含めるスタイル・プロパティを定義するように変更します。詳細は、「スタイル・クラスの変更」を参照してください。

10.2.1 スタイル・クラスの作成方法

アプリケーション開発者がコンポーネントのstyleClassまたはinlineStyle属性を使用してADF FacesまたはADFデータ視覚化コンポーネントに適用するスタイル・プロパティを定義するスタイル・クラスを作成できます。

スタイル・クラスを作成するには、次のようにします。

1. 図10-2に示すように、セレクタ・ツリーのセレクタ・エディタで、ドロップダウン・リストから「新規スタイル・クラス」を選択します。

図10-2 セレクタ・ツリーの「新規スタイル・クラス」オプション

「スタイル・クラスの作成」ダイアログが開きます。

2. 適切なオプションを選択します。

- ADFスキンの拡張元ADFスキンからスタイル・プロパティを継承しない新規スタイル・クラスを作成する場合は、新しい名前を入力します。

ヒント:

そのスタイル・クラスが果たす目的を示す名前を入力します。

- ADFスキンの拡張元ADFスキンからスタイル・プロパティを継承し、ADFスキンのスタイル・プロパティをオーバーライドするスタイル・クラスの名前を入力します。

3. 「OK」をクリックします。

10.2.2 スタイル・クラスを作成した場合の処理

図10-3に示すように、スタイル・クラスはセレクタ・ツリーのスタイル・クラス・ノードの下に表示され、コンポーネントに適用されるビジュアル表示はプレビュー・ペインに表示されます。

図10-3 新規に作成されたスタイル・クラス

作成したスタイル・クラスのCSS構文は、ADFスキンのソース・ファイルに表示されます。次の例に、図10-3のADFスキンのソース・ファイルに表示されるエントリを示します。

.OrderOverdue
{
}

10.3 スタイル・クラスの変更

スタイル・クラスを変更するプロセスは、セレクタ・エディタに表示される様々なカテゴリのスタイル・クラスで同じです。セレクタ・ツリーでスタイル・クラスを選択し、プレビュー・ペインのメニューを使用してスタイル・クラスに擬似クラスを追加または削除するか、あるいは、「プロパティ」ウィンドウを使用してスタイル・クラスのスタイル・プロパティを設定またはオーバーライドします。

10.3.1 スタイル・クラスの変更方法

セレクタ・ツリーのスタイル・クラス・ノードの下のスタイル・クラスを選択し、「プロパティ」ウィンドウを使用してそのプロパティを変更します。

スタイル・クラスを変更するには、次のようにします。

1. セレクタ・ツリーで、変更するスタイル・クラスにナビゲートします。

2. 「プロパティ」ウィンドウで、スタイル・クラスに構成するプロパティを変更します。

3. スタイル・クラスを変更した後にプレビュー・ペインを更新するには、「リフレッシュ」アイコンをクリックします。

10.4 コンポーネントの特定のインスタンスに対するスタイル・クラスの設定

コンポーネントの特定のインスタンスに適用するスタイル・プロパティを定義するスタイル・クラスを定義できます。たとえば、アプリケーション開発者がページ上のコンテンツを表示または非表示にするために使用するpanelBoxコンポーネントについて考察します。panelBoxコンポーネントの複数のインスタンスを1ページにレンダリングできます。図10-4に示すように、panelBoxコンポーネントのデフォルトの背景色をFuchsiaに決定します。

図10-4 panelBoxコンポーネントの背景色の設定

ただし、panelBoxコンポーネントの1つ以上のインスタンスを、エンド・ユーザーがコンポーネントのコンテンツを表示したり非表示にできる公開リンクのコントロールなしでレンダリングすることにしました。さらに、背景色を赤に設定してpanelBoxコンポーネントのこれらのインスタンスのテキストをレンダリングすることに決めました。このために、ADFスキンのスタイル・クラスのスタイル・プロパティを定義します。次に、これらのスタイル・プロパティを使用してレンダリングするpanelBoxコンポーネントのインスタンスごとにstyleClass属性の値としてスタイル・クラスを指定します。次の例に、前述の結果を得るためにADFスキンのソース・ファイルに表示される構文を示します。

.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;}
.panelBoxInstanceClass af|panelBox::header-text {background-color: Red;}

注意:
コンポーネントの特定のインスタンスに作成したスタイル・クラスのADFスキン・プロパティを構成できません。ADFスキン・プロパティを使用すると、コンポーネントの特定のインスタンスではなくアプリケーション全体のコンポーネントのレンダリングをカスタマイズできます。ADFスキン・プロパティの詳細は、「ADFスキニング・フレームワークでのプロパティ」を参照してください。

10.4.1 コンポーネントの特定のインスタンスに対してスタイル・クラスを設定する方法

これらのスタイル・クラスを使用してレンダリングするコンポーネントのインスタンスごとに、styleClass属性の値としてスタイル・クラスを指定します。

コンポーネントの特定のインスタンスに対してスタイル・クラスを設定するには、次のようにします。

1. 「スタイル・クラスの作成」の説明に従って、スタイル・クラスを作成します。

2. JDeveloperで、コンポーネントのstyleClass属性をステップ1で作成したスタイル・クラスの名前に設定します。

コンポーネントのstyleClass属性の設定の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。

10.4.2 コンポーネントの特定のインスタンスに対してスタイル・クラスを設定した場合の処理

実行時に、スタイル・クラスを使用してインスタンス固有のスタイル・プロパティを指定しないコンポーネントのインスタンスは、コンポーネント固有セレクタおよびグローバル・セレクタ別名を使用してレンダリングされます。図10-5は、First Panel Boxラベルが付いたpanelBoxコンポーネントです。スタイル・クラスをstyleClass属性の値として指定するコンポーネントのインスタンスは、そのスタイル・クラスで指定されたスタイル・プロパティを使用してレンダリングされます。図10-5は、Second Panel Boxラベルが付いたpanelBoxコンポーネントです。

図10-5 スタイル・クラスで定義されたスタイル・プロパティによるコンポーネントのレンダリング

11 @ルールの使用

この章では、@ルールの処理方法について説明します。@ルールの作成、変更および適用方法に関する情報を提供し、さらにADFスキニング・フレームワークがサポートする様々なタイプの@ルールを説明します。

この章の内容は次のとおりです。

- ADFスキニング・フレームワークにおける@ルールについて

- サーバー側@ルールの使用

- クライアント側@ルールの使用

- ADFスキン内での@ルールの作成

11.1 ADFスキニング・フレームワークにおける@ルールについて

CSS @ルール(@ルール)は、アプリケーションのページが、ブラウザ、プラットフォーム、ロケール、デバイスなどの特定の環境でレンダリングされる場合のスタイル・プロパティを定義する方法です。ADFスキニング・フレームワークは、特定の環境に適用するセレクタのプロパティを定義できるいくつかの@ルールをサポートします。たとえば、他のブラウザでは必要ないなんらかのパディングをInternet Explorerで追加する必要がある場合や、ページをタッチ・デバイス上でレンダリングするときにアイコンのサイズを大きくする場合があります。これらのシナリオに使用するセレクタのスタイルを設定するには、@ルール内でスタイル・プロパティを指定します。

ADFスキニング・フレームワークがサポートする@ルールは、2つのカテゴリに分類されます。解釈のためにユーザー・エージェントに直接渡される@ルールはクライアント側@ルールとして分類され、ADFスキニング・フレームワーク自体が解釈する@ルールはサーバー側@ルールとして分類されます。これらのカテゴリの詳細は、「サーバー側@ルールの使用」および「クライアント側@ルールの使用」を参照してください。

「ADFスキン内での@ルールの作成」で説明するように、JDeveloperのセレクタ・エディタを使用してADFスキン内で@ルールを作成できます。ADFスキンが継承した@ルールまたはADFスキン内で定義した@ルールは、図11-5に示すように、「@ルール」ノードの下のセレクタ・ツリーに表示されます。

図11-1 セレクタ・ツリーでの@ルール

この章で説明する@ルール以外にも、@import @ルールを使用して別のADFスキンを元のADFスキンにインポートすることもできます。詳細は、「1つ以上のADFスキンを現在のADFスキンにインポートする」を参照してください。

11.2 サーバー側@ルールの使用

表11-1に、ADFスキニング・フレームワークがサポートするいくつかのサーバー側@ルールを示します。ADFスキニング・フレームワークは、「実行時の動作: ADFスキニング・フレームワークによる@ルールの適用方法」で説明するように、これらのルールを解釈し、レンダリングするスタイル・プロパティを決定します。

表11-1 ADFスキニング・フレームワークによってサポートされるサーバー側@ルール

名前

説明

@accessibility-profile

trinidad-config.xmlファイルで有効な場合に、high-contrastおよびlarge-fontsの各アクセシビリティ・プロファイル設定にスタイルを定義します。

@accessibility-profileルールの詳細は、「アクセシビリティのためのADFスキンの構成」を参照してください。

@locale

特定の言語および国のみのスタイルを定義するロケールを指定します。言語のみまたは言語と国の両方を指定できます。

ADFスキニング・フレームワークでは、:lang擬似クラスはサポートされていないことに注意してください。

@mode

特定のモードでページがレンダリングされる場合のスタイルを定義します。この@ルールでは次の値がサポートされます。

- quirks

- standards

@platform

プラットフォーム・スタイルを定義します。サポートされている値は次のとおりです。

- android

- blackberry

- genericpda

- iphone

- linux

- macos

- nokia_s60

- ppc (Pocket PC)

- solaris

- unix

- windows

表11-1に示すルール以外に、最も多く使用されるサーバー側@ルールとして、@agentがあります。@agent @ルールを使用すると、1つ以上のユーザー・エージェントに適用するスタイルを定義できます。表11-2に、@agent @ルールを使用してエージェント固有のスタイルを設定するときに使用できる値を示します。

表11-2 @agent @ルールでサポートされる値

blackberry

googlebot

nokia_s60

email

ie

opera

gecko

konqueror

oracle_ses

genericDesktop

mozilla

unknown

genericpda

msnbot

webkit (SafariおよびGoogle Chromeにマップします)

@agent @ルールを使用して次のことができます。

- Internet Explorerの任意のバージョンのスタイルを指定する場合は次のようになります。
@agent ie

- オプションで、andキーワードを使用してエージェントの特定のバージョンを指定します。たとえば、Internet Explorerのバージョン9を指定する場合は次のようになります。
@agent ie and (version: 9)

- 複数のエージェントのスタイルを指定する場合は、カンマ区切りリルールを使用します。たとえば、Mozilla Firefoxのバージョン15および17と、Internet Explorer 9.xのスタイルを指定する場合は次のルールを使用します。
@agent mozilla and (version: 15.*), mozilla and (version: 17.*), ie and (version: 9*)

- 次の2つの構文例では、同じルールが指定されていることに注意してください。
@agent ie and (version: 9*)

@agent ie and (version: 9)

Internet Explorer 9.0.xにのみ適用するスタイルのルールを指定する場合は、次のように記述します。

@agent ie and (version: 9.0*)

- バージョンの範囲を指定するには、max-versionキーワードとmin-versionキーワードを使用します。たとえば、次のルールを再記述できます。
@agent ie and (version: 9), ie and (version: 10)

次のようにできます。

@agent ie and (min-version: 9) and (max-version: 10)

定義したスタイルをInternet Explorer 9および10のすべてのバージョンに適用します。

@agentルールを使用して、タッチ・デバイスのエージェントに適用するスタイルを指定することもできます。次の例に、この機能を構成するADFスキン・ファイルに記述する構文を示します。

@agent (touchScreen) {
/* Touchscreen specific styles for all touch devices: both single and multiple touch. */
}

@agent (touchScreen:single) {
/* Styles specific for a touch device with single touch. */
}

@agent (touchScreen:multiple) {
/* Styles specific for a touch device with multiple touch. */
}

@agent (touchScreen:none) @ルールを使用して、タッチ・デバイスにレンダリングさせないスタイルを指定します。たとえば、Altaスキンは、:hover擬似クラスを使用するために構成されたセレクタにこの@ルールを適用します。この理由は、:hover擬似クラスがタッチ・デバイスで使用するには適していないためです。@agent (touchScreen:none) @ルールは、:hover擬似クラスを使用するセレクタを、次の例のように折り返します。

@agent (touchScreen:none){

.AFBrandingBar af|link:hover,

.AFBrandingBar af|goLink:hover,

.AFBrandingBar af|commandLink:hover,

...

図11-2に、@agent (touchScreen:none) @ルールを適用したセレクタがセレクタ・ツリーに表示される様子を示します。

図11-2 セレクタ・ツリーでの@agent (touchScreen:none) @ルール

タッチ・デバイスにレンダリングするアプリケーションの作成の詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の付録「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。

ADFスキン内での@ルールの作成方法については、「ADFスキン内での@ルールの作成」を参照してください。

11.3 クライアント側@ルールの使用

ADFスキニング・フレームワークは、次の@ルールを評価しません。

- @charset

- @document

- @font-face

- @import

- @keyframes

- @media

- @page

- @supports

かわりに、@ルールとその@ルール内のスタイル・プロパティを直接ユーザー・エージェントに渡します。ユーザー・エージェントは、@ルールを評価し、@ルールで指定した条件が満たされている場合、その@ルール内のスタイル・プロパティを適用します。

クライアント側@ルール内のスタイル・プロパティは直接ユーザー・エージェントに渡されるため、クライアント側@ルール内ではADFスキン・プロパティまたはグローバル・セレクタ別名を使用できません。ADFスキニング・フレームワークは、これらのアイテムを評価して、それらの実行時の値を決定する必要があります。例11-1に、ADFスキン内でのクライアント側@ルールの有効な使用方法をいくつか示します。例11-1の@media @ルールは、画面の最大幅が1680pxの場合に、af:buttonコンポーネントに対してレンダリングされるスタイル・プロパティを指定しています。また、この例では、この条件が満たされなかった場合に、af:buttonコンポーネントに対して適用されるスタイル・プロパティも指定しています。

注意:

ADFスキン・プロパティやグローバル・セレクタ別名は、クライアント側@ルール内に挿入しないでください。ADFスキンを使用してページをレンダリングすると、予期しない動作が発生する場合があります。ADFスキン・プロパティの名前は-tr-という文字で始まり、グローバル・セレクタ別名には:aliasが付加されます。詳細は、「ADFスキニング・フレームワークでのプロパティ」および「グローバル・セレクタ別名について」を参照してください。

図11-3に、表示される画面の最大幅に基づき、例11-1で定義した適切なスタイル・プロパティを使用してレンダリングされたaf:buttonコンポーネントのインスタンスを示します。

図11-3 ボタン・コンポーネントに適用されるクライアント側@ルール

クライアント側@ルールは、サーバー側@ルール内にネストできます。サーバー側@ルールは、クライアント側@ルール内にネストできます。例11-2に、クライアント側およびサーバー側@ルールが互いの中にネストされたインスタンスを示します。

@pageおよび@font-faceクライアント側@ルールは例外です。他のクライアント側@ルールには完全なスタイルが含まれますが、これらのクライアント側@ルールにはCSSプロパティが含まれるため、これらのクライアント側@ルールにサーバー側@ルールを含めることはできません。

例11-1 ADFスキン内のクライアント側@ルール

...
.myStyleClass {
background-color: Yellow;
}

af|button {
-tr-inhibit: background-image;
color: Red;
}

af|button::access-key {
background-color: Blue;
color: Yellow;
}

@media screen and (max-width:1680px) {
.myStyleClass {
background-color: Red;
}
af|button {
color: Lime;
}
af|button::access-key {
background-color: White;
color: Purple;
}
}
...

例11-2 ネストされたクライアント側およびサーバー側@ルール

@agent  gecko {
@page :first {
margin: 2in ;

}
}

@keyframes mymove {
@agent gecko {
0% { top: 0; left: 0; }
30% { top: 50px; }
68%, 72% { left: 50px; }
100% { top: 100px; left: 100%; }
}

@agent ie {
0% { top: 1; left: 1; }
30% { top: 100px; }
100% { top: 200px; left: 100%; }
}
}

11.4 ADFスキン内での@ルールの作成

ADFスキンに新しい@ルールを作成することも、ADFスキンが拡張元ADFスキンから継承した@ルールをオーバーライドすることもできます。@ルールを作成した後、含めるスタイル・プロパティを定義するように変更します。

11.4.1 @ルールの作成方法

@ルールで指定した条件に適合した場合に1つ以上のセレクタのスタイル・プロパティが特定の方法でレンダリングされるように指定する@ルールを作成できます。

@ルールを作成する手順は次のとおりです。

1. 図11-4に示すように、セレクタ・ツリーのセレクタ・エディタで、ドロップダウン・リストから「新規セレクタと@ルール」を選択します。

ヒント:

@ルールを構成するセレクタの名前がわかっている場合は、セレクタ・ツリーでそのセレクタを右クリックし、コンテキスト・メニューの「新規セレクタと@ルール」を選択します。これで「@ルール宣言の作成」ダイアログの「セレクタ」フィールドに、右クリックしたセレクタ名が移入されます。

図11-4 セレクタ・ツリーの「新規セレクタと@ルール」メニュー

2. 「@ルール宣言の作成」ダイアログで、「ルール」ドロップダウン・リストから構成する@ルールを選択します。

ADFスキニング・フレームワークがサポートする@ルールの詳細は、「サーバー側@ルールの使用」および「クライアント側@ルールの使用」を参照してください。

3. 「OK」をクリックします。

4. セレクタ・ツリーで新しく作成した@ルールを選択し、「プロパティ」ウィンドウで、この@ルールを適用するプロパティを構成します。

11.4.2 @ルールの作成時に発生する処理

図11-5に示すように、@ルールはセレクタ・ツリーの「@ルール」ノードの下に表示され、コンポーネントにそれが適用されるときのビジュアル表示はプレビュー・ペインに表示されます。図11-5に示すように、作成した@ルールおよび変更したすべてのプロパティのCSS構文もADFスキンのソース・ファイルに表示されます。

図11-5 セレクタ・ツリーおよびソース・エディタでの@ルール

図11-6で示すように、@ルールを設定したセレクタ・プロパティの「プロパティ」ウィンドウに、@ルールが設定されたことを示すアイコンが表示されます。

図11-6 プロパティで設定された@ルールが表示された「プロパティ」ウィンドウ

11.4.3 実行時の動作: ADFスキニング・フレームワークによる@ルールの適用方法

実行時に、ADFスキニング・フレームワークは、エージェントやプラットフォームなどのHTTPリクエスト情報に基づいて@ルール付きのスタイルを選択し、ルールのないスタイルとマージします。ルールと一致するスタイル・プロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。

例11-3に、最終的なスタイルを提供するために一緒にマージされる、ADFスキンのソース・ファイル内のセレクタをいくつか示します。

例11-3 ADFスキン内のスタイル・セレクタのマージ

/** For IE and Gecko on Windows, Linux and Solaris, make the color pink. **/
@platform windows,linux,solaris{
@agent ie, gecko
{
af|inputText::content {background-color:pink}
}
}

/** Define default properties for the af|panelFormLayout selector. **/
af|panelFormLayout {
color: red;
width: 10px;
padding: 4px
}
/** Define at-rule for af|panelFormLayout on Internet Explorer (IE). We need
to increase the width, so we override the width.  We still want the color
and padding; this gets merged in. We want to add height in IE.  */
@agent ie{
af|panelFormLayout {width: 25px; height: 10px}
}

/** For IE 9 and 10, we also need some margins.*/
@agent ie( version:9)and( version:10){
af|panelFormLayout {margin: 5px;}
}

/** For Firefox 10 (Gecko 10) use a smaller margin.*/
@agent gecko( version:10){
af|panelFormLayout {margin: 4px;}
}

12 完成したADFスキンのWebアプリケーションへの適用

この章では、ADFスキンが完成した後に行う必要のあるタスクの実行方法について説明します。ADFスキンのテスト方法、完成したADFスキンをADFライブラリJARにパッケージ化する方法、完成したADFスキンが使用されるようにWebアプリケーションを構成する方法についての情報を示します。

この章の内容は次のとおりです。

- 完成したADFスキンのアプリケーションへの適用について

- ADFスキンの変更のテスト

- ADFスキンのADFライブラリJARへのパッケージ化

- WebアプリケーションへのADFスキンの適用

- 実行中のWebアプリケーションへのADFスキンの適用

12.1 完成したADFスキンのアプリケーションへの適用について

1つ以上のADFスキン・セレクタのスタイルのプロパティを定義するADFスキンを作成した後、ADFスキンに加えた変更をテストできます。ADFスキンの変更のテストを完了し、完成したADFスキンに問題がない場合は、ADFスキンと関連ファイル(リソース・バンドル、イメージおよび構成ファイル)をADFライブラリJARにパッケージ化して、完成したADFスキンを使用するアプリケーション・プロジェクトに含めるために配布できます。完成したADFスキンの配布が完了したら、そのADFスキンを適用するアプリケーションを構成します。

12.2 ADFスキンの変更のテスト

ADFスキンを作成し、1つ以上のセレクタに使用するスタイルのプロパティを定義したら、これらのスタイルのプロパティが実行時にブラウザでどのようにレンダリングされるかをテストできます。このことを行うには、ADFスキンをアプリケーションに適用し、セレクタを公開したADF Facesコンポーネントをレンダリングするページを実行します。

アプリケーションを実行するとき、Mozilla FirefoxブラウザのFirebugなどのツール(または使用している特定のブラウザ用の類似のツール)を使用することを検討してください。これらのツールでは、ADFスキンを繰り返し開発する場合に役立つ有用な情報を提供します。たとえば、これらのツールを使用して、すでに行った変更をインスペクトすることに加え、特定のDOM要素に対応するADFスキン・セレクタを判別できます。

アプリケーションで次のことができるように、web.xmlファイルのコンテキスト初期化パラメータを構成することもできます。

- アプリケーションを再起動しなくても、ADFスキンの変更を表示します。
次のコンテキスト初期化パラメータの値をtrueに設定します。

org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION

- 非圧縮のCSSスタイル・クラスの完全な名前を実行時に表示します。
次のコンテキスト初期化パラメータの値をtrueに設定します。

org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION

CHECK_FILE_MODIFICATIONをtrueに設定した場合に、WebアプリケーションのADFスキンに加えたすべての変更がすぐに表示されるわけではないことに注意してください。アイコンとADFスキンのプロパティに加えた変更を表示するには、Webアプリケーションを再起動する必要があります。

コンテキスト初期化パラメータの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「ADF Facesの構成」の付録を参照してください。

図12-1に、(「ADF Faces」buttonコンポーネント用の)コンポーネント・セレクタの名前が抑制される仕組みを示します。図12-1では、ADFスキンで定義されたスタイル・クラス(fndGlobalSearchCategory)が、buttonコンポーネントのstyleClass属性を使用してこのコンポーネントに適用されています。

図12-1 ADFスキンの圧縮されたCSS

図12-2に、DISABLE_CONTENT_COMPRESSIONパラメータをtrueに設定した場合に、ADF Facesコンポーネントの非圧縮の完全名がブラウザでどのようにレンダリングされるかを示します。図12-2の非圧縮のスタイル・クラスaf_buttonは、Oracle ADF Facesスキン・セレクタ・タグ・リファレンスに記載されているaf|buttonセレクタに該当します。

ADFスキン・セレクタが公開する擬似要素に対応する非圧縮のスタイル・クラスも指定できます。たとえば、af|panelTabbedセレクタにより公開されるtab-end擬似要素(af|panelTabbed::tab-end)は、実行時に非圧縮のaf_panelTabbed_tab-endスタイル・クラスに変換されます。

同様に、コンポーネントが特定の状態にあるときに、そのコンポーネントの外観に加えた変更を、ブラウザ・ツールを使用して識別またはインスペクトすることもできます。たとえば、ADFスキンのソース・ファイルにある次のエントリを使用すると、ADF Faces panelTabbedコンポーネントの右側を選択して、このコンポーネントのスタイルを定義できます。

af|panelTabbed::tab:selected af|panelTabbed::tab-end

実行時には、非圧縮のスタイル・クラス名は次のように変換されます。

.af_panelTabbed_tab.p_AFSelected .af_panelTabbed_tab-end

:selectedはp_AFSelectedに変換されますが、生成されるCSSにはp_AFSelectedに相当するものが含まれていない場合があることに注意してください。これは、:hoverのような他の擬似クラスの場合と同様、ブラウザによっては、その特定の状態に対する組込みサポートが備えられているためです。

Oracle ADF Facesスキン・セレクタ・タグ・リファレンスおよびOracle ADFデータ視覚化ツール・スキン・セレクタ・タグ・リファレンスに記載されているADFスキン・セレクタ、擬似要素と擬似クラスのみをカスタマイズすることをお薦めします。その他のADFスキン・セレクタをカスタマイズすると、アプリケーションで予期しない動作や一貫性のない動作が発生する場合があります。

図12-2 ADFスキンの非圧縮のCSS

12.2.1 ADFスキンをテストするためのパラメータの設定方法

アプリケーションのweb.xmlファイルで、CHECK_FILE_MODIFICATIONとDISABLE_CONTENT_COMPRESSIONコンテキスト初期化パラメータをtrueに設定します。

ADFスキンのテストのためにパラメータを設定するには、次のようにします。

1. 「アプリケーション」ウィンドウで、web.xmlファイルをダブルクリックします。

2. ソース・エディタで、次のコンテキスト初期化パラメータ・エントリを追加し、trueに設定します。

- org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION

- org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION

3. 変更を保存して、web.xmlファイルを閉じます。

12.2.2 ADFスキンのテストのためにパラメータを設定した場合の処理

次の例に示すように、アプリケーションのweb.xmlファイルにエントリが表示されます。

<context-param>
<param-name>org.apache.myfaces.trinidad.CHECK_FILE_MODIFICATION</param-name>
<param-value>true</param-value>
</context-param>
<context-param>
<param-name>org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSION</param-name>
<param-value>true</param-value>
</context-param>

ADF Facesコンポーネントのセレクタに加えた変更(アイコンとスキンのプロパティへの変更を除く)は、ADF FacesコンポーネントをレンダリングするWebアプリケーションのページをリフレッシュするとすぐにレンダリングされます。Firebug (ブラウザがMozilla Firefoxの場合)またはGoogle Chromeのデベロッパ・ツールを使用して、実行時にレンダリングされる非圧縮のスタイル・クラス名を表示し、対応するADFスキン・セレクタを確立できます。org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONをtrueに設定すると、Webアプリケーションでパフォーマンス上のコストが発生するため、変更のテストが完了した後は、falseに設定してください。

12.3 ADFスキンのADFライブラリJARへのパッケージ化

ADFスキンと関連ファイル(たとえば、イメージ・ファイル、構成ファイルおよびリソース・バンドル)をADFライブラリJARにデプロイできます。これにより、アプリケーションにADFスキンを適用するために必要なファイルをパッケージ化できます。次に、アプリケーションにバンドルする場合と比較して、ADFスキンをADFライブラリJARにパッケージ化することの利点を示します。

- アプリケーションとは別に、ADFスキンをデプロイおよび開発できます。これにより、ADFスキンへの変更の適用が必要な場合に、確認するファイル数を減らすこともできます。

- ADFスキンとイメージのソース・ファイルは、それぞれのADFライブラリJARに分けることができます。このため、すべてのアプリケーションにすべてのファイルをデプロイする必要がないように、イメージ・ベースを個別のADFライブラリJARに分けることができます。

- ADFライブラリJARのADFスキンは、「実行中のWebアプリケーションへのADFスキンの適用」で説明しているように、再起動を必要とせずに実行中のアプリケーションに適用できます。

12.3.1 ADFスキンをADFライブラリJARにパッケージ化する方法

ADFスキンをADFライブラリJARにパッケージ化するためのADFライブラリJARファイルのデプロイメント・プロファイルを作成します。

ADFライブラリJARファイルのデプロイメント・プロファイルを作成するには、次のようにします。

1. 「アプリケーション」ウィンドウで、ADFスキンが含まれるプロジェクトを右クリックし、「デプロイ」→「新規デプロイメント・プロファイル」を選択します。

2. 「デプロイメント・プロファイルの作成」ダイアログで、「プロファイル・タイプ」ドロップダウン・リストから「ADFライブラリのJARファイル」を選択します。

3. 「デプロイメント・プロファイル名」入力フィールドにデプロイメント・プロファイルの名前を入力し、「OK」をクリックします。

4. 表示される「ADFライブラリJARデプロイメント・プロファイルのプロパティの編集」ダイアログのオプションを確認します。詳細は、「ヘルプ」をクリックしていつでも確認できます。

5. 「OK」をクリックします。

ADFスキンをADFライブラリJARにパッケージ化するには、次のようにします。

1. 「アプリケーション」ウィンドウで、ADFスキンが含まれるプロジェクトを右クリックし、「デプロイ」→deploymentを選択します。deploymentは、ADFライブラリJARファイルのデプロイメント・プロファイルの名前です。

2. 「デプロイ」ダイアログの「デプロイメント・アクション」ページで、「ADFライブラリのJARファイルへのデプロイ」をクリックし、「次」をクリックし、「終了」をクリックします。

12.3.2 ADFスキンをADFライブラリJARにパッケージ化した場合の処理

ADFライブラリJARファイルは、デプロイメント・プロファイルによって指定されたディレクトリに書き込まれます。このADFライブラリJARには、ADFスキンのソース・ファイル、trinidad-skins.xmlファイル、イメージ・ファイルおよびリソース文字列を定義するため、またはADF Facesコンポーネントに定義されているデフォルト文字列をオーバーライドするために作成したすべてのリソース・バンドルが含まれます。ADFライブラリJARファイルには、スキニングに関係のないADFスキンのプロジェクトの他のファイルも含まれます。

例12-1に、ADFスキンの次のアイテムを含むプロジェクトのディレクトリ構造を示します。

- trinidad-skins.xmlファイル

- JDeveloperプロジェクトにコピーされるイメージ・ファイル(sort_des_ena.png)

- ADFスキンのソース・ファイル(skin1.css)

- ADFライブラリJARをプロジェクトにインポートするときにそのコンテンツをインスペクトするために使用する.svaファイル(oracle.adf.common.services.ResourceService.sva)。詳細は、「ADFライブラリJARからのADFスキンの追加」を参照してください。

- デフォルトのリソース・バンドルの文字列をオーバーライドする文字列値を含むリソース・バンドル(skinBundle.properties)
定義する文字列値を含むリソース・バンドルを指定する方法の詳細は、「ADFスキンに追加のリソース・バンドルを指定する方法」を参照してください。

ADFライブラリJARに表示されるADFスキン内のイメージのディレクトリ・パスが、JDeveloperプロジェクトのディレクトリ・パスを含めるように変更されます。例12-2に、行われる変更の例を示します。

例12-1 ADFスキンを含むADFライブラリJARのディレクトリ構造

ADFLibraryJARRootDirectory
+---META-INF
|   |   MANIFEST.MF
|   |   oracle.adf.common.services.ResourceService.sva
|   |   trinidad-skins.xml
|   |
|   +---adf
|   |   \---skins
|   |       \---skin1
|   |           \---images
|   |               \---af_column
|   |                       colSort_des_ena.png
|   |
|   \---skins
|       \---skin1
|               skin1.css
|
\---resources
skinBundle.properties

例12-2 デプロイされたADFスキン内のイメージの変更されたディレクトリ・パス

// Reference to an image in an ADF skin prior to deployment to an ADF Library JAR
af|column::sorted-descending-icon-style
{
background-image: url("images/af_column/colSort_des_ena.png");
}

// Reference to an image in an ADF skin after deployment to an ADF Library JAR
af|column::sorted-descending-icon-style
{
background-image: url("/adf/skins/skin1/images/af_column/colSort_des_ena.png");
}

12.4 WebアプリケーションへのADFスキンの適用

アプリケーションのtrinidad-config.xmlファイルで値を指定して、ADFスキンを使用するようにアプリケーションを構成します。実行時にアプリケーションが使用するADFスキン・ファミリを識別する<skin-family>要素の値を指定します。ADFスキン・ファミリのスキンで複数のADFスキンを作成した場合、これらのスキンをバージョニングできます。同じADFスキン・ファミリ内の複数のADFスキンをバージョニングした場合は、trinidad-config.xmlファイルの<skin-version>要素を使用して、アプリケーションが使用する特定のバージョンを指定してください。

trinidad-config.xmlファイル内の<skin-version>要素に値を入力することによってあるいはtrinidad-skins.xmlファイル内の<default>true</default>要素を使用することによってADFスキン・ファミリの特定のADFスキンを指定しない場合、アプリケーションはtrinidad-skins.xml内で定義される最後のスキンを使用します。ADFスキンのバージョニングおよびこれによりアプリケーションが選択するADFスキンを決定する方法の詳細は、「ADFスキンのバージョニング」を参照してください。

エンド・ユーザーがアプリケーションで使用するADFスキンを動的に選択できるように、アプリケーション・ページを構成できます。詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』を参照してください。

12.4.1 ADFスキンをアプリケーションに適用する方法

アプリケーションのtrinidad-config.xmlファイルを変更して、アプリケーションにADFスキンを適用します。このことを行うには、アプリケーションのtrinidad-config.xmlファイルを編集して、使用するADFスキン・ファミリを指定します。または、JDeveloperの「プロジェクト・プロパティ」ダイアログの「ADFビュー」オプションのリストから、ADFスキン・ファミリを選択することもできます。

アプリケーションにADFスキンを適用するには、次のようにします。

1. 「アプリケーション」ウィンドウで、trinidad-config.xmlファイルをダブルクリックします。デフォルトでは、このファイルはWeb Content/WEB-INFノードにあります。

2. 例12-3に示されているように、ソース・エディタに、<skin-family>要素の値を指定するためのエントリと、オプションで<skin-version>要素の値を書き込みます。

12.4.2 ADFスキンをアプリケーションに適用した場合の処理

例12-3に示されているように、trinidad-config.xmlファイルで、<skin-family>要素とオプションで<skin-version>要素に指定する値は、Webアプリケーションが実行時に使用するADFスキンを決定します。

例12-3 trinidad-config.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<trinidad-config xmlns="http://myfaces.apache.org/trinidad/config">
<skin-family>skyros</skin-family>
<skin-version>v1</skin-version>
</trinidad-config>

12.5 実行中のWebアプリケーションへのADFスキンの適用

Java Management Extensions (JMX)を使用すると、アプリケーションを再起動することなく、ADFライブラリJARにパッケージ化されたADFスキンをWebアプリケーションに適用できます。これを実行するには、「更新済ADFスキンを受け入れるようにWebアプリケーションを構成する方法」で説明しているように、Webアプリケーションのソース・ファイルを構成する必要があります。次に、JDeveloperを使用してMBeanサーバーに接続し、ADFスキンを含むADFライブラリJARをデプロイします。詳細は、「ADFライブラリJARをMBeanサーバーにデプロイする方法」を参照してください。これにより、ADFライブラリJARに含まれるすべてのADFスキンがWebアプリケーションで利用できるようになります。

12.5.1 更新済ADFスキンを受け入れるようにWebアプリケーションを構成する方法

アプリケーションがWebアプリケーションを再起動せずにMBeanサーバーがデプロイした新しいADFスキンを適用できるように、JDeveloper内のWebアプリケーションのViewControllerプロジェクトに次の変更を行います。

- アプリケーションのViewControllerプロジェクトの「ADFビュー」ページの「ランタイム・スキン更新の有効化」チェック・ボックスを選択します。

- アプリケーションのクラスパスにADF Faces JMXランタイム11を追加します。

- (オプション)アプリケーションのweb.xmlファイルに、コンテキスト初期化パラメータを追加します。
コンテキスト初期化パラメータによって、アプリケーションのコンテキスト・ルートを使用せずWebアプリケーションを識別するための親しみやすい名前を指定できます。

注意:

Webアプリケーションは、統合WebLogic Serverでアプリケーションを実行する場合と同様に、展開フォーマットでデプロイする必要があります。

更新されたADFスキンを受け入れるようにWebアプリケーションを構成する手順は次のとおりです。

1. JDeveloperの「アプリケーション」ウィンドウで、ViewControllerプロジェクトを選択します。

2. メイン・メニューから、「アプリケーション」→「プロジェクト・プロパティ」を選択します。

3. 「プロジェクト・プロパティ」ダイアログで「ADFビュー」を選択し、「ランタイム・スキン更新の有効化」チェック・ボックスを選択します。

4. 「ライブラリとクラスパス」ページを選択し、「クラスパス・エントリ」リストに「ADF Faces JMXランタイム11」が表示されることを確認します。表示されない場合は「ライブラリの追加」.をクリックします。

5. 「ライブラリの追加」ダイアログで、「ADF Faces JMXランタイム11」を選択し、「OK」をクリックします。

6. 「OK」をクリックします。

7. オプションで、「アプリケーション」ウィンドウのWEB-INFディレクトリ内にあるweb.xmlファイルをダブルクリックし、コンテキスト初期化パラメータ(これによりアプリケーション用に覚えやすい名前を指定できるようになります)を追加します。そうしない場合は、デフォルトの動作はアプリケーションのコンテキスト・ルートを使用します。

概要エディタで、「Application」ナビゲーション・タブをクリックし、「コンテキスト初期化パラメータ」表の横の「追加」アイコンをクリックしてoracle.adf.view.rich.SKINNING_MBEAN_NAMEパラメータのエントリを追加し、その値を、MBeanサーバーへのWebアプリケーションを識別するために使用する名前に設定します。

12.5.2 ADFライブラリJARをMBeanサーバーにデプロイする方法

ADFスキンをパッケージ化するADFライブラリJARをMBeanサーバーにデプロイします。ADFスキンをADFライブラリJARにパッケージ化するためのADFライブラリJARファイルのデプロイメント・プロファイルを作成する方法の詳細は、「ADFスキンをADFライブラリJARにパッケージ化する方法」を参照してください。

ADFライブラリJARをMBean Serverにデプロイする手順は次のとおりです。

1. 「アプリケーション」ウィンドウで、ADFスキンが含まれるプロジェクトを右クリックし、「デプロイ」→deploymentを選択します。deploymentは、ADFライブラリJARファイルのデプロイメント・プロファイルの名前です。

2. 「デプロイメント・アクション」ページで、「ADFスキン・マネージドBeanへのデプロイ」を選択し、「次へ」をクリックします。

3. 「スキン接続」ページで、適切なオプションを選択します。

- 「追加」をクリックしてMBeanサーバーへの新しい接続を作成し、ステップ4へ進みます。

- 「接続」ドロップダウン・リストから、既存の接続を選択し、ステップ5へ進みます。

4. 「JMX接続の作成」ダイアログで、各フィールドにデータを入力してMBeanサーバーに接続します。

- 接続名: 接続の名前を入力します。名前は必ず有効なJava識別子とし、名前および接続はこのインストール全体で使用されるため、適切な一意の名前を選択してください。

- サーバー・タイプ: ADFスキン・マネージドBeanにデプロイする接続用としてデフォルトのWeblogic Serverがあらかじめ選択状態になっています。

- ユーザー名: MBeanサーバーへのアクセスを許可するユーザー名を入力します。

- パスワード: 指定したユーザー名に関連付けるパスワードを入力します。このフィールドに入力する各文字はアスタリスク(*)として表示されます。

- プロトコル: JDeveloperはt3プロトコルを使用してMBeanサーバーと通信します。

- ホスト名: MBeanサーバーを実行するマシンを識別する値を入力します。TCP/IPで解決できるIPアドレスまたはホスト名、たとえばMBeanサーバーがローカル・マシン上にある場合はlocalhostまたは127.0.0.1を使用します。

- ポート: MBeanサーバーのリスニング・ポートを入力します。デフォルトは、統合Weblogic Serverのデフォルト・ポート番号となる任意の値(多くの場合7101)です。

- URLプロバイダのパス: MBeanサーバーの絶対JNDI名を入力します。これは/jndi/で始まり次のいずれかが続く必要があります。

- weblogic.management.mbeanservers.domainruntime

- weblogic.management.mbeanservers.runtime

- weblogic.management.mbeanservers.edit

- サーバー・インストールの場所: サーバー・インストールの場所が表示されます。

- 接続のテスト: クリックすると、接続がテストされます。

- ステータス: 「成功」メッセージは、JDeveloperがMBeanサーバーに接続できたことを示します。これ以外のメッセージは接続に失敗したことを示します。「接続のテスト」を試す前に少なくとも次の点をチェックする必要あります。

- MBeanサーバーがローカルでない場合にネットワークが正しく動作しているか。

- このダイアログで入力した各値。

5. 「アプリケーション名」 フィールドで、ADFスキンを含むADFライブラリJARをデプロイする必要のあるWebアプリケーションの名前を選択します。「実行中のアプリケーションの検索」をクリックして、使用可能なアプリケーションのリストを検索し、そのアプリケーションが実行中であることを確認します。

「更新済ADFスキンを受け入れるようにWebアプリケーションを構成する方法」で説明しているように、アプリケーションの名前がoracle.adf.view.rich.SKINNING_MBEAN_NAMEパラメータ用に入力した値となるように指定していなければ、アプリケーションのルート・コンテキストの名前が表示されます。

6. 「次へ」をクリックし、「終了」をクリックします。

12.5.3 ADFスキンを実行中のアプリケーションに適用した場合の処理

JDeveloperは、ADFスキンを含むADFライブラリJARをWebアプリケーションにデプロイします。このADFライブラリJARには、ADFスキンおよび他の関連ファイル(ADFスキンが必要とするイメージなど)が含まれています。ADFライブラリJARのコンテンツの詳細は、「ADFスキンをADFライブラリJARにパッケージ化した場合の処理」を参照してください。ADFスキンはWebアプリケーションのルート・ディレクトリにインストールされます。Webアプリケーションのtrinidad-skins.xmlファイルは、新しく追加されたADFスキンを参照するよう更新されます。

Webアプリケーションが、新しく追加されたADFスキンを使用するようにするには、trinidad-config.xmlファイルの<skin-family要素が参照する値を更新する必要があります。これは、「ADFスキンをアプリケーションに適用する方法」で説明しているように手動で行うか、プログラムでこの値を更新する要素を求めるEL式を指定することで可能です。この後者のオプションの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』の「スタイルおよびスキンを使用した外観のカスタマイズ」の章を参照してください。

13 高度なトピック

この章では、ADFスキンのソース・ファイルまたはADFスキンの使用を制御する構成ファイルに変更を加える場合に役立つ情報を示します。また、この章では、Oracle ADFで提供されるADFスキンのリストと説明も示します。

この章の内容は次のとおりです。

- ADFスキンのCSSファイルにおけるURLの参照

- ADFスキンの構成ファイル

- Oracle ADFで提供されるADFスキン

- ADFスキンのバージョニング

13.1 ADFスキンのCSSファイルにおけるURLの参照

通常、ADFスキンのCSSファイルでは、ファイルの外部リソースを参照するためにURLを使用します。たとえば、エラー・メッセージとともにレンダリングするためにアプリケーションが使用するイメージがこれに該当します。URLは、ADFスキンのCSSファイルから様々なフォーマットで参照できます。サポートされているフォーマットは次のとおりです。

- 絶対
リソースの完全なURLを指定します。たとえば、次のようなフォーマットのURLです。

http://www.mycompany.com/WebApp/Skin/skin1/img/errorIcon.gif

- 相対
URLの先頭が/ではなく、プロトコルが示されていない場合は、相対URLを指定できます。相対URLは、ADFスキンのCSSファイルの場所に基づきます。たとえば、ADFスキンのCSSファイル・ディレクトリがWebApp/Skin/skin1/であり、指定されたURLがimg/errorIcon.gifの場合、最終的なURLは/WebApp/Skin/mySkin/img/errorIcon.gifとなります。

- コンテキスト相対
このURLのフォーマットは、Webアプリケーションのコンテキスト・ルートに対して相対的に解釈されます。コンテキスト相対ルートの先頭は/になります。たとえば、Webアプリケーションのコンテキスト相対ルートが次のとおりであるとします。

/WebApp

このとき、次のURLを指定したとします。

/img/errorIcon.gif

最終的なURLは次のようになります。

/WebApp/img/errorIcon.gif

- サーバー相対
サーバー相対URLは、Webサーバーに対して相対的に解釈されます。これがコンテキスト相対URLと異なるのは、同じWebサーバー上にある別のアプリケーション内のリソースを参照できることです。URLの先頭は//を使用して指定します。たとえば、次のフォーマットでURLを作成します。

//WebApp/Skin/mySkin/img/errorIcon.gif

Javaアーカイブ(JAR)ファイルをパッケージとして作成し、ADFスキンとその関連ファイルを配布する場合は、使用するURLのフォーマットが重要になることがあります。詳細は、「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

13.2 ADFスキンの構成ファイル

次のリストでは、ADFスキンのプロジェクトに関連付けられている構成ファイルについて説明します。ADFスキンの開発中、または開発が終了して完成したADFスキンをアプリケーションに適用するときに、これらのファイルに含まれる値を変更します。

- trinidad-skins.xml
このファイルは、「ADFスキン・ファイルの作成」で説明しているように、作成されるADFスキンを登録します。次の例に、表13-1で説明しているADFスキンのサンプルを拡張した数多くのADFスキンの登録方法を示します。

<!-- Use the following values in the trinidad-skins.xml file if you want to extend the alta-v1 skin. -->
<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>alta-v1.desktop</extends>
...
</skin>

<!-- Use the following values in the trinidad-skins.xml file if you want to extend the skyros-v1 skin. -->
<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>skyros-v1.desktop</extends>
...
</skin>

このファイルの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のtrinidad-skins.xmlでの構成に関する項を参照してください。

- trinidad-config.xml
この構成ファイルの<skin-family>要素を「WebアプリケーションへのADFスキンの適用」で説明しているように構成することによって、アプリケーションに対して使用するADFスキンを指定します。次の例に、表13-1に示されている一部のADFスキンを使用するためにWebアプリケーションを構成する方法を示します。

<!-- Use the following value in the trinidad-config.xml file if you want your application to use the Alta skin. -->
<skin-family>alta</skin-family>
<skin-version>v1<skin-version>

<!-- Use the following value in the trinidad-config.xml file if you want your application to use the skyros skin. -->
<skin-family>skyros</skin-family>
<skin-version>v1<skin-version>

このファイルの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のtrinidad-config.xmlでの構成に関する項を参照してください。

- web.xml
このファイルのコンテキスト初期化パラメータを「ADFスキンの変更のテスト」の説明に従って構成することによって、ADFスキンを開発およびテストを実行しやすくできます。コンテキスト初期化パラメータ(org.apache.myfaces.trinidad.skin.MAX_SKINS_CACHED)を構成して、生成されたCSSファイルに関する情報をメモリーに格納する一意のADFスキンの最大数を指定することもできます。このコンテキスト初期化パラメータを使用すると、数多くの異なるスキンを使用する場合に、アプリケーションのパフォーマンスを維持するのに役立つ場合があります。

web.xmlファイルおよびコンテキスト初期化パラメータの詳細は、『Oracle ADF FacesによるWebユーザー・インタフェースの開発』のweb.xmlでの構成に関する項を参照してください。

13.3 Oracle ADFで提供されるADFスキン

Oracle ADFでは、数多くのADFスキンが提供されており、これらを拡張して、新規ADFスキンを作成できます。表13-1に、これらのADFスキンの違いを示します。

ADFスキン作成時に表示される「ADFスキンの作成」ダイアログの「基本スキン」ページは、「ADFスキン・ファイルの作成」で説明しているように、拡張元として適切なADFスキンを提示します。

表13-1に示されているすべてのADFスキンをWebアプリケーションに適用できます。詳細は、「ADFスキンの構成ファイル」を参照してください。ADFスキン間の継承関係を示すダイアグラムは、「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。

表13-1 Oracle ADFで提供されるADFスキン

ADFスキン

説明

simple

最小書式設定のみを含みます。

skyros-v1

simpleスキンを拡張します。使用するアプリケーションにカラフルなルック・アンド・フィールを提供します。

alta-v1

alta-v1スキンは、WebアプリケーションでOracle Alta UIシステムを利用できるスキンです。WebアプリケーションでOracle Alta UIシステムで導入された拡張機能を利用する場合、このスキンをそのまま使用するか拡張します。alta-v1スキンは、このリリースを使用して作成したWebアプリケーションのデフォルト・スキンです。

Oracle Alta UIシステムの詳細は、http://www.oracle.com/webfolder/ux/middleware/alta/index.htmlを参照してください。

13.4 ADFスキンのバージョニング

<version>要素を使用して、trinidad-skins.xmlファイルでADFスキンのバージョン番号を指定できます。trinidad-skins.xmlファイル内の<family>要素の値が同じであるADFスキンを区別する場合はこのオプション機能を使用します。特定のADFスキンを使用するようにアプリケーションを構成する場合は、「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイルで値を指定して行うことに注意してください。

13.4.1 ADFスキンのバージョニング方法

trinidad-skins.xmlファイル内の<version>要素に値を入力して、ADFスキンのバージョンを指定します。

ADFスキンをバージョニングするには、次のようにします。

1. 「アプリケーション」ウィンドウで、trinidad-skins.xmlファイルをダブルクリックします。これは、デフォルトではWeb Content/WEB-INFノードにあります。

2. 「構造」ウィンドウで、バージョニングするADFスキンのskinノードを右クリックし、「skinの中に挿入」→「version」を選択します。

3. trinidad-config.xmlファイルの<skin-version>要素に値が指定されていない場合にこのバージョンのADFスキンがアプリケーションで使用されるようにするには、「WebアプリケーションへのADFスキンの適用」で説明しているように、バージョンの挿入のためのダイアログで、デフォルト・リストからtrueを選択します。

4. 名前フィールドに値を入力します。たとえば、ADFスキンの最初のバージョンである場合はv1と入力します。

5. 「OK」をクリックします。

13.4.2 ADFスキンをバージョニングした場合の処理

例13-1に、3つのADFスキン(skin1.desktop, skin2.desktopおよびskin3.desktop)を参照するtrinidad-skins.xmlの例を示します。これらの各ADFスキンの<family>要素は同じ値(test)になっています。<version>要素の子要素の値によって、これらのADFスキンがそれぞれ区別されます。実行時に、アプリケーションのtrinidad-config.xmlファイルにおける<skin-family>要素の値としてtestが指定されたアプリケーションでは、skin1.desktopを使用します。これは、このADFスキンがtrinidad-skins.xmlファイルでデフォルト・スキンとして構成されているためです(<default>true</default>)。この動作は、「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイル内の<skin-version>要素に値を指定してオーバーライドできます。たとえば、trinidad-config.xmlファイルの<skin-version>要素の値としてv2を指定すると、アプリケーションはtrinidad-skins.xmlファイルのデフォルトとして定義されているskin1.desktopのかわりにskin2.desktopを使用します。

(trinidad-config.xmlファイル内の<skin-version>要素を使用して)取得するスキンのバージョンを指定しない場合、アプリケーションはtrinidad-skins.xml内の<default>true</default>要素を使用してデフォルトとして定義されているスキンを使用します。デフォルトのスキンを指定しない場合、アプリケーションはtrinidad-skins.xml内で定義される最後のADFスキンを使用します。例13-1において、定義される最後のADFスキンはskin3.desktopです。

例13-1 バージョニングされたADFスキン・ファイルが含まれたtrinidad-skins.xmlファイル

<?xml version="1.0" encoding="windows-1252"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>skin1.desktop</id>
<family>test</family>
<extends>skyros-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin1/skin1.css</style-sheet-name>
<version>
<default>true</default>
<name>v1</name>
</version>
</skin>
<skin>
<id>skin2.desktop</id>
<family>test</family>
<extends>skin1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
<version>
<name>v2</name>
</version>
</skin>
<skin>
<id>skin3.desktop</id>
<family>test</family>
<extends>skin2.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin3/skin3.css</style-sheet-name>
<version>
<name>v3</name>
</version>
</skin>
</skins>

オラクルの法律上の注意点について

コピーライトについて

Copyright © 1994-2016, Oracle and/or its affiliates.All rights reserved.

ライセンス制約の保証と結果的に生じる損害の免責

このソフトウェアおよび関連ドキュメントの使用と開示は、ライセンス契約の制約条件に従うものとし、知的財産に関する法律により保護されています。ライセンス契約で明示的に許諾されている場合もしくは法律によって認められている場合を除き、形式、手段に関係なく、いかなる部分も使用、複写、複製、翻訳、放送、修正、ライセンス供与、送信、配布、発表、実行、公開または表示することはできません。このソフトウェアのリバース・エンジニアリング、逆アセンブル、逆コンパイルは互換性のために法律によって規定されている場合を除き、禁止されています。

保証免責

ここに記載された情報は予告なしに変更される場合があります。また、誤りが無いことの保証はいたしかねます。誤りを見つけた場合は、オラクルまでご連絡ください。

制限付権利について

このソフトウェアまたは関連ドキュメントを、米国政府機関もしくは米国政府機関に代わってこのソフトウェアまたは関連ドキュメントをライセンスされた者に提供する場合は、次の通知が適用されます。

U.S. GOVERNMENT END USERS: Oracle programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, delivered to U.S. Government end users are "commercial computer software" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations.As such, use, duplication, disclosure, modification, and adaptation of the programs, including any operating system, integrated software, any programs installed on the hardware, and/or documentation, shall be subject to license terms and license restrictions applicable to the programs.No other rights are granted to the U.S. Government.

危険な用途への使用について

このソフトウェアまたはハードウェアは様々な情報管理アプリケーションでの一般的な使用のために開発されたものです。このソフトウェアまたはハードウェアは、危険が伴うアプリケーション(人的傷害を発生させる可能性があるアプリケーションを含む)への用途を目的として開発されていません。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用する際、安全に使用するために、適切な安全装置、バックアップ、冗長性(redundancy)、その他の対策を講じることは使用者の責任となります。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用したことに起因して損害が発生しても、Oracle Corporationおよびその関連会社は一切の責任を負いかねます。

商標と登録商標について

OracleおよびJavaはオラクルおよびその関連会社の登録商標です。その他の社名、商品名等は各社の商標または登録商標である場合があります。

Intel、Intel Xeonは、Intel Corporationの商標または登録商標です。すべてのSPARCの商標はライセンスをもとに使用し、SPARC International, Inc.の商標または登録商標です。AMD、Opteron、AMDロゴ、AMD Opteronロゴは、Advanced Micro Devices, Inc.の商標または登録商標です。UNIXは、The Open Groupの登録商標です。

第三者のコンテンツ、製品、サービスに対する免責事項

このソフトウェアまたはハードウェア、そしてドキュメントは、第三者のコンテンツ、製品、サービスへのアクセス、あるいはそれらに関する情報を提供することがあります。適用されるお客様とOracle Corporationとの間の契約に別段の定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスに関して一切の責任を負わず、いかなる保証もいたしません。適用されるお客様とOracle Corporationとの間の契約に定めがある場合を除いて、Oracle Corporationおよびその関連会社は、第三者のコンテンツ、製品、サービスへのアクセスまたは使用によって損失、費用、あるいは損害が発生しても一切の責任を負いかねます。

アルファ版およびベータ版ドラフト・ドキュメントについて

このドキュメントが試作版の場合:

このドキュメントは試作版であり、デモおよび暫定使用のみを目的としたものです。このソフトウェアを使用するハードウェアに限定するものではありません。Oracle Corporationおよびその関連会社は、このドキュメントに関して一切の責任を負わず、いかなる保証もいたしません。また、このドキュメントを使用したことによって損失、費用、あるいは損害が発生しても、一切の責任を負いかねます。

非公開のアルファ版およびベータ版ドラフト・ドキュメントについて

このドキュメントが非公開の試作版の場合:

このドキュメントに含まれる情報は、情報の共有のみを目的としたものであって、顧客諮問委員会(Customer Advisory Board)のメンバーとしてのお客様の立場でのみ、またはお客様のベータ・トライアル契約のみに従って検討されるべきものとします。マテリアル、コード、または機能の提供をお約束するものではなく、購入決定を行う際の判断材料とすべきではありません。このドキュメントに記載されている特徴または機能の開発、リリースおよび時期については、オラクルの裁量により決定されます。

このドキュメントには、ソフトウェアまたは印刷物などの形式を問わず、オラクルが独占的な権利を有する財産的情報が含まれています。この機密資料へのアクセスと使用は、お客様とオラクルとの間で締結され、お客様が遵守に同意した、Oracle Master Agreement、Oracle License and Oracle Services Agreement (オラクル・ライセンスおよびサービスに関する契約書)、Oracle PartnerNetwork Agreement、Oracle Distribution Agreementまたはその他のライセンス契約の条件に従うものとします。このドキュメントとその内容の開示、コピー、複製および配布には、オラクルによる事前の承諾を必要とします。このドキュメントはライセンス契約の一部となるものではなく、オラクルおよびその子会社や関連会社との契約を構成するものではありません。

ドキュメントのアクセシビリティについて

オラクルのアクセシビリティについての詳細情報は、Oracle Accessibility ProgramのWebサイトhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docacc を参照してください。

Oracle Supportへのアクセス

サポートをご契約のお客様には、My Oracle Supportを通して電子支援サービスを提供しています。詳細情報はhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=infoか、聴覚に障害のあるお客様はhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=trsを参照してください。