Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド

11g リリース2(11.1.2.2.0)

B66161-02(原本部品番号:E17456-05)

目次

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

はじめに

- 対象読者

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

- 関連ドキュメント

- 表記規則

リリース11.1.2.2.0用のこのガイドでの新しい情報

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

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

- 1.2 様々なリリースのOracle ADFに対するADFスキン・エディタの使用

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

- 1.4 ADFスキンの考察

- 1.5 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 Oracle ADFスキン・エディタの使用

- 3.1 ADFスキン・エディタの概要

- 3.2 セレクタ・ツリーの使用

- 3.3 プロパティ・インスペクタの使用

- 3.4 ADFスキンの元として拡張するADFスキンへのナビゲート

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

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

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

- 3.5.3 ADFスキン・エディタのドッキング可能なウィンドウをカスタマイズする方法

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

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

- 3.7 拡張機能の使用

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

- 3.8 ADFスキン・エディタでの概要エディタの使用

- 3.8.1 ADFスキン・エディタでJSF構成ファイルの概要エディタを使用する方法

- 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 特定のコンポーネントでのナビゲーション

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

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

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

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

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

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

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

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

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

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

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

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

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

- 4.6 ワーキング・セットの管理

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

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

- 4.7.2 ADFライブラリJARから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.5.3 メッセージに適用する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 コンポーネント・セレクタのイメージの変更

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

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

- 6.3 「イメージ」ウィンドウの使用

- 6.3.1 「イメージ」ウィンドウを使用したイメージの生成方法

- 6.3.2 「イメージ」ウィンドウを使用してイメージを生成した場合の処理

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 完成したADFスキンのWebアプリケーションへの適用

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

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

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

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

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

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

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

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

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

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

11 高度なトピック

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

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

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

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

Oracle® Fusion Middleware

Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド

11g リリース2(11.1.2.2.0)

B66161-02(原本部品番号:E17456-05)

2012年4月

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

Oracle Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・ユーザーズ・ガイド 11g リリース2 (11.1.2.2.0)

B66161-02

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

原本著者: Walter Egan

原本協力者: Laura Akel

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

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

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

U.S. GOVERNMENT RIGHTS Programs, software, databases, and related documentation and technical data delivered to U.S. Government customers are "commercial computer software" or "commercial technical data" pursuant to the applicable Federal Acquisition Regulation and agency-specific supplemental regulations.As such, the use, duplication, disclosure, modification, and adaptation shall be subject to the restrictions and license terms set forth in the applicable Government contract, and, to the extent applicable by the terms of the Government contract, the additional rights set forth in FAR 52.227-19, Commercial Computer Software License (December 2007).Oracle America, Inc., 500 Oracle Parkway, Redwood City, CA 94065.

このソフトウェアまたはハードウェアは様々な情報管理アプリケーションでの一般的な使用のために開発されたものです。このソフトウェアまたはハードウェアは、危険が伴うアプリケーション(人的傷害を発生させる可能性があるアプリケーションを含む)への用途を目的として開発されていません。このソフトウェアまたはハードウェアを危険が伴うアプリケーションで使用する際、このソフトウェアまたはハードウェアを安全に使用するために、適切な安全装置、バックアップ、冗長性(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 Application Development Frameworkスキン・エディタ・ユーザーズ・ガイドへようこそ

対象読者

このドキュメントは、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 Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・インストレーション・ガイド

- Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド

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

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

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

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

表記規則

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

規則

意味

太字

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

イタリック体

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

固定幅フォント

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

リリース11.1.2.2.0用のこのガイドでの新しい情報

11g リリース2 (11.1.2.2.0)では、このガイドの多くのことが更新されました。次の表に、追加または変更された項を示します。

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

項

変更内容

第2章「ADFスキン・セレクタの使用」

第2.4項「ADFスキニング・フレームワークでのルール」

@agentルールで提供されるようになったタッチ・スクリーン機能のサポートを説明するために改訂された項。

第6章「ADFスキンのイメージの使用」

第6.3項「「イメージ」ウィンドウの使用」

ADFスキンが使用する色の色相、彩度、明度のレベルを調整できる「色相/彩度/明度の調整」ダイアログについて説明する改訂済の項。

第11章「高度なトピック」

第11.4項「Oracle ADFで提供されるADFスキン」

現在使用可能な追加のADFスキンについて説明する改訂済の項。

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

この章では、Fusion Webアプリケーションに適用するため、または独自のADFスキンの作成を支援するためにOracle ADFによって提供されるスキニング、ADFスキニング・フレームワークおよびADFスキンについて説明します。また、ADFスキン・エディタを使用して様々なリリースのOracle ADFを使用して開発されたアプリケーション用にADFスキンを作成する方法についても説明します。

この章には、次の項があります。

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

- 第1.2項「様々なリリースのOracle ADFに対するADFスキン・エディタの使用」

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

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

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

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

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

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

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

1.2 様々なリリースのOracle ADFに対するADFスキン・エディタの使用

ADFスキン・エディタを使用して、様々なリリースのOracle ADFを使用して開発されたFusion WebアプリケーションのADFスキンを作成できます。「ターゲット・アプリケーション・リリース」ドロップダウン・リストからサポートされているリリースを選択して、ADFスキンを作成するOracle ADFのリリースを選択します。これは、第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」の説明に従ってADFスキン・プロジェクトを作成するときに行います。ADFスキン・エディタによって、「ターゲット・アプリケーション・リリース」ドロップダウン・リストからリリースを選択するとき、選択するOracle ADFリリースへの適切な機能のみがADFスキン・プロジェクトに表示されるようにADFスキン・プロジェクトが構成されます。次に、構成変更の例を示します。

- 拡張できるADFスキンのリストをフィルタリングして、選択したリリースでサポートされているADFスキンのみを表示します。たとえば、11g リリース1 (11.1.1.5.0)のADFスキンを作成する場合、ADFスキン・エディタではfusionFx-v2 ADFスキンは表示されません。これは、このADFスキンが11g リリース2 (11.1.2.2.0)で導入されたためです。

- Oracle ADFの特定のリリースでサポートされていないADFは、セレクタ・ツリーに表示されません。11g リリース2 (11.1.2.2.0)よりも前のリリースをターゲットにする場合、ADFスキン・エディタではADFデータ視覚化テーマ・マップ・コンポーネントのセレクタは表示されません。これは、このコンポーネントが最初に導入されたのが11g リリース2 (11.1.2.2.0)であるためです。

ヒント:

ターゲットにするリリースのタグ参照情報を表示するには、セレクタ・ツリーのセレクタの上で[F1]キーを押します。

11g リリース2 (11.1.2.2.0)においては、Oracle JDeveloperに備えられたビジュアル・エディタで、このリリースを使用して作成されたOracle ADFアプリケーションのADFスキンを作成することもできます。第4.4.2項「JDeveloperでのADFスキンの作成方法」の説明に従って、ADFスキンをFusion Webアプリケーションのプロジェクト内に作成できます。JDeveloperとADFスキン・エディタのビジュアル・エディタでは同じ機能が提供されるため、いずれのビジュアル・エディタでも、このガイドで説明する手順を使用して、タスクを実行できます。

注意:

11g リリース2 (11.1.2.2.0)以前のOracle ADFのリリースを使用して開発されたアプリケーションのADFスキンを作成する場合は、ADFスキン・エディタを使用します。

1.3 ADFスキンの開発の概要

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

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

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

2. ADFスキン・プロパティとCSSプロパティの値を定義します。これらのプロパティの値は、ADF FacesおよびADFデータ視覚化コンポーネントがADFスキニング・フレームワークを介して公開するセレクタを使用して記述できます。
様々なカテゴリのセレクタ、ルールおよび擬似要素の詳細は、第2章「ADFスキン・セレクタの使用」を参照してください。

ADF FacesおよびADFデータ視覚化コンポーネントによって公開されるセレクタの値を定義する方法の詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。

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

ヒント:

第11.4項「Oracle ADFで提供されるADFスキン」で説明されているADFスキンのFusion SimpleファミリからADFスキンを拡張することを選択した場合は、「イメージ」ウィンドウを使用してADFスキンのプロジェクトにイメージをインポートし、編集できます。「イメージ」ウィンドウの詳細は、第6.3項「「イメージ」ウィンドウの使用」を参照してください。

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

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

6. ADFスキンに加えた変更をプレビューおよびテストして、結果が適切であることを確認します。必要に応じてADFスキンを変更します。ADFスキンのプレビューおよびテストの詳細は、第10.2項「ADFスキンの変更のテスト」を参照してください。

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

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

ヒント:

Oracle Technology Network (OTN)で入手可能なChanging an Application's Look and Feel by Using Skinsチュートリアルを実行することを検討してください。このチュートリアルでは、JDeveloperでADFスキンのビジュアル・エディタを使用してADFスキンを作成する手順を段階的に説明しています。このチュートリアルに付属しているサンプル・アプリケーションを使用することもできます。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlにアクセスしてください。

1.4 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スキンのソース・ファイルを読み取り、ADFスキンのエントリをスタイル・クラスに変換し、ADF Facesコンポーネントの生成されたHTML出力に動的に追加します。

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

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

注意:

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

1.5 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スキンのFusionファミリに似ているが、より変更しやすい(使用する色とフォントがより少ないため) ADFスキンを作成する場合は、ADFスキンのFusion Simpleファミリから拡張されるADFスキンの作成を検討してください。

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

注意:

図1-4に示すADFスキンのBlafplusファミリは推奨されていません。

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

Oracle ADFで提供されるADFスキンの詳細は、第11.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スキンでは、ADFデータ視覚化コンポーネントによって継承されるグローバル・セレクタは定義しません。たとえば、多くの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 inputTextコンポーネントのセレクタを示します。このコンポーネントのセレクタ(af|inputText)によって公開されるcontent擬似要素内のCSS background-colorプロパティに、redの値が設定されています。

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

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

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

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

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

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

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

ADFスキン・セレクタは、コンポーネントでレンダリングされるアイコン・イメージを特定する擬似要素に2つのネーミング規則を使用します。これらの擬似要素の名前は、-iconまたはicon-styleで終わります。たとえば、図2-4に示すように、パネル・コレクション・セレクタの擬似要素は-iconで終わります。

図2-4 アイコン・イメージ用のパネル・コレクション擬似要素

これに対し、図2-5で示すように、列セレクタ(af|column)は、-iconおよび-icon-styleで終わる擬似要素を定義します。

図2-5 アイコン用の列擬似要素

図2-5では、sort-ascending-icon-style擬似要素が、列セレクタでの昇順ソート・インジケータに使用されるアイコンをスタイル設定しています。この擬似要素は、背景イメージとしてアイコンを指定します。:hoverおよび:activeの各擬似要素を使用して、外観をカスタマイズします。たとえば、次の構文を記述して、エンド・ユーザーが昇順ソート・インジケータの上にマウスを置くと背景が赤くなるようにします。

af|column::sort-ascending-icon-style:hover
{
background-color: Red;
}

ヒント:

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

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

af|column::sort-ascending-icon-style
{
-tr-inhibit: background-image;
}

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

af|column::sort-ascending-icon
{
content:url("images/arrow-up.jpg");
width: 10px;
height: 10px;
}

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

図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コンポーネントのセレクタを選択し、使用可能な擬似クラスのリストを表示するために「擬似クラスの追加」アイコンをクリックした場合に表示される使用可能な擬似クラスのリストを図2-10に示します。

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

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

図2-11 header-start擬似要素の擬似クラス

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

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

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

- 右から左: ブラウザで言語の読み方向が右から左の際に、スタイルまたはアイコンの定義を設定する場合にこの擬似クラスを使用します。その他の典型的なユース・ケースは非対称のイメージです。読み方向が右から左のイメージを使用するスキン・セレクタを設定する際には、イメージを反転する必要があります。セレクタの最後に:rtl疑似クラスを追加し、反転イメージ・ファイルを指すようにします。たとえば、ブラウザの読み方向が右から左に設定されている場合、panelBoxコンポーネントの最後のイメージは、panelBoxStart.pngファイルになります。右から左のpanelBoxの最後のイメージは、反転された左から右へのpanelBoxの最初のイメージと同じです。

af|panelBox::medium af|panelBox::top-end:rtl {
background-image: url(/skins/purple/images/panelBoxStart.png);
width:8px;
height:8px
}

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

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

- -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スキニング・フレームワークで定義されている数多くのCSS @ルールを使用して、一部のブラウザ、プラットフォーム、ロケールまたは読取り方向にのみ適用するセレクタのプロパティを定義できます。

たとえば、他のブラウザでは必要ないなんらかのパディングをInternet Explorerで追加する必要がある場合や、Windowsでのフォント・スタイルを他のプラットフォームでのフォント・スタイルとは異なるものにする場合があります。特定のユーザー環境用にセレクタをスタイル設定するには、そのスキニング情報をADFスキニング・フレームワーク・ルール内に含めます。ADFスキニング・フレームワークは、エージェントやプラットフォームなどのHTTPリクエスト情報に基づいてスタイルを選択し、ルールのないスタイルとマージします。ルールと一致するCSSプロパティは、すべてのルールに該当しないプロパティとマージされます。ユーザーの環境と最も一致する特定のルールが優先されます。

注意:

ビジュアル・エディタでは、ADFスキンでの次のルールの作成は現在サポートされていません。サポートされているルールを作成および変更するには、ソース・エディタを使用します。

現在、ADFスキニング・フレームワークでは、次のルールがサポートされています。

- @platformを使用してプラットフォーム・スタイルを定義します。
プラットフォーム固有のスタイルの設定用にサポートされている値は、windows、macos、linux、solarisおよびppcです。

- @agentを使用してブラウザ・スタイルを定義します。
ブラウザ・エージェント固有のスタイルの設定用にサポートされている値は、ie、mozilla、gecko、webkit(safariへのマップ)、iceおよびemailです。

- Internet Explorerの任意のバージョンのスタイルを指定する場合は次のようになります。
@agent ie

- オプションで、andキーワードを使用してエージェントの特定のバージョンを指定します。たとえば、Internet Explorerのバージョン7を指定する場合は次のようになります。
@agent ie and (version: 7)

- 複数のエージェントのスタイルを指定する場合は、カンマ区切りリルールを使用します。たとえば、Internet Explorer 6.x、Internet Explorer 7.xまたはGecko 1.9のスタイルを指定する場合は次のルールを使用します。
@agent ie and (version: 6), ie and (version: 7), gecko and (version: 1.9)

- 次の2つの構文例では、同じルールが指定されていることに注意してください。
@agent ie and (version: 7.*)

@agent ie and (version: 7)

Internet Explorer 7.0.xにのみ適用するスタイルのルールを指定する場合は、次のように記述します。

@agent ie and (version: 7.0.x)

- バージョンの範囲を指定するには、max-versionキーワードとmin-versionキーワードを使用します。たとえば、次のルールを再記述できます。
@agent ie and (version: 6), ie and (version: 7)

次のようにします。

@agent ie and (min-version: 6) and (max-version: 7)

定義したスタイルをInternet Explorer 6および7のすべてのバージョンに適用します。

次の例に、WindowsおよびLinuxプラットフォーム上のInternet Explorerバージョン7と8およびバージョン1.9のgeckoに関して、inputTextコンポーネントのコンテンツ領域の色をピンクに設定する方法を示します。

@platform window, linux {
@agent ie and (version: 7) and (version: 8), gecko and (version: 1.9) {
af|inputText::content {background-color:pink
}
}
}

@agentルールを使用して、タッチ・スクリーン・デバイスのエージェントに適用するスタイルを指定することもできます。次の例に、この機能を構成するカスタム・スキン・ファイルに記述する構文を示します。

@agent (touchScreen) {
/* Touchscreen specific styles for all touchscreen devices: both single and multiple touch. */
}

@agent (touchScreen:single) {
/* Styles specific for a touchscreen device with single touch. */
}

@agent (touchScreen:multiple) {
/* Styles specific for a touchscreen with multiple touch. */
}

@agent (touchScreen:none) {
/* Styles that should not render on touchscreen devices. */
}

@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;
}
}

- @import
ADFスキンにインポートできるスタイルを定義している別のADFスキンを指定します。次の例に、ADFスキン(skinA)を現在のADFスキンにインポートする有効な構文を示します。

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

@import文は、2つのADFスキンを現在のADFスキンにインポートする次の例で示しているように、ADFスキン・ファイルの最初のエントリである必要があります。

@import url("skinA.css");
@import url("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;
}
...

- @accessibility-profile
trinidad-config.xmlファイルで有効な場合にhigh-contrastおよびlarge-fontsの各アクセシビリティ・プロファイル設定にスタイルを定義する、@accessibility-profileを定義します。

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

<!-- Enable both high-contrast and large-fonts content -->
<accessibility-profile>high-contrast large-fonts</accessibility-profile>

@accessibility-profileルールの詳細は、第5.7項「アクセシビリティのためのADFスキンの構成」を参照してください。

- @locale
言語のみ、または言語と国両方の特定のロケールを指定する必要があります。これにより、特定の言語および国のみのスタイルが定義されます。例2-3に、ロケールがドイツ語(de)である場合にメニュー・バー上のaf:commandMenuItemコンポーネントによってレンダリングされるテキストの色を設定する方法を示します。

注意:

ADFスキニング・フレームワークでは、:lang擬似クラスはサポートされていません。

例2-3に、最終的なスタイルを提供するために一緒にマージされるCSSファイル内のセレクタをいくつか示します。

例2-3 スタイル・セレクタのマージ

/** 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}
}
}
af|someComponent {color: red; width: 10px; padding: 4px}

/* For 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|someComponent {width: 25px; height: 10px}        }
/* For IE 7 and 8, we also need some margins.*/
@agent ie (version: 7) and (version: 8)
{
af|someComponent {margin: 5px;}
}

/* For Firefox 3 (Gecko 1.9) use a smaller margin.*/
@agent gecko (version: 1.9)\
{
af|someComponent {margin: 4px;}
}

/* The following selectors are for all platforms and all browsers. */
/* rounded corners on the top-start and top-end */
/* shows how to use :rtl mode pseudo-class. The start image in ltr mode is the */
/* same as the end image in the right-to-left mode. */
af|panelBox::medium af|panelBox::top-start,
af|panelBox::medium af|panelBox::top-end:rtl {
background-image: url(/skins/purple/images/panelBoxStart.png);
width:8px;
height:8px
}
/* The following example sets the text color to red when the locale is German (de)*/
@locale de {
af|commandMenuItem::bar-item-text
{
color: Red;
}
}
af|panelBox::medium af|panelBox::top-end,
af|panelBox::medium af|panelBox::top-start:rtl {
background-image: url(/skins/purple/images/panelBoxEnd.png);
height: 8px;
width:  8px;
}

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

この章では、ADFスキンを作成するためのビジュアル・エディタについて説明します。ADFスキンで構成できるアイテムの参照に使用するセレクタ・ツリーや、プロパティの設定に使用するプロパティ・インスペクタなどのこのエディタの主要機能、および拡張するADFスキンにナビゲートする方法についても説明します。

この章には、次の項があります。

- 第3.1項「ADFスキン・エディタの概要」

- 第3.2項「セレクタ・ツリーの使用」

- 第3.3項「プロパティ・インスペクタの使用」

- 第3.4項「ADFスキンの元として拡張するADFスキンへのナビゲート」

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

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

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

- 第3.8項「ADFスキン・エディタでの概要エディタの使用」

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

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

3.1 ADFスキン・エディタの概要

ADFスキン・エディタには、ADFスキンの作成および変更を容易にする様々な機能が用意されています。次のリストでは、ADFスキンの作成時にエディタで使用できる個々の機能について説明します(第4.4項「ADFスキン・ファイルの作成」を参照)。各アイテムには、図3-2に対応するラベル番号があります。

1. アプリケーション・ナビゲータのプロジェクト・ノードには、作成したADFスキンのソース・ファイルが格納されるskinsという名前のノードがあります。第4章「ADFスキンのソース・ファイルの作成」で説明しているように、skinsノードは、最初のADFスキンを作成するまで作成されません。

2. 「構造」ウィンドウには、ADFスキン・ファイルに追加するセレクタ、グローバル・セレクタ別名およびスタイル・クラスが一覧表示されます。
詳細は、第2章「ADFスキン・セレクタの使用」を参照してください。

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

4. すべてのセレクタ(使用可能なセレクタ)を表示する、またはADFスキンで変更したセレクタ(更新済セレクタ)のみを表示するには、セレクタ・ツリーに表示されるセレクタをフィルタします。

5. 「拡張スキン」リストには、現在のADFスキンの拡張元ADFスキンのリストが表示されます。
詳細は、第3.4項「ADFスキンの元として拡張するADFスキンへのナビゲート」を参照してください。

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

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

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

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

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

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

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

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

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

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

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

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

ヒント:

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

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

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

18. 「イメージ」ウィンドウは、ADFスキンで使用するイメージを管理するのに役立ちます。
詳細は、第6.3項「「イメージ」ウィンドウの使用」を参照してください。

図3-2 ADFスキン・エディタの概要

3.2 セレクタ・ツリーの使用

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

図3-3に、セレクタ・ツリーに表示されるノードを示します。

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

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

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

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

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

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

3.3 プロパティ・インスペクタの使用

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

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

- 図3-4に示すように、拡張ADFスキンから値を継承するプロパティとADFスキンで構成したプロパティを識別します。

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

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

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

図3-4に、ADFスキンを編集するときにプロパティ・インスペクタで実行できる様々な制御の概要を示します。

図3-4 ADFに対するプロパティ・インスペクタの制御

3.4 ADFスキンの元として拡張するADFスキンへのナビゲート

ADFスキンを作成するとき、第4.4項「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-5のとおりになります。

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

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

ビジュアル・エディタの「拡張スキン」リストには、現在のADFスキンの拡張元ADFスキンのリストが表示されます。図3-6に、図3-5で示した継承関係を実装した場合に表示されるADFスキンのリストを示します。表示する拡張ADFスキンを開くには、「拡張スキン」リストでその拡張ADFスキンをクリックします。

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

注意:

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

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

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

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

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

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

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

2. 図3-9に示すように、このプロパティの横にあるリストをクリックしてコンテキスト・メニューを起動し、「宣言に移動」を選択します。

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

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

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

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

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

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

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

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

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

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

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

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

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

注意:

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

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

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

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

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

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

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

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

5. ADFスキン・エディタを再起動します。
ADFスキン・エディタを起動する方法の詳細は、『Oracle Fusion Middleware Oracle Application Development Frameworkスキン・エディタ・インストレーション・ガイド』を参照してください。

3.5.3 ADFスキン・エディタのドッキング可能なウィンドウをカスタマイズする方法

ドッキング可能ウィンドウのレイアウトをカスタマイズできます。ドッキング可能なウィンドウを移動するときに、他のGUI要素の上に表示されるように設定することもできます。

4つのドッキング可能領域の1つ以上の形を変更するには、次のようにします。

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

2. 「プリファレンス」ダイアログで、環境ノードを選択し、「ドッキング可能なウィンドウ」を選択します。

3. ドッキング可能なウィンドウ・ページで、隅の矢印をクリックすると、ドッキング領域の形が拡大または縮小されます。

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

ドッキング可能なウィンドウを移動するときに、最前面に表示しておくかどうかを変更するには、次のようにします。

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

2. 「プリファレンス」ダイアログで、環境ノードを選択し、「ドッキング可能なウィンドウ」を選択します。

3. ドッキング可能なウィンドウ・ページで、必要に応じて「ドッキング可能なウィンドウを常に上に表示」を選択するか選択を解除します。

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

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

ADFスキン・エディタには、ビジュアル・エディタによってADFスキンに対して生成された構文を表示、編集および検索できるソース・エディタが用意されています。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

3.7 拡張機能の使用

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

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

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

また、Extension SDK (Software Development Kit)から、追加の開発ツールおよび機能を手に入れることができます。Extension SDKは、「更新の確認」ウィザードからダウンロードできます。

Extension SDKは、Oracle Technology NetworkのWebページからもダウンロードできます。

注意:

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

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

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

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

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

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

3.8 ADFスキン・エディタでの概要エディタの使用

新規ADFスキン・プロジェクトを作成する場合デフォルトでfaces-config.xmlファイルが作成されますが、このファイルはADFスキン・プロジェクトには必要ありません。faces-config.xmlファイルを編集する必要が生じた場合には、JSF構成ファイルの概要エディタを使用できます。図3-11に、概要エディタを示します。

図3-11 JSF構成ファイルの概要エディタ

faces-config.xmlを開くと、その内容がエディタ・グループに表示されます。このグループの下部にある「概要」タブを選択すると、概要エディタが表示されます。

概要エディタが開くと、現在選択されている要素のメタデータ子要素がプロパティ・インスペクタに表示されます。これらはプロパティ・インスペクタを使用して管理します。たとえば、プロパティ・インスペクタを使用して<description>および<display-name>子要素を設定します。

概要エディタには、次の3つのセクションがあります。

- 左側の列には、メインJSF構成要素が表示されます。

- メイン・パネルの上部の領域には、左側の要素リストで選択した要素の子要素が表示されます。

- メイン・パネルの下部の領域には、上部の領域で選択した要素の子要素が表示されます。

3.8.1 ADFスキン・エディタでJSF構成ファイルの概要エディタを使用する方法

概要エディタを使用してJSF要素と子要素を追加、削除または編集できます。

メインJSF構成要素とその直下の子要素を操作する手順は、次のとおりです。

1. アプリケーション・ナビゲータで、JSFアプリケーションが含まれているワークスペースを開きます。

2. ワークスペースで、JSFページが含まれているプロジェクトを開きます。

3. プロジェクトで、 「WEB-INF」 ノードを開きます。

4. WEB-INFノードの下にあるfaces-config.xmlファイルをダブルクリックして開きます。

5. エディタの下部にある 「概要」 タブを選択します。

6. 左側の要素リストから要素を選択します。対応する構成可能な子要素がメイン・パネルの上部の表に表示されます。

JSF構成要素を追加、削除または編集するには、次のようにします。

- 新規の子要素を追加する方法。「新規」をクリックします。ダイアログ・ボックスが開き、要素を作成できます。新しいボタンが表示されない場合、その子要素は既存のクラスです。「参照...」をクリックしてクラスを選択できます。参照ボタンが表示されない場合、またはエントリがクラス名でない場合は、値を直接入力できます。

- 既存の子要素を削除する方法。表から要素を選択し、「削除」をクリックします。要素が表から削除されます。削除ボタンが表示されない場合は、エントリを手動で削除できます。

- 既存の子要素を編集する方法。表から要素を選択し、「編集」をクリックします。その要素のプロパティのパネルが開き、値を変更できます。

子構成要素の子要素を表示、追加、削除または編集するには、次のようにします。

- 子要素を表示する方法。左側の要素リストから要素を選択します。メイン・パネルが表示されます。メイン・パネルの上部の表から既存の子要素を選択します。設定されている子要素がメイン・パネルの下部の表に表示されます。子要素の設定が可能であり、かつ、現在は子が定義されていない場合は、子に対するリスト領域が表示されないことがあります。リスト領域を表示して子を追加するには、領域のタイトルの左側にある表示の矢印をクリックします。リスト領域を非表示にするには、非表示の矢印をクリックします。

- 新規の子要素を追加する方法。「新規」をクリックします。新規ボタンが表示されない場合で、子要素が既存のクラスであるときは、「参照...」ボタンをクリックして「クラス・エディタ」ダイアログ・ボックスを開くと、クラスを選択できます。参照ボタンが表示されない場合、またはエントリがクラス名でない場合は、値を直接入力できます。

- 既存の子要素を編集する方法。表から選択して「編集」をクリックします。その要素のプロパティのパネルが開き、値を変更できます。編集ボタンが表示されない場合は、新規クラスを選択するか(該当する場合)、またはエントリを編集できます。既存の子要素を削除するには、表から選択して「削除」を選択します。既存の子要素を削除します。表から選択して「削除」をクリックします。要素が表から削除されます。「削除」ボタンが表示されない場合は、エントリを手動で削除できます。

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 概要エディタのキーボード・ナビゲーション

ナビゲーション

キー

エディタ内の他のページ(ソース、履歴など)からサマリー・エディタの内外へ移動

[Alt]+[Tab]

タブ・グループからエディタ内の次のコントロールへ移動

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

サマリー・エディタのコントロール間を進むまたは戻る

[Tab]または[Alt]+[Tab]

サイド・タブ・コントロール内のタブ間を移動(フォーカスがタブ・グループにある場合)

[↑]、[↓]

サイド・タブ・コントロール内のタブ間を移動(フォーカスがページにある場合)

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

ページからタブ・グループに移動(エディタ内の次のコントロールから)

[Ctrl]+[Tab]

ページからタブ・グループに移動(エディタ内の任意のコントロールから)

[Ctrl]+[↑]

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

[Enter]、[Space]、[→]/[←]

コンポーネントおよびリソース・パレット

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

表3-20 コンポーネントおよびリソース・パレットのキーボード・ナビゲーション

ナビゲーション

キー

パレットに、またはパレットから進む

[Ctrl]+[Tab] ペイン内の最初の項目に移動します。

パレットに、またはパレットから戻る

[Ctrl]+[Shift]+[Tab]

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

[Tab]、[Shift]+[Tab]

リストまたはツリー内の要素を上または下に移動

[↑]または[↓]

リストまたはツリー内の要素を左または右に移動

[←]または[→]

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

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

コンポーネント・ボタンを選択

[Enter]

ナビゲータ

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

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

ナビゲーション

キー

ナビゲータに、またはナビゲータから進む

[Ctrl]+[Tab] ペイン内の最初の項目に移動します。

ナビゲータに、またはナビゲータから戻る

[Ctrl]+[Shift]+[Tab]

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

[Tab]

リストまたはツリー内の要素を上または下に移動

[↑]/[↓]

リストまたはツリー内の要素を左または右に移動

[←]または[→]

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

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

コンポーネント・ボタンを選択

[Enter]

要素を選択

[Enter]

プロパティ・インスペクタ

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

表3-22 プロパティ・インスペクタのキーボード・ナビゲーション

ナビゲーション

キー

プロパティ・インスペクタに、またはプロパティ・インスペクタから進む

[Ctrl]+[Tab]

プロパティ・インスペクタに、またはプロパティ・インスペクタから戻る

[Ctrl]+[Shift]+[Tab]

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

[Tab]

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

[Tab]、[Shift]+[Tab]

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

[↑]、[↓]

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

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

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

[Ctrl]+[↓]

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

[Ctrl]+[↑]

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

[Ctrl]+[Page Up]

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

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

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

[Enter]

テキスト・エディタ

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

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

ナビゲーション

キー

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

[Ctrl]+[Tab]

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

[Ctrl]+[Shift]+[Tab]

前のページに移動

[Alt]+[Page Up]

次のページに移動

[Alt]+[Page Down]

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

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

ナビゲーション

キー

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-25 グラフィカル・エディタのキーボード・ナビゲーション

ナビゲーション

キー

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

[Ctrl]+[Tab]

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

[Ctrl]+[Shift]+[Tab]

前のページに移動

[Alt]+[Page Up]

次のページに移動

[Alt]+[Page Down]

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

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

ナビゲーション

キー

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

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

要素の選択

[Space]

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

[Shift]+[F10]

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

この章では、ADFスキン・エディタおよびJDeveloperでADFスキンのソース・ファイルを作成する方法について説明します。また、以前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトをADFスキン・エディタで開く方法、およびADFライブラリのJARファイルからADFスキンをインポートする方法に関する情報も提供しています。

この章には、次の項があります。

- 第4.1項「ADFスキンの作成について」

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

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

- 第4.4項「ADFスキン・ファイルの作成」

- 第4.5項「ADFスキンのバージョニング」

- 第4.6項「ワーキング・セットの管理」

- 第4.7項「ADFライブラリJARからのADFスキンのインポート」

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

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

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

ADFスキン・アプリケーションおよびADFスキン・プロジェクトをADFスキン・エディタで新規作成できます。

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

この項では、ADFスキン・アプリケーションとその中のプロジェクトをADFスキン・エディタで作成する方法について説明します。

新規ADFスキン・アプリケーションを作成するには、次のようにします。

1. 「ファイル」→「新規」→「ADFスキン・アプリケーション」を選択して、「ADFスキン・アプリケーションの作成」ダイアログを開きます。

2. 「ADFスキン・アプリケーションの作成」ダイアログで、名前やディレクトリなど、アプリケーションの詳細を入力します。ウィザードに関するヘルプを表示するには、[F1]を押します。

3. 「次へ」をクリックして「ADFスキン・プロジェクト」ページを開き、ここでADFスキン・プロジェクトの名前および保存先のディレクトリを指定します。

4. 「ターゲット・アプリケーション・リリース」リストで、スキニングするアプリケーションで使用するOracle ADFのリリースを選択します。
ADFスキン・エディタによって、指定したリリースのADFスキン・プロジェクトが適切に構成されます。たとえば、第4.4.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.4.1項「ADFスキン・エディタでADFスキンを作成する方法」で説明しているように、ADFスキン・エディタによって、展開可能なADFスキンのリストがフィルタリングされます。ADFスキン・エディタはスキン・セレクタのリストもフィルタリングして、ターゲットにするリリースがサポートするスキン・セレクタのみを表示します。以前のリリースのADFスキン・プロジェクトをターゲットにした場合は、その後のリリースで導入されたスキン・セレクタは表示されません。

5. 作業が完了したら、「終了」をクリックします。

アプリケーション・ナビゲータに、新規ADFスキン・プロジェクトが表示されます。このプロジェクトは、あらかじめ設定されているデフォルト・プロパティをすべて継承します。プロジェクトのプロパティを変更する場合は、ファイル名をダブルクリックするか、右クリックして「プロジェクト・プロパティ」を選択します。

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

前のリリースのJDeveloperで作成されたアプリケーションまたはプロジェクトを開くと、ADFスキン・エディタにより、プロジェクトをJDeveloper 11gフォーマットに移行するよう求められます。プロジェクトのコンテンツによっては、ADFスキン・エディタによって、一部の特定ソース・ファイルも移行するよう求められることがあります。プロジェクトをADFスキン・エディタで開いたり、ADFスキン・エディタを使用して移行する前に、プロジェクトのバックアップ・コピーを作成することをお薦めします。

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

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

ADFスキン・エディタおよびJDeveloperのビジュアル・エディタでは、org.apache.myfaces.trinidad.desktopレンダー・キット用のADFスキンの作成をサポートしています。

JDeveloperおよびADFスキン・エディタのソース・エディタを使用して、他のレンダー・キット用のADFスキンを作成できます。詳細は、第11.2項「ADFスキニング・フレームワークおよびサポートされているレンダー・キット」を参照してください。

ADFスキンを作成したら、ADF FacesコンポーネントとADFデータ視覚化コンポーネントが公開するセレクタの値を設定します。そのようにしない場合は、作成したADFスキンによって、拡張元のADFスキンと同じ外観が定義されます。詳細は、第5章「コンポーネント固有セレクタの使用」を参照してください。

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

ADFスキン・エディタでADFスキンを作成できます。

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

1. アプリケーション・ナビゲータで、新規ADFスキンを作成するプロジェクトを右クリックし、「新規」→「ADFスキン・ファイル」を選択します。

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

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

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

- ファミリ: スキンのファミリ名の値を入力します。
入力フィールドに値を入力して、新規ファミリを定義するか、または既存のファミリを選択できます。ファミリにより、アプリケーションのADFスキンがグループ化されます。ADFスキンの特定のファミリを使用するようにアプリケーションを構成します。

入力する値は一意である必要があります。この値を参照して実行時にアプリケーションのADFスキンを選択するEL式を使用できます。

- このプロジェクトのデフォルト・スキン・ファミリとして使用: ADFスキンをすぐにプロジェクトのデフォルトにしない場合は、このチェック・ボックスの選択を解除します。

- 拡張対象: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。拡張するADFスキンの詳細および推奨事項は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。

注意:

第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、ターゲット・アプリケーション・リリースとして選択した値によって、拡張できるADFスキンのリストが決定されます。

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

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

4.4.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.4.3項「ADFスキンを作成した場合の処理」で説明しているように、trinidad-config.xmlファイルが更新されます。

- 拡張対象: 拡張するADFスキンを選択します。ADF Facesには、拡張可能な数多くのADFスキンが備えられています。拡張するADFスキンの詳細および推奨事項は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。

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

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

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

「ディレクトリ」フィールドで提示されたデフォルト値を受け入れると、拡張子が.cssのファイルが、プロジェクト内のskinsディレクトリのサブディレクトリに生成されます。このファイルは、図4-1に示すように、ADFスキンのビジュアル・エディタで開かれます。

図4-1 新規作成されたADFスキン

trinidad-skins.xmlファイルは、例4-1に示すように、作成した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>fusionFx-v1.desktop</extends>
<render-kit-id>org.apache.myfaces.trinidad.desktop</render-kit-id>
<style-sheet-name>skins/skin2/skin2.css</style-sheet-name>
</skin>
</skins>

「新規ADFスキン・ファイルの作成」ダイアログで「このプロジェクトのデフォルト・スキン・ファミリとして使用」チェック・ボックスを選択すると、trinidad-config.xmlファイルは、新規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-1に示すように、リソース・バンドル・ファイル(skinBundle.properties)が生成されます。リソース・バンドルの使用の詳細は、第7章「ADFスキンのテキストの使用」を参照してください。

4.5 ADFスキンのバージョニング

<version>要素を使用して、trinidad-skins.xmlファイルでADFスキンのバージョン番号を指定できます。trinidad-skins.xmlファイル内の<family>要素の値が同じであるADFスキンを区別する場合はこの機能を使用します。特定のADFスキンを使用するようにアプリケーションを構成する場合は、第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイルで値を指定して行うことに注意してください。

4.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スキンがアプリケーションで使用されるようにするには、第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、バージョンの挿入のためのダイアログで、デフォルト・リストからtrueを選択します。

4. 名前フィールドに値を入力します。たとえば、ADFスキンの最初のバージョンである場合はv1と入力します。

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

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

例4-4に、ADFスキンの3つのファイル(skin1.css、skin2.cssおよびskin3.css)を参照するtrinidad-skins.xmlの例を示します。これらの各ADFスキンの<family>要素は同じ値(test)になっています。<version>要素の子要素の値によって、これらのADFスキンがそれぞれ区別されます。実行時に、アプリケーションのtrinidad-config.xmlファイルにおける<skin-family>要素の値としてtestが指定されたアプリケーションでは、skin3を使用します。これは、このADFスキンがtrinidad-skins.xmlファイルでデフォルト・スキンとして構成されているためです(<default>true</default>)。この動作は、第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように、trinidad-config.xmlファイル内の<skin-version>要素に値を指定してオーバーライドできます。

例4-4 バージョニングされた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>fusionFx-simple-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>
<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>
<default>true</default>
<name>v3</name>
</version>
</skin>
</skins>

4.6 ワーキング・セットの管理

ワーキング・セットによって、プロジェクトでファイルのサブセットを表示するようにアプリケーション・ナビゲータを構成できます。これは特に、大規模なプロジェクトを操作する際に便利です。独自のワーキング・セットを定義するまでは、使用可能な唯一のワーキング・セットは「Default」であり、これは現在のアプリケーションのすべてのファイルが含まれたワーキング・セットです。

ワーキング・セットを定義するには、「アプリケーション・ナビゲータ」のファイルまたはコンテナから選択するか、「ワーキング・セットの管理」ダイアログで対象とするフィルタ・パターンと対象外とするフィルタ・パターンを指定します。

アプリケーション・ナビゲータにあるオブジェクトをワーキング・セットにグループ化するには、次のようにします。

1. アプリケーション・ナビゲータで、新規のワーキング・セットに含めるオブジェクトを選択します。

2. アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「選択から新規」を選択します。
これにより「別名保存」ダイアログが開きます。詳細は、[F1]を押すか、「別名保存」ダイアログ内で「ヘルプ」をクリックします。

3. ワーキング・セットの名前を入力し、「OK」をクリックします。

ファイル・フィルタとディレクトリ・フィルタを定義してワーキング・セットを作成するには、次のようにします。

1. アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「ワーキング・セットの管理」を選択します。
この操作により、「ワーキング・セット」ダイアログが開きます。左側のツリーを使用して、含めるプロジェクトを選択します。右側のパネルで、現在のプロジェクトに含めるファイルを選択します。詳細は、[F1]を押すか、「ワーキング・セット」ダイアログ内で「ヘルプ」をクリックします。

2. 「別名保存」をクリックして、ワーキング・セットを保存します。

「ログ」ウィンドウの検索結果からワーキング・セットを作成するには、次のようにします。

1. 「ログ」ウィンドウで右クリックし、コンテキスト・メニューから「ワーキング・セットとして保存」を選択します。

2. 「ワーキング・セットの作成」ダイアログで、ワーキング・セットの名前を入力します。

現在使用しているワーキング・セットを確認するには次のようにします。

- アプリケーション・ナビゲータで、マウスを「ワーキング・セット」アイコンの上に置きます。現在のワーキング・セットの名前がツールチップとして表示されます。または、「ワーキング・セット」アイコンをクリックして、アクティブ・ワーキング・セットがチェックされているメニューを表示します。

アクティブ・ワーキング・セットを変更するには、次のようにします。

- アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、開くワーキング・セットを選択します。
このワーキング・セットに含まれていないファイルはビューから削除されます。

ワーキング・セットのファイルおよびプロジェクトを編集するには、次のようにします。

1. アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「ワーキング・セットの管理」を選択します。
この操作により、「ワーキング・セット」ダイアログが開きます。詳細は、[F1]を押すか、「ワーキング・セット」ダイアログ内で「ヘルプ」をクリックします。

2. 「ワーキング・セット」ドロップダウン・リストから、変更するワーキング・セットを選択します。

3. 必要に応じて変更を行います。

アプリケーション・ナビゲータでビューをリストアして、すべてのファイルを表示するには次のようにします。

- アプリケーション・ナビゲータで、「ワーキング・セット」アイコンをクリックし、「(すべてのファイル)」を選択します。

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

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

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

他のタイプのJARファイルにパッケージ化したADFスキンをインポートできます。新規ADFスキンを作成するときの拡張元の選択肢として、これらのADFスキンがユーザー・インタフェースに表示されるようにするには、JARファイルのディレクトリ構造が例4-5で示しているものと同じである必要があります。JARファイルにはoracle.adf.common.services.ResourceService.svaファイルも含まれている必要があります。このファイルは、第10.3項「ADFスキンのADFライブラリJARへのパッケージ化」の指示に従って生成できます。

インポートするADFスキンが参照するイメージは、例4-5に示すように、adfという名前のディレクトリの下にある必要があります。

例4-5 非ADFライブラリJARファイルに必要なディレクトリ構造およびファイル

META-INF
|   MANIFEST.MF
|   oracle.adf.common.services.ResourceService.sva
|   trinidad-skins.xml
|
+---adf
|   \---skins
|       \---jarredskin
|           \---images
|               \---af_column
|                       sort_des_selected.png
|
\---skins
\---jarredskin
jarredskin.css

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

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

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

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

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

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

4. 終わったら、「OK」をクリックします。

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

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

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

インポートしたADFスキンで定義されているプロパティは、青い上矢印付きでプロパティ・インスペクタに表示されます。図4-3に示すように、プロパティの上にマウスを置くと、継承関係に関する情報ヒントが表示されます。

図4-3 インポートされた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つ以上のアイコンまたはメッセージのグローバル・セレクタ別名について、スタイル・プロパティを変更することも必要になる場合があります。

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

ADFスキンのビジュアル・エディタに用意されているツールを使用して、ADF FacesコンポーネントとADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、第3章「Oracle 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コンポーネントは、Webアプリケーションのコマンド・ボタン、コマンド・リンクおよびチェック・ボックスなどのユーザー・インタフェース・コントロールをレンダリングします。ADF Facesコンポーネントには、カレンダ、他のユーザー・インタフェース・コントロールを配置するパネルおよびWebアプリケーション内のテーブルをレンダリングするコンポーネントも含まれています。ADF Facesコンポーネントとその機能の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework 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に、goButtonコンポーネントを例として、擬似要素とコンポーネントのセレクタを使用してこのコンポーネントの外観をカスタマイズする方法を示します。図5-2に、goButtonコンポーネントおよびコンポーネント・アイコンに、デフォルトのADF Facesのfusionスキンを適用した様子を示します。

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

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

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

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

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

ADF Facesコンポーネントによって公開されるセレクタに関する参照情報は、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)にあります。

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

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

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

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

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

ADFデータ視覚化コンポーネントの外観をカスタマイズするには、各ADFデータ視覚化コンポーネントによって公開されるセレクタのスタイル・プロパティを定義します。ADFスキン用のJDeveloperのビジュアル・エディタまたはADFスキン・エディタに用意されているツールを使用して、ADFデータ視覚化コンポーネントの外観をカスタマイズします。詳細は、第3章「Oracle 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プロパティであるため、2つの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 Fusion Middleware Oracle Application Development Framework 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.5.3 メッセージに適用するADFスキン・プロパティの設定に関する注意事項

ビジュアル・エディタでは、メッセージ・タイプの擬似クラスをセレクタの擬似要素に対して追加または設定はサポートされません。メッセージ・タイプの擬似クラスをセレクタの擬似要素に追加する場合は、ADFスキンのソース・エディタを使用します。例5-2に、af|inputTextセレクタのcontent擬似要素の背景色として赤を定義する場合に記述する構文を示します。

例5-2 擬似要素へのメッセージ擬似クラスの追加

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;
}

コンポーネントの背景色が、周囲のテーマ色には不適切な色に設定されている場合、色の不適合が起こる場合があります。たとえば、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属性が生成されません。

コンポーネント用テーマを有効にするには、次のようにします。

1. ソース・エディタで、コンポーネントのセレクタの構文を入力して、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-3に、af:panelTabbedコンポーネントのdarkテーマのbackground-colorプロパティをRedに設定した場合にADFスキンのソース・ファイルに表示されるエントリを示します。

例5-3 ADFスキンにおけるコンポーネントのテーマの定義

af|panelTabbed[theme="dark"] {
background-color: Red;
}

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

子コンポーネントがJSFページの親コンポーネントに対する変更を継承しないようにする場合は、ADFスキンのソース・ファイルで-tr-children-themeプロパティの値を設定します。たとえば、af:panelTabbed子コンポーネントがJSFページのaf:document親コンポーネントに定義されているdarkテーマを継承しないようにします。例5-4に示すように、ADFスキンのソース・ファイルで-tr-children-themeプロパティを設定します。

コンポーネントが特定のテーマに対する変更を継承しないようにする場合は、テーマが適用されたバージョンを指定する必要があります。例5-4では、これはdarkテーマです。mediumテーマに対する変更を継承しないようにする場合は、mediumテーマのソース・ファイルで-tr-children-themeプロパティを設定します。

例5-4 子コンポーネントが親コンポーネントからテーマを継承しないようにする設定

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ファイルの詳細は、第11.3項「ADFスキンの構成ファイル」を参照してください。

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

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

例5-5 @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 Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)の「アクセシビリティを考慮したADF Facesページの開発」を参照してください。

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

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

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

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

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

6 ADFスキンのイメージの使用

この章では、ADFスキンでイメージを使用する方法について説明します。Fusion SimpleファミリのADFスキンから拡張したADFスキンを使用する場合に有効化される「イメージ」ウィンドウの使用方法に加え、コンポーネント・セレクタのイメージを変更する方法などの主要な機能について説明します。

この章には、次の項があります。

- 第6.1項「ADFスキンのイメージの使用について」

- 第6.2項「コンポーネント・セレクタのイメージの変更」

- 第6.3項「「イメージ」ウィンドウの使用」

6.1 ADFスキンのイメージの使用について

イメージの場所を指定するURLを使用して、ADFスキンのイメージを参照できます。たとえば、複数のWebページで会社のロゴとして使用するイメージを指定する場合に行います。イメージを使用する他のシナリオには、エンド・ユーザーの注意を引くために警告メッセージまたはエラー・メッセージと一緒にイメージを表示する場合や、アプリケーションを視覚的により魅力的にするためにイメージをレンダリングする場合などがあります。図6-1に、ADFスキンによって参照されるイメージを使用すると、アプリケーションがレンダリングするユーザー・インタフェースがどのように変更されるかを表す例を示します。図6-1のページは、2つの異なるADFスキンを使用して、同じアプリケーションで同じページをレンダリングしたものです。

図6-1 イメージを使用するADFスキン

図6-1の前景にあるWebページが使用するADFスキンではイメージを参照していませんが、背景にあるWebページが使用するADFスキンでは会社のロゴをレンダリングしています。これは、イメージの場所を.AFBrandingBarLogoスタイル・クラスのbackground-imageプロパティの値として定義することにより、会社のロゴをレンダリングします。

background-imageプロパティの値としてイメージを定義する以外に、イメージを参照する様々なセレクタがあります。これらのイメージは、たとえば、実行時にレンダリングされるADF Facesコンポーネントのアイコンとして表示されます。詳細は、第2.1.2項「ADFスキン・セレクタおよびアイコン・イメージ」を参照してください。

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

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

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

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

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

図6-3 sort-ascending-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.2.1項「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーするか、または第6.3項「「イメージ」ウィンドウの使用」で説明しているように、「イメージ」ウィンドウを使用して複数のイメージをインポートできます。

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

ヒント:

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

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

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

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

1. ビジュアル・エディタのセレクタ・ツリーで、変更するイメージを参照するセレクタを選択します。
たとえば、図6-1に示すように、ADF Faces columnコンポーネントのsort-ascending-icon-styleセレクタを選択して、昇順アイコンを変更します。

図6-4 columnコンポーネントのsort-ascending-icon-styleセレクタ

2. 図6-5に示すように、プロパティ・インスペクタで、「共通」セクションを開いて、「背景イメージ」リストから「イメージのコピー」を選択します。

図6-5 ADFスキン・プロジェクトにイメージをインポートするための「イメージのコピー」メニュー

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

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

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

/public_html/skins/skin1/images/af_column

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

プロパティ・インスペクタのプロパティの相対URL値が、イメージの新しい場所を参照するよう変更されます。図6-6に例を示します。

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

図6-6 ADFスキンへのイメージのインポート後のプロパティ・インスペクタ

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

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

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

6.3 「イメージ」ウィンドウの使用

「イメージ」ウィンドウを使用して、ADFスキンのFusion Simpleファミリから拡張されるADFスキンに使用するイメージを管理できます。これは、開いているADFスキンの「イメージ」タブをクリックしてアクセスできます。

注意:

「イメージ」ウィンドウの機能を使用するには、そのADFスキンがADFスキンのFusion Simpleファミリから拡張されたものである必要があります。他のスキン・ファミリからADFスキンを拡張すると、「イメージ」ウィンドウを使用できません。

図6-7に、ADFスキンの「イメージ」タブを初めてクリックしたときに表示される「イメージ」ウィンドウを示します。「イメージの生成に次を使用」リストに、次のオプションが表示されます。

- 現在のスキン別名: 現在のADFスキンの「色」カテゴリに表示されるグローバル・セレクタ別名を使用して色指定されたバージョンで開始する場合に選択します。このオプションを選択すると、これらのグローバル・セレクタ別名の値を変更できる「別名色」リストが表示されます。

- 彩度を減じたFusion Simple色: Fusion Simpleスキンの一連のイメージの彩度を減じたバージョンで開始する場合に選択します。

- Fusion Simple色: Fusion Simpleスキンの一連のイメージで開始する場合に選択します。

ヒント:

「イメージの生成に次を使用」リストから「彩度を減じたFusion Simple色」を選択し、「スキンに適用」をクリックする方法は、別のツールで現在のイメージを手動で変更する場合に、現在のイメージをすべて取得するための便利な方法です。

「生成されたイメージ」リストには、「スキンに適用」ボタンをクリックしてADFスキンに適用できるイメージが表示されます。「スキンに適用」ボタンをクリックすると、「生成されたイメージ」リストで選択したイメージが、ADFスキンを保管するプロジェクト内のディレクトリのサブディレクトリである、イメージ・ディレクトリにインポートされます。

図6-7 ADFスキンの「イメージ」ウィンドウ

「イメージの生成に次を使用」リストで「現在のスキン別名」を選択したときに表示される「別名色」リストには、レイアウトとアイコンのイメージの色に影響する色別名が表示されます。これらの色別名は、使用可能な色別名のサブセットです。このサブセットに含まれる色別名を変更すると、アプリケーションの外観を大幅に変更できます。図6-8に、これらの色別名を使用するページの部分にラベルが付けられる、アプリケーションのページを示します。たとえば、ブックマーク可能なリンクでは、ユーザーがリンクをクリックすると、.AFLightVisitedLinkForeground色別名が使用されるようになります。

図6-8 色別名を使用するアプリケーションのページ

図6-9に、色別名の使用にラベルが付けられる別の例を示します。

図6-9 色別名を使用するADF Faces表コンポーネント

グローバル・セレクタ別名の「色」カテゴリの詳細は、第8.1項「グローバル・セレクタ別名について」を参照してください。

Oracle Technology Network(OTN) Webサイトでは、ADFスキンの開発プロセスの一部として、色別名リストで色別名を変更する方法を示すオンライン・デモを提供しています。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.htmlにアクセスしてください。

6.3.1 「イメージ」ウィンドウを使用したイメージの生成方法

「イメージ」ウィンドウを使用してイメージを生成するには、サポートされているいずれかのメソッドを選択し、そのメソッドを使用してADFスキンに変更を適用します。

「イメージ」ウィンドウを使用してイメージを生成するには、次のようにします。

1. ADFスキンのFusion Simpleファミリを拡張するADFスキンを作成します。
ADFスキンの作成の詳細は、第4.4項「ADFスキン・ファイルの作成」を参照してください。ADFスキンのFusion Simpleファミリの詳細は、第11.4項「Oracle ADFで提供されるADFスキン」を参照してください。

2. 新しく作成されたADFスキンの「イメージ」タブをクリックします。

3. 「イメージの生成に次を使用」リストからイメージを生成するために使用するメソッドを選択します。

4. 含めるイメージ・タイプに適したオプションを選択します。

- 区分のレイアウト: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。

- アイコン: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。

5. (オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、別名の色リストでエントリの値を変更します。
次のように様々な方法があります。

- 変更するグローバル・セレクタ別名の入力フィールドに16進数コードを直接入力します。

- 「色相/彩度/明度の調整」をクリックして「色相/彩度/明度の調整」ダイアログを起動します。このダイアログで、ADFスキンが使用する色の色相、彩度、明度のレベルを調整できます。

- 入力フィールドの横にあるドロップダウン・メニューをクリックして、カラー・ピッカーを起動します。カラー・ピッカーで「カスタム」ボタンをクリックして「カスタム・カラーの選択」ダイアログを起動するか、または「デフォルト」ボタンを使用してグローバル・セレクタ別名の値をリセットすることもできます。図6-10に、これらのボタンと、ボタンを最初に表示するドロップダウン・メニューを示します。

図6-10 色別名のオプションの編集

6. (オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、「色の除外」アイコンをクリックして、イメージを生成するときに色別名が使用されないようにできます。図6-11に示すように、「色の除外」アイコンは、色別名にマウス・カーソルを重ねると表示されます。

図6-11 色別名の「色の除外」アイコン

7. 「生成されたイメージ」リストで、ADFスキンに適用するイメージを選択します。「生成されたイメージ」リストのチェック・ボックスを使用して、すべてのイメージを選択または選択を解除するか、1つ以上のイメージを選択します。デフォルトでは、選択されているイメージは、色別名の変更の結果として変更されたイメージです。

注意:

「生成されたイメージ」リストの下部にスクロールし、スキンに適用するすべてのイメージが選択されていることを確認します。

8. 「スキンに適用」をクリックします。

6.3.2 「イメージ」ウィンドウを使用してイメージを生成した場合の処理

「生成されたイメージ」リストで選択したイメージ・ファイルがプロジェクトにインポートされます。ADFスキンのソース・ファイルに生成する各イメージにエントリが表示されます。「現在のスキン別名」オプションを使用してイメージを生成することを選択した場合は、「別名色」リストで変更する各グローバル・セレクタ別名にもエントリが表示されます。例6-2に、ADFスキンのソース・ファイルにあるいくつかのエントリを示します。このスキンでは、「現在のスキン別名」オプションを使用し、AFDarkestNeutralBackgroundおよびAFVeryLightBackgroundグローバル・セレクタ別名の値を変更してイメージが生成されています。

例6-2 イメージ生成後のADFスキンのソース・ファイル内のエントリ

af|panelWindow::footer-end
{
background-image: url(images/generated/adf/images/fusion/dialog-footer-small-right.png);
}
...

af|train::stop-icon-unvisited:hover, af|train-vertical::stop-icon-unvisited:hover
{
background-image: url(images/generated/adf/images/fusion/train_unvisited_ovr.png);
}
...

.AFDarkestNeutralBackground:alias
{
background-color: #00ff00;
}
.AFVeryLightBackground:alias
{
background-color: #00ff00;
}

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

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

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

リソース・バンドルとリソース文字列の作成およびADF Facesコンポーネントのローカライズの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework 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 Fusion Middleware Oracle Application Development Framework 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>fusionFx-simple-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.5項「Oracle ADFで提供されるADFスキンの継承関係」および第11.4項「Oracle ADFで提供されるADFスキン」で説明している、Oracle ADFで提供されるADFスキンは、グローバル・セレクタ別名を活用して、コンポーネントのテキスト、メッセージ、アイコン、色および様々なグループに関する共通のスタイル・プロパティを定義します。これらのグローバル・セレクタ別名で定義されたスタイルは、数多くのコンポーネント固有セレクタによって継承されます。たとえば、.AFDefaultFontFamily:aliasグローバル・セレクタ別名では、テキストを表示するアプリケーションにおけるすべてのADF Facesコンポーネントのデフォルト・フォント・ファミリを定義します。Oracle ADFで提供されるいずれかのADFスキンを拡張して作成したADFスキンは、.AFDefaultFontFamily:aliasグローバル・セレクタ別名で定義されているプロパティを継承します。図8-1は、af|commandButtonセレクタによる.AFDefaultFontFamily:aliasグローバル・セレクタ別名からのフォント・ファミリ値の継承がビジュアル・エディタでどのように表示されるかを示しています。

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

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

- 色: Oracle ADFで提供されるADFスキンで使用する色を定義します。場合によっては、このカテゴリに表示される数多くのグローバル・セレクタ別名をオーバーライドします。これは、これらの別名によって、Fusion Webアプリケーションに表示されるほとんどの色が決定されるためです。これらのグローバル・セレクタ別名に加えた変更は、第11.4項「Oracle ADFで提供されるADFスキン」で説明している、ADFスキンのFusion Simpleファミリを拡張した場合に最も大きく影響を及ぼします。他のグローバル・セレクタ別名と同様に、特定のグローバル・セレクタで定義された値を継承するコンポーネント固有のセレクタを、「表示モード」リストを使用して表示できます。

- コンポーネント・グループ: ボタン: ボタンをレンダリングする数多くの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 Fusion Middleware 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. プロパティ・インスペクタで、グローバル・セレクタ別名で構成するプロパティの値を設定します。

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

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

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

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

例8-1 新規作成されたグローバル・セレクタ別名のCSS構文

.MyLinkHoverColor:alias{
}

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

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

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

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

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

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

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

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

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

2. プロパティ・インスペクタで、変更するプロパティの値を設定します。

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

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

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

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

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

- グローバル・セレクタ別名で定義したスタイル・プロパティを適用する各コンポーネントのセレクタ、擬似要素または擬似クラスを選択します。グローバル・セレクタ別名で定義したスタイル・プロパティを別のグローバル・セレクタ別名に適用する場合は、ターゲットのグローバル・セレクタ別名を選択します。

- ADFスキンの-tr-rule-ref-プロパティの値としてグローバル・セレクタ別名を設定します。

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

グローバル・セレクタ別名は、ADFスキンの-tr-rule-ref-プロパティの値として指定することで適用します。

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

1. ビジュアル・エディタのセレクタ・ツリーで、グローバル・セレクタ別名を適用するアイテムを選択します。
たとえば、図8-7に示すように、グローバル・セレクタ別名で定義したスタイル・プロパティをinputTextコンポーネントのラベルに適用する場合は、そのコンポーネントのcontent擬似要素を選択します。

2. プロパティ・インスペクタで、「共通」セクションを展開し、-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擬似要素を示します。ADFスキンの-tr-rule-refプロパティの値としてグローバル・セレクタ別名を指定した場合、そのグローバル・セレクタ別名から値を継承するプロパティは、図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などのツールを使用することを検討します。詳細は、第10.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スキン・プロパティ

/**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スキンから継承されたスタイル・クラス。

- コンポーネント・グループ: パネル・ボックスおよびリージョン: panelBoxおよびregionコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- コンポーネント・グループ: パネル・ヘッダー: panelHeaderコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- 下位セレクタ: 下位セレクタの拡張ADFスキンから継承されたスタイル・クラス。

- その他: 拡張ADFスキンから継承されたその他のスタイル・クラス。たとえば、このカテゴリにはブランド・バーのコンテナに使用できる.AFBrandingBarが含まれます。

- ノート・ウィンドウ: noteWindowコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- ポップアップ: popupコンポーネントに影響を及ぼす、拡張ADFスキンから継承されたスタイル・クラス。

- テキスト: 様々なタイプのテキスト(たとえば、アドレス・フィールドや指示テキストなど)の外観を決定する、拡張ADFスキンから継承されたスタイル・クラス。

ユーザーまたは他のユーザーが定義するスタイル・クラスは、図9-1の.UserDefinedスタイル・クラスのエントリで示されているようにスタイル・クラス・ノードの下に表示されます。Oracle ADFによって提供されるスタイル・クラスの詳細は、Oracle Fusion Middleware 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コンポーネントのデフォルトの背景色を白に決定します。

図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::content{background-color:red}

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

これらのスタイル・クラスを使用してレンダリングするコンポーネントのインスタンスごとに、styleClass属性の値としてスタイル・クラスを指定します。

コンポーネントの特定のインスタンスに対してスタイル・クラスを設定するには、次のようにします。

1. 第9.2項「スタイル・クラスの作成」の説明に従って、スタイル・クラスを作成します。

2. JDeveloperで、コンポーネントのstyleClass属性をステップ1で作成したスタイル・クラスの名前に設定します。
コンポーネントのstyleClass属性の設定の詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)を参照してください。

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

実行時に、スタイル・クラスを使用してインスタンス固有のスタイル・プロパティを指定しないコンポーネントのインスタンスは、コンポーネント固有セレクタおよびグローバル・セレクタ別名を使用してレンダリングされます。図9-5は、First Panel Boxラベルが付いたpanelBoxコンポーネントです。スタイル・クラスをstyleClass属性の値として指定するコンポーネントのインスタンスは、そのスタイル・クラスで指定されたスタイル・プロパティを使用してレンダリングされます。図9-5は、Second Panel Boxラベルが付いたpanelBoxコンポーネントです。

図9-5 スタイル・クラスで定義されたスタイル・プロパティによるコンポーネントのレンダリング

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

この章では、ADFスキンが完成した後に行う必要のあるタスクの実行方法について説明します。ADFスキンのテスト方法、完成したADFスキンをADFライブラリJARにパッケージ化する方法、完成したADFスキンが使用されるようにADFアプリケーションを構成する方法についての情報を示します。

この章には、次の項があります。

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

- 第10.2項「ADFスキンの変更のテスト」

- 第10.3項「ADFスキンのADFライブラリJARへのパッケージ化」

- 第10.4項「WebアプリケーションへのADFスキンの適用」

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

1つ以上のADFスキン・セレクタのスタイルのプロパティを定義するADFスキンを作成した後、ADFスキンに加えた変更をテストできます。ADFスキンの変更のテストを完了し、完成したADFスキンに問題がない場合は、ADFスキンと関連ファイル(イメージ、リソース・バンドルおよび構成ファイル)をADFライブラリJARにパッケージ化して、完成したADFスキンを使用するアプリケーション・プロジェクトに含めるために配布できます。完成したADFスキンの配布が完了したら、そのADFスキンを適用するアプリケーションを構成します。

10.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 Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)のADF Facesの構成に関する付録を参照してください。

図10-1に、ADFスキンで定義され、ADF Faces commandLinkコンポーネントのstyleClass属性を使用してこのコンポーネントに適用されたスタイル・クラスの名前(fndGlobalSearchCategory)が、ブラウザでレンダリングされるときにどのように圧縮されるかを示します。

図10-1 ADFスキンの圧縮されたスタイル・クラス名

図10-2に、DISABLE_CONTENT_COMPRESSIONパラメータをtrueに設定した場合に、スタイル・クラスの非圧縮の完全名とADF Facesコンポーネントがブラウザでどのようにレンダリングされるかを示します。図10-2の非圧縮のスタイル・クラスaf_commandLinkは、Oracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)に記載されているaf|commandLinkセレクタに該当します。

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 Fusion Middleware Oracle ADF Facesデータ視覚化ツール・タグ・リファレンスおよびOracle Fusion Middleware Oracle ADF Facesスキン・セレクタ・タグ・リファレンス(スキニングするアプリケーションに関連するリリース)に記載されているADFスキン・セレクタ、擬似要素と擬似クラスのみをカスタマイズすることをお薦めします。その他のADFスキン・セレクタをカスタマイズすると、アプリケーションで予期しない動作や一貫性のない動作が発生する場合があります。

図10-2 ADFスキンの非圧縮のスタイル・クラス名

10.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ファイルを閉じます。

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

例10-1に示すように、アプリケーションのweb.xmlファイルにエントリが表示されます。

例10-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に設定してください。

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

ADFスキンと関連ファイル(たとえば、イメージ・ファイル、構成ファイルおよびリソース・バンドル)をADFライブラリJARにデプロイできます。これにより、アプリケーションにADFスキンを適用するために必要なファイルをパッケージ化できます。次に、アプリケーションにバンドルする場合と比較して、ADFスキンをADFライブラリJARにパッケージ化することの利点を示します。

- アプリケーションとは別に、ADFスキンをデプロイおよび開発できます。これにより、ADFスキンへの変更の適用が必要な場合に、確認するファイル数を減らすこともできます。

- ADFスキンとイメージのソース・ファイルは、それぞれのADFライブラリJARに分けることができます。このため、すべてのアプリケーションにすべてのファイルをデプロイする必要がないように、イメージ・ベースを個別のADFライブラリJARに分けることができます。

10.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. 「デプロイ」ダイアログの「デプロイメント・アクション」ページで、「次」をクリックしてから、「終了」をクリックします。

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

ADFライブラリJARファイルは、デプロイメント・プロファイルによって指定されたディレクトリに書き込まれます。このADFライブラリJARには、ADFスキンのソース・ファイル、trinidad-skins.xmlファイル、イメージ・ファイルおよびリソース文字列を定義するため、またはADF Facesコンポーネントに定義されているデフォルト文字列をオーバーライドするために作成したすべてのリソース・バンドルが含まれます。ADFライブラリJARファイルには、スキニングに関係のないADFスキンのプロジェクトの他のファイルも含まれます。

例10-2に、ADFスキンの次のアイテムを含むプロジェクトのディレクトリ構造を示します。

- trinidad-skins.xmlファイル

- ADFスキン・プロジェクトにコピーされるイメージ・ファイル(sort_des_ena.png)

- ADFスキンのソース・ファイル(skin1.css)

- ADFライブラリJARをプロジェクトにインポートするときにそのコンテンツをインスペクトするために使用する.svaファイル(oracle.adf.common.services.ResourceService.sva)。詳細は、第4.7項「ADFライブラリJARからのADFスキンのインポート」を参照してください。

- デフォルトのリソース・バンドルの文字列をオーバーライドする文字列値を含むリソース・バンドル(skinBundle.properties)
定義する文字列値を含むリソース・バンドルを指定する方法の詳細は、第7.2.1項「ADFスキンに追加のリソース・バンドルを指定する方法」を参照してください。

例10-2 ADFスキンを含むADFライブラリJARのディレクトリ構造

ADFLibraryJARRootDirectory
+---META-INF
|   |   MANIFEST.MF
|   |   oracle.adf.common.services.ResourceService.sva
|   |   trinidad-skins.xml
|   |
|   +---adf
|   |   \---skins
|   |       \---skin1
|   |           \---images
|   |               \---af_column
|   |                       sort_des_selected.png
|   |
|   \---skins
|       \---skin1
|               skin1.css
|
+---resources
|       skinBundle.properties
|
\---WEB-INF
faces-config.xml

ADFライブラリJARに表示されるADFスキン内のイメージのディレクトリ・パスが、ADFスキン・プロジェクトのディレクトリ・パスを含めるように変更されます。例10-3に、行われる変更の例を示します。

例10-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/sort_des_selected.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/sort_des_selected.png");
}

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

アプリケーションのtrinidad-config.xmlファイルで値を指定して、ADFスキンを使用するようにアプリケーションを構成します。実行時にアプリケーションが使用するADFスキン・ファミリを識別する<skin-family>要素の値を指定します。スキン・ファミリで複数のADFスキンを作成した場合は、これらのADFスキンを第4.5項「ADFスキンのバージョニング」で説明しているようにバージョニングできます。同じスキン・ファミリ内で複数のADFスキンをバージョニングした場合は、<skin-version>要素を使用してアプリケーションが使用する特定のバージョンを識別できます。

エンド・ユーザーがアプリケーションで使用するADFスキンを動的に選択できるように、アプリケーション・ページを構成することもできます。詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)を参照してください。

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

アプリケーションのtrinidad-config.xmlファイルを変更して、アプリケーションにADFスキンを適用します。このことを行うには、アプリケーションのtrinidad-config.xmlファイルを編集して、使用するADFスキン・ファミリを指定します。または、JDeveloperの「プロジェクト・プロパティ」ダイアログの「ADFビュー」オプションのリストから、ADFスキン・ファミリを選択することもできます。

アプリケーションにADFスキンを適用するには、次のようにします。

1. アプリケーション・ナビゲータで、trinidad-config.xmlファイルをダブルクリックして、このファイルをソース・エディタで開きます。デフォルトでは、このファイルはWeb Content/WEB-INFノードにあります。

2. 例10-4に示されているように、trinidad-config.xmlファイルに、<skin-family>要素の値とオプションで<skin-version>要素の値を指定するためのエントリを書き込みます。

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

例10-4に示されているように、trinidad-config.xmlファイルで、<skin-family>要素とオプションで<skin-version>要素に指定する値は、Fusion Webアプリケーションが実行時に使用するADFスキンを決定します。

例10-4 trinidad-config.xmlファイル

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

11 高度なトピック

この章では、ADFスキンのソース・ファイルまたはADFスキンの使用を制御する構成ファイルに変更を加える場合に役立つ情報を示します。また、この章では、Oracle ADFで提供されるADFスキンのリストと説明も示します。

この章には、次の項があります。

- 第11.1項「ADFスキンのCSSファイルにおけるURLの参照」

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

- 第11.3項「ADFスキンの構成ファイル」

- 第11.4項「Oracle ADFで提供されるADFスキン」

11.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のフォーマットが重要になることがあります。詳細は、第10章の「ADFスキンのADFライブラリJARへのパッケージ化」を参照してください。

11.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スキンを使用してコンポーネントの表示方法をカスタマイズすることはできます。

11.3 ADFスキンの構成ファイル

次のリストでは、ADFスキンのプロジェクトに関連付けられている構成ファイルについて説明します。ADFスキンの開発中、または開発が終了して完成したADFスキンをアプリケーションに適用するときに、これらのファイルに含まれる値を変更します。

- trinidad-skins.xml
このファイルは、第4.4項「ADFスキン・ファイルの作成」で説明しているように、作成したADFスキンを登録します。このファイルの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)のtrinidad-skins.xmlでの構成に関する項を参照してください。

- trinidad-config.xml
この構成ファイルの<skin-family>要素を第10.4項「WebアプリケーションへのADFスキンの適用」で説明しているように構成することによって、アプリケーションに対して使用するADFスキンを指定します。

このファイルの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)のtrinidad-config.xmlでの構成に関する項を参照してください。

- web.xml
このファイルでコンテキスト初期化パラメータを構成して、第10.2項「ADFスキンの変更のテスト」で説明しているように、ADFスキンの開発およびテストを促進できます。コンテキスト初期化パラメータ(org.apache.myfaces.trinidad.skin.MAX_SKINS_CACHED)を構成して、生成されたCSSファイルに関する情報をメモリーに格納する一意のADFスキン(たとえば、fusionやfusionFx-simple)の最大数を指定することもできます。このコンテキスト初期化パラメータを使用すると、数多くの異なるスキンを使用する場合に、アプリケーションのパフォーマンスを維持するのに役立つ場合があります。

web.xmlファイルとコンテキスト初期化パラメータの詳細は、『Oracle Fusion Middleware Oracle Application Development Framework Webユーザー・インタフェース開発者ガイド』(スキニングするアプリケーションに関連するリリース)のweb.xmlでの構成に関する項を参照してください。

11.4 Oracle ADFで提供されるADFスキン

Oracle ADFでは、様々なADFスキンが提供されており、これらを拡張して、新規ADFスキンを作成できます。新規ADFスキンを作成する場合は、第4.4項「ADFスキン・ファイルの作成」で説明しているように、ADFスキンのFusion Simpleファミリの最新バージョン(fusionFx-simple-vN.N)を拡張することをお薦めします。Oracle ADFの11g リリース2 (11.1.2.2.0)では、ADFスキンのFusion Simpleファミリは次のバージョンで使用可能です。

- fusionFx-simple-v1

- fusionFx-simple-v1.1

- fusionFx-simple-v1.2

- fusionFx-simple-v2

別のリリースのOracle ADFでADFスキン・プロジェクトを使用する場合は、第4.2項「ADFスキン・アプリケーションおよびADFスキン・プロジェクトの作成」で説明しているように、ここで説明した、いずれのADFスキンも拡張元にできません。

次のリストで、Oracle ADFで提供される各ADFスキン間の違いについて説明します。

- simple : 最低限の書式設定のみが含まれています。

- blafplus-medium : 適度な数のスタイル設定が提供されます。このスタイルは、simpleスキンを拡張します。

- blafplus-rich: このスキンは、blafplus-mediumスキンを拡張します。blafplus-mediumスキンよりも多くのスタイルを提供します。たとえば、blafplus-richスキンのグラフィックには角丸があります。

注意:

blafplusスキンは推奨されていません。

- fusion: ADF Facesコンポーネントのデフォルトのスタイルを定義します。このスキンは、非常に多くのスタイルを提供します。このスキンは、simpleスキンを拡張します。

- fusion-11.1.1.3.0: より明瞭なタブのレンダリングを行う特定のコンポーネントに階層構造を作成するように、fusionスキンを変更します。これらのコンポーネントは、panelTabbed、navigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。

- fusionFx-v1: このスキンは、fusion-11.1.1.3.0スキンから拡張されます。fusionFx-v1スキンを拡張するADFスキンを作成する場合は、次の値を使用してスキンをtrinidad-skins.xmlファイルに登録します。

<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>fusionFx-v1.desktop</extends>
...
</skin>

アプリケーションでfusionFx-v1スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。

<skin-family>fusionFx</skin-family>

fusionFx-v1スキンには、数多くの問題に対応するためのデザインの改善と変更が含まれています。具体的には、これによって次のものが追加されます。

- 特定のブラウザでインライン・ポップアップが表示されたときに、基礎となるフレームのコンテンツが表示されないようにするため、背景色を.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.1スキンを拡張するADFスキンを作成する場合は、スキンをtrinidad-skins.xmlファイルに登録します。このことを行うには、trinidad-skins.xmlファイルで次の値を使用します。

<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>fusionFx-v1.1.desktop</extends>
…
</skin>

アプリケーションでfusionFx-v1.1スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。

<skin-family>fusionFx</skin-family>
<skin-version>v1.1<skin-version>

- fusionFx-v1.2: このスキンは、fusionFx-v1.1スキンから拡張されます。アプリケーションがタッチ・スクリーン・デバイスでレンダリングされる際の最適化を含め、多数のユーザー・インタフェースの拡張が含まれています。
fusionFx-v1.2スキンを拡張するには、trinidad-skins.xmlファイルで次の値を使用します。

<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>fusionFx-v1.2.desktop</extends>
...
</skin>

アプリケーションでfusionFx-v1.2スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。

<skin-family>fusionFx</skin-family>  <skin-version>v1.2<skin-version>

- fusionFx-v2: このスキンは、fusionFx-v1.1スキンから拡張されます。これにより、より明瞭なタブのレンダリングを行う特定のコンポーネントに階層構造が作成されます。これらのコンポーネントは、panelTabbed、navigationPane (属性hint="tabs")とdecorativeBoxです。またこのスキンでは、公開されたpanelAccordionコンポーネント・ペインに表示されるテキストを読みやすくするために、このペインのための、より目立たない背景イメージを定義しています。
fusionFx-v2スキンを拡張するADFスキンを作成する場合は、スキンをtrinidad-skins.xmlファイルに登録します。このことを行うには、trinidad-skins.xmlファイルで次の値を使用します。

<skin>
<id>yourSkin.desktop</id>
<family>yourSkinFamily</family>
<extends>fusionFx-v2.desktop</extends>
...
</skin>

アプリケーションでfusionFx-v2スキンを使用するには、trinidad-config.xmlファイルで次の値を使用します。

<skin-family>fusionFx</skin-family>
<skin-version>v2</skin-version>

- fusionFx-simple-vN.N: fusionFx-simpleスキンはfusionスキンと同じですが、カラー・パレットが簡略化されています。これにより、fusionFx-simpleスキンを拡張するADFスキンの色スキームの変更が、fusionスキンを拡張するスキンの色スキームの変更よりも容易になります。fusionFx-simpleスキンを拡張するADFスキンで少数の色別名を変更することにより、色スキームを大幅に変更できます。さらに、「イメージ」ウィンドウを使用して、fusionFx-simpleスキンを拡張するときにADFスキンの色スキームを変更できます。「イメージ」ウィンドウの詳細は、第6.3項「「イメージ」ウィンドウの使用」を参照してください。

- プロジェクタ・スキン: 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スキンの複数の要素を変更します。

前述のすべてのADFスキンをWebアプリケーションに適用できます。詳細は、第10.4項「WebアプリケーションへのADFスキンの適用」を参照してください。ADFスキン間の継承関係を示すダイアグラムは、第1.5項「Oracle ADFで提供されるADFスキンの継承関係」を参照してください。

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