この章の内容は次のとおりです。
Oracle ADFで提供されるADFスキンによって、色スキーマおよび参照イメージが定義され、アプリケーションの見た目と雰囲気がカラフルになります。ADFスキンが参照するこれらの色やイメージを変更することで、ADFスキンを使用するアプリケーションの外観が大きく異なります。
simple
スキンはADFで提供される他のスキンとは異なり、最小の書式設定のみが含まれます。
図7-1はこれを、2つの異なるADFスキン(skyros
およびsimple
)でレンダリングしたあるアプリケーションの同じページを示すことで表しています。図7-1の上部に表示されているアプリケーション・ページのルック・アンド・フィールは、skyros
で定義しています。下部に表示されているsimple
スキンを使用したアプリケーション・ページよりも、多くの色とイメージを使用しています。
Oracle ADFで提供される、イメージを参照するADFスキンのセレクタのいくつかを次に示します。Webアプリケーションのスキニングで参照されるイメージが実行するロールについても簡単に説明します。
af|document::splash-screen-icon
このコンポーネント固有セレクタは、Webアプリケーションがブラウザをロードするときにスプラッシュ画面内に表示されるアイコンを指定します。
af|column::sorted-descending-icon-style
このコンポーネント固有セレクタは、コラムの降順ソート・インジケータ用にレンダリングされるアイコンを指定します。
.AFFatalIcon:alias
このグローバル・セレクタ別名は、ページに致命的エラーが発生した場合に表示されるアイコンを指定します。
Oracle ADFで提供されるADFスキンで定義される色の例は、.AFHoverPrimaryColor:alias
グローバル・セレクタ別名です。このグローバル・セレクタ別名はユーザーがbutton
コンポーネントの上にカーソルを置いたときなどに背景色を定義します。もう1つの例は、ページのメイン・コンテンツ領域に使用する背景色を定義する.AFBackgroundColor:alias
グローバル・セレクタ別名です。
JDeveloperのADFスキンのエディタには、ADFスキンが使用する色およびイメージの変更を支援する機能が用意されています。これらの機能の一部または全部を使用できるかどうか、次のするように、拡張するADFスキンによって異なります。
ADFスキンがSkyrosスキンを拡張する場合
JDeveloperによって、デザイン・エディタで種々のカラー・ピッカーやその他のコントロールを使用して、頻繁に使用するADFスキンのいくつかの色やイメージを変更できるようになります。「ADFスキン・デザイン・エディタのイメージおよび色の変更」を参照してください。
ADFスキンをAltaスキンから拡張する場合
「コンポーネント・セレクタのイメージの変更」で説明しているように、セレクタ・エディタを使用してイメージを変更します。
注意:
または、「テーマ・エディタの使用」で説明されているテーマ・エディタを使用して、AltaまたはSkyrosスキンから拡張したADFスキンの色およびイメージを変更します。
デザイン・エディタを使用して、ADFスキンでレンダリングおよび定義されるイメージおよび色を変更します。
デザイン・エディタは、Skyros ADFスキンから拡張されたADFスキンを作成した場合に表示されます。これは、開いているADFスキンの「設計」タブをクリックしてアクセスできます。 デザイン・エディタの概要については、「ADFスキン・デザイン・エディタの使用」を参照してください。
このエディタを使用して実行できるタスクの例には次のようなものがあります。
Skyrosから拡張したADFスキンのデフォルトのテキスト・カラーを変更する
button
コンポーネントなどのコンポーネントの上にマウスを置いたときにハイライトする場合に表示される背景色を変更する
アイコンを置き換える
すべてまたは個々のコンポーネント、ステータスおよびアニメーション・アイコンは、「一般」タブの「イメージ」領域内の「ステータス・アイコン」、「アニメーション」または「コンポーネント」 ボタンをクリックした場合に起動する「アイコンの置換」ダイアログを使用して変更できます。「アイコンの置換」ダイアログの詳細は、「ヘルプ」をクリックしてください。
図7-2に、次の変更が行われたSkyros ADFスキンから拡張したADFスキンを示します。
「一般」タブで、
注意:
図7-2の赤い矩形が、「一般」タブ内で変更を加えるために使用するコントロールを識別します。赤い矢印は、同じページ内で対応する結果を指します。
メインのデフォルト・テキスト・カラーをFuchsia
に変更します。
この変更により、アンカー色であるAFTextColor
グローバル・セレクタ別名の色の値が変更されます。この変更はまた、AFTextColor
グローバル・セレクタ別名から色相値を派生させた色プロパティを設定するグローバル・セレクタ別名(AFTextPrimaryColor
やAFTextSecondaryColor
)にも影響します。この関係の詳細は、「ADFスキンのアンカー・カラーの使用」を参照してください。
プライマリ・アクセント色をBlack
に変更します。
これにより、button
コンポーネントなどのコンポーネントの上にカーソルを置いたときにレンダリングされる色が変更されます。この色プロパティを設定するグローバル・セレクタ別名は、AFHoverPrimaryColor
およびAFButtonGradientStartHoverColor
です。他のグローバル・セレクタ別名は、AFButtonGradientStartHoverColor
グローバル・セレクタ別名を使用して、設定された色プロパティの色相値を派生させます。AFButtonGradientStartHoverColor
グローバル・セレクタ別名から色プロパティを派生させるグローバル・セレクタ別名の例として、AFButtonBorderBottomHoverColor
およびAFButtonBorderHoverColor
があります。この関係の詳細は、「ADFスキンのアンカー・カラーの使用」を参照してください。
接続ステータスを示すアニメーション・アイコンの1つを変更します。
この例では、af|statusIndicator::idle-icon
が参照するアニメーション・アイコンが変更されました。
「ブランド領域」タブで、次の操作を行います。
ブランド領域の背景色を決定する色プロパティ(AFBrandingBackgroundColor
グローバル・セレクタ別名)をtransparent
に変更します。
ブランド領域のロゴのレンダリングに使用するイメージ・ファイルを変更します。
図7-2 ADFスキン・デザイン・エディタの色およびアイコンの変更
ADFスキンは色をカテゴリにグループ化します。アンカー・カテゴリによりADFスキンの基本色が定義されるため、これらの色を変更するとWebアプリケーションの外観が迅速に変更されます。
図7-3で示すように、AltaまたはSkyrosファミリのADFスキンから拡張したADFスキンは、色を3つのカテゴリのうちの1つにグループ化するグローバル・セレクタ別名を定義します。アンカー・カラーに分類されるグローバル・セレクタ別名のcolor
プロパティの値を変更することで、ADFスキンが定義するカラー・パレットを迅速に変更できます。
Anchor Color: これらのグローバル・セレクタ別名は、ADFスキンの基本色を定義します。たとえば、AFButtonGradientStartColor
グローバル・セレクタ別名は、ボタンの最初のグラデーション色を定義します。
Derivative Color: これらのグローバル・セレクタ別名は、アンカー・カラーから色プロパティの色相値を派生させます。例7-1のグローバル・セレクタ別名はすべて、その色相値をAFButtonGradientStartActiveColor
グローバル・セレクタ別名から派生させます。JDeveloperは、アンカー・カラーに加えたあらゆる変更を派生色に伝播します。派生色は、JDeveloperのADFスキンのエディタを使用してアンカー・カラーに加えたあらゆる変更を継承します。
Speciality Color: これらのグローバル・セレクタ別名は、色相値をアンカー・カラーから派生させず、他の色のアンカー・カラーでない色プロパティを定義します。たとえば、carousel
コンポーネントにフォーカスがある場合に枠線色を定義するAFCarouselFocusBorderColor
グローバル・セレクタ別名です。
図7-4に、AFButtonGradientStartActiveColor
グローバル・セレクタ別名のデフォルト値を赤に変更した結果を示します。JDeveloperのADFスキンのエディタはまた、アンカー・カラーから色相値を派生させる派生色の値を更新します。
図7-4 アンカー・カラーの変更と派生色の効果
図7-5で.AFButtonGradientEndActiveColor:alias
に関する警告が表示されるように、派生色の色プロパティを変更し、後に関連付けられているアンカー・カラーに変更を加えた場合、JDeveloperのADFスキンのエディタは、アンカー・カラーに加えた変更が派生色に加えた変更をオーバーライドすることを警告する「派生色の変更の確認」ダイアログを表示します。「OK」をクリックして、アンカー・カラーを変更するとともに、派生色に定義済の値にオーバーライドします。
図7-5 派生色にオーバーライドする
例7-1に、AFButtonGradientStartActiveColor
グローバル・セレクタ別名およびその関連派生色のデフォルト値を定義するSkyros ADFスキン(skyros-v1-desktop.css
)からのエントリを示します。これらのグローバル・セレクタ別名は、同じ色相値(209
)を共有しますが、彩度および明度は異なる値を指定します。
例7-2に、例7-1で参照された同一のグローバル・セレクタ別名を示します。例7-2では、ADFスキンは、Skyrosから拡張し、AFButtonGradientStartActiveColor
グローバル・セレクタ別名のcolor
プロパティの値を#6CD5A1
に変更します。JDeveloperのADFスキンのエディタは、アンカー・カラーからその色の値を派生させるグローバル・セレクタ別名の色プロパティを変更します。
例7-1 Skyrosのアンカーおよび派生色を有するグローバル・セレクタ別名
/* Anchor, hsl(209, 56%, 63%), #6AA1D5 */ .AFButtonGradientStartActiveColor:alias { color: #6AA1D5; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 32%, 54%), #648BAF */ .AFButtonBorderTopActiveColor:alias { color: #648BAF; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 39%, 62%), #789FC4 */ .AFButtonBorderActiveColor:alias { color: #789FC4; } /* Derivative of AFButtonGradientStartActiveColor, hsl(209, 54%, 79%), #ACCAE6 */ .AFButtonGradientEndActiveColor:alias { color: #ACCAE6; }
例7-2 アンカー・カラーおよび派生色の変更
.AFButtonGradientStartActiveColor:alias { color: #6CD5A1; } .AFButtonBorderTopActiveColor:alias { color: #64AF8A; } .AFButtonGradientEndActiveColor:alias { color: #ADE6CA; } .AFButtonBorderActiveColor:alias { color: #79C39E; }
多くのADF FacesコンポーネントおよびADFデータ視覚化コンポーネントが、セレクタを使用してイメージを参照します。これらのイメージはコンポーネントの背景で表示されるか、コンポーネント上でアイコンまたはコントロールとしてレンダリングされます。
ADFスキンを作成するとき、拡張元のADFスキンによって、これらのセレクタの値が、イメージの相対パスや高さのサイズなどとして提供されます。
図7-6に、表の列のデータを昇順でソートするコントロールをレンダリングするtable
コンポーネントの実行時ビューを示します。このコントロールをレンダリングするイメージは、ADF Faces column
コンポーネントのsort-ascending-icon-style
セレクタによって参照されます。
図7-6 sort-ascending-icon-styleセレクタによって参照されるイメージ
図7-7に、拡張ADFスキンのcolumn
コンポーネントのsort-descending-icon-style
セレクタの値をADFスキンが継承するデザインタイム・ビューを示します。継承される値には、アイコンとして使用されるイメージのファイル名(colSort_asc_ena.png
)、イメージの高さと幅が含まれます。
図7-7 sort-descending-icon-styleセレクタの継承される値
コンポーネントに関連付けられているイメージを参照するセレクタを公開するADF FacesコンポーネントとADFデータ視覚化コンポーネントの他の例には、次のものがあります。
ADF Faces progressIndicator
コンポーネントはdeterminate-empty-icon-style
セレクタを公開します。
ADF Faces panelAccordion
コンポーネントはdisclosed-icon-style
セレクタを公開します。
ADFデータ視覚化mapToolbar
コンポーネントはzoomin-enable-icon
セレクタを公開します。
コンポーネント・セレクタに関連付けられているイメージを変更する場合は、ADFスキンでセレクタを変更して、ADFスキンのプロジェクトにイメージをコピーする必要があります。「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーできます。
プロジェクトにイメージをインポートした後、イメージを参照するセレクタでは、ADFスキンのソース・ファイル内のURLを使用してこのイメージを参照します。「ADFスキンのADFライブラリJARへのパッケージ化」で説明しているように、ADFライブラリJARにADFスキン(と関連ファイル)をデプロイすると、このURLが更新されることに注意してください。
ヒント:
グローバル・セレクタ別名にイメージを関連付けます。このグローバル・セレクタ別名が複数のコンポーネント・セレクタによって参照されている場合に、後から異なるイメージを使用するには、1つの変更を加えるのみで済みます(グローバル・セレクタ別名に関連付けられているイメージを変更します)。「グローバル・セレクタ別名の作成」を参照してください。
ADFスキンがSkyros ADFスキンを拡張している場合、「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタでより頻繁に使用されるイメージのいくつかを変更できます。
コンテキスト・メニューを使用して、拡張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値が、イメージの新しい場所を参照するよう変更されます。図7-10に例を示します。
さらに、「Properties」ウィンドウで、プロパティ・ラベルの左側に緑色のアイコンが表示され、セレクタが拡張ADFスキンからイメージを継承しなくなったことが示されます。図7-10に、colSort_asc_ena.png
ファイルをバックグラウンド・イメージ・プロパティを使用してADFスキン用のプロジェクトにインポートした後の「Properties」ウィンドウを示します。拡張ADFスキンの「高さ」と「幅」のプロパティの値が、引き続きADFスキンによって継承されることに注意してください。
図7-10 ADFスキンにイメージをインポートした後の「Properties」ウィンドウ
最後に、ADFスキンのソース・ファイルにCSS構文が表示されます。例7-3に、図7-10に示す値に対応するCSS構文を示します。
例7-3 イメージをインポートした後のADFスキンのソース・ファイルに含まれるCSS構文
af|column::sorted-ascending-icon-style { background-image: url("images/af_column/colSort_des_ena.png"); }