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