この章では、ADFスキンでイメージおよび色を使用する方法について説明します。ADFで定義したカラー・パレットを迅速に変更するために、Skyrosで拡張したスキンの色カテゴリを使用する方法に加えて、用意されたエディタを使用してイメージを変更する方法などの機能を説明します。
この章には次の項が含まれます:
最小書式設定のみを含むsimple
スキン以外に、Oracle ADFで提供されるADFスキンは、色スキームおよびリファレンス・イメージを定義してアプリケーションにカラフルなルック・アンド・フィールを提供しています。ADFスキンが参照するこれらの色やイメージを変更することで、ADFスキンを使用するアプリケーションの外観が大きく異なります。図6-1はこれを、2つの異なるADFスキン(skyros
およびsimple
)でレンダリングしたあるアプリケーションの同じページを示すことで表しています。
Oracle ADFで提供される、イメージを参照するADFスキンのセレクタのいくつかを次に示します。Fusion Webアプリケーションのスキニングで参照されるイメージが実行するロールについても簡単に説明します。
af|document::splash-screen-icon
このコンポーネント固有セレクタは、Fusion Webアプリケーションがブラウザをロードするときにスプラッシュ画面内に表示されるアイコンを指定します。
af|column::sorted-descending-icon-style
このコンポーネント固有セレクタは、コラムの降順ソート・インジケータ用にレンダリングされるアイコンを指定します。
.AFFatalIcon:alias
このグローバル・セレクタ別名は、ページに致命的エラーが発生した場合に表示されるアイコンを指定します。
Oracle ADFで提供されるADFスキンが定義する色の例として、.AFBrightBackground:alias
(Fusion Simpleスキンでのみ使用)および.AFHoverPrimaryColor:alias
(Skyrosスキンでのみ使用)グローバル・セレクタ別名があります。これらのグローバル・セレクタ別名はユーザーがbutton
コンポーネントの上にカーソルを置いたときなどに背景色を定義します。もう1つの例は、ページのメイン・コンテンツ領域に使用する背景色を定義するためにSkyrosスキンで使用される.AFBackgroundColor:alias
グローバル・セレクタ別名です。
ADFスキン・エディタには、ADFスキンが使用する色およびイメージの変更を支援する機能が用意されています。これらの機能の一部または全部を使用できるかどうか、次のするように、拡張するADFスキンのファミリによって異なります。
ADFスキンがSkyrosまたはFusion Simpleファミリのスキンから拡張されている場合
ADFスキン・エディタによって、デザイン・エディタで種々のカラー・ピッカーやその他のコントロールを使って、頻繁に使用するADFスキンのいくつかの色やイメージを変更できるようになります。詳細は、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」を参照してください。
ADFスキンがFusion Simpleファミリのスキンから拡張されている場合
ADFスキン・エディタによって、イメージ・エディタにコントロールおよびイメージを管理するツールを追加できるようになります。詳細は、第6.5項「イメージ・エディタの使用」を参照してください。
ADFスキンがFusionまたはSimpleファミリのスキンから拡張されている場合
第6.4項「コンポーネント・セレクタのイメージの変更」で説明しているように、セレクタ・エディタを使用してイメージを変更します。
デザイン・エディタは、SkyrosまたはFusion SimpleファミリのADFスキンから拡張されたADFスキンを作成した場合に表示されます。これは、開いているADFスキンの「設計」タブをクリックしてアクセスできます。 デザイン・エディタの概要については、第3.2項「ADFスキン・デザイン・エディタの使用」を参照してください。
このエディタを使用して実行できるタスクの例には次のようなものがあります。
Skyrosから拡張したADFスキンのデフォルトのテキスト・カラーを変更する
button
コンポーネントなどのコンポーネントの上にマウスを置いたときにハイライトする場合に表示される背景色を変更する
アイコンを置き換える
すべてまたは個々のコンポーネント、ステータスおよびアニメーション・アイコンは、「一般」タブの「イメージ」領域内の「ステータス・アイコン」、「アニメーション」または「コンポーネント」 ボタンをクリックした場合に起動する「アイコンの置換」ダイアログを使用して変更できます。詳細は、「アイコンの置換」ダイアログの「ヘルプ」をクリックします。
注意: ADFスキンがFusion Simpleから拡張したものであれば、「コンポーネント」ボタンおよびそれと関連づけられているコンポーネント・アイコンを置換するダイアログは表示されません。 |
図6-2に、次の変更を加えた、SkyrosファミリのADFスキンから拡張したADFスキンを示します。
「一般」タブで、
メインのデフォルト・テキスト・カラーをFuchsia
に変更します。
この変更により、アンカー色であるAFTextColor
グローバル・セレクタ別名の色の値が変更されます。この変更はまた、AFTextColor
グローバル・セレクタ別名から色相値を派生させた色プロパティを設定するグローバル・セレクタ別名(AFTextPrimaryColor
やAFTextSecondaryColor
)にも影響します。この関係の詳細は、第6.3項「Skyrosで拡張したADFスキンの色の使用」を参照してください。
プライマリ・アクセント色をBlack
に変更します。
これにより、button
コンポーネントなどのコンポーネントの上にカーソルを置いたときにレンダリングされる色が変更されます。この色プロパティを設定するグローバル・セレクタ別名は、AFHoverPrimaryColor
およびAFButtonGradientStartHoverColor
です。他のグローバル・セレクタ別名は、AFButtonGradientStartHoverColor
グローバル・セレクタ別名を使用して、設定された色プロパティの色相値を派生させます。AFButtonGradientStartHoverColor
グローバル・セレクタ別名から色プロパティを派生させるグローバル・セレクタ別名の例として、AFButtonBorderBottomHoverColor
およびAFButtonBorderHoverColor
があります。この関係の詳細は、第6.3項「Skyrosで拡張したADFスキンの色の使用」を参照してください。
接続ステータスを示すアニメーション・アイコンの1つを変更します。
この例では、af|statusIndicator::idle-icon
が参照するアニメーション・アイコンが変更されました。
「ブランド領域」タブで、次の操作を行います。
ブランド領域の背景色を決定する色プロパティ(AFBrandingBackgroundColor
グローバル・セレクタ別名)をtransparent
に変更します。
ブランド領域のロゴのレンダリングに使用するイメージ・ファイルを変更します。
図6-3で示すように、SkyrosファミリのADFスキンから拡張したADFスキンは、色を3つのカテゴリのうちの1つにグループ化するグローバル・セレクタ別名を定義します。アンカー・カラーに分類されるグローバル・セレクタ別名のcolor
プロパティの値を変更することで、ADFスキンが定義するカラー・パレットを迅速に変更できます。
Anchor Color: これらのグローバル・セレクタ別名は、ADFスキンの基本色を定義します。たとえば、AFButtonGradientStartActiveColor
グローバル・セレクタ別名は、アクティブ・ステートを有するボタンの最初のグラデーション背景色を定義します。
Derivative Color: これらのグローバル・セレクタ別名は、アンカー・カラーから色プロパティの色相値を派生させます。例6-1のグローバル・セレクタ別名はすべて、その色相値をAFButtonGradientStartActiveColor
グローバル・セレクタ別名から派生させます。ADFスキン・エディタは、アンカー・カラーに加えたあらゆる変更を派生色に伝搬します。派生色は、ADFスキン・エディタを使用してアンカー・カラーに加えたあらゆる変更を継承します。
Speciality Color: これらのグローバル・セレクタ別名は、色相値をアンカー・カラーから派生させず、他の色のアンカー・カラーでない色プロパティを定義します。たとえば、carousel
コンポーネントにフォーカスがある場合に枠線色を定義するAFCarouselFocusBorderColor
グローバル・セレクタ別名です。
図6-4に、AFButtonGradientStartActiveColor
グローバル・セレクタ別名のデフォルト値を変更した結果を示します。ADFスキン・エディタはまた、 アンカー・カラーから色相値を派生させる派生色の値を更新します。
図6-5に示すように、派生色の色プロパティを変更し、後に関連付けられているアンカー・カラーに変更を加えた場合、 ADFスキン・エディタは、アンカー・カラーに加えた変更が派生色に加えた変更を上書きすることを警告するダイアログを表示します。「OK」をクリックして、アンカー・カラーを変更するとともに、派生色に定義済の値に上書きします。
例6-1に、AFButtonGradientStartActiveColor
グローバル・セレクタ別名およびその関連派生色のデフォルト値を定義するSkyros ADFスキン(skyros-v1-desktop.css
)からのエントリを示します。これらのグローバル・セレクタ別名は、同じ色相値(209
)を共有しますが、彩度および明度は異なる値を指定します。
例6-1 Skyrosのアンカーおよび派生色を有するグローバル・セレクタ別名
/* Anchor, hsl(209, 56%, 63%), #6AA1D5 */ .AFButtonGradientStartActiveColor:alias { color: #6AA1D5; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 32%, 54%), #648BAF */ .AFButtonBorderTopActiveColor:alias { color: #648BAF; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 39%, 62%), #789FC4 */ .AFButtonBorderActiveColor:alias { color: #789FC4; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 54%, 79%), #ACCAE6 */ .AFButtonGradientEndActiveColor:alias { color: #ACCAE6; }
例6-2に、例6-1で参照された同一のグローバル・セレクタ別名を示します。例6-2では、ADFスキンは、Skyrosから拡張し、AFButtonGradientStartActiveColor
グローバル・セレクタ別名のcolor
プロパティの値を#6CD5A1
に変更します。ADFスキン・エディタは、アンカー・カラーからその色の値を派生させるグローバル・セレクタ別名の色プロパティを変更します。
多くのADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが、セレクタを使用してイメージを参照します。これらのイメージはコンポーネントの背景で表示されるか、コンポーネント上でアイコンまたはコントロールとしてレンダリングされます。ADFスキンを作成するとき、拡張元のADFスキンによって、これらのセレクタの値が、イメージの相対パスや高さのサイズなどとして提供されます。
図6-6に、表の列のデータを昇順でソートするコントロールをレンダリングするtable
コンポーネントの実行時ビューを示します。このコントロールをレンダリングするイメージは、ADF Faces column
コンポーネントのsort-ascending-icon-style
セレクタによって参照されます。
図6-7に、拡張ADFスキンのcolumn
コンポーネントのsort-descending-icon-style
セレクタの値をADFスキンが継承するデザインタイム・ビューを示します。継承される値には、アイコンとして使用されるイメージのファイル名(colSort_asc_ena.png
)、イメージの高さと幅が含まれます。
コンポーネントに関連付けられているイメージを参照するセレクタを公開するADF FacesコンポーネントとADFデータ視覚化コンポーネントの他の例には、次のものがあります。
ADF Faces progressIndicator
コンポーネントはdeterminate-empty-icon-style
セレクタを公開します。
ADF Faces panelAccordion
コンポーネントはdisclosed-icon-style
セレクタを公開します。
ADFデータ視覚化mapToolbar
コンポーネントはzoomin-enable-icon
セレクタを公開します。
コンポーネント・セレクタに関連付けられているイメージを変更する場合は、ADFスキンでセレクタを変更して、ADFスキンのプロジェクトにイメージをコピーする必要があります。第6.4.1項「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーできます。
プロジェクトにイメージをインポートした後、イメージを参照するセレクタでは、ADFスキンのソース・ファイル内のURLを使用してこのイメージを参照します。第11.3項「ADFスキンのADFライブラリJARへのパッケージ化」で説明しているように、ADFライブラリJARにADFスキン(と関連ファイル)をデプロイすると、このURLが更新されることに注意してください。
ヒント: グローバル・セレクタ別名にイメージを関連付けます。このグローバル・セレクタ別名が複数のコンポーネント・セレクタによって参照されている場合に、後から異なるイメージを使用するには、1つの変更を加えるのみで済みます(グローバル・セレクタ別名に関連付けられているイメージを変更します)。グローバル・セレクタ別名の詳細は、第8.2項「グローバル・セレクタ別名の作成」を参照してください。 |
ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンを拡張している場合、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタでより頻繁に使用されるイメージのいくつかを変更できます。ADFスキンがFusion SimpleファミリのADFスキンを拡張している場合、第6.5項「イメージ・エディタの使用」で説明しているように、イメージ・エディタを使用して複数のイメージを変更できます。
コンテキスト・メニューを使用して、拡張ADFスキンによって参照されるイメージをADFスキンのプロジェクトのディレクトリにコピーします。続けて、必要な変更をイメージに加えます。
ADFスキン・イメージをプロジェクトにコピーするには、次のようにします。
イメージは、ADFスキンのプロジェクトに生成されるサブディレクトリにコピーされます。たとえば、ADF Faces column
コンポーネントのsort-ascending-icon-style
セレクタが参照するイメージをコピーする場合、colSort_asc_ena.png
ファイルが次のディレクトリにコピーされます。
/public_html/skins/skin1
/images/
af_column
af_column
はADF Faces column
コンポーネントを示します。
「Properties」ウィンドウのプロパティの相対URL値が、イメージの新しい場所を参照するよう変更されます。図6-10に例を示します。
さらに、「Properties」ウィンドウで、プロパティ・ラベルの左側に緑色のアイコンが表示され、セレクタが拡張ADFスキンからイメージを継承しなくなったことが示されます。図6-10に、colSort_asc_ena.png
ファイルをADFスキン用のプロジェクトにインポートした後の「Properties」ウィンドウを示します。拡張ADFスキンの「高さ」と「幅」のプロパティの値が、引き続きADFスキンによって継承されることに注意してください。
最後に、ADFスキンのソース・ファイルにCSS構文が表示されます。例6-3に、図6-10に示す値に対応するCSS構文を示します。
イメージ・エディタを使用して、ADFスキンのFusion Simpleファミリから拡張されるADFスキンに使用するイメージを管理できます。これは、開いているADFスキンの「イメージ」タブをクリックしてアクセスできます。
注意: イメージ・エディタの機能を使用するには、そのADFスキンがADFスキンのFusion Simpleファミリから拡張されたものである必要があります。たとえばSkyrosファミリのADFスキンなどの他のスキン・ファミリからスキンを拡張すると、イメージ・エディタを使用できません。 |
図6-11に、ADFスキンの「イメージ」タブを初めてクリックしたときに表示されるイメージ・エディタを示します。「イメージの生成に次を使用」ドロップダウン・メニューに、次のオプションが表示されます。
現在のスキン別名: 現在のADFスキンの「色」カテゴリに表示されるグローバル・セレクタ別名を使用して色指定されたバージョンで開始する場合に選択します。このオプションを選択すると、これらのグローバル・セレクタ別名の値を変更できる「別名色」リストが表示されます。
彩度を減じたFusion Simple色: Fusion Simpleスキンの一連のイメージの彩度を減じたバージョンで開始する場合に選択します。
Fusion Simple色: Fusion Simpleスキンの一連のイメージで開始する場合に選択します。
ヒント: 「イメージの生成に次を使用」ドロップダウン・メニューから「彩度を減じたFusion Simple色」を選択し、「スキンに適用」をクリックする方法は、別のツールで現在のイメージを手動で変更する場合に、現在のイメージをすべて取得するための便利な方法です。 |
「生成されたイメージ」リストには、「スキンに適用」ボタンをクリックしてADFスキンに適用できるイメージが表示されます。「スキンに適用」ボタンをクリックすると、「生成されたイメージ」リストで選択したイメージが、ADFスキンを保管するプロジェクト内のディレクトリのサブディレクトリである、イメージ・ディレクトリにインポートされます。
「イメージの生成に次を使用」ドロップダウン・メニューで「現在のスキン別名」を選択したときに表示される「別名色」リストには、レイアウトとアイコンのイメージの色に影響する色別名が表示されます。これらの色別名は、使用可能な色別名のサブセットです。このサブセットに含まれる色別名を変更すると、アプリケーションの外観を大幅に変更できます。図6-12に、これらの色別名を使用するページの部分にラベルが付けられる、アプリケーションのページを示します。たとえば、ブックマーク可能なリンクでは、ユーザーがリンクをクリックすると、.AFLightVisitedLinkForeground
色別名が使用されるようになります。
図6-13に、色別名の使用にラベルが付けられる別の例を示します。
グローバル・セレクタ別名の「色」カテゴリの詳細は、第8.1項「グローバル・セレクタ別名について」を参照してください。
Oracle Technology Network (OTN) Webサイトでは、ADFスキンの開発プロセスの一部として、色別名リストで色別名を変更する方法を示すオンライン・デモを提供しています。詳細は、http://www.oracle.com/technetwork/developer-tools/adf/overview/index.html
にアクセスしてください。
イメージ・エディタを使用してイメージを生成するには、サポートされているいずれかのメソッドを選択し、そのメソッドを使用してADFスキンに変更を適用します。
イメージ・エディタを使用してイメージを生成するには、次のようにします。
ADFスキンのFusion Simpleファミリを拡張するADFスキンを作成します。
ADFスキンの作成の詳細は、第4.3項「ADFスキン・ファイルの作成」を参照してください。ADFスキンのFusion Simpleファミリの詳細は、第12.4項「Oracle ADFで提供されるADFスキン」を参照してください。
新しく作成されたADFスキンの「イメージ」タブをクリックします。
「イメージの生成に次を使用」リストからイメージを生成するために使用するメソッドを選択します。
含めるイメージ・タイプに適したオプションを選択します。
区分のレイアウト: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。
アイコン: ADFスキンにこのタイプのイメージを含める場合は、このチェック・ボックスを選択します。
(オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、別名の色リストでエントリの値を変更します。
次のように様々な方法があります。
変更するグローバル・セレクタ別名の入力フィールドに16進数コードを直接入力します。
「色相/彩度/明度の調整」をクリックして「色相/彩度/明度の調整」ダイアログを起動します。このダイアログで、ADFスキンが使用するすべての色の色相、彩度、明度のレベルを調整できます。
ヒント: このダイアログを使用して加えた変更は、ADFスキンが使用するすべての色に適用されるため、このダイアログを使用することが新しい色の色相をアプリケーションに適用する近道です。 |
入力フィールドの横にあるドロップダウン・メニューをクリックして、カラー・ピッカーを起動します。カラー・ピッカーで「カスタム」ボタンをクリックして「カスタム・カラーの選択」ダイアログを起動するか、または「デフォルト」ボタンを使用してグローバル・セレクタ別名の値をリセットすることもできます。図6-14に、これらのボタンと、ボタンを最初に表示するドロップダウン・メニューを示します。
(オプション)「イメージの生成に次を使用」ドロップダウン・メニューから「現在のスキン別名」を選択した場合は、「色の除外」アイコンをクリックして、イメージを生成するときに色別名が使用されないようにできます。図6-15に示すように、「色の除外」アイコンは、色別名にマウス・カーソルを重ねると表示されます。
「生成されたイメージ」リストで、ADFスキンに適用するイメージを選択します。「生成されたイメージ」リストのチェック・ボックスを使用して、すべてのイメージを選択または選択を解除するか、1つ以上のイメージを選択します。デフォルトでは、選択されているイメージは、色別名の変更の結果として変更されたイメージです。
注意: 「生成されたイメージ」リストの下部にスクロールし、スキンに適用するすべてのイメージが選択されていることを確認します。 |
「スキンに適用」をクリックします。
「生成されたイメージ」リストで選択したイメージ・ファイルがプロジェクトにインポートされます。ADFスキンのソース・ファイルに生成する各イメージにエントリが表示されます。「現在のスキン別名」オプションを使用してイメージを生成することを選択した場合は、「別名色」リストで変更する各グローバル・セレクタ別名にもエントリが表示されます。例6-4に、ADFスキンのソース・ファイルにあるいくつかのエントリを示します。このスキンでは、「現在のスキン別名」オプションを使用し、AFDarkestNeutralBackground
およびAFVeryLightBackground
グローバル・セレクタ別名の値を変更してイメージが生成されています。
例6-4 イメージ生成後のADFスキンのソース・ファイル内のエントリ
af|column::sort-descending-icon-style { background-image: url("images/generated/META-INF/adf/images/fusion/sort_des_ena.png"); } af|dvt-map::overview-window-maximize-active-icon { content: url("images/generated/bi/images/geoMap/panel_close_dwn.png"); } .AFDarkestNeutralBackground:alias { background-color: #00ff00; } .AFVeryLightBackground:alias { background-color: #00ff00; }
simple
スキンを拡張したADFスキンの単純な枠線スタイルを指定できます。これにより、decorativeBox
コンポーネントやパネル・コンポーネント(panelBox
やpanelAccordion
)などのコンポーネントが実行時にレンダリングするセレクタの数が少なくなり、結果としてDOM構造が簡略化されます。
この機能は、リリース11.1.1.7.0以降および12.1.2以降のOracle ADFで使用可能です。デフォルトでは、Skyrosから拡張したSkyrosスキンおよびADFスキンは、単純な枠線スタイルを指定します。ADFスキンがOracle ADFで提供される他のADFスキンの1つから拡張している場合、第12.4章「Oracle ADFで提供されるADFスキン」で説明しているように、trinidad-skins.xml
ファイルを設定する必要があります。
ADFスキンを登録したtrinidad-skins.xml
ファイルの<feature>
要素を設定します。例6-5は、trinidad-skins.xml
ファイルのmySkin
ADFスキンの単純な枠線スタイルを有効にする方法示しています。
例6-5 trinidad-skins.xmlファイルの単純な枠線スタイルを有効にする
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
<skin>
<id>
mySkin.desktop
</id>
<family>
mySkin
</family>
<extends>simple.desktop</extends>
<render-kit-id>
org.apache.myfaces.trinidad.desktop
</render-kit-id>
<style-sheet-name>
skins/mySkin/mySkin.css
</style-sheet-name>
<bundle-name>
myBundle
</bundle-name>
<translation-source></translation-source>
<features>
<feature name="BORDER_STYLE">simple</feature>
</features>
</skin>
</skins>