Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成

12c (12.1.2)

E48016-01(原本部品番号:E23163-01)

目次

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

はじめに

- 対象読者

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

- 関連ドキュメント

- 表記規則

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

- 12c(12.1.2)の新機能および変更機能

- このガイドのその他の主な変更

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

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

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

- 1.3 ADFスキンの考察

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

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

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

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

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

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

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

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

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

- 2.4 ADFスキン・エディタ内からのセレクタ情報へのアクセス

3 ADFスキン・エディタの使用

- 3.1 ADFスキン・エディタについて

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

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

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

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

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

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

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

- 3.6 ADFスキン・エディタのカスタマイズ

- 3.6.1 ADFスキン・エディタのルック・アンド・フィールを変更する方法

- 3.6.2 ADFスキン・エディタの一般的な環境をカスタマイズする方法

- 3.7 ADFスキンのソース・ファイルの検索

- 3.7.1 ADFスキンのソース・ファイルを検索する方法

- 3.8 拡張機能の使用

- 3.8.1 「更新の確認」を使用して拡張機能をインストールする方法

- 3.9 ADFスキン・エディタへの外部ツールの追加

- 3.9.1 ADFスキン・エディタに外部ツールを追加する方法

- 3.10 ADFスキン・エディタのナビゲート

- 3.10.1 ADFスキン・エディタでのショートカット・キーの使用方法

- 3.10.2 ADFスキン・エディタでのキーボード・ナビゲーション

- 3.10.2.1 一般的なナビゲーション・キー

- 3.10.2.2 標準コンポーネントでのナビゲーション

- 3.10.2.3 複雑なコントロールのナビゲート

- 3.10.2.4 特定のコンポーネントでのナビゲーション

- 3.11 リソース・ウィンドウの使用

- 3.11.1 IDE接続の処理

- 3.11.2 「リソース」ウィンドウの検索方法

- 3.11.3 「リソース」ウィンドウ・コンテンツのフィルタリング

- 3.11.4 カタログと接続のインポートおよびエクスポート

- 3.11.5 リソース・ウィンドウ・カタログの使用

- 3.11.5.1 カタログの作成

- 3.11.5.2 カタログの名前の変更

- 3.11.6 カタログ・フォルダの使用

- 3.11.6.1 フォルダの作成方法

- 3.11.6.2 動的フォルダの作成方法

- 3.11.6.3 カタログへのリソースの追加方法

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

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

- 4.2 ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成

- 4.2.1 ADFスキン・アプリケーションの作成方法

- 4.2.2 新規ADFスキン・プロジェクトの作成方法

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

- 4.3.1 ADFスキン・エディタでのADFスキンの作成方法

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

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

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

- 4.5 ADFライブラリJARからのADFスキンのインポート

- 4.5.1 ADFライブラリJARからADFスキンをインポートする方法

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

- 4.6 ADFスキン・エディタ以外で作成されたアプリケーションを開く

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

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

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

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

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

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

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

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

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

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

- 5.6 ADF Facesコンポーネントへのテーマの適用

- 5.6.1 コンポーネントのテーマを有効にする方法

- 5.6.2 ADFスキンでコンポーネントのテーマ・プロパティを設定する方法

- 5.6.3 コンポーネントが親コンポーネントからテーマを継承しないようにする方法

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

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

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

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

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

- 6.3 Skyrosで拡張したADFスキンの色の使用

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

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

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

- 6.5 イメージ・エディタの使用

- 6.5.1 イメージ・エディタを使用したイメージの生成方法

- 6.5.2 イメージ・エディタを使用してイメージを生成した場合の処理

- 6.6 ADFスキンへの単純な枠線スタイルの提供

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- 8.4.3 グローバル・セレクタ別名の適用に関する注意事項

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

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

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

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

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

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

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

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

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

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

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

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

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

10 @ルールの使用

- 10.1 @ルールについて

- 10.2 @ルールの作成

- 10.2.1 @ルールの作成方法

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

- 10.2.3 @ルールに関する注意事項

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

12 高度なトピック

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

- 12.2 ADFスキニング・フレームワークおよびサポートされているレンダー・キット

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

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

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

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

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

Oracle® Fusion Middleware

Oracle ADFスキン・エディタによるADFスキンの作成

12c (12.1.2)

E48016-01(原本部品番号:E23163-01)

2013年7月

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

Oracle Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの作成 12c (12.1.2)

E48016-01

Copyright © 2013, Oracle and/or its affiliates.All rights reserved.

原本著者: Walter Egan

原本主協力者:  Laura Akel

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

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

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

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 ADFスキン・エディタによるADFスキンの作成へようこそ。

対象読者

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

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

オラクル社のアクセシビリティへの取組みの詳細は、Oracle Accessibility ProgramのWebサイトhttp://www.oracle.com/pls/topic/lookup?ctx=acc&id=docaccを参照してください。

Oracleサポートへのアクセス

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 (聴覚障害者向け)を参照してください。

関連ドキュメント

詳細は、次のドキュメント(スキニングするアプリケーションに関連するリリース)を参照してください。

- Oracle ADFスキン・エディタのインストール

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

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

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

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

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

表記規則

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

規則

意味

太字

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

イタリック体

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

固定幅フォント

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

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

次のトピックでは、ADFスキン・エディタの新機能や変更機能についておよびこのガイドに記載されるその他の重要な変更について紹介し、詳細情報へのリンクを提供します。このガイドは、以前に『Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド』というタイトルであったガイドの新版です。

12c(12.1.2)の新機能および変更機能

ADFスキン・エディタ12c(12.1.2)には、次の新機能と変更機能が含まれます。

- デザイン・エディタは、新しいエディタで、SkyrosまたはFusion SimpleファミリのADFスキンから拡張した場合に表示されます。これを使用して、ADF Facesコンポーネントを使用するアプリケーションの最も一般的なスタイルに設定されたパーツを変更でき、またOracle ADFで提供されるADFスキン内のデフォルトのイメージを置き換えることもできます。エディタが用意しているサンプル・ページ内またはエディタから起動したブラウザ内で加えた変更をプレビューできます。「設計」タブをクリックしてデザイン・エディタにアクセスします。第3.2項「ADFスキン・デザイン・エディタの使用」を参照してください。

- セレクタ・エディタでは、現在選択されているコンポーネントのインタラクティブ・プレビューを表示できるようになりました。プレビューのインタラクティブなパーツをクリックすると、コンポーネントの外観を変更するようにプロパティを構成する疑似要素に移動します。第3.3.2項「セレクタ・エディタのインタラクティブ・プレビュー」を参照してください。

- 拡張スキンでは、リストに拡張元スキンのリストが階層的に表示され、インポート済スキンも表示されます。第3.5項「ADFスキンのナビゲート」を参照してください。

- イメージ・エディタでは、ADFスキンが使用する色の色相、彩度、明度のレベルを調整できる「色相/彩度/明度の調整」ダイアログが追加されました。このエディタは、ADFスキンがFusion SimpleファミリのADFスキンから拡張されている場合にのみ表示されます。第6.5項「イメージ・エディタの使用」を参照してください。

- @ルールは、セレクタ・エディタを使用して作成および変更できるようになりました。第10章「@ルールの使用」を参照してください。

- Java Management Extensions (JMX)を使用すると、アプリケーションを再起動することなく、ADFライブラリJARにパッケージ化されたADFスキンをFusion Webアプリケーションにデプロイできます。第11.5項「実行中のWebアプリケーションへのADFスキンの適用」を参照してください。

- 新しいADFスキンのskyrosやfusionFx-v3などについて説明します。第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。

- fusionおよびfusionFx-simpleADFスキンの使用は非推奨となりました。第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。

このガイドのその他の主な変更

このガイドは、12c(12.1.2)のいくつかの情報で更新されています。次の表に、追加または変更された項を示します。

- 追加の項では、ADFスキン・エディタ内からADFスキン・セレクタおよびCSSプロパティの参照情報にアクセスする方法について説明します。第2.4項「ADFスキン・エディタ内からのセレクタ情報へのアクセス」を参照してください。

- ADFスキニング・フレームワークが、拡張されたADFスキンまたはローカルADFスキン内のグローバル・セレクタ別名の値をオーバーライドするときに、適用するスタイル・プロパティをどのように決定するかについて、詳しく説明する項が追加されました。第8.4.3項「グローバル・セレクタ別名の適用に関する注意事項」を参照してください。

- タッチ・デバイスのエージェントに適用するスタイルを指定する、@agentルールの使用方法についての項が改訂されました。第10.2項「@ルールの作成」を参照してください。

- trinidad-config.xmlまたはtrinidad-skins.xmlファイルで値を指定しない場合に、アプリケーションが使用するADFスキンを選択する方法について詳しく説明する項が改訂されました。第12.5.2項「ADFスキンをバージョニングした場合の処理」を参照してください。

- 従来から非推奨のBlafplusファミリのADFスキンへの参照は、このガイド全体で削除されました。

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

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

この章には次の項が含まれます:

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

- 第1.2項「ADFスキンの開発の概要」

- 第1.3項「ADFスキンの考察」

- 第1.4項「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スキンを代替文字列値で変更します。詳細は、第7章「ADFスキンのテキストの使用」を参照してください。

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

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

- スキンできる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データ視覚化コンポーネントについて理解しておいてください。ADFスキンを開発するステップの概要は次のとおりです。

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

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

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

ADFスキン・エディタには、このタスクを容易にする多くのタブが用意されています。適切なタブを選択します。たとえば、「設計」タブ(使用可能な場合)は、ADF Facesコンポーネントを使用するアプリケーションの、最も一般的なスタイルに設定されたパーツを迅速に変更できる設計エディタのコントロールを提供します。タブの下部にある多くのサンプル・ページは、用意されたコントロールを使用して加えた変更を表示するためにリフレッシュされます。対照的に、より高度な変更のためにはセレクタ・タブを使用します。その理由は、この後者のタブは、セレクタ・ツリー内でADFスキニング・フレームワークによって公開されるすべてのセレクタのセレクタ・エディタを表示し、これらのセレクタを変更できる「プロパティ」ウィンドウや他の多くのコントロールを提供するからです。

デザイン・エディタは、SkyrosおよびFusion SimpleファミリのADFスキンからADFスキンを拡張した場合に表示されます。セレクタ・エディタは、拡張元のスキン・ファミリに関係なく表示されます。詳細は、第3.2項「ADFスキン・デザイン・エディタの使用」および第3.3項「ADFスキン・セレクタ・エディタの使用」を参照してください。

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

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

ヒント:

ステップ2で説明しているデザイン・エディタは、ADFスキンが参照するすべてのイメージをエクスポートおよびインポートできるようにするコントロールを用意しています。一度エクスポートされたイメージは、ADFスキン・プロジェクトにインポートし戻す前に、好みのソフトウェア・プログラムを使用して編集できます。同じタブには、個々のイメージを置き換えるためのコントロールが用意されています。最後に、ADFスキンがFusion Simpleから拡張された場合にはイメージ・タブが表示されます。このタブには、ADFスキン内のイメージを編集するためのコントロールが用意されています。イメージ・エディタの詳細は、第6.5項「イメージ・エディタの使用」を参照してください。

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

5. 必要に応じて、ADFスキンでテーマを編集または作成します。テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。詳細は、第5.6項「ADF Facesコンポーネントへのテーマの適用」を参照してください。

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

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

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

1.3 ADFスキンの考察

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

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

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

例1-1 ADFスキン・プロパティおよびCSSプロパティを含む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);
}

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

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

図1-3に、ADFスキンでアプリケーションのページの外観に及ぼすことができる影響を示します。左側のページは、skyros ADFスキンを使用してレンダリングされます。右側のページは、simple ADFスキンを使用してレンダリングされます。各ADFスキンでは、色とフォントの値が定義されます。skyros ADFスキンでは、Oracleロゴのイメージの参照に加えて、より多くの色が使用されます。

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

注意:

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

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

Oracle ADFによって提供される数多くのADFスキン・ファミリは、アプリケーションで使用したり、ADFスキンを作成するときに拡張できます。Oracle ADFで提供されるADFスキンによって、実行時にADF FacesおよびADFデータ視覚化コンポーネントによってレンダリングされる外観を、より高いレベルでカスタマイズできるようになります。図1-4には様々なADFスキン・ファミリ間の継承関係が示されており、たとえば、fusion-base ADFスキンは、追加のスタイル・プロパティの定義に加えて、simple ADFスキンで定義されたスタイル・プロパティを継承します。simple ADFスキンは他のADFスキンの拡張元であるため、すべてのADF Facesコンポーネントは少なくともこのADFスキンで定義されたスタイルを使用します。simple ADFスキンでは、ADFアプリケーションでレンダリングするためにADF Facesコンポーネントに必要な最小限のスタイル・プロパティを定義します。最小限のカスタマイズでADFスキンを作成するには、simple ADFスキンから拡張してADFスキンを作成します。他のADFスキン・ファミリと比較して変更が容易なものを除いたsimpleADFスキンより、ADFスキンをさらにカスタマイズするには、SkyrosまたはFusion Simpleファミリから拡張することを検討します。デザイン・エディタは、ADFスキン・ファミリから拡張した場合に使用できます。このエディタには、ADFスキンを変更するためのコントロール(カラー・ピッカーなど)および変更の効果をすぐに表示できるサンプル・ページが用意されています。

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

図1-4のいずれかのADFスキン(fusionおよびfusion-simpleスキンを除く)または独自に作成したADFスキンをアプリケーションに適用できます。ADFスキンのアプリケーションへの適用の詳細は、第11.4項「WebアプリケーションへのADFスキンの適用」を参照してください。fusionおよびfusion-simpleスキンは推奨されていません。

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

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

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

この章には次の項が含まれます:

- 第2.1項「ADFスキン・セレクタについて」

- 第2.2項「ADFスキニング・フレームワークでの擬似クラス」

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

- 第2.4項「ADFスキン・エディタ内からのセレクタ情報へのアクセス」

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

ADFスキニング・フレームワークは、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズするためにADFスキンで指定できるセレクタの範囲を提供します。グローバル・セレクタおよびコンポーネント固有セレクタという2つのタイプのセレクタがあります。グローバル・セレクタでは、1つ以上のセレクタに適用するスタイル・プロパティを定義します。コンポーネント固有セレクタでは、1つのコンポーネントに適用するスタイル・プロパティを定義します。

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

図2-1 .AFDefaultFontFamily:aliasグローバル・セレクタ別名

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

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

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

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

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

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

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

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

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

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

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

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

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

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

これらのアイコンはまた、ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンから拡張した場合には、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタから起動した「アイコンの置換」ダイアログを使用して表示および変更できます。図2-6に、SkyrosファミリのADFスキンから拡張したADFスキン用に表示されるダイアログを示します。

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

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

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

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

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

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

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

下位セレクタは、空白で区切られた2つ以上のセレクタで構成されています。ADFスキン・セレクタの下位セレクタを構成できます。これらにより、特定のセレクタが別のセレクタ内でレンダリングされる場合のスタイル・プロパティを特定のセレクタに設定できます。下位セレクタを構成すると、図2-8に示すように、セレクタ・エディタでは、下位セレクタが含まれているセレクタの下に下位セレクタ・ノードが表示されます。

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

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

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

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

adfskinselector:pseudo-class

adfskinselector::pseudo-element:pseudo-class

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

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

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

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

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

図2-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は、スキン・アイコンへの適用にも使用できます。詳細は、第6章「ADFスキンのイメージおよび色の使用」を参照してください。

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

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

注意:

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

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

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

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

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

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

- -tr-children-themeプロパティを使用して、子コンポーネントのテーマを構成します。
詳細は、第5.6項「ADF Facesコンポーネントへのテーマの適用」を参照してください。

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

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

例2-1に、この機能を色プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名で背景色を定義し、2つの追加グローバル・セレクタ別名(.fooColorTestPlusおよび.fooColorTestMinus)で、この背景色を適用するときに、+および-の演算子を使用します。

例2-1 +演算子と-演算子による色の適用

.BaseBackgroundColor:alias { background-color: #0099ff; }
.fooColorTestPlus {
-tr-rule-ref: selector(".BaseBackgroundColor:alias");
background-color: +#333333;
}
.fooColorTestMinus {
-tr-rule-ref: selector(".BaseBackgroundColor:alias");
background-color: -#333333;
}

例2-2に、この機能をフォント・プロパティに利用するために記述した構文を示します。1つのグローバル・セレクタ別名でフォント・サイズを定義し、追加のグローバル・セレクタ別名(.fooFont Test)で+演算子を使用してこのフォント・サイズを1ptずつ増やします。

例2-2 +演算子によるフォント・サイズの増加

.FontSizeTest:alias {font-size: 12pt;}
.fooFontTest {
-tr-rule-ref: selector(".FontSizeTest:alias");
font-size:+1pt;
}

2.4 ADFスキン・エディタ内からのセレクタ情報へのアクセス

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

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

- Oracle Fusion Middleware Data Visualization Toolsタグ・リファレンス for Oracle ADFスキン・セレクタ

(スキニングするアプリケーションに関連するリリース)

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

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

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

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

3 ADFスキン・エディタの使用

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

この章には次の項が含まれます:

- 第3.1項「ADFスキン・エディタについて」

- 第3.2項「ADFスキン・デザイン・エディタの使用」

- 第3.3項「ADFスキン・セレクタ・エディタの使用」

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

- 第3.5項「ADFスキンのナビゲート」

- 第3.6項「ADFスキン・エディタのカスタマイズ」

- 第3.7項「ADFスキンのソース・ファイルの検索」

- 第3.8項「拡張機能の使用」

- 第3.9項「ADFスキン・エディタへの外部ツールの追加」

- 第3.10項「ADFスキン・エディタのナビゲート」

- 第3.11項「リソース・ウィンドウの使用」

3.1 ADFスキン・エディタについて

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

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

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

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

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

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

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

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

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

図3-1 ADFデザイン・エディタ

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

ヒント:

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

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

17. テーマのタブでは、サポートされているテーマに加える変更をプレビューできます。
詳細は、第5.6項「ADF Facesコンポーネントへのテーマの適用」を参照してください。

18. イメージ・エディタは、ADFスキンで使用するイメージの管理に役立ちます。このタブは、作成したADFスキンがFusion SimpleファミリのADFスキンから拡張された場合に表示されます。
詳細は、第6.5項「イメージ・エディタの使用」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.5 ADFスキンのナビゲート

ADFスキンを作成するとき、第4.3項「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スキン間の継承関係を図3-9に示します。

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

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

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

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

注意:

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

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

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

図3-8に示すように、skinA ADFスキンから拡張されたskinB ADFスキンはプロパティ値を継承します。

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

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

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

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

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

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

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

3.6 ADFスキン・エディタのカスタマイズ

様々なADFスキン・エディタの機能の外観と機能を変更できます。

3.6.1 ADFスキン・エディタのルック・アンド・フィールを変更する方法

事前定義済の設定を使用してADFスキン・エディタの外観を変更できます。

ADFスキン・エディタのルック・アンド・フィールを変更するには、次のようにします。

1. メイン・メニューから、「ツール」→「プリファレンス」を選択します。詳細は、[F1]を押すか、「プリファレンス」ダイアログ内で「ヘルプ」をクリックしてください。

2. 「プリファレンス」ダイアログで、「環境」ノードが選択されていない場合は選択します。

3. 環境ページで、「ルック・アンド・フィール」リストから別のルック・アンド・フィールを選択します。

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

5. ADFスキン・エディタを再起動します。

注意:

Motifのキー・バインドは、Windowsのキー・バインドとは異なります。Motifでは、矢印キーを使用して選択を変更することはできません。矢印キーを使用すると、先頭のフォーカス・セルが変更されます。項目を選択するには、[Ctrl]+[Space]キーを押す必要があります。これは想定されている動作です。

3.6.2 ADFスキン・エディタの一般的な環境をカスタマイズする方法

デフォルトの表示オプション(ドッキング可能ウィンドウを常に前面に表示するなど)はカスタマイズできます。また、外部で変更されたファイルをADFスキン・エディタで自動的に再ロードするかどうか、ログ・ウィンドウへの出力を自動的にファイルに保存するかどうかなど、その他の一般的な動作もカスタマイズできます。

ADFスキン・エディタの一般的な環境設定を変更するには、次のようにします。

1. メイン・メニューから、「ツール」→「プリファレンス」を選択します。詳細は、[F1]を押すか、「プリファレンス」ダイアログ内で「ヘルプ」をクリックしてください。

2. 「プリファレンス」ダイアログで、「環境」ノードが選択されていない場合は選択します。

3. 環境ページで、必要に応じてオプションを選択し、フィールドの内容を設定します。

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

5. ADFスキン・エディタを再起動します。
ADFスキン・エディタの開始方法の詳細は、Oracle ADFスキン・エディタのインストール (スキニングするアプリケーションに関連するリリース)を参照してください。

3.7 ADFスキンのソース・ファイルの検索

ADFスキン・エディタは、デザインおよびセレクタ・エディタがADFスキン用に生成する構文を表示、編集および検索できるソース・エディタを提供します。

3.7.1 ADFスキンのソース・ファイルを検索する方法

ADFスキンのソース・ファイルは様々な方法で検索できます。

テキストを置換するためのオプションを使用して、現在ソース・エディタで開いているソース・ファイルを検索するには、次のようにします。

1. ソース・エディタでファイルを開いた状態で、エディタにフォーカスがあることを確認します。

2. 検索対象のテキストが簡単に見つかった場合は、オプションでその文字列をハイライト表示できます。

3. メイン・メニューから、「検索」→「検索」を選択します。他の方法として、[Ctrl]を押しながら[F]を押します。

4. 「検索」ダイアログで、検索するテキストを入力、または選択します。
「検索文字列」リストに、ADFスキン・エディタのこのセッションで以前に検索されたテキストが表示されます。

5. 必要に応じて、他の検索パラメータも選択します。
詳細は、[F1]を押すか、ダイアログ内で「ヘルプ」をクリックしてください。

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

開いているソース・ファイル内で1つのテキスト文字列の簡易検索を実行するには、次のようにします。

1. エディタでファイルを開いた状態で、エディタにフォーカスがあることを確認します。

2. ファイル内の検索を開始する位置にカーソルを置きます。

3. メイン・メニューから、「検索」→「次をインクリメンタル検索」または「検索」→「前をインクリメンタル検索」を選択します。

4. ダイアログで、検索テキストを入力します。
入力すると、表示されている文字列の次の出現箇所にカーソルが移動します。

他の方法として、検索ボックスにテキスト文字列を入力します。入力すると、表示されている文字列の次の出現箇所にカーソルが移動します。「前へ」または「次へ」ボタンを使用して、ファイル内を検索します。「大/小文字の区別」、「完全一致」または「一致した文字列を強調表示」を設定するには、検索ボックス内でクリックします。

3.8 拡張機能の使用

拡張機能は、ADFスキン・エディタの起動後にロードされ、統合されるコンポーネントです。拡張機能はエディタにアクセスでき、数多くの有効なタスクを実行できます。既存の拡張機能をADFスキン・エディタに追加できます。

この項では、拡張機能の検索およびインストールに関する情報を提供します。拡張機能を検索およびダウンロードするのに最も容易な方法は、「更新の確認」ウィザードを使用する方法です。

その他の機能(バージョン・コントロール・システムとの統合や、特別なエディタなど)が必要な場合は、ADFスキン・エディタに外部ツールを追加できます。詳細は、第3.9項「ADFスキン・エディタへの外部ツールの追加」を参照してください。

新規の拡張を作成する場合は、Oracle Technology Networkからウェブ・ページからExtension JDKを使用してJDeveloperで行うことができます。完成したADFスキン・エディタへの拡張をダウンロードできます。

注意:

拡張機能が追加または更新されると、その拡張機能に関連する既存の設定を移行する場合に備えて、起動時に移行ダイアログが表示されます。

3.8.1 「更新の確認」を使用して拡張機能をインストールする方法

拡張機能を検索してインストールする最も簡単な方法は、更新の確認ウィザードを使用することです。

更新の確認ウィザードを使用する拡張機能をインストールするには、次のようにします。

1. 「ヘルプ」メニューから「更新の確認」を選択します。

2. ウィザードの手順に従って、パッチと拡張機能を参照、ダウンロードおよびインストールします。

3.9 ADFスキン・エディタへの外部ツールの追加

外部ツールは、システムにインストールされているアプリケーション(ADFスキン・エディタの一部としてパッケージ化されていないアプリケーション)を起動するカスタムADFスキン・エディタのメニュー・アイテムおよびツールバー・ボタンです。

3.9.1 ADFスキン・エディタに外部ツールを追加する方法

「外部ツール」メニューを使用して、ADFスキン・エディタに使用可能な外部ツールを検索し、追加できます。

ADFスキン・エディタで事前にサポートが構成されているすべての外部プログラムを検索するには、次のようにします。

1. メイン・メニューから、「ツール」→「外部ツール」を選択します。

2. 「外部ツール」ダイアログで、「ツールの検索」をクリックします。

ADFスキン・エディタから外部プログラムへのアクセスを追加するには、次のようにします。

1. メイン・メニューから、「ツール」→「外部ツール」を選択します。

2. 「外部ツール」ダイアログで、「新規」をクリックします。ウィザードの指示に従います。

外部プログラムの表示方法を変更する、またはADFスキン・エディタから外部プログラムへのアクセスを削除するには、次のようにします。

1. メイン・メニューから、「ツール」→「外部ツール」を選択します。

2. 「外部ツール」ダイアログで、「編集」または「削除」をクリックします。ADFスキン・エディタから外部ツールのオプション、表示、統合または利用可能性を編集している場合は、対応するタブを選択して、値を変更します。有効な値を選択する方法のヘルプを表示するには、「ヘルプ」をクリックしてください。

3. 「OK」をクリックします。変更がただちに反映されます。

3.10 ADFスキン・エディタのナビゲート

ADFスキン・エディタでのすべての操作は、マウスを使用するのと同様に、キーボードを使用して実行することもできます。

3.10.1 ADFスキン・エディタでのショートカット・キーの使用方法

ADFスキン・エディタには、複数の事前定義済のキーボード・スキームが用意されています。これらの1つを使用するか、処理に割り当てるキーボード・ショートカットを変更し、既存のセットをユーザーのコーディング・スタイルにあわせてカスタマイズすることもできます。

初期設定キーボード・スキームをロードするには、次のようにします。

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

2. 「プリファレンス」ダイアログで、「ショートカット・キー」ノードを選択します。詳細は、[F1]を押すか、「プリファレンス」ダイアログ内で「ヘルプ」をクリックしてください。

3. ショートカット・キー・ページで、「その他のアクション」をクリックし、「キーボード・スキームのロード」を選択します。現在ロードされているキーボード・スキームが強調表示されて「キーボード・スキームのロード」ダイアログが表示されます。

4. 「キーボード・スキームのロード」ダイアログで、ロードするスキームを選択し、「OK」をクリックします。

5. 完了したら、「ショートカット・キー」ページで「OK」をクリックします。

ADFスキン・エディタのコマンドおよび割当て済キーボード・ショートカット(割り当てられている場合)を表示するには、次のようにします。

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

2. 「プリファレンス」ダイアログで、「ショートカット・キー」ノードを選択します。

3. ショートカット・キー・ページで「使用可能なコマンド」の下に、ADFスキン・エディタ・コマンドの完全集合、およびそれぞれに割り当てられているキーボード・ショートカットが(存在する場合)表示されます。特定のコマンドやショートカットを探している場合、あるいは特定カテゴリのコマンドのショートカットのみを確認する場合、「検索」フィールドにフィルタリング式を入力します。

4. 新しいショートカットの定義、または既存ショートカットの変更も可能です。

特定のキーボード・スキーム内のコマンドに対して新規キーボード・ショートカットを定義するには、次のようにします。

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

2. 「プリファレンス」ダイアログで、「ショートカット・キー」ノードを選択します。詳細は、[F1]を押すか、「プリファレンス」ダイアログ内で「ヘルプ」をクリックしてください。

3. ショートカット・キー・ページの、「使用可能なコマンド」の下で、新しいショートカットを定義するコマンドを選択します。

4. このアクションに対して新しいショートカットを定義するには、「新しいショートカット」フィールドにフォーカスを置き、次にキーボードでキーの組合せを押します。
この指定したショートカットがすでにあるコマンドに割り当てられている場合、そのコマンドが「競合」フィールドに表示されます。新しいショートカットが割り当てられると、競合するショートカットはすべて上書きされます。

5. このショートカットを選択したアクションに割り当てるには、「割当て」をクリックします。すでに割り当てられているショートカットを削除するには、ツールバーの「削除」ボタンをクリックします。
コマンドに複数のショートカットを割り当てる場合は、コマンドを選択して「複製」ボタンをクリックします。次に、「新しいショートカット」フィールドにショートカット・キーを入力して「割当て」をクリックします。

6. 終了したら、「OK」をクリックします。

キーボード・スキームをインポートまたはエクスポートするには、次のようにします。

1. 「ツール」メニューから、「ツール」→「プリファレンス」を選択して「プリファレンス」ダイアログを開きます。

2. 「その他のアクション」→「エクスポート」または「インポート」を選択します。キーボード・スキームはXMLファイルとして保存されます。

3.10.2 ADFスキン・エディタでのキーボード・ナビゲーション

選択を含め、マウスで実行できるすべての操作は、キーボードからも実行することができます。ADFスキン・エディタでのすべての操作は、マウスを使用するのと同様に、キーボードを使用して実行することもできます。

ADFスキン・エディタにおけるショートカット・キーの基本セットは、Javaルック・アンド・フィールのガイドラインで定義されているショートカット・キーに基づいています。ADFスキン・エディタで使用可能な各種の事前定義済キーボード・スキームは、この基本セットの上にオーバーレイされます。ルック・アンド・フィールのガイドラインとADFスキン・エディタのキーボード・スキームの両方に同じショートカット・キーが存在する場合は、ADFスキン・エディタのスキームが優先されます。ルック・アンド・フィールのガイドラインで定義されているショートカット・キーがADFスキン・エディタのスキームにない場合は、そのスキームを使用可能にしたときに元のルック・アンド・フィール定義がそのまま使用されます。

したがって、ADFスキン・エディタで使用可能なショートカット・キーは、現在選択しているスキームと、Javaルック・アンド・フィールのガイドラインとの相互関係によって決定されます。ADFスキン・エディタを最初に開くと、デフォルトのスキームが有効になっています。このスキームはいつでも変更可能であり、各スキーム内では、任意のショートカット・キー割当てをカスタマイズできます。別の事前定義済キーボード・スキームが有効化されている場合(または同じスキームがリロードされる場合にも)、スキーム内で作成するカスタマイズ済ショートカットは保持されないことに注意してください。

事前定義済キーボード・スキームのロード、スキームでの現在のショートカット割当ての表示、およびショートカット割当てのカスタマイズを行うには、「プリファレンス」ダイアログを開く必要があります。このダイアログを開くには、メイン・メニューから「ツール」→「プリファレンス」を選択し(または、キーボードで、[Alt]+[T]+[P]を押す)、左側のペインで矢印キーを使用してショートカット・キー・ノードまでナビゲートします。ダイアログの操作の詳細は、そのページで「ヘルプ」をクリックしてください(または、キーボードで[H]を押します)。

3.10.2.1 一般的なナビゲーション・キー

次の表は、ADFスキン・エディタでカーソルを移動する一般的な方法を示します。

表3-1 カーソルを移動する一般的な方法

キー

カーソルの移動

[Ctrl] + カーソルの移動

[←]

1単位分左(1文字など)

比例して大きい1単位分左(単語全体など)

[→]

1単位分右

比例して大きい1単位分右

[↑]

1単位または1行分上

比例して大きい1単位分上

[↓]

1単位または1行分下

比例して大きい1単位分下

[Home]

行の先頭

データの先頭(最上部)

[End]

行の末尾

データの末尾(最下部)

[Tab]

カーソルがテキスト領域またはフィールドにある場合を除いて、次のフィールドまたはコントロール。この場合、コントロールからナビゲートするには、[Ctrl]キーを押しながら[Tab]キーを押す。

水平方向および垂直方向に配置されたフィールドとコントロールの場合、[Tab]キーを押すと、カーソルはまず水平方向に右へ移動し、行の末尾に移動した後、次の行の左へ移動する。

カーソルがテキスト領域またはフィールドにある場合を除いて、次のペイン(ナビゲータ、エディタまたはウィンドウ)。 この場合、コントロールからナビゲートするには、[Ctrl]キーを押しながら[Tab]キーを押す。

[Shift]+[Tab]

前のフィールド

前のタブ位置。プロパティ・シートでは、カーソルが次のページに移動する。

[Enter]

カーソルがコンボ・ボックス、シャトル・ボタンまたは類似のコントロールにある場合を除いて、デフォルトのボタンを選択してハイライト表示する。

注意: デフォルト・ボタンはコントロール間でナビゲートするのに伴って変化します。

該当なし

3.10.2.2 標準コンポーネントでのナビゲーション

この項では、標準ADFスキン・エディタ・コンポーネントでのキーボード・ナビゲーションについて説明します。

ボタン

次の表は、ボタンに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-2 ボタンのキーボード・ナビゲーション

ナビゲーション

キー

ボタンに、またはボタンから進む

[Tab]

ボタンに、またはボタンから戻る

[Shift]+[Tab]

デフォルト・ボタンのアクティブ化(フォーカスがボタンにない場合)

[Enter]

フォーカスがある場合に任意のボタンをアクティブ化

[Enter]、[Space]、またはキーボード・ショートカット(定義されている場合)

ダイアログの「取消」ボタンまたは「閉じる」ボタンをアクティブ化

[Esc]

チェック・ボックス

次の表は、チェック・ボックスに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-3 チェック・ボックスのキーボード・ナビゲーション

ナビゲーション

キー

チェック・ボックスに、またはチェック・ボックスから進む

[Tab]

チェック・ボックスに、またはチェック・ボックスから戻る

[Shift]+[Tab]

選択または選択解除(フォーカスがチェック・ボックスにある場合)

[Space]またはキーボード・ショートカット(定義されている場合)

チェック・ボックスに移動して選択または選択解除(フォーカスがチェック・ボックスにない場合)

キーボード・ショートカット(定義されている場合)

ドロップダウン・リストおよびコンボ・ボックス

次の表は、ドロップダウン・リストおよびコンボ・ボックスに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-4 ドロップダウン・リストおよびコンボ・ボックスのキーボード・ナビゲーション

ナビゲーション

キー

コンボ・ボックスまたはドロップダウンリストに、またはコンボ・ボックスまたはドロップダウンリストから進む

[Tab]またはキーボード・ショートカット(定義されている場合)

コンボ・ボックスまたはドロップダウンリストに、またはコンボ・ボックスまたはドロップダウンリストから戻る

[Shift]+[Tab]

リストを開くまたは閉じる

[Space] (現在の選択範囲にフォーカスがある場合)

リストを開く

開く場合は[↓] (リストの最初の項目にフォーカスがある場合)

リスト内を上または下に移動

[↑]および[↓] (ハイライト表示された値にフォーカスがある場合)

コンボ・ボックスの最初のエントリ内を右および左に移動

[→]および[←]

リスト・アイテムの選択

[Enter]

注意: 最初に[Enter]を押した時、リスト内のアイテムが選択されます。2回目に[Enter]を押した場合、デフォルト・ボタンがアクティブ化されます。

リストを閉じる(ハイライト表示された値が選択されている場合)

[Esc]

リスト・ボックス

次の表は、リスト・ボックスに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-5 リスト・ボックスのキーボード・ナビゲーション

ナビゲーション

キー

前のリストにナビゲートする

[Tab]

次のリストにナビゲートする

[Shift]+[Tab]

選択する

[↑]、[↓]、[Space]または[Enter]

注意: 最初に[Enter]を押した時、リスト内の強調表示されたアイテムが選択されます。2回目に[Enter]を押した場合、デフォルト・ボタンがアクティブ化されます。

リスト内で移動する

[↑]または[↓]

リストの先頭に移動する

[Home]または[Ctrl]+[Home]

リストの末尾に移動する

[End]または[Ctrl]+[End]

全エントリを選択する

[Ctrl]+[A]

項目を切り替える(選択または選択解除する)

[Space]または[Ctrl]+[Space]

現在フォーカスされている項目の選択を解除することなく、リスト内の1つ上の項目を選択する

[Shift]+[↑]

現在フォーカスがある項目を選択解除せずにリスト内の1つ下の項目を選択

[Shift]+[↓]

現在の項目からリストの最上位までの項目をすべて選択

[Shift]+[Home]

現在の項目からリストの最下位までの項目をすべて選択

[Shift]+[End]

現在の項目およびその項目よりも上にある項目をすべて選択する

[Shift]+[Page Up]

現在の項目およびその項目よりも下にある項目をすべて選択する

[Shift]+[Page Down]

他の項目の選択を解除することなく、現在フォーカスされている項目を選択する(隣接していない項目を選択する)

[Ctrl]+[Space]

現在フォーカスされている項目の選択を解除することなく、リスト内をナビゲートする

[Ctrl]+[↑]または[Ctrl]+[↓]

ラジオ・ボタン

表3-6 ラジオ・ボタンのキーボード・ナビゲーション

ナビゲーション

キー

ラジオ・ボタンに、またはラジオ・ボタンから進む

[Tab]

ラジオ・ボタンに、またはラジオ・ボタンから戻る

[Shift]+[Tab]

ラジオ・ボタンから進む

矢印キー

ラジオ・ボタンから戻る

[Shift]+矢印キー

ラジオ・ボタンを選択する

矢印キー(矢印を使用して選択されたラジオ・ボタンに移動)またはキーボード・ショートカット(定義されている場合)

ラジオ・ボタンの選択を解除する

前述のコマンドの1つを使用してグループ内の別のラジオ・ボタンを選択

シャトル

次の表は、シャトルに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-7 シャトルのキーボード・ナビゲーション

ナビゲーション

キー

前のリストにナビゲートする

[Tab]

次のリストにナビゲートする

[Shift]+[Tab]

選択する

[↑]または[↓]

リスト内で移動する

[↑]または[↓]

リストの先頭に移動する

[Home]または[Ctrl]+[Home]

リストの末尾に移動する

[End]または[Ctrl]+[End]

全エントリを選択する

[Ctrl]+[A]

項目を切り替える(選択または選択解除する)

[Space]または[Ctrl]+[Space]

現在フォーカスされている項目の選択を解除することなく、リスト内の1つ上の項目を選択する

現在フォーカスされている項目の選択を解除することなく、リスト内の1つ上の項目を選択する

フォーカスがある項目を選択解除せずにリスト内の1つ下の項目を選択

[Shift]+[↓]

現在の項目からリストの最上位までの項目をすべて選択

[Shift]+[Home]

現在の項目からリストの最下位までの項目をすべて選択

[Shift]+[End]

現在の項目およびその項目よりも上にある項目をすべて選択する

[Shift]+[Page Up]

現在の項目およびその項目よりも下にある項目をすべて選択する

[Shift]+[Page Down]

他の項目の選択を解除することなく、現在フォーカスされている項目を選択する(隣接していない項目を選択する)

[Ctrl]+[Space]

現在フォーカスされている項目の選択を解除することなく、リスト内をナビゲートする

[Ctrl]+[↑]または[Ctrl]+[↓]

スライダ

次の表は、スライダに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-8 スライダのキーボード・ナビゲーション

ナビゲーション

キー

スライダに、またはスライダから進む

[Tab]

スライダに、またはスライダから戻る

[Shift]+[Tab]

値を増やす

[↑]または[→]

値を減らす

[←]または[↓]

最小値

[Home]

最大値

[End]

スピン・コントロール

次の表は、スピン・コントロールに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-9 スピン・コントロールのキーボード・ナビゲーション

ナビゲーション

キー

スピン・コントロールに、またはスピン・コントロールから進む

[Tab]

スピン・コントロールに、またはスピン・コントロールから戻る

[Shift]+[Tab]

値を増やす

[↑]、[→]または目的の値を入力

値を減らす

[←]、[↓]または目的の値を入力

最小値

[Home]

最大値

[End]

テキスト・フィールド

次の表は、テキスト・フィールドに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-10 テキスト・フィールドのキーボード・ナビゲーション

ナビゲーション

キー

テキスト・ボックスに、またはテキスト・ボックスから進む

[Tab]またはキーボード・ショートカット(定義されている場合)

テキスト・ボックスに、またはテキスト・ボックスから戻る

[Shift]+[Tab]

テキスト・ボックス内の前/次の文字に移動

[←]または[→]

ボックスの先頭/末尾へ移動

[Home]/[End]

すべてのテキストを選択

[Ctrl]+[A]

すべてのテキストを選択解除

[←]または[→]

現在の項目からその左/右までのすべての項目を選択

[Shift]+[←]、[Shift]+[→]

現在の項目からその先頭/末尾までのすべての項目を選択

[Shift]+[Home]、[Shift]+[End]

現在の項目からその前/次の単語までのすべての項目を選択

[Ctrl]+[Shift]+[←]、[Ctrl]+[Shift]+[→]

選択対象をコピー

[Ctrl]+[C]

選択対象を切り取り

[Ctrl]+[X]

クリップボードから貼り付ける

[Ctrl]+[V]

次の文字を削除

[Delete]

前の文字を削除

[Back Space]

3.10.2.3 複雑なコントロールのナビゲート

この項では、複雑なUIコンポーネントのキーボード・ショートカットについて説明します。

ドッキング可能なウィンドウ

次の表は、ドッキング可能なウィンドウに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-11 ドッキング可能なウィンドウのキーボード・ナビゲーション

ナビゲーション

キー

ドッキング可能なウィンドウに、またはドッキング可能なウィンドウから進む

[Ctrl]+[Tab]

ドッキング可能なウィンドウに、またはドッキング可能なウィンドウから戻る

[Ctrl]+[Shift]+[Tab]

コンテキスト・メニューの表示

[Shift]+[F10]

ドッキング可能なウィンドウ内のタブ間を移動

[Alt]+[Page Down]、[Alt]+[Page Up]

ドロップダウン・リスト、検索フィールド、パネル、ツリー構造(ツリー内の個々の要素を除く)、個々のコンポーネント・ボタンなどの要素間の移動

[Tab]

ドッキング可能なウィンドウの表示を上/下へ移動(スクロールバー)

[↑]、[↓]フォーカスがキャンバスの非表示領域に移動した場合に、ウィンドウの表示をスクロールする。

左/右へ移動(スクロールバー)

[↑]、[↓]フォーカスがキャンバスの非表示領域に移動した場合に、ペインの表示をスクロールする。

データの最初または最後に移動(コンポーネント・ボタン)

[Ctrl]+[Home]、[Ctrl]+[End]

要素を選択

[Enter]または[Space]

キャンバス領域内を左/右へスクロール(ウィンドウの表示は移動しない)

[Ctrl]+[←]/[Ctrl]+[→]

キャンバス領域内を上/下へスクロール(ウィンドウの表示は移動しない)

[Ctrl]+[↑]/[Ctrl]+[↓]

メニュー

コンテキスト・メニューにアクセスするには、[Shift]キーを押しながら[F10]キーを押します。メイン・メニュー・バーからメニューにアクセスするには、メニューのキーボード・ショートカットを使用します。

次の表は、メニュー・バーに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-12 メニューのキーボード・ナビゲーション

ナビゲーション

キー

メニュー・バーに移動

F10

メニュー・バーから移動

[Esc]

メニュー・バーのメニュー間を移動

[→]、[←]

メニュー項目に移動

[↑]、[↓]

メニュー項目から移動

[↑]、[↓]

アイテムのアクティブ化

[Enter]、[Space]、またはキーボード・ショートカット(定義されている場合)

サブメニューを開く

[→]

サブメニューの非表示

[←]または[Esc]

パネル

次の表は、パネルに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-13 パネルのキーボード・ナビゲーション

ナビゲーション

キー

内/外に進む

[Tab]

内/外に戻る

[Shift]+[Tab]

パネルの拡張(ヘッダーにフォーカスがある場合)

[→]

パネルの縮小(ヘッダーにフォーカスがある場合)

[←]

パネル内の移動

[↑]、[↓]

内容からパネル・ヘッダーに移動(リストの最上位の項目にフォーカスがある場合)

[↑]

ヘッダーからパネルの内容に移動(ヘッダーにフォーカスがある場合)

[↓]

表

矢印キーは、矢印の方向にフォーカスを移動しますが、Webウィジェットにフォーカスがある場合を除きます。Webウィジェットにフォーカスがある場合は、[↓]キーまたは[Enter]キーにより、選択リストを開くなどのウィジェット・コントロール処理が開始されます。[Tab]はフォーカスを右に移動し、[Shift]+[Tab]はフォーカスを左に移動します。

次の表は、表に関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-14 表のキーボード・ナビゲーション

ナビゲーション

キー

表に、または表から進む

[Ctrl]+[Tab]

表に、または表から戻る

[Shift]+[Ctrl]+[Tab]

次のセルに移動(最後のセルの場合は次の行に折返し)

[Tab]または[→]

前のセルに移動(第1セルの場合は前の行に折返し)

[Shift]+[Tab]または[←]

開いているセル内のコントロール

[↓]または[Enter]

ブロックを左に移動

[Ctrl]+[Page Up]

ブロックを右に移動

[Ctrl]+[Page Down]

ブロックを上へ移動

[Page Up]

ブロックを下へ移動

[Page Down]

行内の最初のセルに移動

[Home]

行内の最後のセルに移動

[End]

表内の最初のセルに移動

[Ctrl]+[Home]

表内の最後のセルに移動

[Ctrl]+[End]

すべてのセルを選択

[Ctrl]+[A]

現在の選択内容を選択解除(その後、別のものを選択)

任意のナビゲーション・キー

行の選択範囲を拡張

[Shift]+[↑]

列の選択範囲を拡張

[Shift]+[↓]

選択範囲を行の先頭まで拡張

[Shift]+[Home]

選択範囲を行の末尾まで拡張

[Shift]+[End]

選択範囲を列の先頭まで拡張

[Ctrl]+[Shift]+[Home]

選択範囲を列の末尾まで拡張

[Ctrl]+[Shift]+[End]

現在の内容を上書きせずにセルを編集、またはコンボ・ボックス内のドロップダウン・リストを表示

F2

編集前にセルの内容をリセット

[Esc]

タブ

ここでは、ドッキング可能なウィンドウ、ビューまたはダイアログ内に表示されるタブについて説明します。次の表は、ドッキング可能なウィンドウ、ビューおよびダイアログ内のタブに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-15 タブのキーボード・ナビゲーション

ナビゲーション

キー

タブ・コントロールに、またはタブ・コントロールから進む

[Tab]

タブ・コントロールに、またはタブ・コントロールから戻る

[Ctrl]+[Tab]

(コントロール内の)左/右のタブに移動

[←]または[→]

(コントロール内の)上/下のタブに移動

[↑]または[↓]

タブからページに移動

[Ctrl]+[↓]

ページからタブに移動

[Ctrl]+[↑]

ページから前のページに移動(フォーカスがページ内にある場合)

[Ctrl]+[Page Up]

ページから次のページに移動(フォーカスがページ内にある場合)

[Ctrl]+[Page Down]

ツリー

次の表は、ツリーに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-16 ツリーの表ナビゲーション

ナビゲーション

キー

ツリー・コントロールに、またはツリー・コントロールから進む

[Tab]

ツリー・コントロールに、またはツリー・コントロールから戻る

[Shift]+[Tab]

開く(項目に子が含まれる場合)

[→]

閉じる(項目に子が含まれる場合)

[←]

子から親に移動(開いている場合)

[←]

親から子に移動(すでに開いている場合)

[→]

1項目上/下へ移動

[↑]、[↓]

先頭の項目へ移動

[Home]

最後のエントリへ移動

[End]

選択した親のすべての子を選択

[Ctrl]+[A]

現在フォーカスがある項目を選択解除せずに、リスト内の1つ下の項目を選択

[Shift]+[↓]

現在フォーカスがある項目を選択解除せずに、リスト内の1つ上の項目を選択

[Shift]+[↑]

現在の項目からリストの最上位までの項目をすべて選択

[Shift]+[Home]

現在の項目からリストの最下位までの項目をすべて選択

[Shift]+[End]

(隣接していない項目を選択するために)他の項目を選択解除せずに、現在フォーカスが設定されている項目を選択

[Ctrl]+[Space]

現在フォーカスが設定されている項目を選択解除せずにリスト内を移動

[Ctrl]+[↑]/[↓]

ウィザード

次の表は、ウィザードに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-17 ウィザードのキーボード・ナビゲーション

ナビゲーション

キー

ロードマップ上のストップ間またはページ間を移動

[↑]、[↓] (折り返さない)

ウィザード・パネル上のコンポーネント、ウィザード・ナビゲーション・バー・ボタンおよびナビゲーション・パネル間を進む

[Tab]

ウィザード・パネル上のコンポーネント、ウィザード・ナビゲーション・バー・ボタンおよびナビゲーション・パネル間を戻る

[Shift]+[Tab]

ナビゲーション・バーのボタン間を移動

[→]および[←] (折り返さない)

ロードマップ上のストップ間/ウィザード・ページ間を移動

[Ctrl]+[Page Up]および[Ctrl]+[Page Down]

3.10.2.4 特定のコンポーネントでのナビゲーション

この項では、ADFスキン・エディタ固有のUIコンポーネントのキーボード・ショートカットについて説明します。

ダイアログ

次の表は、ダイアログに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-18 ダイアログのキーボード・ナビゲーション

ナビゲーション

キー

選択または変更を行わずにダイアログを閉じる

[Esc]

デフォルト・ボタン(定義されている場合)のアクティブ化

[Enter]

「プロパティ」ウィンドウ

次の表は、「プロパティ」ウィンドウに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-19 「プロパティ」ウィンドウのキーボード・ナビゲーション

ナビゲーション

キー

「プロパティ」ウィンドウに、または「プロパティ」ウィンドウから進む

[Ctrl]+[Tab]

「プロパティ」ウィンドウに、または「プロパティ」ウィンドウから戻る

[Ctrl]+[Shift]+[Tab]

サイド・タブ・グループからページに移動

[Tab]

ページ上の要素間を進むまたは戻る

[Tab]、[Shift]+[Tab]

上/下のタブへ移動(フォーカスがサイド・タブにある場合)

[↑]、[↓]

右または左、上または下のタブへ移動(フォーカスが内部タブ・グループにある場合)

[↑]、[↓]、[→]、[←]

サイド・タブ・グループからページに移動

[Ctrl]+[↓]

ページからサイド・タブ・グループに移動

[Ctrl]+[↑]

上(前)のサイド・タブに移動(フォーカスがページにある場合)

[Ctrl]+[Page Up]

下(次)のサイド・タブに移動(フォーカスがページにある場合)

下(次)のサイド・タブに移動(フォーカスがページにある場合)

セクションを開いて閉じる(フォーカスがセクション・ヘッダーにある場合)

[Enter]

テキスト・エディタ

次の表は、テキスト・エディタのペイン要素に関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-20 テキスト・エディタのキーボード・ナビゲーション

ナビゲーション

キー

エディタの内部または外部を手前に移動

[Ctrl]+[Tab]

エディタの内部または外部を奥に移動

[Ctrl]+[Shift]+[Tab]

前のページに移動

[Alt]+[Page Up]

次のページに移動

[Alt]+[Page Down]

次の表は、テキスト・エディタのテキスト領域またはキャンバス領域に関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-21 テキスト・エディタのキャンバス領域のキーボード・ナビゲーション

ナビゲーション

キー

1行上/下へ移動

[↑]、[↓]

1文字右/左へ移動

[←]、[→]

行の先頭/末尾へ移動

[Home]、[End]

前/次の単語へ移動

[Ctrl]+[←]、[Ctrl]+[→]

テキスト領域の先頭/末尾へ移動

[Ctrl]+[Home]/[Ctrl]+[End]

データの先頭/末尾へ移動

[Ctrl]+[Home]/[Ctrl]+[End]

垂直ブロック1つ分上/下へ移動

[Page Up]/[Page Down]

ブロックを左に移動

[Ctrl]+[Page Up]

ブロックを右に移動

[Ctrl]+[Page Down]

ブロックを上へ拡張

[Shift]+[Page Up]

ブロックを下へ拡張

[Shift]+[Page Down]

ブロックを左へ拡張

[Ctrl]+[Shift]+[Page Up]

ブロックを右へ拡張

[Ctrl]+[Shift]+[Page Down]

すべて選択

[Ctrl]+[A]

すべて選択解除

[↑]、[↓]、[←]、[→]

選択範囲を1行上/下へ拡張

[Shift]+[↑]/[Shift]+[↓]

選択範囲をコンポーネント1つまたは1文字分左/右へ拡張

[Shift]+[←]/[Shift]+[→]

選択範囲を行の先頭/末尾まで拡張

[Shift]+[Home]/[Shift]+[End]

選択範囲をデータの先頭/末尾まで拡張

[Ctrl]+[Shift]+[Home]/[Ctrl]+[Shift]+[End]

選択範囲を垂直ブロック1つ分上/下へ拡張

[Shift]+[Page Up]/[Shift]+[Page Down]

選択範囲を前/次の単語へ拡張

[Ctrl]+[Shift]+[←]/[Ctrl]+[Shift]+[→]

選択範囲をブロック1つ分左/右へ拡張

[Ctrl]+[Shift]+[Page Up]/[Ctrl]+[Shift]+[Page Down]

選択対象をコピー

[Ctrl]+[C]

選択対象を切り取り

[Ctrl]+[X]

選択したテキストの貼付け

[Ctrl]+[V]

グラフィカル・エディタ

次の表は、グラフィカル・エディタに関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-22 グラフィカル・エディタのキーボード・ナビゲーション

ナビゲーション

キー

エディタの内部または外部を手前に移動

[Ctrl]+[Tab]

エディタの内部または外部を奥に移動

[Ctrl]+[Shift]+[Tab]

前のページに移動

[Alt]+[Page Up]

次のページに移動

[Alt]+[Page Down]

次の表は、グラフィカル・エディタのキャンバス領域に関するナビゲーション・タスクを実行するためのキーボード操作を示します。

表3-23 グラフィカル・エディタのキャンバス領域のキーボード・ナビゲーション

ナビゲーション

キー

エディタ領域内のフォーカス設定可能な次の要素に移動

[↑]、[↓]、[←]、[→]

要素の選択

[Space]

コンテキスト・メニューのアクティブ化

[Shift]+[F10]

3.11 リソース・ウィンドウの使用

「リソース」ウィンドウでは、アプリケーション・サーバーやファイル・システムなど様々なリソースへの接続を作成して、別のアプリケーションでその接続からそれらで使用したり、それらを他のユーザーと共有したりできます。

アプリケーションをデザインおよびビルドする場合は、多数のソフトウェア・アセットを検索し、これを使用する必要があります。検索対象は判明していても、検索する場所が不明な場合や、コールする必要のあるアーティファクトが不明な場合があります。アーティファクトの検索場所が判明しており、何をコールするかが判明している場合でも、接続の確立方法が不明な場合もあります。

「リソース」ウィンドウで次のことが可能です。

- IDE接続により、基礎となる様々なリポジトリに保存されているリソースの検索

- カタログでの階層構造のブラウズによるリソースの検索

- リソースの検索および検索対象の保存

- ブラウズ時の表示可能セットを削減するためのリソースのフィルタ

- ビルド中のアプリケーションで検出したリソースの使用

- カタログ定義の共有によるリソースの検出および再利用の促進

「リソース」ウィンドウを開くには次のようにします。

メイン・メニューから、「ウィンドウ」→「ウィンドウを出荷時の設定にリセット」を選択します。

デフォルトでは、「リソース」ウィンドウはADFスキン・エディタウィンドウの右側に表示されます。

「リソース」ウィンドウをリフレッシュするには次のようにします。

- 「リソース」ウィンドウで、「新規作成」をクリックし、「リフレッシュ」を選択します。
または、「リソース」ウィンドウで、「カタログ」パネルまたは「IDE接続」パネル内のオブジェクトのコンテキスト・メニューから「リフレッシュ」を選択します。

3.11.1 IDE接続の処理

ADF Skinエディタで接続を作成する場合に、別のアプリケーションで再利用可能またはユーザー間で共有可能なIDE接続として、またはアプリケーション接続として作成できます。

IDE接続は再利用可能な、グローバル定義された接続であり、「リソース」ウィンドウの「IDE接続」パネルにリストされます。IDE接続を「アプリケーション」ウィンドウにコピーし、アプリケーション内で使用できるようにできます。

IDE接続は、「リソース」ウィンドウの「IDE接続」パネルにリストされます。さらに、特別な接続タイプ・ウィンドウに表示されるタイプの接続もあります。

作成可能な各種接続タイプは、使用可能なテクノロジと拡張機能に応じて決まります。接続を作成できる先を確認するには、「リソース」ウィンドウの 「新規作成」ボタンから「IDE接続」 を選択します。作成可能な特定の接続タイプは、使用可能なテクノロジと拡張機能によって決まります。

「リソース」接続ディスクリプタの定義情報は、ファイル・システムの次の場所にあります。

system-dir/jdeveloper/system12.1.2.n.nn.nn.nn/o.jdeveloper.rescat2.model/connections/connections.xml

IDE接続を作成するには、次のようにします。

1. 「リソース」ウィンドウの「IDE接続」パネルで、「新規作成」ボタンから「IDE接続」を選択します。

2. 作成する接続タイプを選択し、「接続の作成」ダイアログで適切な情報を入力します。作業中に詳細を参照するには、[F1]を押すか、ダイアログ内から「ヘルプ」をクリックします。

「リソース」ウィンドウでの接続の作成後は、接続の詳細は編集できますが、接続名は変更できなくなります。

IDE接続を編集するには、次のようにします。

1. 「リソース」ウィンドウの「IDE接続」パネルで、接続のコンテキスト・メニューから「プロパティ」を選択します。

2. 「接続の編集」ダイアログが開き、そこで接続の詳細を変更できます。詳細は、[F1]を押すか、「接続の編集」ダイアログ内で「ヘルプ」をクリックしてください。

アプリケーションの「リソース」ウィンドウ内の接続を使用できます。

ADFスキン・エディタ内で現在開いているアプリケーションに接続を追加でき、「接続」ノード下で、「アプリケーション」ウィンドウの「アプリケーション・リソース」ペインにリストされます。

接続をアプリケーションに追加するには、次のようにします。

「リソース」ウィンドウの「IDE接続」パネルで、接続のコンテキスト・メニューから「アプリケーションに追加」を選択します。

また、「リソース」ウィンドウからリソースをドラッグし、アプリケーション・ページにドロップします。

または、「リソース」ウィンドウの「IDE接続」をドラッグし、「アプリケーション」ウィンドウの「アプリケーション・リソース」ペインにドロップします。

3.11.2 「リソース」ウィンドウの検索方法

「リソース」ウィンドウを検索するには次の2つの方法があります。

- 標準検索の実行

- ダイアログにパラメータを入力する、拡張検索の実行

また、カタログに動的フォルダを定義できます。フォルダのコンテンツは、フォルダを開いたときに実行される問合せ式によって定義されます。

検索にかかる時間は「リソース」ウィンドウ内のリソースの数、およびリソースへの接続にかかる時間に応じて異なり、その結果は「検索結果」パネルに表示されます。

標準検索を実行する場合、検索は「リソース」ウィンドウのコンテンツ全体で実行され、時間がかかる場合があります。これは、検索中にADFスキン・エディタがリモートのリソースに接続するためです。

標準検索を実行するには、次のようにします。

1. 「リソース」ウィンドウで「検索オプション」ボタンをクリックし、リソースの「名前」、「タイプ」または「説明」のいずれに対して検索を実行するかを選択します。詳細は、[F1]を押すか、「リソース」ウィンドウ内で「ヘルプ」をクリックしてください。

2. フィールドに検索文字列を入力します。たとえば、名前にdepを含むリソースをすべて検索する場合は、ステップ1で「名前」を選択し、depと入力します。文字列depを含むすべてのリソースが検索結果にリストされます。

3. 「検索の開始」ボタンをクリックして検索を開始します。

または、一連の検索条件を指定し検索の開始場所を選択する、拡張検索を実行できます。

拡張検索を実行するには、次の手順を実行します。

1. 「リソース」ウィンドウで、「カタログ」または「IDE接続」パネルのオブジェクトのポップアップ・メニューから「拡張検索」を選択します。詳細は、[F1]を押すか、「拡張検索」ダイアログ内で「ヘルプ」をクリックしてください。

2. 検索を開始する場所を定義します。「検索範囲」から選択するか、「階層の表示」をクリックして、「リソース」ウィンドウのコンテンツを階層リストから選択します。

3. 検索条件を入力して必要なリソースに戻り、「検索」をクリックします。

「検索の停止」ボタンをクリックして、検索の完了前に検索を停止できます。

検索は保存し、再利用できます。検索を再利用するために保存する方法は2通りあります。

- 動的フォルダでは、フォルダのコンテンツは、フォルダを開くときに検索条件に基づいて動的に作成されます。

- 静的フォルダでは、検索の結果が含まれます。

動的フォルダは、カタログで直接作成することもできます。

検索を保存するには、次のようにします。

1. 「リソース」ウィンドウの「検索結果」パネルで、ポップアップ・メニューから「検索の保存」を選択します。

2. 「検索の保存」ダイアログで、次を選択します。

- 動的フォルダを作成するための「検索条件を保存」。

- 結果の静的フォルダを作成する「検索結果の保存」。

詳細は、[F1]を押すか、「リソース」ウィンドウ内で「ヘルプ」をクリックしてください。

3. フォルダの名前を入力します。

4. フォルダを組み込むカタログを、ドロップダウン・リスト、または「階層の表示」をクリックすると表示される階層リストから選択します。

3.11.3 「リソース」ウィンドウ・コンテンツのフィルタリング

フィルタを使用して、カタログ・フォルダのコンテンツを微調整できます。

「カタログ」のコンテンツをフィルタするには、次のようにします。

1. 「リソース」ウィンドウで、「カタログ」パネルまたは「IDE接続」パネルのオブジェクトのポップアップ・メニューから「フィルタ」を選択します。詳細は、[F1]を押すか、「フィルタ」ダイアログ内で「ヘルプ」をクリックしてください。

2. フィルタリングを定義する文字列を入力します。その文字列を含むフォルダのエントリのみが表示されます。

3.11.4 カタログと接続のインポートおよびエクスポート

カタログと接続は、別のユーザーがエクスポートしたリソース・カタログのアーカイブ(.rcx)ファイルのインポートによって共有されます。

カタログをエクスポートするには、次のようにします。

注意:

エクスポートするカタログを選択すると、カタログ内の接続もすべて選択されます。エクスポート前にカタログの選択を解除する場合は、アーカイブ・ファイルに含まない接続の選択も必ず解除します。

1. 「リソース」ウィンドウで、「カタログ」または「IDE接続」パネルのオブジェクトのポップアップ・メニューから「エクスポート」を選択します。

2. 「カタログと接続のエクスポート」ダイアログで、エクスポートするカタログと接続を選択し、エラーの処理方法を決定します。詳細は、[F1]を押すか、「カタログと接続のエクスポート」ダイアログ内で「ヘルプ」をクリックしてください。

カタログをインポートするには、次のようにします。

1. 「リソース」ウィンドウで、(新規)からインポートを選択します。

2. 「カタログと接続のインポート」ダイアログで、リソース・カタログのアーカイブ・ファイル(.rcx)へのパスと名前を指定またはブラウズします。詳細は、[F1]を押すか、「カタログと接続のインポート」ダイアログ内で「ヘルプ」をクリックしてください。

3. インポートするカタログと接続を選択し、エラーの処理方法を決定します。

3.11.5 リソース・ウィンドウ・カタログの使用

カタログは、基礎となる複数のリポジトリからリソースを編成するためのユーザー定義構成です。カタログとそれに関連するフォルダ構成のコンテンツは、個々の開発者が使用できるように設計するか、開発プロジェクトのUIデザイナなど、特定のユーザー・グループを対象とすることができます。

カタログ・フォルダにより、カタログ内のリソースが整理されます。カタログ・フォルダは、ファイル・システム内のファイル、またはWebブラウザのブックマークを整理する場合と同様に使用できます。それぞれのカタログ・フォルダには、次の組合せが含まれます。

- フォルダ

- 問合せによって移入される動的フォルダ

- フォルダまたはサブツリーのコンテンツを微調整するためのフィルタ

3.11.5.1 カタログの作成

カタログで、「リソース」ウィンドウの情報を整理できます。

カタログを作成するには:

1. 「リソース」ウィンドウで、「新規」ボタンから「新規カタログ」を選択します。

2. 「カタログの作成」ダイアログで、カタログの名前を指定します。詳細は、[F1]を押すか、「カタログの作成」ダイアログ内で「ヘルプ」をクリックしてください。

3. (オプション)カタログの説明、およびカタログ管理者の電子メールを入力します。

3.11.5.2 カタログの名前の変更

カタログの名前を変更できます。

カタログの名前を変更するには、次のようにします。

1. 「リソース」ウィンドウで、カタログを右クリックして、ポップアップ・メニューから「名前の変更」を選択します。

2. 「名前の変更」ダイアログで、カタログの新規の名前を指定します。詳細は、[F1]を押すか、「名前の変更」ダイアログで「ヘルプ」をクリックしてください。

3.11.6 カタログ・フォルダの使用

カタログのコンテンツを整理するためのフォルダを作成できます。

3.11.6.1 フォルダの作成方法

カタログ内の情報をフォルダで整理できます。

カタログ・フォルダを作成するには、次のようにします。

1. 「リソース」ウィンドウで、「カタログ」パネルまたは「IDE接続」パネルのカタログのポップアップ・メニューから「新規フォルダ」を選択します。詳細は、[F1]を押すか、「フォルダの作成」ダイアログ内で「ヘルプ」をクリックしてください。

2. フォルダの名前を入力します。

3.11.6.2 動的フォルダの作成方法

動的フォルダでは、カタログ・フォルダにリソースを動的に移入するための便利な方法を提供しています。フォルダのコンテンツは、フォルダを開いたときに実行される問合せ式によって定義されます。問合せ式の結果は、フォルダのコンテンツとして表示されます。

動的フォルダを作成するには、次のようにします。

1. 「リソース」ウィンドウで、「カタログ」パネルまたは「IDE接続」パネルのカタログのポップアップ・メニューから「新規動的フォルダ」を選択します。詳細は、[F1]を押すか、「動的フォルダの作成」ダイアログ内で「ヘルプ」をクリックしてください。

2. フォルダを開いたときに、このフォルダへの移入に使用される検索条件を定義します。

3.11.6.3 カタログへのリソースの追加方法

「カタログ」内のカタログに、「IDE接続」パネルから接続を追加するか、「リソース」ウィンドウの「検索」パネルからリソースを追加できます。

リソースをカタログに追加するには、次のようにします。

1. 「リソース」ウィンドウで、「IDE接続」パネル内の接続または「検索」パネル内の検索結果を右クリックし、コンテキスト・メニューから「カタログに追加」を選択します。

2. 「カタログに追加」ダイアログが開き、カタログのリソース名、およびこれに追加するカタログを指定できます。詳細は、[F1]を押すか、「接続の作成」ダイアログで「ヘルプ」をクリックしてください。

また、「IDE接続」からアイテムをドラッグし、これをカタログまたはカタログ・フォルダにドロップできます。

カタログのアイテムまたはフォルダを選択し、これを同じカタログの別のフォルダ、または別のカタログにドラッグしてカタログを整理できます。

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

この章では、ADFスキン・エディタおよびJDeveloperでADFスキンのソース・ファイルを作成する方法について説明します。また、以前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトをADFスキン・エディタで開く方法、およびADFライブラリのJARファイルからADFスキンをインポートする方法に関する情報も提供しています。

この章には次の項が含まれます:

- 第4.1項「ADFスキンの作成について」

- 第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」

- 第4.3項「ADFスキン・ファイルの作成」

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

- 第4.5項「ADFライブラリJARからのADFスキンのインポート」

- 第4.6項「ADFスキン・エディタ以外で作成されたアプリケーションを開く」

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

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

4.2 ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成

ADFスキン・アプリケーションおよびADFスキン・プロジェクトをADFスキン・エディタで新規作成できます。

4.2.1 ADFスキン・アプリケーションの作成方法

この項では、ADFスキン・アプリケーションとアプリケーションの中のプロジェクトをADFスキン・エディタで作成する方法について説明します。

新規ADFスキン・アプリケーションを作成するには、次のようにします。

1. メイン・メニューから、「ファイル」→「新規」→「ADFスキン・アプリケーション」を選択します。

2. 「ADFスキン・アプリケーションの作成」ダイアログで、名前やディレクトリなど、アプリケーションの詳細を入力します。ウィザードに関するヘルプを表示するには、[F1]を押します。

3. 「次へ」をクリックして「ADFスキン・プロジェクト」ページを開き、ここでADFスキン・プロジェクトの名前および保存先のディレクトリを指定します。

4. 「ターゲット・アプリケーション・リリース」リストで、スキニングするアプリケーションで使用するOracle ADFのリリースを選択します。
ADFスキン・エディタによって、指定したリリースのADFスキン・プロジェクトが適切に構成されます。たとえば、第4.3.1項「ADFスキン・エディタでADFスキンを作成する方法」で説明しているように、ADFスキン・エディタによって、展開可能なADFスキンのリストがフィルタリングされます。ADFスキン・エディタはスキン・セレクタのリストもフィルタリングして、ターゲットにするリリースがサポートするスキン・セレクタのみを表示します。以前のリリースのADFスキン・プロジェクトをターゲットにした場合は、その後のリリースで導入されたスキン・セレクタは表示されません。

5. 作業が完了したら、「終了」をクリックします。

4.2.2 新規ADFスキン・プロジェクトの作成方法

「アプリケーション」ウィンドウを使用して、ADFスキン・アプリケーションの開発中に使用するADFスキン・プロジェクト(ADFスキンのソース・ファイル、イメージおよび関連ファイルのコレクション)を管理します。

新規の空のADFスキン・プロジェクトをADFスキン・アプリケーションで作成できます。

すべてのADFスキン・プロジェクトは、「デフォルト・プロジェクト・プロパティ」ダイアログで指定された設定を継承します。ADFスキン・プロジェクトは、作成するとすぐにアクティブなADFスキン・アプリケーションに追加されます。

新規ADFスキン・プロジェクトを作成するには、次のようにします。

1. 「アプリケーション」ウィンドウで、プロジェクトが表示されるADFスキン・アプリケーションを選択します。

2. 「ファイル」→「新規」→「ADFスキン・プロジェクト」を選択して、「ADFスキン・プロジェクトの作成」ダイアログを開きます。

3. 「ADFスキン・プロジェクトの作成」ダイアログで、名前やディレクトリなど、プロジェクトの詳細を入力します。

4. 「ターゲット・アプリケーション・リリース」リストで、スキニングするアプリケーションで使用するOracle ADFのリリースを選択します。
ADFスキン・エディタによって、指定したリリースのADFスキン・プロジェクトが適切に構成されます。たとえば、第4.3.1項「ADFスキン・エディタでADFスキンを作成する方法」で説明しているように、ADFスキン・エディタによって、展開可能なADFスキンのリストがフィルタリングされます。ADFスキン・エディタはスキン・セレクタのリストもフィルタリングして、ターゲットにするリリースがサポートするスキン・セレクタのみを表示します。以前のリリースのADFスキン・プロジェクトをターゲットにした場合は、その後のリリースで導入されたスキン・セレクタは表示されません。

5. 作業が完了したら、「終了」をクリックします。

新規のADFスキンが「アプリケーション」ウィンドウに表示されます。このプロジェクトは、あらかじめ設定されているデフォルト・プロパティをすべて継承します。プロジェクトのプロパティを変更する場合は、プロジェクト・ノードをダブルクリックするか、右クリックして「プロジェクト・プロパティ」を選択します。

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

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

デフォルトでは、ADFスキン・エディタおよびJDeveloper内のデザインおよびセレクタ・エディタが、org.apache.myfaces.trinidad.desktopレンダー・キット用のADFスキンを作成します。render kitは、ADF Facesコンポーネント・マップを、特定のクライアントに適したコンポーネント・タグにマップする方法を定義します。JDeveloperおよびADFスキン・エディタのソース・エディタを使用して、他のレンダー・キット用のADFスキンを作成できます。たとえば、ハンドヘルド・デバイスでレンダリングされるアプリケーション用のADFスキンを作成する場合、org.apache.myfaces.trinidad.pdaレンダー・キット用のADFスキンを作成できます。詳細は、第12.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。

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

SkyrosまたはFusion SimpleファミリのADFスキンから拡張されたADFスキンを作成する場合、デザイン・エディタを有効にします。このタブは、コントロールを使用して多くの頻繁に使用するセレクタのプロパティをセットできる概要ペインを提供します。作成するADFスキンがFusion SimpleファミリのADFスキンの場合、デザイン・エディタに加えてイメージ・エディタを有効にします。イメージ・エディタは、Fusion SimpleファミリのADFスキンに関連付けられたイメージを管理するための追加機能を提供します。このエディタは、ADFスキンがSkyrosファミリのADFスキンから拡張されている場合は表示されません。イメージ・エディタの使用の詳細は、第6.5項「イメージ・エディタの使用」を参照してください。デザイン・エディタの使用の詳細は、第3.2項「ADFスキン・デザイン・エディタの使用」を参照してください。

4.3.1 ADFスキン・エディタでのADFスキンの作成方法

ADFスキン・エディタでADFスキンを作成できます。

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

1. 「アプリケーション」ウィンドウで、新しいADFスキンを作成するプロジェクトを右クリックし、「新規作成」→「ADFスキン・ファイル」を選択します。

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

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

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

- ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。

入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。

- このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。

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

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

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

注意:

第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、ターゲット・アプリケーション・リリースとして選択した値によって、拡張できるADFスキンのリストが決定されます。

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

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

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

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

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

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

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

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

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

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

- ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。

入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。

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

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

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

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

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

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

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

「ディレクトリ」フィールドで提示されたデフォルト値を受け入れると、拡張子が.cssのファイルが、プロジェクト内のskinsディレクトリのサブディレクトリに生成されます。図4-1に示すように、Fusion SimpleまたはSkyrosファミリのADFスキンを拡張したADFスキンがデザイン・エディタで開きます。

図4-1 デザイン・タブで新規に作成されたADFスキン

図4-2に示すように、ADFスキンをSkyrosまたはFusion SimpleファミリのADFスキン以外から拡張したADFスキンが、セレクタ・エディタで開きます。セレクタ・エディタは、SkyrosまたはFusion SimpleファミリのADFスキンから拡張されたADFスキンを作成した場合にも利用可能です。

図4-2 セレクタ・エディタで新規に作成されたADFスキン

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

例4-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>

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

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

例4-3 新規作成された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スキンを初めて作成すると、図4-2に示すように、リソース・バンドル・ファイル(skinBundle.properties)が生成されます。リソース・バンドルの使用の詳細は、第7章「ADFスキンのテキストの使用」を参照してください。

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

@importルールを使用して、ADFスキン・プロジェクト内の他の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;
}
...

4.5 ADFライブラリJARからのADFスキンのインポート

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

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

4.5.1 ADFライブラリJARからADFスキンをインポートする方法

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

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

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

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

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

4. 終わったら、「OK」をクリックします。

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

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

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

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

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

4.6 ADFスキン・エディタ以外で作成されたアプリケーションを開く

前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトを開くと、ADFスキン・エディタにより、プロジェクトをJDeveloper 12cフォーマットに移行するよう求められます。プロジェクトのコンテンツによっては、ADFスキン・エディタによって、一部の特定ソース・ファイルも移行するよう求められることがあります。プロジェクトをADFスキン・エディタで開いたり、ADFスキン・エディタを使用して移行する前に、プロジェクトのバックアップ・コピーを作成することをお薦めします。

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

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

この章には次の項が含まれます:

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

- 第5.2項「ADF Facesコンポーネントのセレクタの変更」

- 第5.3項「ADFデータ視覚化コンポーネントのセレクタの変更」

- 第5.4項「コンポーネント固有セレクタの変更」

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

- 第5.6項「ADF Facesコンポーネントへのテーマの適用」

- 第5.7項「アクセシビリティのためのADFスキンの設定」

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

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

注意:

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

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

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

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

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

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

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

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

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

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

ADF Facesコンポーネントは、Fusion 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コンポーネントが公開するセレクタの数です。図5-2と図5-3に、buttonコンポーネントを例として、擬似要素とコンポーネントのセレクタを使用してこのコンポーネントの外観をカスタマイズする方法を示します。図5-2に、buttonコンポーネントおよびコンポーネント・アイコンにskyrosスキンを適用した様子を示します。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

注意:

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

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

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

例5-1 列のヘッダー行をスキニングするためのセレクタ値

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

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

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

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

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

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

- :fatal

- :error

- :warning

- :confirmation

- :info

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

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

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

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

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

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

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

ADF Facesコンポーネントのメッセージの設定に関する詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の「ヒント、メッセージおよびヘルプの表示」を参照してください。

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

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

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

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

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

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

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

- fatal

- error

- warning

- confirmation

- info

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

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

セレクタ・エディタは、「プロパティ」ウィンドウでセレクタの擬似クラスに対して指定された値をADFスキンのソース・ファイルに書き込みます。たとえば、af|inputTextセレクタのerror擬似クラスに対して枠線色プロパティの値をRedに設定します。図5-15に、ソース・ファイルとADFスキンのプレビュー・ペインに表示される変更を示します。

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

コンポーネントがエラー・メッセージを表示するときに表示されるスタイル・プロパティを定義する場合は、error擬似クラスを使用します。たとえば、次のように、エラー発生時におけるaf:inputTextコンポーネントのcontent擬似要素の背景色プロパティをRedに設定します。

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

5.6 ADF Facesコンポーネントへのテーマの適用

テーマは、コンポーネント・レベルのルック・アンド・フィールを実装する方法です。テーマの目的は、ページの一部分にある複数のコンポーネント全体で、ルック・アンド・フィールを一貫させることです。テーマは一般的にJSFページ・テンプレートの中で使用し、ある領域に明確な境界を定めたり、アプリケーション内に階層化レイアウトを作成します。たとえば、上部のブランド領域に暗い背景色と明るいテキストが使用され、より明るい背景色のナビゲーション・コンポーネントと、明るい背景色のメイン・コンテンツ領域があるページです。

テーマを設定するコンポーネントにより、子コンポーネントにそのテーマが公開されるため、テーマが継承されます。テーマはaf:documentおよびaf:decorativeBoxコンポーネントによって設定(開始または変更)できます。

Fusion ADFスキンでサポートされるテーマは次のとおりです。

- dark

- medium

- light

- なし(default)

ADFスキンのソース・ファイルに次のような構文を入力して、独自のテーマを作成することもできます。

af|document[theme=UserCreated] {}

図5-16に、ユーザーが作成したテーマに加えて、Fusion ADFスキンによって提供される各テーマのスタイル・プロパティを設定できるタブがセレクタ・エディタでどのようにレンダリングされるかを示します。

図5-16 セレクタ・エディタでのテーマのタブ

図5-17は、各種テーマを比較したものです。

図5-17 テーマのデフォルトの外観

前にリストしたテーマに加えて、af|decorativeBoxセレクタで使用されるもう1つのテーマ(contentBody)を図5-18に示します。af:decorativeBoxコンポーネントは、このテーマに対して定義されているスタイル・プロパティを使用してレンダリングされる唯一のコンポーネントです。

図5-18 decorativeBoxセレクタのテーマ

次の例に示すように、アプリケーションで、テーマをJSFページのaf:documentコンポーネントの属性として指定することで開始します。

<af:document theme="dark">
<af:panelTabbed>...</af:panelTabbed>
</af:document>

注意:

テーマをaf:decorativeBoxコンポーネントの属性として指定して開始することもできます。

コンポーネントが親コンポーネントに対する変更を継承しないようにできます。たとえば、af:panelTabbed子コンポーネントがJSFページのaf:document親コンポーネントに定義されているdarkテーマを継承しないようにできます。詳細は、第5.6.3項「コンポーネントが親コンポーネントからテーマを継承しないようにする方法」を参照してください。

デフォルトでは、テーマはコンポーネントやその子コンポーネントには設定されていません。テーマは継承されるため、コンポーネントに設定されていないtheme属性がある場合には、次の値がサポートされます。

- 指定なし - テーマが指定されていない場合、<af:decorativeBox>...のようにテーマが継承されます。

- #{null}: 指定なしの場合と同じように、テーマが継承されます。

- inherit - nullの場合と同じように、テーマが継承されます。

- default - テーマは、コンポーネントおよびその子コンポーネントから削除されます。

- 空の文字列 - テーマが空の文字列に設定されている場合は、defaultと同じように動作します。たとえば、<af:decorativeBox theme="">では、コンポーネントおよびその子コンポーネントからテーマが削除されます。

テーマがサポートされ、スタイル・クラスのあるコンポーネントのすべてのHTML要素にテーマが追加されるため、テーマの包含スタイルCSSセレクタは不要です。:ltrおよび:rtlを除いて、すべてのテーマ・セレクタは、必ずセレクタの最後の要素に含まれている必要があります。たとえば、af:breadCrumbsコンポーネントの各ステップにdarkテーマを適用するセレクタは次のとおりです。

af|breadCrumbs::step:disabled[theme="dark"] {
color:#FFFFFF;
}

右から左に表記される環境で同じことを行うには次のセレクタを使用します。

af|breadCrumbs::step:disabled[theme="dark"]:rtl {
color:#FFFFFF;
}

コンポーネントの背景色が、周囲のテーマ色には不適切な色に設定されている場合、色の不適合が起こる場合があります。たとえば、panelHeaderコンポーネントがdarkテーマに配置されている場合、panelHeaderコンポーネント内のCSSスタイルにより、前景色は変更されずに、コンポーネントの背景色が明るい色に設定されます。その結果、コンポーネントは、明るい背景色で明るい前景色になります。その他多くのコンポーネントも、darkテーマに配置されると、前景色が明るい色に設定されます。

色の不適合が発生した場合は、-tr-children-themeプロパティの値を設定して、親コンポーネントと子コンポーネント間の色の不適合を解決できます。親子関係のないコンポーネントの場合は、コンポーネントのテーマ色を、周囲のテーマ色に対して適切な色に手動で設定できます。これを実行するには、コンポーネントにpanelGroupLayoutまたはpanelStretchLayoutコンポーネントを挿入し、panelGroupLayoutまたはpanelStretchLayoutのテーマを適切な色に設定します。

<af:panelHeader text="Header Level 0">
<af:panelGroupLayout layout="vertical" theme="default">
...
</af:panelGroupLayout>
</af:panelHeader>

5.6.1 コンポーネントのテーマを有効にする方法

テーマは、ADFスキンでコンポーネントごとに有効にします。テーマをコンポーネントごとに有効にすると、ADFスキンで使用されない不要なHTML属性が生成されません。

コンポーネント用テーマを有効にするには、次のようにします。

- ソース・エディタで、コンポーネントのセレクタの構文を入力して、ADFスキンでコンポーネントのテーマを有効にします。たとえば、outputLabelコンポーネントのADFスキンにおけるテーマ・サポートを有効にするには、次のように入力します。

af|outputLabel {
-tr-enable-themes: true;
}

5.6.2 ADFスキンでコンポーネントのテーマ・プロパティを設定する方法

コンポーネントのテーマ・プロパティを設定するには、設定するテーマに対応するセレクタ・エディタ内のタブを使用します。

ADFスキンでコンポーネントのテーマ・プロパティを設定するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、テーマ・プロパティを設定するノードを開きます。
「スタイル・クラス」、Facesコンポーネント・セレクタおよびデータ視覚化コンポーネント・セレクタ・ノードの下に表示されるアイテムを設定できます。

2. プロパティを設定するテーマに対応するタブをクリックします。
たとえば、darkテーマのプロパティを設定する場合は、図5-19に示すように、Darkテーマをクリックします。

図5-19 セレクタ・エディタにおけるDarkテーマ

3. 「プロパティ」ウィンドウで、選択したテーマに対して設定するプロパティの値を設定します。
例5-2に、af:panelTabbedコンポーネントのdarkテーマのbackground-colorプロパティをRedに設定した場合にADFスキンのソース・ファイルに表示されるエントリを示します。

例5-2 ADFスキンにおけるコンポーネントのテーマの定義

af|panelTabbed[theme="dark"] {
background-color: Red;
}

5.6.3 コンポーネントが親コンポーネントからテーマを継承しないようにする方法

子コンポーネントがJSFページの親コンポーネントに対する変更を継承しないようにする場合は、ADFスキンのソース・ファイルで-tr-children-themeプロパティの値を設定します。たとえば、af:panelTabbed子コンポーネントがJSFページのaf:document親コンポーネントに定義されているdarkテーマを継承しないようにします。例5-3に示すように、ADFスキンのソース・ファイルで-tr-children-themeプロパティを設定します。

コンポーネントが特定のテーマに対する変更を継承しないようにする場合は、テーマが適用されたバージョンを指定する必要があります。例5-3では、これはdarkテーマです。mediumテーマに対する変更を継承しないようにする場合は、mediumテーマのソース・ファイルで-tr-children-themeプロパティを設定します。

例5-3 子コンポーネントが親コンポーネントからテーマを継承しないようにする設定

af|panelTabbed[theme="dark"] {
-tr-children-theme: default;
}

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

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

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

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

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

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

@accessibility-profile high-contrast {
af|column::sort-ascending-icon {
content: url("/afr/fusion/sort_asc_ena.png");
}
af|column::sort-ascending-icon:hover {
content: url("/afr/fusion/sort_asc_ovr.png");
}
af|column::sort-ascending-icon:active {
content: url("/afr/fusion/sort_asc_selected.png");
}
af|column::sort-descending-icon {
content: url("/afr/fusion/sort_des_ena.png");
}
af|column::sort-descending-icon:hover {
content: url("/afr/fusion/sort_des_ovr.png");
}
af|column::sort-descending-icon:active {
content: url("/afr/fusion/sort_des_selected.png");
}
af|column::sorted-ascending-icon {
content: url("/afr/fusion/sort_asc_selected.png");
}
af|column::sorted-descending-icon {
content: url("/afr/fusion/sort_des_selected.png");
}

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

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

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

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

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

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

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

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

この章には次の項が含まれます:

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

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

- 第6.3項「Skyrosで拡張したADFスキンの色の使用」

- 第6.4項「コンポーネント・セレクタのイメージの変更」

- 第6.5項「イメージ・エディタの使用」

- 第6.6項「ADFスキンへの単純な枠線スタイルの提供」

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

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

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

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

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

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

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

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

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

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

- ADFスキンがFusion Simpleファミリのスキンから拡張されている場合
ADFスキン・エディタによって、イメージ・エディタにコントロールおよびイメージを管理するツールを追加できるようになります。詳細は、第6.5項「イメージ・エディタの使用」を参照してください。

- ADFスキンがFusionまたはSimpleファミリのスキンから拡張されている場合
第6.4項「コンポーネント・セレクタのイメージの変更」で説明しているように、セレクタ・エディタを使用してイメージを変更します。

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

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

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

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

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

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

注意:

ADFスキンがFusion Simpleから拡張したものであれば、「コンポーネント」ボタンおよびそれと関連づけられているコンポーネント・アイコンを置換するダイアログは表示されません。

図6-2に、次の変更を加えた、SkyrosファミリのADFスキンから拡張したADFスキンを示します。

- 「一般」タブで、

注意:

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

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

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

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

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

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

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

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

6.3 Skyrosで拡張したADFスキンの色の使用

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

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

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

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

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

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

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

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

図6-5 派生色に上書きする

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

例6-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;
}

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

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

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

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

.AFButtonGradientEndActiveColor:alias {
color: #ADE6CA;
}

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

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

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

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

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

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

図6-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スキンのプロジェクトにイメージをコピーする必要があります。第6.4.1項「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーできます。

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

ヒント:

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

ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンを拡張している場合、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタでより頻繁に使用されるイメージのいくつかを変更できます。ADFスキンがFusion SimpleファミリのADFスキンを拡張している場合、第6.5項「イメージ・エディタの使用」で説明しているように、イメージ・エディタを使用して複数のイメージを変更できます。

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

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

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

1. セレクタ・エディタのセレクタ・ツリーで、変更するイメージを参照するセレクタを選択します。
たとえば、図6-8に示すように、ADF Faces columnコンポーネントのsort-descending-icon-styleセレクタを選択して、昇順アイコンを変更します。

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

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

図6-9 ADFスキン・プロジェクトにイメージをインポートするための「イメージのコピー」メニュー

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

6.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値が、イメージの新しい場所を参照するよう変更されます。図6-10に例を示します。

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

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

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

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

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

6.5 イメージ・エディタの使用

イメージ・エディタを使用して、ADFスキンのFusion Simpleファミリから拡張されるADFスキンに使用するイメージを管理できます。これは、開いているADFスキンの「イメージ」タブをクリックしてアクセスできます。

注意:

イメージ・エディタの機能を使用するには、そのADFスキンがADFスキンのFusion Simpleファミリから拡張されたものである必要があります。たとえばSkyrosファミリのADFスキンなどの他のスキン・ファミリからスキンを拡張すると、イメージ・エディタを使用できません。

図6-11に、ADFスキンの「イメージ」タブを初めてクリックしたときに表示されるイメージ・エディタを示します。「イメージの生成に次を使用」ドロップダウン・メニューに、次のオプションが表示されます。

- 現在のスキン別名: 現在のADFスキンの「色」カテゴリに表示されるグローバル・セレクタ別名を使用して色指定されたバージョンで開始する場合に選択します。このオプションを選択すると、これらのグローバル・セレクタ別名の値を変更できる「別名色」リストが表示されます。

- 彩度を減じたFusion Simple色: Fusion Simpleスキンの一連のイメージの彩度を減じたバージョンで開始する場合に選択します。

- Fusion Simple色: Fusion Simpleスキンの一連のイメージで開始する場合に選択します。

ヒント:

「イメージの生成に次を使用」ドロップダウン・メニューから「彩度を減じたFusion Simple色」を選択し、「スキンに適用」をクリックする方法は、別のツールで現在のイメージを手動で変更する場合に、現在のイメージをすべて取得するための便利な方法です。

「生成されたイメージ」リストには、「スキンに適用」ボタンをクリックしてADFスキンに適用できるイメージが表示されます。「スキンに適用」ボタンをクリックすると、「生成されたイメージ」リストで選択したイメージが、ADFスキンを保管するプロジェクト内のディレクトリのサブディレクトリである、イメージ・ディレクトリにインポートされます。

図6-11 ADFスキンのイメージ・エディタ

「イメージの生成に次を使用」ドロップダウン・メニューで「現在のスキン別名」を選択したときに表示される「別名色」リストには、レイアウトとアイコンのイメージの色に影響する色別名が表示されます。これらの色別名は、使用可能な色別名のサブセットです。このサブセットに含まれる色別名を変更すると、アプリケーションの外観を大幅に変更できます。図6-12に、これらの色別名を使用するページの部分にラベルが付けられる、アプリケーションのページを示します。たとえば、ブックマーク可能なリンクでは、ユーザーがリンクをクリックすると、.AFLightVisitedLinkForeground色別名が使用されるようになります。

図6-12 色別名を使用するアプリケーションのページ

図6-13に、色別名の使用にラベルが付けられる別の例を示します。

図6-13 色別名を使用するADF Faces表コンポーネント

グローバル・セレクタ別名の「色」カテゴリの詳細は、第8.1項「グローバル・セレクタ別名について」を参照してください。

Oracle Technology Network (OTN) Webサイトでは、ADFスキンの開発プロセスの一部として、色別名リストで色別名を変更する方法を示すオンライン・デモを提供しています。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlにアクセスしてください。

6.5.1 イメージ・エディタを使用したイメージの生成方法

イメージ・エディタを使用してイメージを生成するには、サポートされているいずれかのメソッドを選択し、そのメソッドを使用してADFスキンに変更を適用します。

イメージ・エディタを使用してイメージを生成するには、次のようにします。

1. ADFスキンのFusion Simpleファミリを拡張するADFスキンを作成します。
ADFスキンの作成の詳細は、第4.3項「ADFスキン・ファイルの作成」を参照してください。ADFスキンのFusion Simpleファミリの詳細は、第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。

2. 新しく作成されたADFスキンの「イメージ」タブをクリックします。

3. 「イメージの生成に次を使用」リストからイメージを生成するために使用するメソッドを選択します。

4. 含めるイメージ・タイプに適したオプションを選択します。

- 区分のレイアウト: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。

- アイコン: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。

5. (オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、別名の色リストでエントリの値を変更します。
次のように様々な方法があります。

- 変更するグローバル・セレクタ別名の入力フィールドに16進数コードを直接入力します。

- 「色相/彩度/明度の調整」をクリックして「色相/彩度/明度の調整」ダイアログを起動します。このダイアログで、ADFスキンが使用するすべての色の色相、彩度、明度のレベルを調整できます。

ヒント:

このダイアログを使用して加えた変更は、ADFスキンが使用するすべての色に適用されるため、このダイアログを使用することが新しい色の色相をアプリケーションに適用する近道です。

- 入力フィールドの横にあるドロップダウン・メニューをクリックして、カラー・ピッカーを起動します。カラー・ピッカーで「カスタム」ボタンをクリックして「カスタム・カラーの選択」ダイアログを起動するか、または「デフォルト」ボタンを使用してグローバル・セレクタ別名の値をリセットすることもできます。図6-14に、これらのボタンと、ボタンを最初に表示するドロップダウン・メニューを示します。

図6-14 色別名のオプションの編集

6. (オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、「色の除外」アイコンをクリックして、イメージを生成するときに色別名が使用されないようにできます。図6-15に示すように、「色の除外」アイコンは、色別名にマウス・カーソルを重ねると表示されます。

図6-15 色別名の「色の除外」アイコン

7. 「生成されたイメージ」リストで、ADFスキンに適用するイメージを選択します。「生成されたイメージ」リストのチェック・ボックスを使用して、すべてのイメージを選択または選択を解除するか、1つ以上のイメージを選択します。デフォルトでは、選択されているイメージは、色別名の変更の結果として変更されたイメージです。

注意:

「生成されたイメージ」リストの下部にスクロールし、スキンに適用するすべてのイメージが選択されていることを確認します。

8. 「スキンに適用」をクリックします。

6.5.2 イメージ・エディタを使用してイメージを生成した場合の処理

「生成されたイメージ」リストで選択したイメージ・ファイルがプロジェクトにインポートされます。ADFスキンのソース・ファイルに生成する各イメージにエントリが表示されます。「現在のスキン別名」オプションを使用してイメージを生成することを選択した場合は、「別名色」リストで変更する各グローバル・セレクタ別名にもエントリが表示されます。例6-4に、ADFスキンのソース・ファイルにあるいくつかのエントリを示します。このスキンでは、「現在のスキン別名」オプションを使用し、AFDarkestNeutralBackgroundおよびAFVeryLightBackgroundグローバル・セレクタ別名の値を変更してイメージが生成されています。

例6-4 イメージ生成後のADFスキンのソース・ファイル内のエントリ

af|column::sort-descending-icon-style {
background-image: url("images/generated/META-INF/adf/images/fusion/sort_des_ena.png");
}

af|dvt-map::overview-window-maximize-active-icon {
content: url("images/generated/bi/images/geoMap/panel_close_dwn.png");
}

.AFDarkestNeutralBackground:alias
{
background-color: #00ff00;
}
.AFVeryLightBackground:alias
{
background-color: #00ff00;
}

6.6 ADFスキンへの単純な枠線スタイルの提供

simpleスキンを拡張したADFスキンの単純な枠線スタイルを指定できます。これにより、decorativeBoxコンポーネントやパネル・コンポーネント(panelBoxやpanelAccordion)などのコンポーネントが実行時にレンダリングするセレクタの数が少なくなり、結果としてDOM構造が簡略化されます。

この機能は、リリース11.1.1.7.0以降および12.1.2以降のOracle ADFで使用可能です。デフォルトでは、Skyrosから拡張したSkyrosスキンおよびADFスキンは、単純な枠線スタイルを指定します。ADFスキンがOracle ADFで提供される他のADFスキンの1つから拡張している場合、第12.4章「Oracle ADFで提供されるADFスキン」で説明しているように、trinidad-skins.xmlファイルを設定する必要があります。

ADFスキンを登録したtrinidad-skins.xmlファイルの<feature>要素を設定します。例6-5は、trinidad-skins.xmlファイルのmySkinADFスキンの単純な枠線スタイルを有効にする方法示しています。

例6-5 trinidad-skins.xmlファイルの単純な枠線スタイルを有効にする

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>
mySkin.desktop
</id>
<family>
mySkin
</family>
<extends>simple.desktop</extends>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/mySkin/mySkin.css
</style-sheet-name>
<bundle-name>
myBundle
</bundle-name>
<translation-source></translation-source>
<features>
<feature name="BORDER_STYLE">simple</feature>
</features>
</skin>
</skins>

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

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

この章には次の項が含まれます:

- 第7.1項「ADFスキンのテキストの使用について」

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

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

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

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

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

- af_dialog.LABEL_OK

- af_dialog.LABEL_CANCEL

注意:

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

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

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

リソース・バンドルとリソース文字列の作成およびADF Facesコンポーネントのローカライズの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の「ページの国際化およびローカライズ」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

例7-1 trinidad-skins.xmlでの追加のリソース・バンドルの指定

<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の値として指定したリソース・バンドルを定義したとします。例7-4に、これらの値を使用してラベルをレンダリングするdialogコンポーネントを示します。

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

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

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

この章には次の項が含まれます:

- 第8.1項「グローバル・セレクタ別名について」

- 第8.2項「グローバル・セレクタ別名の作成」

- 第8.3項「グローバル・セレクタ別名の変更」

- 第8.4項「グローバル・セレクタ別名の適用」

- 第8.5項「別のセレクタからのプロパティ値の参照」

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

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

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

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

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

ヒント:

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

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

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

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

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

- コンポーネント・グループ: タブ: タブをレンダリングする数多くのADF Facesコンポーネントのスタイル・プロパティを定義します。たとえば、.AFFormAccessKeyStyle:aliasグローバル・セレクタ別名では、ADF FacesのpanelTabbedコンポーネントとnavigationPaneコンポーネントでレンダリングするアクセス・キーのスタイル・プロパティを定義します。

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

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

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

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

- テキスト: テキストに使用するスタイル・プロパティを定義します。

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

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

注意:

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

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

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

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

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

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

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

.myGlobalSelector:alias

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

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

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

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

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

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

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

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

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

ヒント:

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

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

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

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

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

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

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

例8-1 新規作成されたグローバル・セレクタ別名のCSS構文

.MyLinkHoverColor:alias{
}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

- グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。

- -tr-rule-ref-ADFスキン・プロパティの値としてグローバル・セレクタ別名を設定します。

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

グローバル・セレクタ別名は、-tr-rule-ref-ADFスキン・プロパティの値として指定することで適用します。

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

1. セレクタ・エディタのセレクタ・ツリーで、グローバル・セレクタ別名を適用するアイテムを選択します。
たとえば、図8-7に示すように、グローバル・セレクタ別名で定義したスタイル・プロパティをinputTextコンポーネントのラベルに適用する場合は、そのコンポーネントのcontent擬似要素を選択します。

2. 「プロパティ」ウィンドウで、Commonセクションを開き、次に-tr-rule-ref-フィールドの横の「追加」アイコンをクリックします。

3. グローバル・セレクタ別名の名前を入力します。「値」フィールドに、selectorキーワードを先頭に付け、引用符で囲んだ名前を入力します。
たとえば、グローバル・セレクタ別名の名前が.MyBackgroundColor:aliasである場合は、図8-7で示すようにselector(".MyBackgroundColor:alias")と入力します。

図8-7 inputTextコンポーネントのcontent擬似要素

4. プレビュー・ペインの「リフレッシュ」アイコンをクリックして、変更内容を表示します。

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

グローバル・セレクタ別名を適用したセレクタは、そのグローバル・セレクタ別名で定義されたスタイル・プロパティを継承します。図8-8に、.MyBackgroundColor:aliasグローバル・セレクタ別名で定義されたスタイル・プロパティを継承する、inputTextコンポーネントのセレクタのcontent擬似要素を示します。-tr-rule-refADFスキン・プロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図8-8の「背景色」および「色」フィールドで示されているように、継承アイコンを使用するように更新されます。

実行時に、inputTextコンポーネントのコンテンツ領域は、グローバル・セレクタ別名で定義されたスタイル・プロパティを使用してレンダリングされます。

図8-8 inputTextコンポーネントに適用されたグローバル・セレクタ別名

8.4.3 グローバル・セレクタ別名の適用に関する注意事項

拡張ADFスキンのグローバル・セレクタ別名をオーバーライドした場合、–tr-rule-ref ADFスキン・プロパティを使用して親ADFスキンのスタイル・プロパティの値を判別していたコンポーネント・セレクタは、グローバル・セレクタ別名のオーバーライドされた値を使用するようになります。例8-2に、ADFスキンAを拡張したADFスキンBを示します。実行時に、decorativeBoxコンポーネントの最上部はbackground-color CSSプロパティにより赤でレンダリングされますが、これは、ADFスキンBのグローバル・セレクタ別名によってADFスキンAがオーバーライドされるためです。

例8-2 継承されたグローバル・セレクタ別名のオーバーライド

/** 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スキンの値を適用します。例8-3に、.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")}

例8-3 ローカル・グローバル・セレクタ別名のオーバーライド

/** 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")
}

アプリケーションを実行して、ADFスキニング・フレームワークが実行時にセレクタに適用するスタイル・プロパティ値を特定する場合は、Mozilla Firefoxブラウザ(または類似のブラウザ)のFirebugなどのツールを使用することを検討します。詳細は、第11.2項「ADFスキンの変更のテスト」を参照してください。

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

スタイル・プロパティを適用するセレクタごとに特定のスタイル・プロパティを設定するのではなく、-tr-property-ref ADFスキン・プロパティを使用してプロパティの値を参照できます。このADFスキン・プロパティをグローバル・セレクタ別名およびコンポーネント固有セレクタに対して構成できます。たとえば、グローバル・セレクタ別名でbackground-colorプロパティの値を定義して、他の複数のセレクタからこの値を参照できます。background-colorプロパティの値を後で変更することにした場合は、グローバル・セレクタ別名でこの値を変更します。-tr-property-ref ADFスキン・プロパティを使用してbackground-colorプロパティを参照するすべてのセレクタは、行われた変更を使用するように更新されます。-tr-property-ref ADFスキン・プロパティは、borderなど、compact CSSプロパティで使用することもできます。

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

-tr-property-ref ADFスキン・プロパティを使用して、セレクタに使用するプロパティ値を参照します。

別のセレクタからプロパティ値を参照するには、次のようにします。

1. セレクタ・エディタのセレクタ・ツリーで、別のセレクタからプロパティ値を参照するセレクタを選択します。

たとえば、panelWindowコンポーネントのコンテンツ領域が別のセレクタで定義されたスタイル・プロパティを参照する場合は、図8-9に示すように、panelWindowコンポーネントの擬似要素ノードの下にある「content」を選択します。

図8-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");

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

「プロパティ」ウィンドウでは、図8-10に示すように、-tr-property-ref ADFスキン・プロパティを使用して別のセレクタの値を参照するように値を設定されたプロパティが、その値をどのように継承しているかが示されます。

図8-10 別のセレクタのプロパティ値を参照するセレクタ・プロパティ

例8-4に類似した構文がADFスキンのソース・ファイルに表示されます。

例8-4 -tr-property-ref 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");
}

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

この章では、スタイル・クラスの使用方法について説明します。スタイル・クラスの作成、変更および適用方法に関する情報を提供し、コンポーネントの特定のインスタンスにスタイル・クラスを設定する方法について説明します。

この章には次の項が含まれます:

- 第9.1項「スタイル・クラスについて」

- 第9.2項「スタイル・クラスの作成」

- 第9.3項「スタイル・クラスの変更」

- 第9.4項「コンポーネントの特定のインスタンスに対するスタイル・クラスの設定」

9.1 スタイル・クラスについて

スタイル・クラスを使用すると、ADF FacesまたはADFデータ視覚化コンポーネントの特定のインスタンスに適用するADFスキンの1つの場所で、数多くのスタイル・プロパティを指定できます。スタイル・クラスに対して定義するスタイル・プロパティは、コンポーネントのセレクタに対して定義するスタイル・プロパティよりも優先されます。アプリケーション開発者は、数多くのADF Facesコンポーネントによって公開されるstyleClassおよびinlineStyle属性の値としてスタイル・クラスを指定できます。実行時には、ADFスキンに定義されている他のスタイル・プロパティではなく、スタイル・クラスで定義したスタイル・プロパティがADF Facesコンポーネントに適用されます。スタイル・クラスは、複数のADF Facesコンポーネントに適用するスタイル・プロパティを定義できるグローバル・セレクタ別名(第8章「グローバル・セレクタ別名の使用」を参照)とは異なります。

図9-1に、スタイル・クラスの様々なカテゴリのノードが展開されたADFスキンを示します。

図9-1 スタイル・クラスのカテゴリ

スタイル・クラスの各カテゴリは次の意味を持ちます。

- その他: 拡張ADFスキンから継承されたその他のスタイル・クラス。たとえば、このカテゴリにはブランド・バーのコンテナに使用できる.AFBrandingBarが含まれます。

- ノート・ウィンドウ・セレクタ: noteWindowコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- ポップアップ: popupコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- テキスト: 様々なタイプのテキスト(たとえば、アドレス・フィールドや指示テキストなど)の外観を決定する、拡張ADFスキンから継承されたスタイル・クラス。

ユーザーまたは他のユーザーが定義するスタイル・クラスは、図9-1の.UserDefinedスタイル・クラスのエントリで示されているようにスタイル・クラス・ノードの下に表示されます。Oracle ADFによって提供されるADFスキンの詳細な説明は、Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)を参照してください。

9.2 スタイル・クラスの作成

ADFスキンに新しいスタイル・クラスを作成することも、ADFスキンが拡張元ADFスキンから継承したスタイル・クラスをオーバーライドすることもできます。

スタイル・クラスを作成した後、含めるスタイル・プロパティを定義するように変更します。詳細は、第9.3項「スタイル・クラスの変更」を参照してください。

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

アプリケーション開発者がコンポーネントのstyleClassまたはinlineStyle属性を使用してADF FacesまたはADFデータ視覚化コンポーネントに適用するスタイル・プロパティを定義するスタイル・クラスを作成できます。

スタイル・クラスを作成するには、次のようにします。

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

図9-2 セレクタ・ツリーの「新規スタイル・クラス」オプション

「スタイル・クラスの作成」ダイアログが開きます。

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

- ADFスキンの拡張元ADFスキンからスタイル・プロパティを継承しない新規スタイル・クラスを作成する場合は、新しい名前を入力します。

ヒント:

そのスタイル・クラスが果たす目的を示す名前を入力します。

- ADFスキンの拡張元ADFスキンからスタイル・プロパティを継承し、ADFスキンのスタイル・プロパティをオーバーライドするスタイル・クラスの名前を入力します。

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

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

図9-3に示すように、スタイル・クラスはセレクタ・ツリーのスタイル・クラス・ノードの下に表示され、コンポーネントに適用されるビジュアル表示はプレビュー・ペインに表示されます。

図9-3 新規に作成されたスタイル・クラス

作成したスタイル・クラスのCSS構文は、ADFスキンのソース・ファイルに表示されます。例9-1に、図9-3のADFスキンのソース・ファイルに表示されるエントリを示します。

例9-1 新規に作成されたスタイル・クラスのCSS構文

.OrderOverdue
{
}

9.3 スタイル・クラスの変更

スタイル・クラスを変更するプロセスは、セレクタ・エディタに表示される様々なカテゴリのスタイル・クラスで同じです。セレクタ・ツリーでスタイル・クラスを選択し、プレビュー・ペインのメニューを使用してスタイル・クラスに擬似クラスを追加または削除するか、あるいは、「プロパティ」ウィンドウを使用してスタイル・クラスのスタイル・プロパティを設定またはオーバーライドします。

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

セレクタ・ツリーのスタイル・クラス・ノードの下のスタイル・クラスを選択し、「プロパティ」ウィンドウを使用してそのプロパティを変更します。

スタイル・クラスを変更するには、次のようにします。

1. セレクタ・ツリーで、変更するスタイル・クラスにナビゲートします。

2. 「プロパティ」ウィンドウで、スタイル・クラスに構成するプロパティを変更します。

3. スタイル・クラスを変更した後にプレビュー・ペインを更新するには、「リフレッシュ」アイコンをクリックします。

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

コンポーネントの特定のインスタンスに適用するスタイル・プロパティを定義するスタイル・クラスを定義できます。たとえば、アプリケーション開発者がページ上のコンテンツを表示または非表示にするために使用するpanelBoxコンポーネントについて考察します。panelBoxコンポーネントの複数のインスタンスを1ページにレンダリングできます。図9-4に示すように、panelBoxコンポーネントのデフォルトの背景色をFuchsiaに決定します。

図9-4 panelBoxコンポーネントの背景色の設定

ただし、panelBoxコンポーネントの1つ以上のインスタンスを、エンド・ユーザーがコンポーネントのコンテンツを表示したり非表示にできる公開リンクのコントロールなしでレンダリングすることにしました。さらに、背景色を赤に設定してpanelBoxコンポーネントのこれらのインスタンスのテキストをレンダリングすることに決めました。このために、ADFスキンのスタイル・クラスのスタイル・プロパティを定義します。次に、これらのスタイル・プロパティを使用してレンダリングするpanelBoxコンポーネントのインスタンスごとにstyleClass属性の値としてスタイル・クラスを指定します。例9-2に、前述の結果を得るためにADFスキンのソース・ファイルに表示される構文を示します。

例9-2 ADFスキンのスタイル・クラスの構文

.panelBoxInstanceClass af|panelBox::disclosure-link{display:none;}
.panelBoxInstanceClass af|panelBox::header-text {background-color: Red;}

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

これらのスタイル・クラスを使用してレンダリングするコンポーネントのインスタンスごとに、styleClass属性の値としてスタイル・クラスを指定します。

コンポーネントの特定のインスタンスに対してスタイル・クラスを設定するには、次のようにします。

1. 第9.2項「スタイル・クラスの作成」の説明に従って、スタイル・クラスを作成します。

2. JDeveloperで、コンポーネントのstyleClass属性をステップ1で作成したスタイル・クラスの名前に設定します。
コンポーネントのstyleClass属性の設定の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。

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

実行時に、スタイル・クラスを使用してインスタンス固有のスタイル・プロパティを指定しないコンポーネントのインスタンスは、コンポーネント固有セレクタおよびグローバル・セレクタ別名を使用してレンダリングされます。図9-5は、First Panel Boxラベルが付いたpanelBoxコンポーネントです。スタイル・クラスをstyleClass属性の値として指定するコンポーネントのインスタンスは、そのスタイル・クラスで指定されたスタイル・プロパティを使用してレンダリングされます。図9-5は、Second Panel Boxラベルが付いたpanelBoxコンポーネントです。

図9-5 スタイル・クラスで定義されたスタイル・プロパティによるコンポーネントのレンダリング

10 @ルールの使用

この章では、@ルールの処理方法について説明します。@ルールの作成、変更および適用方法に関する情報を提供し、さらにADFスキニング・フレームワークが定義する様々なタイプの@ルールを説明します。

この章には次の項が含まれます:

- 第10.1項「@ルールについて」

- 第10.2項「@ルールの作成」

10.1 @ルールについて

CSS @ルール(@ルール)は、アプリケーションのページが、ブラウザ、プラットフォームまたはロケールなどの特定の環境でレンダリングされる場合のスタイル・プロパティを定義する方法です。ADFスキニング・フレームワークは、特定の環境に適用するセレクタのプロパティを定義できるいくつかの@ルールを定義します。

たとえば、他のブラウザでは必要ないなんらかのパディングをInternet Explorerで追加する必要がある場合や、Linuxでのフォント・スタイルを他のプラットフォームでのフォント・スタイルとは異なるものにする場合があります。特定のユーザー環境用にセレクタをスタイル設定するには、そのスキニング情報を@ルール内に含めます。

ADFスキン・エディタのセレクタ・エディタおよびJDeveloperのセレクタ・エディタは、第10.2項「@ルールの作成」で説明しているように、ADFスキン内での@ルールの作成をサポートしています。元のADFスキンを拡張したADFスキン内で定義される@ルールまたは元のADFスキン内で定義した@ルールは、図10-4に示すように、@ルール・ノードの下のセレクタ・ツリーに表示されます。

図10-1 セレクタ・ツリーでの@ルール

この章で説明する@ルール以外にも、@import @ルールを使用して別のADFスキンを元のADFスキンにインポートすることもできます。詳細は、第4.4項「1つ以上のADFスキンを現在のADFスキンにインポートする」を参照してください。

10.2 @ルールの作成

ADFスキンに新しい@ルールを作成することも、ADFスキンが拡張元ADFスキンから継承した@ルールをオーバーライドすることもできます。@ルールを作成した後、含めるスタイル・プロパティを定義するように変更します。

表10-1に、ADFスキニング・フレームワークがサポートするいくつかの@ルールを示します。表10-1に示すルール以外に、最も多く使用される@ルールとして、1つ以上のブラウザに適用するスタイルを定義できる@agent @ルールがあります。

ブラウザ・エージェント専用のスタイルを設定するための値としてサポートされているのは次のとおりです。

- blackberry

- email

- gecko

- genericDesktop

- genericpda

- googlebot

- ie

- konqueror

- mozilla

- msnbot

- nokia_s60

- opera

- oracle_ses

- unknown

- webkit (SafariおよびGoogle Chromeにマップします)

@agent @ルールを使用して次のことができます。

- Internet Explorerの任意のバージョンのスタイルを指定する場合は次のようになります。
@agent ie

- オプションで、andキーワードを使用してエージェントの特定のバージョンを指定します。たとえば、Internet Explorerのバージョン9を指定する場合は次のようになります。
@agent ie and (version: 9)

- 複数のエージェントのスタイルを指定する場合は、カンマ区切りリルールを使用します。たとえば、Internet Explorer 8.x、Internet Explorer 9.xまたはGecko 1.9のスタイルを指定する場合は次のルールを使用します。
@agent ie and (version: 8), ie and (version: 9), gecko and (version: 1.9)

- 次の2つの構文例では、同じルールが指定されていることに注意してください。
@agent ie and (version: 8.*)

@agent ie and (version: 8)

Internet Explorer 8.0.xにのみ適用するスタイルのルールを指定する場合は、次のように記述します。

@agent ie and (version: 8.0.x)

- バージョンの範囲を指定するには、max-versionキーワードとmin-versionキーワードを使用します。たとえば、次のルールを再記述できます。
@agent ie and (version: 8), ie and (version: 9)

次のように書き直すことができます。

@agent ie and (min-version: 8) and (max-version: 9)

定義したスタイルをInternet Explorer 8および9のすべてのバージョンに適用します。

@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) @ルールを使用して、タッチ・デバイスにレンダリングさせないスタイルを指定します。たとえば、ADFスキンのFusion Simpleファミリ(fusionFx-simple-v1.2以降)はこの@ルールを、:hover擬似クラスを使用するように構成されたセレクタに適用します。この理由は、:hover擬似クラスがタッチ・デバイスで使用するには適していないためです。@agent (touchScreen:none) @ルールは、:hover擬似クラスを使用するセレクタを、次の例のように折り返します。

@agent (touchScreen:none){

af|breadCrumbs:step:hover{

text-decoration:underline;

}

}

図10-2に、@agent (touchScreen:none) @ルールを適用したセレクタがセレクタ・ツリーに表示される様子を示します。

図10-2 セレクタ・ツリーでの@agent (touchScreen:none) @ルール

タッチ・デバイスにレンダリングするアプリケーションの作成の詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の付録「ADF Facesを使用したタッチ装置のWebアプリケーションの作成」を参照してください。

表10-1 ADFスキンの@ルール

名前

説明

@accessibility-profile

trinidad-config.xmlファイルで有効な場合に、high-contrastおよびlarge-fontsの各アクセシビリティ・プロファイル設定にスタイルを定義します。

@accessibility-profileルールの詳細は、第5.7項「アクセシビリティのためのADFスキンの構成」を参照してください。

@locale

特定の言語および国のみのスタイルを定義するロケールを指定します。言語のみまたは言語と国の両方を指定できます。例10-1に、ロケールがドイツ語(de)である場合にメニュー・バー上のaf:commandMenuItemコンポーネントによってレンダリングされるテキストの色を設定する方法を示します。

ADFスキニング・フレームワークでは、:lang擬似クラスはサポートされていないことに注意してください。

@mode

特定のモードでページがレンダリングされる場合のスタイルを定義します。この@ルールでは次の値がサポートされます。

- quirks

- standards

@platform

プラットフォーム・スタイルを定義します。サポートされている値は次のとおりです。

- android

- blackberry

- genericpda

- iphone

- linux

- macos

- nokia_s60

- ppc (Pocket PC)

- solaris

- unix

- windows

10.2.1 @ルールの作成方法

@ルールで指定した条件に適合した場合に1つ以上のセレクタのスタイル・プロパティが特定の方法でレンダリングされるように指定する@ルールを作成できます。

@ルールを作成する手順は次のとおりです。

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

ヒント:

@ルールを構成するセレクタの名前がわかっている場合は、セレクタ・ツリーでそのセレクタを右クリックし、コンテキスト・メニューの「新規セレクタと@ルール」を選択します。これで「@ルール宣言の作成」ダイアログの「セレクタ」フィールドに、右クリックしたセレクタ名が移入されます。

図10-3 セレクタ・ツリーの「新規セレクタと@ルール」メニュー

2. 「@ルール宣言の作成」ダイアログで、「ルール」ドロップダウン・リストから構成する@ルールを選択します。
サポートされている@ルールの詳細は、第10.2項「@ルールの作成」を参照してください。

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

4. セレクタ・ツリーで新しく作成した@ルールを選択し、「プロパティ」ウィンドウで、この@ルールを適用するプロパティを構成します。

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

図10-4に示すように、@ルールはセレクタ・ツリーの「@ルール」ノードの下に表示され、コンポーネントにそれが適用されるときのビジュアル表示はプレビュー・ペインに表示されます。図10-4に示すように、作成した@ルールおよび変更したすべてのプロパティのCSS構文もADFスキンのソース・ファイルに表示されます。

図10-4 セレクタ・ツリーおよびソース・エディタでの@ルール

図10-5で示すように、@ルールを設定したセレクタ・プロパティの「プロパティ」ウィンドウに、@ルールが設定されたことを示すアイコンが表示されます。

図10-5 プロパティで設定された@ルールが表示された「プロパティ」ウィンドウ

10.2.3 @ルールに関する注意事項

実行時に、ADFスキニング・フレームワークは、エージェントやプラットフォームなどのHTTPリクエスト情報に基づいて@ルール付きのスタイルを選択し、ルールのないスタイルとマージします。ルールと一致するスタイル・プロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。

例10-1に、最終的なスタイルを提供するために一緒にマージされる、ADFスキンのソース・ファイル内のセレクタをいくつか示します。

例10-1 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 8 and 9, we also need some margins.*/
@agent ie( version:8)and( version:9){
af|panelFormLayout {margin: 5px;}
}

/** For Firefox 3 (Gecko 1.9) use a smaller margin.*/
@agent gecko( version:1.9){
af|panelFormLayout {margin: 4px;}
}

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

この章では、ADFスキンが完成した後に行う必要のあるタスクの実行方法について説明します。ADFスキンのテスト方法、完成したADFスキンをADFライブラリJARにパッケージ化する方法、完成したADFスキンが使用されるようにADFアプリケーションを構成する方法についての情報を示します。

この章には次の項が含まれます:

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

- 第11.2項「ADFスキンの変更のテスト」

- 第11.3項「ADFスキンのADFライブラリJARへのパッケージ化」

- 第11.4項「WebアプリケーションへのADFスキンの適用」

- 第11.5項「実行中のWebアプリケーションへのADFスキンの適用」

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

1つ以上のADFスキン・セレクタのスタイルのプロパティを定義するADFスキンを作成した後、ADFスキンに加えた変更をテストできます。ADFスキンの変更のテストを完了し、完成したADFスキンに問題がない場合は、ADFスキンと関連ファイル(イメージ、リソース・バンドルおよび構成ファイル)をADFライブラリJARにパッケージ化して、完成したADFスキンを使用するアプリケーション・プロジェクトに含めるために配布できます。完成したADFスキンの配布が完了したら、そのADFスキンを適用するアプリケーションを構成します。

11.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に設定した場合に、Fusion WebアプリケーションのADFスキンに加えたすべての変更がすぐに表示されるわけではないことに注意してください。アイコンとADFスキンのプロパティに加えた変更を表示するには、Fusion Webアプリケーションを再起動する必要があります。

コンテキスト初期化パラメータの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)の付録「ADF Facesの構成」を参照してください。

図11-1に、(「ADF Faces」ボタンコンポーネント用の)コンポーネント・セレクタの名前が抑制される仕組みを示します。図11-1では、ADFスキンで定義されたスタイル・クラス(fndGlobalSearchCategory)が、buttonコンポーネントのstyleClass属性を使用してこのコンポーネントに適用されています。

図11-1 ADFスキンの圧縮されたCSS

図11-2に、DISABLE_CONTENT_COMPRESSIONパラメータをtrueに設定した場合に、ADF Facesコンポーネントの非圧縮の完全名がブラウザでどのようにレンダリングされるかを示します。図11-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スキン・セレクタをカスタマイズすると、アプリケーションで予期しない動作や一貫性のない動作が発生する場合があります。

図11-2 ADFスキンの非圧縮のCSS

11.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ファイルを閉じます。

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

例11-1に示すように、アプリケーションのweb.xmlファイルにエントリが表示されます。

例11-1 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コンポーネントをレンダリングするFusion Webアプリケーションのページをリフレッシュするとすぐにレンダリングされます。Firebug (ブラウザがMozilla Firefoxの場合)またはGoogle Chromeのデベロッパ・ツールを使用して、実行時にレンダリングされる非圧縮のスタイル・クラス名を表示し、対応するADFスキン・セレクタを確立できます。org.apache.myfaces.trinidad.DISABLE_CONTENT_COMPRESSIONをtrueに設定すると、Fusion Webアプリケーションでパフォーマンス上のコストが発生するため、変更のテストが完了した後は、falseに設定してください。

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

ADFスキンと関連ファイル(たとえば、イメージ・ファイル、構成ファイルおよびリソース・バンドル)をADFライブラリJARにデプロイできます。これにより、アプリケーションにADFスキンを適用するために必要なファイルをパッケージ化できます。次に、アプリケーションにバンドルする場合と比較して、ADFスキンをADFライブラリJARにパッケージ化することの利点を示します。

- アプリケーションとは別に、ADFスキンをデプロイおよび開発できます。これにより、ADFスキンへの変更の適用が必要な場合に、確認するファイル数を減らすこともできます。

- ADFスキンとイメージのソース・ファイルは、それぞれのADFライブラリJARに分けることができます。このため、すべてのアプリケーションにすべてのファイルをデプロイする必要がないように、イメージ・ベースを個別のADFライブラリJARに分けることができます。

- ADFライブラリJARのADFスキンは、第11.5項「実行中のWebアプリケーションへのADFスキンの適用」で説明しているように、再起動を必要とせずに実行中のアプリケーションに適用できます。

11.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ファイルへのデプロイ」をクリックし、「次」をクリックし、「終了」をクリックします。

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

ADFライブラリJARファイルは、デプロイメント・プロファイルによって指定されたディレクトリに書き込まれます。このADFライブラリJARには、ADFスキンのソース・ファイル、trinidad-skins.xmlファイル、イメージ・ファイルおよびリソース文字列を定義するため、またはADF Facesコンポーネントに定義されているデフォルト文字列をオーバーライドするために作成したすべてのリソース・バンドルが含まれます。ADFライブラリJARファイルには、スキニングに関係のないADFスキンのプロジェクトの他のファイルも含まれます。

例11-2に、ADFスキンの次のアイテムを含むプロジェクトのディレクトリ構造を示します。

- trinidad-skins.xmlファイル

- ADFスキン・プロジェクトにコピーされるイメージ・ファイル(sort_des_ena.png)

- ADFスキンのソース・ファイル(skin1.css)

- ADFライブラリJARをプロジェクトにインポートするときにそのコンテンツをインスペクトするために使用する.svaファイル(oracle.adf.common.services.ResourceService.sva)。詳細は、第4.5項「ADFライブラリJARからのADFスキンのインポート」を参照してください。

- デフォルトのリソース・バンドルの文字列をオーバーライドする文字列値を含むリソース・バンドル(skinBundle.properties)
定義する文字列値を含むリソース・バンドルを指定する方法の詳細は、第7.2.1項「ADFスキンに追加のリソース・バンドルを指定する方法」を参照してください。

例11-2 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

ADFライブラリJARに表示されるADFスキン内のイメージのディレクトリ・パスが、ADFスキン・プロジェクトのディレクトリ・パスを含めるように変更されます。例11-3に、行われる変更の例を示します。

例11-3 デプロイされた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");
}

11.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スキンを決定する方法の詳細は、第12.5項「ADFスキンのバージョニング」を参照してください。

エンド・ユーザーがアプリケーションで使用するADFスキンを動的に選択できるように、アプリケーション・ページを構成できます。詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)を参照してください。

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

アプリケーションのtrinidad-config.xmlファイルを変更して、アプリケーションにADFスキンを適用します。このことを行うには、アプリケーションのtrinidad-config.xmlファイルを編集して、使用するADFスキン・ファミリを指定します。または、JDeveloperの「プロジェクト・プロパティ」ダイアログの「ADFビュー」オプションのリストから、ADFスキン・ファミリを選択することもできます。

アプリケーションにADFスキンを適用するには、次のようにします。

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

2. 例11-4に示されているように、ソース・エディタに、<skin-family>要素の値を指定するためのエントリと、オプションで<skin-version>要素の値を書き込みます。

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

例11-4に示されているように、trinidad-config.xmlファイルで、<skin-family>要素とオプションで<skin-version>要素に指定する値は、Fusion Webアプリケーションが実行時に使用するADFスキンを決定します。

例11-4 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>

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

Java Management Extensions (JMX)を使用すると、アプリケーションを再起動することなく、ADFライブラリJARにパッケージ化されたADFスキンをFusion Webアプリケーションに適用できます。これを実行するには、第11.5.1項「更新済ADFスキンを受け入れるようにFusion Webアプリケーションを構成する方法」で説明しているように、Fusion Webアプリケーションのソース・ファイルを構成する必要があります。次に、ADFスキン・エディタを使用してMBeanサーバーに接続し、ADFスキンを含むADFライブラリJARをデプロイします。詳細は、第11.5.2項「ADFライブラリJARをMBeanサーバーにデプロイする方法」を参照してください。これにより、ADFライブラリJARに含まれるすべてのADFスキンがFusion Webアプリケーションで利用できるようになります。

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

アプリケーションがFusion Webアプリケーションを再起動せずにMBeanサーバーがデプロイした新しいADFスキンを適用できるように、JDeveloper内のFusion WebアプリケーションのViewControllerプロジェクトに次の変更を行います。

- アプリケーションのViewControllerプロジェクトの「ADFビュー」ページの「ランタイム・スキン更新の有効化」チェック・ボックスを選択します。

- アプリケーションのクラスパスにADF Faces JMXランタイム11を追加します。

- (オプション)アプリケーションのweb.xmlファイルに、コンテキスト初期化パラメータを追加します。
コンテキスト初期化パラメータによって、アプリケーションのコンテキスト・ルートを使用せずFusion Webアプリケーションを識別するための親しみやすい名前を指定できます。

注意:

Fusion Webアプリケーションは、統合WebLogic Serverでアプリケーションを実行する場合と同様に、展開フォーマットでデプロイする必要があります。

更新されたADFスキンを受け入れるようにWebアプリケーションを構成する手順は次のとおりです。

1. JDeveloperの「アプリケーション」ウィンドウで、ViewController｜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サーバーへのFusion Webアプリケーションを識別するために使用する名前に設定します。

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

ADFスキンをパッケージ化するADFライブラリJARをMBeanサーバーにデプロイします。ADFスキンをADFライブラリJARにパッケージ化するためのADFライブラリJARファイルのデプロイメント・プロファイルを作成する方法の詳細は、第11.3.1項 「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スキン・エディタからの接続用としてデフォルトのWeblogic Serverがあらかじめ選択状態になっています。

- ユーザー名: MBeanサーバーへのアクセスを許可するユーザー名を入力します。

- パスワード: 指定したユーザー名に関連付けるパスワードを入力します。このフィールドに入力する各文字はアスタリスク(*)として表示されます。

- プロトコル: ADFスキン・エディタは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

- サーバー・インストールの場所: サーバー・インストールの場所が表示されます。

- 接続のテスト: クリックすると、接続がテストされます。

- ステータス: 「成功」メッセージは、ADFスキン・エディタがMBeanサーバーに接続できたことを示します。これ以外のメッセージは接続に失敗したことを示します。「接続のテスト」を試す前に少なくとも次の点をチェックする必要あります。

- MBeanサーバーがローカルでない場合にネットワークが正しく動作しているか。

- このダイアログで入力した各値。

5. 「アプリケーション名」 フィールドで、ADFスキンを含むADFライブラリJARをデプロイする必要のあるFusion Webアプリケーションの名前を選択します。「実行中のアプリケーションの検索」をクリックして、使用可能なアプリケーションのリストを検索し、そのアプリケーションが実行中であることを確認します。

第11.5.1項「更新済ADFスキンを受け入れるようにFusion Webアプリケーションを構成する方法」で説明しているように、アプリケーションの名前がoracle.adf.view.rich.SKINNING_MBEAN_NAMEパラメータ用に入力した値となるように指定していなければ、アプリケーションのルート・コンテキストの名前が表示されます。

6. 「次へ」をクリックし、「終了」をクリックします。

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

ADFスキン・エディタは、ADFスキンを含むADFライブラリJARをFusion Webアプリケーションにデプロイします。このADFライブラリJARには、ADFスキンおよび他の関連ファイル(ADFスキンが必要とするイメージなど)が含まれています。ADFライブラリJARのコンテンツの詳細は、第11.3.2項「ADFスキンをADFライブラリJARにパッケージ化した場合の処理」を参照してください。スキン・ファイルはFusion Webアプリケーションのルート・ディレクトリにインストールされます。Fusion Webアプリケーションのtrinidad-skins.xmlファイルは、新しく追加されたADFスキンを参照するよう更新されます。

Fusion Webアプリケーションが、新しく追加されたADFスキンを使用するようにするには、trinidad-config.xmlファイルの<skin-family要素が参照する値を更新する必要があります。これは、第11.4.1項「ADFスキンをアプリケーションに適用する方法」で説明しているように手動で行うか、プログラムでこの値を更新する要素を求めるEL式を指定することで可能です。この後者のオプションの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発 (スキニングするアプリケーションに関連するリリース)の「スタイルおよびスキンを使用した外観のカスタマイズ」に関する項を参照してください。

12 高度なトピック

この章では、ADFスキンのソース・ファイルまたはADFスキンの使用を制御する構成ファイルに変更を加える場合に役立つ情報を示します。また、この章では、Oracle ADFで提供されるADFスキンのリストと説明も示します。

この章には次の項が含まれます:

- 第12.1項「ADFスキンのCSSファイルにおけるURLの参照」

- 第12.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」

- 第12.3項「ADFスキンの構成ファイル」

- 第12.4項「Oracle ADFで提供されるADFスキン」

- 第12.5項「ADFスキンのバージョニング」

12.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のフォーマットが重要になることがあります。詳細は、第11章の「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

12.2 ADFスキニング・フレームワークおよびサポートされているレンダー・キット

ADFスキニング・フレームワークは、次のレンダー・キットについて、ADFスキンの作成をサポートします。

- org.apache.myfaces.trinidad.desktop

- org.apache.myfaces.trinidad.pda

ADFスキン・エディタおよびJDeveloper内のデザインおよびセレクタ・エディタを利用して次のレンダー・キット用のADFスキンを作成できます。

org.apache.myfaces.trinidad.desktop

ADFスキン・エディタまたはJDeveloperでソース・エディタを使用して、次のレンダー・キットにADFスキンを作成できます。

org.apache.myfaces.trinidad.pda

ADF Facesコンポーネントでは、コンポーネントの機能はコンポーネント・クラスに、コンポーネントの表示はレンダラに委任されます。デフォルトでは、ADF Facesのすべてのタグが、関連付けられたコンポーネント・クラスとHTMLレンダラを結合し、HTMLレンダー・キットの一部になっています。ADF Facesには、デスクトップおよびPDAの両方に表示できるように、HTMLレンダー・キットが含まれています。ADF Facesレンダラはカスタマイズできません。ただし、ADFスキンを使用してコンポーネントの表示方法をカスタマイズすることはできます。

12.3 ADFスキンの構成ファイル

次のリストでは、ADFスキンのプロジェクトに関連付けられている構成ファイルについて説明します。ADFスキンの開発中、または開発が終了して完成したADFスキンをアプリケーションに適用するときに、これらのファイルに含まれる値を変更します。

- trinidad-skins.xml
このファイルは、第4.3項「ADFスキン・ファイルの作成」で説明しているように、作成するADFスキンを登録します。例12-1に、表12-1に示されるADFスキンのサンプルから拡張するいくつかのADFスキンを登録する方法を示します。

例12-1 trinidad-skins.xmlファイルへのADFスキンの登録

<!-- Use the following values in the trinidad-skins.xml file if you want to extend the fusionFx-v1.2 skin. -->
<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>fusionFx-v1.2.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>要素を第11.4項「WebアプリケーションへのADFスキンの適用」で説明しているように構成することによって、アプリケーションに対して使用するADFスキンを指定します。表12-1にリストされているADFスキンのいくつかを使用するようWebアプリケーションを構成する方法を示すいくつかの例を、例12-2に示します。

例12-2 ADFスキンを使用するためのアプリケーションのtrinidad-config.xmlファイルの構成

<!-- Use the following value in the trinidad-config.xml file if you want your application to use the fusionFx-simple-v2 skin -->
<skin-family>fusionFx-simple</skin-family>
<skin-version>v2</skin-version>

<!-- Use the following value in the trinidad-config.xml file if you want your application to use the fusionFx-v2.1 skin. -->
<skin-family>fusionFx</skin-family>
<skin-version>v2.1<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
このファイルでコンテキスト初期化パラメータを構成して、第11.2項「ADFスキンの変更のテスト」で説明しているように、ADFスキンの開発およびテストを促進できます。コンテキスト初期化パラメータ(org.apache.myfaces.trinidad.skin.MAX_SKINS_CACHED)を構成して、生成されたCSSファイルに関する情報をメモリーに格納する一意のADFスキン(たとえば、fusionやfusionFx-simple)の最大数を指定することもできます。このコンテキスト初期化パラメータを使用すると、数多くの異なるスキンを使用する場合に、アプリケーションのパフォーマンスを維持するのに役立つ場合があります。

web.xmlファイルおよびコンテキスト初期化パラメータの詳細は、Oracle ADF FacesによるWebユーザー・インタフェースの開発(スキニングするアプリケーションに関連するリリース)のweb.xmlでの構成に関する項を参照してください。

12.4 Oracle ADFで提供されるADFスキン

Oracle ADFでは、様々なADFスキンが提供されており、これらを拡張して、新規ADFスキンを作成できます。表12-1に、これらのADFスキンの違いを示します。第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、「ターゲット・アプリケーション・リリース」プロパティとして選択した値によって、拡張元として利用できるADFスキンが決定されます。表12-1に示されているADFスキンのすべてが利用できるわけではありません。たとえば、11.1.1.4.xを「ターゲット・アプリケーション・リリース」プロパティの値として選択した場合、skyrosスキンは拡張のために利用できません。

ADFスキン作成時に表示される「ADFスキンの作成」ダイアログの「基本スキン」ページは、第4.3項「ADFスキン・ファイルの作成」で説明しているように、ADFスキンの作成対象であるOracle ADFのリリースに基づいて、拡張元として適切なADFスキンを提示します。たとえば、12.1.2.0.xを「ターゲット・アプリケーション・リリース」プロパティの値として選択した場合、推奨される拡張元のADFスキンはskyros-v1.desktopです。

表12-1に示されているすべてのADFスキンをWebアプリケーションに適用できます。詳細は、第12.3項「ADFスキンの構成ファイル」を参照してください。ADFスキン間の継承関係を示すダイアグラムは、第1.4項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。

表12-1 Oracle ADFで提供されるADFスキン

ADFスキン

説明

simple

最小書式設定のみを含みます。

skyros-v1

simpleスキンを拡張します。使用するアプリケーションにカラフルなルック・アンド・フィールを提供します。skyrosスキンでは、イメージの枠線をDOM構造で代替できるようになり、fusionスキンなどより容易に扱えるようになっています。

第6.6項「ADFスキンへの単純な枠線スタイルの提供」で説明しているように、trinidad-skins.xmlファイル内の<feature>要素用に値を設定することにより、non-skyrosスキンでイメージの枠線をDOM構造で代替できるようになり、より容易に扱えます。

fusion-base

simpleスキンを拡張します。ADFスキンのFusionおよびFusion Simpleファミリは、このスキン(たとえば、fusion およびfusionFx-simpleスキン)を拡張します。fusion-baseスキンから拡張しないようお薦めします。

fusion

fusion-baseスキンを拡張します。このスキンは、非常に多くのスタイルを提供します。このスキンは推奨されていません。

fusion-11.1.1.3.0

fusionスキンを拡張します。このスキンにより、特定のコンポーネントに階層構造が作成され、より明瞭なタブのレンダリングを行えます。これらのコンポーネントは、panelTabbed、navigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。

fusionFx-v1

fusion-11.1.1.3.0スキンを拡張します。このスキンには、数多くの問題に対応するためのデザインの改善と変更が含まれています。具体的には、これによって次のものが追加されます。

- 特定のブラウザでインライン・ポップアップが表示されたときに、基礎となるフレームのコンテンツが表示されないようにするため、背景色を.AFMaskingFrameグローバル・スタイル・セレクタにします。

- inputComboboxListOfValuesコンポーネントのための、ブールADFスキン・プロパティ-tr-stretch-dropdown-table。このプロパティは、表の列のコンテンツを表示するためにリスト内の表をストレッチするか、または表の幅をinputComboboxListOfValuesコンポーネント内の入力フィールドの幅に制限するかどうかを指定します。

- inlineFrameコンポーネントは、フレームのコンテンツのロードが完了したことをブラウザが判別するまで、ロード・インジケータとして機能するイメージを表示します。
作成するADFスキンにこの機能を実装できます。af|inlineFrameセレクタにある擬似クラスのbusyとflowを使用すると、このことを行うことができます。inlineFrameコンポーネントが親コンポーネントによってストレッチされない(inlineFrameコンポーネントがフローである)場合にのみ、inlineFrameコンポーネントによってIFrame要素が生成されます。af|inlineFrame:busy:flowを使用して、ロード・インジケータを参照する背景イメージ・スタイルを定義します。親コンポーネントによってinlineFrameコンポーネントがストレッチされる場合、生成されるコンテンツはより複雑になります。この複雑性により、af|inlineFrame::status-iconを使用してコンテンツ・イメージのURLを定義でき、af|inlineFrame::status-icon-styleを使用して、オプションで追加の背景イメージを定義できます。また、これにより、他のコンポーネント・セレクタが使用するイメージを再利用することもできます。たとえば、carouselコンポーネントのaf|carousel::status-iconセレクタとaf|carousel::status-icon-styleセレクタです。スキニング別名を使用して、これらのイメージを再利用します。

次のグローバル・セレクタも、ADFスキンにこの機能を実装している場合に使用できるものとして導入されています。

- .AFBackgroundImageStatus:alias: af|inlineFrame::busy:flowで使用される背景イメージを参照するために使用します。

- .AFStatusIcon:alias: af|carousel::status-iconとaf|inlineFrame::status-iconを参照するために使用します。

- .AFStatusIconStyle:alias: af|carousel::status-icon-styleとaf|inlineFrame::status-icon-styleを参照するために使用します。

リソース・キー(af_inlineFrame.LABEL_FETCHING)は、inlineFrameコンポーネントのロード・アイコンに表示する文字列を定義します。

fusionFx-v1.1

fusionFx-v1スキンを拡張します。これにより、af:tableコンポーネントでQuery-By-Example (QBE)フィルタをクリアする機能にサポートが追加されます。

fusionFx-v1.2

fusionFx-v1.1スキンを拡張します。アプリケーションがタッチ・スクリーン・デバイスでレンダリングされる際の最適化を含め、多数のユーザー・インタフェースの拡張が含まれています。

fusionFx-v1.3

fusionFx-v1.2スキンを拡張します。変更には、af|carouselセレクタ用の新しいスキン・プロパティ(-tr-pop-out-animation-duration)およびいくつかの擬似要素が含まれます。

fusionFx-v2

fusionFx-v1から拡張します。これにより、より明瞭なタブのレンダリングを行う特定のコンポーネントに階層構造が作成されます。これらのコンポーネントは、panelTabbed、navigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。

fusionFx-v2.1

fusionFx-v2から拡張します。アプリケーションがタッチ・スクリーン・デバイスでレンダリングされる際の最適化を含め、多数のユーザー・インタフェースの拡張が含まれています。

fusionFx-v3

fusionFx-v2から拡張します。これには、panelBoxやdecorativeBoxコンポーネントなどのコンテナ型コンポーネント全般にわたって外観を明るく鮮やかにする変更を含む、いくつかの拡張機能が含まれています。

fusionFx-simple-vN.N

fusionFx-simple-vN.Nスキンは、カラー・パレットが簡素化されている点を除いてFusionファミリのADFスキンと同じです。これにより、fusionFx-simple-vN.Nスキンを拡張するADFスキンの色スキームの変更が、FusionファミリのADFスキンを拡張するスキンの色スキームの変更よりも容易になります。fusionFx-simple-vN.Nスキンを拡張するADFスキンで少数の色別名を変更することにより、色スキームを大幅に変更できます。さらに、イメージ・エディタを使用して、fusionFx-simple-vN.Nスキンの1つを拡張するときにADFスキンの色スキームを変更できます。イメージ・エディタの詳細は、第6.5項「イメージ・エディタの使用」を参照してください。

Oracle ADFの12c(12.1.2)では、Fusion SimpleファミリのADFスキンは次のバージョンで使用可能です。

- fusionFx-simple(このスキンは推奨されていません)。

- fusionFx-simple-v1

- fusionFx-simple-v1.1

- fusionFx-simple-v1.2

- fusionFx-simple-v1.3

- fusionFx-simple-v2

- fusionFx-simple-v2.1

- fusionFx-simple-v3

プロジェクタ・スキン

ADF Facesではプロジェクタ・スキンを提供しており、これは、Oracle Technology Network (OTN) Webサイトからダウンロードできます。これらのスキンは、プロジェクタを使用してデモを行う場合のアプリケーションのスタイルを定義します。各プロジェクタ・スキンでは、卓上プロジェクタ(特に古いモデルのプロジェクタ)を使用して表示した場合にアプリケーションが適切にレンダリングされるように、親スキンの複数の要素を変更します。これらのスキンは、プロジェクタと同じ場所にいる人を対象としている場合に役立ちます。これらは、Web会議を介して、オンラインでアプリケーションを表示する場合には適していない場合があります。ADF Facesでは、次のプロジェクタ・スキンが提供されています。

- fusion-projector: このスキンは、プロジェクタでアプリケーションが適切にレンダリングされるように、fusionスキンの複数の要素を変更します。

- fusionFx-v2-projector: このスキンは、プロジェクタでアプリケーションが適切にレンダリングされるように、fusionFx-v2スキンの複数の要素を変更します。

- fusion-11.1.1.3.0-projector: このスキンは、プロジェクタでアプリケーションが適切にレンダリングされるように、fusion-11.1.1.3.0スキンの複数の要素を変更します。

12.5 ADFスキンのバージョニング

<version>要素を使用して、trinidad-skins.xmlファイルでADFスキンのバージョン番号を指定できます。trinidad-skins.xmlファイル内の<family>要素の値が同じであるADFスキンを区別する場合はこのオプション機能を使用します。特定のADFスキンを使用するようにアプリケーションを構成する場合は、第11.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイルで値を指定して行うことに注意してください。

12.5.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スキンがアプリケーションで使用されるようにするには、第11.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、バージョンの挿入のためのダイアログで、デフォルト・リストからtrueを選択します。

4. 名前フィールドに値を入力します。たとえば、ADFスキンの最初のバージョンである場合はv1と入力します。

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

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

例12-3に、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>)。この動作は、第11.4項「ウェブ・アプリケーションへの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スキンを使用します。例12-3において、定義される最後のADFスキンはskin3.desktopです。

例12-3 バージョニングされた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 © 2013, Oracle and/or its affiliates. All rights reserved.