この章の内容は次のとおりです。
WebCenter Contentユーザー・インタフェースは、2つの領域でカスタマイズできます。
カスタムOracle ADFスキン
MDSシード・カスタマイズ
前提条件
WebCenter Contentユーザー・インタフェースをカスタマイズするには、Oracle JDeveloperを使用してスキンやシード・カスタマイズを定義する方法を理解している必要があります。Oracle ADFカスタム・スキンを作成するには、JDeveloperのスキン・エディタ、HTMLおよびカスケード・スタイルシートを熟知している必要があります。
注意:
カスタム・スキンを実装するドメインの管理者である必要があります。
WebCenter Contentユーザー・インタフェースをカスタマイズするための全体的な手順は、次のとおりです。
WccAdfCustomSkin.jar
を生成します。WccAdfCustomization.mar
を生成します。Oracle JDeveloper 12.2.1 Studio Editionを使用すると、Oracle WebCenter Contentユーザー・インタフェースをカスタマイズできます。JDeveloperをダウンロードしてインストールした後で、シード・カスタマイズの定義をサポートするようにJDeveloperを構成できます。
WebCenter Contentユーザー・インタフェースのカスタマイズのために、JDeveloperをインストールして構成するタスクは次のとおりです。
これらのタスクの詳細は、「Oracle JDeveloperのインストールと構成」を参照してください。
事前作成済のWccAdfCustomizationアプリケーションを使用すると、WebCenter Contentユーザー・インタフェースのカスタマイズを定義してパッケージ化できます。
WccAdfCustomizationアプリケーションを設定するには:
次のファイルを、インストール済環境からJDeveloperを実行するマシンにコピーします。
WCC_MW_HOME/wccontent/wccadf/WccAdfCustomization.zip
WccAdfCustomization.zip
を解凍します。
これにより、WccAdfCustomizationアプリケーションが含まれたWccAdfCustomization
フォルダが作成されます。
JDeveloperでWccAdfCustomizationアプリケーションを開きます。
「アプリケーションを開く…」を選択します。
「アプリケーションを開く」ダイアログ・ボックスで、手順2で作成したWccAdfCustomization
フォルダに移動します。
WccAdfCustomization.jwsを選択します。
「開く」をクリックします。
次の手順で、RIDC接続URLと管理者ユーザー名を構成します。
アプリケーション・ナビゲータの「アプリケーション・リソース」パネルで、「ディスクリプタ」→ADF META-INFの順に開きます。
エディタでconnections.xml
ファイルを開きます。
wccadmin
を実際のユーザー名で置き換えます。次に例を示します。
<Contents>weblogic</Contents>
example-cs
を、Oracle WebCenter Content Serverインスタンスを実行している実際のホスト名と置き換えます。
コンテンツ・サーバーが異なるIDCポートでリスニングする場合は、IDCポート番号4444
を更新します。次に例を示します。
<Contents>idc://cshost.example.com:4444</Contents>
「保存」をクリックします。
WccAdfCustomizationアプリケーションを実行します。
「アプリケーション・ナビゲータ」で、ViewController→「Webコンテンツ」の順に開きます。
index.htmlを右クリックして、「実行」を選択します。
これにより、JDeveloper統合Weblogic Serverを起動し、WccAdfCustomizationアプリケーションをサーバーにデプロイします。
ブラウザにindex.htmlページが表示されたら、そのページのリンクをクリックして、WebCenter Contentユーザー・インタフェースに移動します。
weblogic
ユーザーとしてログインします
WebCenter Contentユーザー・インタフェースが期待どおりに動作していることを確認します。
WccAdfCustomizationアプリケーションを停止します。
赤色の「終了」ボタンをクリックして、WccAdfCustomizationアプリケーションを停止します。
(オプション) IntegratedWebLogicServerアプリケーションも同様に停止できます。
WccAdfCustomizationアプリケーションには、事前作成済のwcc-custom-skin
というカスタム・スキンがあります。このカスタム・スキンでは、WebCenter Contentユーザー・インタフェース用のCSSカスタマイズを定義できます。このスキンは、JDeveloperではViewController→「Webコンテンツ」→「スキン」→wcc-custom-skin→wcc-custom-skin.css
にあります。また、ファイル・システムではViewController/public_html/skins/wcc-custom-skin/wcc-custom-skin.css
にあります。
このアプリケーションには、カスタム・イメージを配置できるimages
フォルダも含まれています。このフォルダは、ViewController→「Webコンテンツ」→「images」
にあります。ファイル・システムでは、ViewController/public_html/images/
にあります。
ブランド・バーのロゴやタイトルの変更などのユニバーサルな変更では、カスタム・スキンを作成する必要はありません。かわりに、アプリケーション構成を直接更新し、customBrandingLogo
およびcustomBrandingTitle
の値を変更できます。詳細は、『Oracle Fusion Middleware WebCenter WLSTコマンド・リファレンス』のユーザー・インタフェース・コマンドに関する項を参照してください。
スキンに対して行った変更を保存する場合、ユーザー・インタフェースをリフレッシュして結果を確認する必要があります。
注意:
特にイメージに関する変更を行う場合、ユーザー・インタフェースでの変更を見るには、ブラウザのキャッシュをクリアする必要のある場合があります。
カスタマイズの設計とテストは、カスタム・スキンに内にある次のアイテムが対象になります。
ブランド・バー・ロゴ
デフォルトのフォント・サイズ
wcc-skin
セレクタ
次の各項では、スキンのカスタマイズについての説明と例を示します。JDeveloperのスキン・エディタの使用方法の詳細は、スキン・エディタ・ユーザー・ガイドを参照してください。
自分の所有しているイメージを使用してWebCenter Contentユーザー・インタフェースのブランド・バーのロゴをカスタマイズできます。
独自のイメージを使用してブランド・バー・ロゴをカスタマイズするには:
カスタマイズ用のカスタム・イメージの作成およびコピーを行います。
ファイル・システムから、使用するカスタム・イメージを作成するか、またはこのフォルダにコピーします。
WccAdfCustomization/ViewController/public-html/images
スキン・エディタの「セレクタ」タブで、次のものを選択します。
Style Classes/Miscellaneous/.AFBrandingBarLogo
「プロパティ・インスペクタ」の「共通」で、「背景イメージ」用のメニュー(右の方)をクリックし、「編集」を選択します。
手順1で作成したフォルダ内の新しいロゴ・イメージの場所を指定して選択し、「OK」をクリックします。
必要に応じてイメージが収まるように幅および高さのプロパティを調整します(デフォルトでは、.AFBrandingBarLogo
は高さ2.5em、幅119pxとなっています)。
「ファイル」メニューから「保存」を選択します。
生成されたセレクタおよびルールを確認するには、「ソース」タブに切り替えます。次に例を示します。
.AFBrandingBarLogo { background-image: url("../../images/my-company-logo.png"); height: 3.2em; width: 128px; }
WebCenter Contentユーザー・インタフェースに独自のデフォルト・フォントサイズを指定できます。
デフォルトのフォント・サイズをカスタマイズする手順は、次のとおりです。
セレクタをカスタマイズするには、「ソース」タブでカスタム・スキンの.css
ファイルに対して直接それらのルールを追加および修正する必要があります。
カスタマイズの基本とするセレクタ情報は、次のファイルにあります。
wcc-styles.css
: このファイルには、WebCenter Contentセレクタおよびエイリアス(接頭辞「Wcc」
)のすべてが含まれます。
wcc-skin.css
: このファイルには、基本のADF定義をオーバーライドするWebCenter Content拡張が含まれています。このファイルでは新しいセレクタは定義されていません。
これらのファイルのいずれかからルールを見つけてコピーし、「ソース」タブでカスタム・スキンの.css
ファイルに貼り付け、そこでルールを修正すると簡単です。
注意:
wcc-styles.css
ファイルおよびwcc-skin.css
ファイルで直接セレクタ・ルールを修正することはできません。
カスタム・スキン用の.css
ファイルは、wcc-styles.cssファイルおよびwcc-skin.css
ファイルの拡張です。ルールを指定すると、これらのファイルにある関連ルールをオーバーライドします。
たとえば、Web UIブランディング・バー・タイトル・セレクタをカスタマイズする手順は、次のとおりです。
JDeveloperでは、WebCenter Contentユーザー・インタフェースのカスタム・スキンをデプロイして、そのスキンをWccAdfCustomSkin.jar
ファイルにパッケージ化できます。
カスタム・スキンをパッケージ化するには:
ViewController/deploy/
の下にWccAdfCustomSkin.jar
ファイルが生成されます。WebCenter Contentユーザー・インタフェースでは、customer
というシード・カスタマイズ・レイヤーを定義しています。このレイヤーは、顧客がユーザー・インタフェースにシード・カスタマイズを定義するためのものです。顧客は、このcustomer
レイヤーに1つまたは複数のレイヤー値を定義できます。ほとんどの場合は、1つのレイヤー値で十分です。ただし、複数のレイヤー値を定義している場合、それらのレイヤー値に対するカスタマイズは、それらの値が定義された順序で適用されます。
customer
レイヤーでは、各レイヤー値に複数のシード・カスタマイズを定義できます。
各レイヤー値にシード・カスタマイズを定義するには:
「カスタマイズ開発者」ロールを使用してJDeveloperを起動します。
「カスタマイズ開発者」ロールを使用してJDeveloperでWccAdfCustomizationアプリケーションを初めて開くと、そのアプリケーション・ファイルはJDeveloperにより変更されます。そのため、「すべて保存」をクリックします。
customer
レイヤーのレイヤー値ごとに、次の手順を実行します。
「WccAdfCustomization - カスタマイズ・コンテキスト」ウィンドウに移動して、customer
ヒント・レイヤーで特定のレイヤー値を選択してから、「すべて保存」をクリックします。
ViewController
プロジェクトから、WccAdfLibrary.jar (通常はライブラリ・リストの最後の方にある)を探して開いて、wccを開きます。
ここには、すべてのWebCenter Contentユーザー・インタフェース・ページ(.jsf
)と、ページ・フラグメント(.jsff
)がリスト表示されます。
シード・カスタマイズを定義するページまたはページ・フラグメントごとに、次のアクションを順序どおりに実行します。
エディタで開きます。
ページまたはページ・フラグメントにシード・カスタマイズを定義します。次に示すようなカスタマイズがありますが、これらに限定されるものではありません。
特定のUIコンポーネントを非表示または削除します。
UIコンポーネントを移動します。
新しいUIコンポーネントを追加します。
UIコンポーネントのプロパティを変更します。
リソース文字列を変更します。
「すべて保存」をクリックします。
WccAdfCustomizationアプリケーションを実行して、シード・カスタマイズをテストします。
index.htmlを右クリックして、「実行」を選択します。
テストが終了したら、WccAdfCustomizationアプリケーションを停止します。
JDeveloperでMDSシード・カスタマイズを定義することで、WebCenter Contentユーザー・インタフェースを変更できます。たとえば、次の手順は、「ドキュメント・プロパティ」ページを以下のカスタマイズ内容で変更する方法を示しています。
「サマリー」タブの名前を、「Overview」に変更します
「メタデータ」タブの「システム・メタデータ」セクションを非表示にします
「ドキュメント・プロパティ」ページにMDSシード・カスタマイズを定義するには:
JDeveloperのエディタで、docInfoTabs.jsff
を開きます。
ID summtabのaf:showDetailItemコンポーネントを選択します。
「プロパティ・インスペクタ」ウィンドウで、「テキスト」プロパティのメニューをプルダウンして、テキスト・ソースの選択. . . を選択します。
「テキスト・リソースの選択」ダイアログ・ボックスで、次の手順を実行します。
エントリoracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr)が選択されていることを確認します。
「表示値」の入力ボックスに、Overview
と入力します。
「保存して選択」をクリックします。
「オーバーライドの確認」ポップアップのプロンプトが表示されたら、「はい」をクリックしてポップアップを閉じます。この確認ポップアップが再度表示されないようにする場合は、「次回このメッセージを表示しない」を選択します。
JDeveloperの応答が回復するまで待機します。これには数秒かかる場合があります。
同じaf:showDetailItem
コンポーネントを再度選択します。
「プロパティ・インスペクタ」ウィンドウで、「ShortDesc」プロパティのメニューをプルダウンして、テキスト・ソースの選択. . . を選択します。
「テキスト・リソースの選択」ダイアログ・ボックスで、次の手順を実行します。
エントリoracle.wcc.adf.vc.resource.CustomizationBundle (ViewController.jpr)が選択されていることを確認します。
「一致するテキスト・リソース」の表で、「表示値」がOverview
の行を選択します。
「選択」をクリックします。
これらの変更を行うと、af:showDetailItemコンポーネントの冒頭部分は次のようになります。
<af:showDetailItem text="#{viewcontrollerBundle.OVERVIEW}" id="summtab" shortDesc="#{viewcontrollerBundle.OVERVIEW}
Textプロパティの値が#{diBundle.MTAB_SYSTEM_METADATA}
のaf:showDetailHeaderコンポーネントを選択します。
「プロパティ・インスペクタ」ウィンドウで、「レンダリング済」プロパティの値を編集し、「False」を選択します。[Enter]をクリックして変更を保存します。
「すべて保存」をクリックします。
インストール済のOracle WebCenterユーザー・インタフェース環境にカスタマイズを適用するには、カスタム・スキンとシード・カスタマイズを適用します。
インストール済環境のWebCenter Contentユーザー・インタフェースに、新しいWccAdfCustomSkin.jar
ファイルで定義したカスタム・スキンを適用するには、新しいスキンをポイントして、WebCenter Contentユーザー・インタフェース・ドメイン内のWccAdfCustomSkin.jar
ファイルを新しいものに置換するように、ユーザー・インタフェースのアプリケーション構成を更新します。
WCC_MW_HOME
/oracle_common/common/bin
に移動して、wlst.sh
またはwlst.cmd
を実行します。16225
です。次に例を示します。wls:/offline> connect() Please enter your username :weblogic Please enter your password : Please enter your server URL [t3://localhost:7001] :t3://localhost:16225
updateWccAdfConfig
コマンドを実行して、skinFamily
プロパティをこのカスタム・スキンを指定するように更新します。次に例を示します。wls:/wccadf_domain/serverConfig> updateWccAdfConfig(appName='Oracle WebCenter Content - Web UI', skinFamily='wcc-custom-skin')
WCC_MW_HOME
wccontent/wccadf
内のWccAdfCustomSkin.jar
ファイルを、生成したファイルに置き換えます。新しいWccAdfCustomSkin.jar
ファイルで定義されたカスタム・スキンが、ただちに有効になります。ブラウザのキャッシュをクリアし、WebCenter Contentユーザー・インタフェースにログインして、カスタマイズを確認します。
インストール済環境内のWebCenter Contentユーザー・インタフェースに、WccAdfCustomization.mar
ファイルで定義したシード・カスタマイズを適用するには、customer
カスタマイズ・レイヤーの値を定義し、WebCenter ContentドメインのMDSリポジトリにWccAdfCustomization.mar
ファイルをインポートするように、WebCenter Contentユーザー・インタフェース・アプリケーションの構成を更新します。
WebCenter Contentユーザー・インタフェースにシード・カスタマイズを適用するには:
WccAdfCustomization.mar
ファイルをステージングの場所(例: /tmp/WccAdfCustomization.mar
)にコピーします。customer
カスタマイズ・レイヤーの値を定義するように、WebCenter Contentユーザー・インタフェース・アプリケーション構成の構成を更新します。WCC_MW_HOME
oracle_common/common/bin
に移動して、wlst.sh
またはwlst.cmd
を実行します。16225
です。次に例を示します。wls:/offline> connect() Please enter your username :weblogic Please enter your password : Please enter your server URL [t3://localhost:7001] :t3://localhost:16225
updateWccAdfConfig
コマンドを実行して、customerCustomizationLayerValues
プロパティをcustomer
レイヤーの値に更新します。次に例を示します。wls:/wccadf_domain/serverConfig> updateWccAdfConfig(appName='Oracle WebCenter Content - Web UI', customerCustomizationLayerValues='demo')
WccAdfCustomization.mar
ファイルをWCCUIドメインのMDSリポジトリにインポートします。WCC_MW_HOME
oracle_common/common/bin
に移動して、wlst.sh
またはwlst.cmd
を実行します。7001
)に接続します。次に例を示します。wls:/offline> connect() Please enter your username :weblogic Please enter your password : Please enter your server URL [t3://localhost:7001] :
importMetadata
コマンドを実行して、WccAdfCustomization.mar
ファイルで定義したメタデータをMDSリポジトリにインポートします。次に例を示します。wls:/wccadf_domain/serverConfig> importMetadata('Oracle WebCenter Content - Web UI', 'WCCADF_server1', '/tmp/WccAdfCustomization.mar')
このWccAdfCustomization.mar
ファイルで定義したシード・カスタマイズは、すぐに有効になります。ブラウザのキャッシュをクリアし、WebCenter Contentユーザー・インタフェースにログインして、カスタマイズを確認します。