手順4: 新しいカスタマイズのテスト
3. IsSeededInteractionAvailableをアクティブにした結果、コンテナ・オブジェクトのアクショ
ン・アイコンには「コンテンツの表示」「コンテンツの表示」「コンテンツの表示」「コンテンツの表示」アクションが表示されます。このアクションを使用 すると、イメージとポートレットを非表示にしたり表示することができます（図4-19）。こ こで、これらの操作を試してみます。
図図
図図4-19「コンテンツの表示」アクション「コンテンツの表示」アクション「コンテンツの表示」アクション「コンテンツの表示」アクション
手順3で行った他のページ・カスタマイズもすべて反映されています。
■ ポートレットのタイトルは、Sample Portletに変更されています。ポートレット・タイ トルはTextプロパティの影響を受けているため、実行時にタイトルをカスタマイズま たはパーソナライズすることはできません。アクション・アイコンをクリックして
「カスタマイズ」をクリックすると、これがわかります。
■ コンポーネントは、垂直ではなく水平に表示されています。イメージの1つに対して アクション・アイコンをクリックすると、「移動」アクションに「上へ」と「下へ」で はなく「左」と「右」が表示されることがわかります。
■ DisplayHeaderをtrueに変更したため、コンテナ・オブジェクトのpanelCustomizable
にヘッダー領域が表示されています。DisplayHeader設定を変更する前、手順3では このようなヘッダーはレイアウトになかったことを思い出してください。
ページを実行した人には、これらのページ・カスタマイズが表示されます。
4. 先に進む前に、プロパティ・インスペクタで行ったポートレット・タイトルの永続的カス タマイズを削除します。第8章「セキュリティの設定」では、実行時に名前を変更できる ように、ポートレットのtitleプロパティを使用してページをパーソナライズする例を示し ます。
a. ブラウザを閉じ、JDeveloperに戻ります。
b. MyPage.jpsxの構造ウィンドウで、「adfp:portlet」を選択します。
c. プロパティ・インスペクタでTextフィールドをクリックし、プロパティ・インスペク タのツールバーで「デフォルトにリセット」「デフォルトにリセット」「デフォルトにリセット」「デフォルトにリセット」アイコンをクリックします。これによっ て、テキストSample Portletが削除されます。
ビジュアル・エディタで、ポートレット・ヘッダーの名前がMyJavaPortlet1に戻りま す。
将来、1つのページ上に複数のpanelCustomizableコンポーネントを使用し、それぞれで、
1つのshowDetailFrameコンポーネント内に複数のポートレットまたはオブジェクトを含め ることができます。各レイアウトにそれぞれの「移動」、「最大化」および「表示/非表示」機 能があるため、ページに複数のレイアウトを配置すると、コンポーネントおよびポートレット
手順5: ルック・アンド・フィールの変更
手順 手順 手順
手順 5: ルック・アンド・フィールの変更 ルック・アンド・フィールの変更 ルック・アンド・フィールの変更 ルック・アンド・フィールの変更
Oracle WebCenter Frameworkでは、アプリケーションのスタイル（つまり、ルック・アンド・
フィール）を制御する方法が2つあります。
■ Oracle ADF Facesスキンを使用して、グローバル・スタイルをアプリケーション全体に適
用します。このオプションを選択した場合、独自のカスタム・スキンでスタイル・セレク タを使用して、コンポーネントやコンポーネント領域の選択した局面を変更できます。
■ プロパティ・インスペクタを使用して、設計時にスタイル関連のプロパティを変更します。
次の各手順では、この両方の方法を使用して、MyPage.jspxのルック・アンド・フィールを変 更します。
■ 手順5a: デフォルトのADF Facesスキンを使用したshowDetailFrame背景の変更
■ 手順5b: カスタム・スキンを使用した独自のスタイルの適用
手順 手順 手順
手順 5a: デフォルトの デフォルトの デフォルトの デフォルトの ADF Faces スキンを使用した スキンを使用した スキンを使用した スキンを使用した showDetailFrame 背景の変更 背景の変更 背景の変更 背景の変更
この手順では、（Oracleという名前の）デフォルトのADF Facesスキンを使用して、スタイル 関連のプロパティを操作します。
1. 構造ウィンドウで、「cust:showDetailFrame」エントリの1つを選択します。このコン ポーネントを使用して、スタイル・プロパティ値を指定する方法を示します。
2. プロパティ・インスペクタで、Backgroundプロパティを開きます。
デフォルトのADF Facesスキンには、light、mediumおよびdarkの3つの設定がありま す。このコンポーネントには濃い背景色を選択します。
3. 値をdarkに変更します（図4-20を参照）。
図 図 図
図4-20 プロパティ・インスペクタプロパティ・インスペクタプロパティ・インスペクタプロパティ・インスペクタ: Background
4. 「ファイル」「ファイル」、「すべて保存」「ファイル」「ファイル」「すべて保存」「すべて保存」の順にクリックして、作業を保存します。「すべて保存」
再度ページを実行する準備として、赤い四角形をクリックして、埋込み を停止しま
手順5: ルック・アンド・フィールの変更
6. 「「「「MyPage.jspx」」」」を右クリックし、「実行」「実行」「実行」「実行」をクリックします。
コンパイラ・エラーがなければ、ページが新しいブラウザ・ウィンドウ内に開きます
（図4-21）。showDetailFrameの背景の装飾が変更されたことに注意してください。
図 図 図
図4-21 濃い背景色のイメージ濃い背景色のイメージ濃い背景色のイメージ濃い背景色のイメージ
今度は、新しいスキンを作成し、デフォルトのADF Facesスキンで定義されているスタイ ルをオーバーライドします。
手順 手順
手順 手順 5b: カスタム・スキンを使用した独自のスタイルの適用 カスタム・スキンを使用した独自のスタイルの適用 カスタム・スキンを使用した独自のスタイルの適用 カスタム・スキンを使用した独自のスタイルの適用
この手順では、新しいスキンを作成してアプリケーションに登録し、カスタム・スタイルを
MyPage上のコンポーネントに適用する方法を学びます。
1. まず、JDeveloperに戻り、新しいスタイルシート（.css）を作成します。
a. アプリケーション・ナビゲータで、「「「「ViewController」」」」を右クリックし、「新規」「新規」「新規」を選「新規」
択します。
b. 新規ギャラリの「カテゴリ」で、「Web Tier」を開き、「「「「HTML」」を選択します。」」 c. 「項目」で「「「「CSSファイル」ファイル」ファイル」ファイル」を選択し、「「「「OK」」をクリックします。」」
d. 「ファイル名」に、mystyle.cssを入力します（図4-22を参照）。
図 図 図
図4-22 Cascading Style Sheetの作成の作成の作成の作成
手順5: ルック・アンド・フィールの変更
以降の手順で、新しいスキンをアプリケーションに登録します。これには、
adf-faces-skins.xmlという名前のファイルを作成し、スキンのID、場所、.cssなど を示すタグの短いリストをこのファイルに移入します。
2. adf-faces-skins.xmlを作成します。
a. アプリケーション・ナビゲータで、「ViewController」、「Webコンテンツ」の下の
「
「「
「WEB-INF」」」」フォルダを右クリックし、「新規」「新規」「新規」「新規」を選択します。
b. 新規ギャラリで、「フィルタ方法」スコープを「すべてのテクノロジ」「すべてのテクノロジ」「すべてのテクノロジ」「すべてのテクノロジ」に設定します。
c. 「General」ノードで、「「「「XML」」」を選択します。」
d. 右ペインで、「「「「XML文書」文書」文書」文書」を選択し、「「「「OK」」をクリックします。」」
e. 「ファイル名」フィールドに、ファイル名としてadf-faces-skins.xmlを入力しま す（図4-23を参照）。
図 図 図
図4-23 adf-faces-skins.xmlの作成の作成の作成の作成
f. このファイルをWEB-INFフォルダに格納するため、「「「「OK」」」をクリックしてファイル」 を作成します。
エディタに空のXMLファイルが表示されます。このファイルは、アプリケーション・
ナビゲータで「WEB-INF」の下に表示されています。
3. タグをadf-faces-skins.xmlに追加して、新しいスキンを指定します（また、新しい スタイルシートmystyle.cssをポイントします）。
a. 次のコードをコピーしてXMLエディタに貼り付けます。
<?xml version="1.0" encoding="ISO-8859-1"?>
<skins xmlns="http://xmlns.oracle.com/adf/view/faces/skin">
<skin>
<id>mystyle</id>
<family>mystyle</family>
手順5: ルック・アンド・フィールの変更
ファイルは、図4-24のように表示されます。
図 図 図
図4-24 adf-faces-skins.xmlの構成の構成の構成の構成
b. 「ファイル」「ファイル」、「保存」「ファイル」「ファイル」「保存」「保存」の順にクリックして、adf-faces-skins.xml「保存」 を保存します。
次の手順では、adf-faces-config.xml内に<skin-family>タグを設定することにより、
この新しいスキンを使用するようにアプリケーションを構成します。
4. adf-faces-config.xml内の<skin-family>タグを編集します。
a. 「ViewController」、「Webコンテンツ」、「WEB-INF」の下にある
「adf-faces-config.xml」を開きます。
b. oracle（デフォルトのスキン）を新しいスキンのファミリ名に置き換えます。
mystyleを入力します（図4-25を参照）。
図 図 図
図4-25 adf-faces-config.xmlでのスキン・ファミリの編集でのスキン・ファミリの編集でのスキン・ファミリの編集でのスキン・ファミリの編集
c. 「ファイル」「ファイル」、「保存」「ファイル」「ファイル」「保存」「保存」の順にクリックします。「保存」
これで、新しいスキンがアプリケーションに登録されました。今度は、MyPage上の
showDetailFrameコンポーネントに適用するスタイルシートにいくつかのスタイル・セレ
クタを追加します。
5. 次のスタイル・セレクタをmystyle.cssに追加します。
a. アプリケーション・ナビゲータの「ViewController」、「Webコンテンツ」、「css」の下 の「「「「mystyle.css」」」」をダブルクリックします。
b. 次のコードをコピーしてファイルの一番下に貼り付けます。
af|showDetailFrame::header-light {
color:Purple;
}