ヘッダーをスキップ
Oracle® Fusion Middleware Oracle ADFスキン・エディタによるADFスキンの開発
12c (12.1.3)
E56242-01
  目次へ移動
目次
前
前 		 次
次		  

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

この章では、ADFスキンでイメージおよび色を使用する方法について説明します。ADFで定義したカラー・パレットを迅速に変更するために、Skyrosで拡張したスキンの色カテゴリを使用する方法に加えて、用意されたエディタを使用してイメージを変更する方法などの機能を説明します。

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

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

最小書式設定のみを含むsimpleスキン以外に、Oracle ADFで提供されるADFスキンは、色スキームおよびリファレンス・イメージを定義してアプリケーションにカラフルなルック・アンド・フィールを提供しています。ADFスキンが参照するこれらの色やイメージを変更することで、ADFスキンを使用するアプリケーションの外観が大きく異なります。図6-1はこれを、2つの異なるADFスキン(skyrosおよびsimple)でレンダリングしたあるアプリケーションの同じページを示すことで表しています。図6-1の上部に表示されているアプリケーション・ページのルック・アンド・フィールは、skyrosで定義しています。下部に表示されているsimpleスキンを使用したアプリケーション・ページよりも、多くの色とイメージを使用しています。

図6-1 イメージと色を使用したADFスキン

この図は周囲のテキストで説明しています

Oracle ADFで提供される、イメージを参照するADFスキンのセレクタのいくつかを次に示します。Fusion Webアプリケーションのスキニングで参照されるイメージが実行するロールについても簡単に説明します。

Oracle ADFで提供されるADFスキンが定義する色の例として、.AFBrightBackground:alias (Fusion Simpleスキンでのみ使用)および.AFHoverPrimaryColor:alias (Skyrosスキンでのみ使用)グローバル・セレクタ別名があります。これらのグローバル・セレクタ別名はユーザーがbuttonコンポーネントの上にカーソルを置いたときなどに背景色を定義します。もう1つの例は、ページのメイン・コンテンツ領域に使用する背景色を定義するためにSkyrosスキンで使用される.AFBackgroundColor:aliasグローバル・セレクタ別名です。

ADFスキン・エディタには、ADFスキンが使用する色およびイメージの変更を支援する機能が用意されています。これらの機能の一部または全部を使用できるかどうか、次のするように、拡張するADFスキンのファミリによって異なります。

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

デザイン・エディタは、SkyrosまたはFusion SimpleファミリのADFスキンから拡張されたADFスキンを作成した場合に表示されます。これは、開いているADFスキンの「設計」タブをクリックしてアクセスできます。 デザイン・エディタの概要については、第3.3項「ADFスキン・セレクタ・エディタの使用」を参照してください。

このエディタを使用して実行できるタスクの例には次のようなものがあります。

図6-2に、次の変更を加えた、SkyrosファミリのADFスキンから拡張したADFスキンを示します。

図6-2 ADFスキン・デザイン・エディタの色およびアイコンの変更

この図は周囲のテキストで説明しています

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

図6-3で示すように、SkyrosファミリのADFスキンから拡張したADFスキンは、色を3つのカテゴリのうちの1つにグループ化するグローバル・セレクタ別名を定義します。アンカー・カラーに分類されるグローバル・セレクタ別名のcolorプロパティの値を変更することで、ADFスキンが定義するカラー・パレットを迅速に変更できます。

図6-3 色カテゴリSkyrosのグローバル・セレクタ別名

この図は周囲のテキストで説明しています

図6-4に、AFButtonGradientStartActiveColorグローバル・セレクタ別名のデフォルト値を変更した結果を示します。ADFスキン・エディタはまた、 アンカー・カラーから色相値を派生させる派生色の値を更新します。

図6-4 アンカー・カラーの変更と派生色の効果

この図は周囲のテキストで説明しています

図6-5に示すように、派生色の色プロパティを変更し、後に関連付けられているアンカー・カラーに変更を加えた場合、ADFスキン・エディタは、アンカー・カラーに加えた変更が派生色に加えた変更をオーバーライドすることを警告する「派生色の変更の確認」ダイアログを表示します。「OK」をクリックして、アンカー・カラーを変更するとともに、派生色に定義済の値にオーバーライドします。

図6-5 派生色にオーバーライドする

この図は周囲のテキストで説明しています

例6-1に、AFButtonGradientStartActiveColorグローバル・セレクタ別名およびその関連派生色のデフォルト値を定義するSkyros ADFスキン(skyros-v1-desktop.css)からのエントリを示します。これらのグローバル・セレクタ別名は、同じ色相値(209)を共有しますが、彩度および明度は異なる値を指定します。

例6-1 Skyrosのアンカーおよび派生色を有するグローバル・セレクタ別名

/* Anchor, hsl(209, 56%, 63%), #6AA1D5 */
.AFButtonGradientStartActiveColor:alias {
color: #6AA1D5;
}
 
/* Derivative of AFButtonGradientStartActiveColor, hsl(209, 32%, 54%),
#648BAF */
.AFButtonBorderTopActiveColor:alias {
color: #648BAF;
}
 
/* Derivative of AFButtonGradientStartActiveColor, hsl(209, 39%, 62%),
#789FC4 */
.AFButtonBorderActiveColor:alias {
color: #789FC4;
}
 
/* Derivative of AFButtonGradientStartActiveColor, hsl(209, 54%, 79%),
#ACCAE6 */
.AFButtonGradientEndActiveColor:alias {
color: #ACCAE6;
}

例6-2に、例6-1で参照された同一のグローバル・セレクタ別名を示します。例6-2では、ADFスキンは、Skyrosから拡張し、AFButtonGradientStartActiveColorグローバル・セレクタ別名のcolorプロパティの値を#6CD5A1に変更します。ADFスキン・エディタは、アンカー・カラーからその色の値を派生させるグローバル・セレクタ別名の色プロパティを変更します。

例6-2 アンカー・カラーおよび派生色の変更

.AFButtonGradientStartActiveColor:alias {
    color: #6CD5A1; 
}
 
.AFButtonBorderTopActiveColor:alias {
    color: #64AF8A; 
}
 
.AFButtonGradientEndActiveColor:alias {
    color: #ADE6CA; 
}
 
.AFButtonBorderActiveColor:alias {
    color: #79C39E; 
}

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

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

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

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

この図は周囲のテキストで説明しています

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

図6-7 sort-descending-icon-styleセレクタの継承される値

この図は周囲のテキストで説明しています

コンポーネントに関連付けられているイメージを参照するセレクタを公開するADF FacesコンポーネントとADFデータ視覚化コンポーネントの他の例には、次のものがあります。

コンポーネント・セレクタに関連付けられているイメージを変更する場合は、ADFスキンでセレクタを変更して、ADFスキンのプロジェクトにイメージをコピーする必要があります。第6.4.1項「イメージをプロジェクトにコピーする方法」の手順を使用してイメージを個別にコピーできます。

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


ヒント:

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

ADFスキンがSkyrosまたはFusion SimpleファミリのADFスキンを拡張している場合、第6.2項「ADFスキン・デザイン・エディタのイメージおよび色の変更」で説明しているように、デザイン・エディタでより頻繁に使用されるイメージのいくつかを変更できます。ADFスキンがFusion SimpleファミリのADFスキンを拡張している場合、第6.5項「イメージ・エディタの使用」で説明しているように、イメージ・エディタを使用して複数のイメージを変更できます。

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

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

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

  1. セレクタ・エディタのセレクタ・ツリーで、変更するイメージを参照するセレクタを選択します。

    たとえば、図6-8に示すように、ADF Faces columnコンポーネントのsort-descending-icon-styleセレクタを選択して、昇順アイコンを変更します。

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

    この図は周囲のテキストで説明しています

  2. 図6-9に示すように、「Properties」ウィンドウで、「共通」セクションを開いて、「背景イメージ」リストから「イメージのコピー」を選択します。

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

    この図は周囲のテキストで説明しています

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

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

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

/public_html/skins/skin1/images/af_column

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

「Properties」ウィンドウのプロパティの相対URL値が、イメージの新しい場所を参照するよう変更されます。図6-10に例を示します。

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

図6-10 ADFスキンにイメージをインポートした後の「Properties」ウィンドウ

この図は周囲のテキストで説明しています

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

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

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

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

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


注意:

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


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

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

図6-11 ADFスキンのイメージ・エディタ

この図は周囲のテキストで説明しています

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

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

この図は周囲のテキストで説明しています

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

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

この図は周囲のテキストで説明しています

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

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

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

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

イメージ・エディタを使用してイメージを生成するには、次のようにします。

  1. ADFスキンのFusion Simpleファミリを拡張するADFスキンを作成します。

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

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

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

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

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

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

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

    次のように様々な方法があります。

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

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


      ヒント:

      このダイアログを使用して加えた変更は、ADFスキンが使用するすべての色に適用されるため、このダイアログを使用することが新しい色の色相をアプリケーションに適用する近道です。

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

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

      この図は周囲のテキストで説明しています

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

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

    この図は周囲のテキストで説明しています

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


    注意:

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

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

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

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

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

af|column::sort-descending-icon-style {
    background-image: url("images/generated/META-INF/adf/images/fusion/sort_des_ena.png"); 
}
 
af|dvt-map::overview-window-maximize-active-icon {
    content: url("images/generated/bi/images/geoMap/panel_close_dwn.png"); 
}

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

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

simpleスキンを拡張したADFスキンの単純な枠線スタイルを指定できます。これにより、decorativeBoxコンポーネントやパネル・コンポーネント(panelBoxやpanelAccordion)などのコンポーネントが実行時にレンダリングするセレクタの数が少なくなり、結果としてDOM構造が簡略化されます。

この機能は、リリース11.1.1.7.0以降および12.1.2以降のOracle ADFで使用可能です。デフォルトでは、Skyrosから拡張したSkyrosスキンおよびADFスキンは、単純な枠線スタイルを指定します。ADFスキンがOracle ADFで提供される他のADFスキンの1つから拡張している場合、第12.3章「Oracle ADFで提供されるADFスキン」で説明しているように、trinidad-skins.xmlファイルを設定する必要があります。

ADFスキンを登録したtrinidad-skins.xmlファイルの<feature>要素を設定します。例6-5は、trinidad-skins.xmlファイルのmySkinADFスキンの単純な枠線スタイルを有効にする方法示しています。

例6-5 trinidad-skins.xmlファイルの単純な枠線スタイルを有効にする

<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://myfaces.apache.org/trinidad/skin">
    <skin>
        <id>
            mySkin.desktop
        </id>
        <family>
            mySkin
        </family>
        <extends>simple.desktop</extends>
        <render-kit-id>
            org.apache.myfaces.trinidad.desktop
        </render-kit-id>
        <style-sheet-name>
            skins/mySkin/mySkin.css
        </style-sheet-name>
        <bundle-name>
            myBundle
        </bundle-name>
        <translation-source></translation-source>
        <features>
           <feature name="BORDER_STYLE">simple</feature>
        </features>
    </skin> 
</skins>
  前
前 		 次
次
  目次へ移動
目次