| Oracle® Fusion Middleware Oracle WebCenter Contentでの開発 12c (12.2.1) E70070-01 |
|
 前 |
 次 |
ホーム > Oracle WebCenter Contentによる開発 > WebCenterコンポーネントのカスタマイズ
| Oracle® Fusion Middleware Oracle WebCenter Contentでの開発 12c (12.2.1) E70070-01 |
|
前 |
次 |
ホーム > Oracle WebCenter Contentによる開発 > WebCenterコンポーネントのカスタマイズ
この章では、WebCenter Contentユーザー・インタフェースのカスタマイズに、カスタムのOracle Application Development Framework (Oracle ADF)スキンを使用する方法と、Oracle Metadata Services (MDS)シード・カスタマイズを使用する方法について説明します。
この章の内容は次のとおりです。
WebCenter Contentユーザー・インタフェースは、2つの領域でカスタマイズできます。
カスタムOracle ADFスキン
MDSシード・カスタマイズ
前提条件
WebCenter Contentユーザー・インタフェースをカスタマイズするには、Oracle JDeveloperを使用してスキンやシード・カスタマイズを定義する方法を理解している必要があります。Oracle ADFカスタム・スキンを作成するには、JDeveloperのスキン・エディタ、HTMLおよびカスケード・スタイルシートを熟知している必要があります。
|
注意: カスタム・スキンを実装するドメインの管理者である必要があります。 |
WebCenter Contentユーザー・インタフェースをカスタマイズするための全体的な手順は、次のとおりです。
Oracle JDeveloper 12.2.1.0.0 Studio Editionをインストールおよび構成します。
WccAdfCustomizationアプリケーションを設定します。
カスタム・スキンを定義して、WccAdfCustomSkin.jarを生成します。
シード・カスタマイズを定義して、WccAdfCustomization.marを生成します。
インストール済環境にカスタマイズを適用します。
Oracle JDeveloper 12.2.1.0.0 Studio Editionを使用すると、Oracle WebCenter Contentユーザー・インタフェースをカスタマイズできます。JDeveloperをダウンロードしてインストールした後で、シード・カスタマイズの定義をサポートするようにJDeveloperを構成できます。
WebCenter Contentユーザー・インタフェースのカスタマイズのために、JDeveloperをインストールして構成するタスクは次のとおりです。
これらのタスクの詳細は、第2章「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ユーザー・インタフェースに独自のデフォルト・フォントサイズを指定できます。
デフォルトのフォント・サイズをカスタマイズする手順は、次のとおりです。
スキン・エディタの「セレクタ」タブで、次のものを選択します。
Global Selector Aliases/Font/.AFDefaultFont:alias
「プロパティ・インスペクタ」の「フォント/テキスト」で、「フォント・サイズ」に新しい値を入力します。
「ファイル」メニューから「保存」を選択します。
生成されたセレクタおよびルールを確認するには、「ソース」タブに切り替えます。次に例を示します。
.AFDefaultFont:alias
{
font-size: 14px;
}
セレクタをカスタマイズするには、「ソース」タブでカスタム・スキンの.cssファイルに対して直接それらのルールを追加および修正する必要があります。
カスタマイズの基本とするセレクタ情報は、次のファイルにあります。
wcc-styles.css: このファイルには、WebCenter Contentセレクタおよびエイリアス(接頭辞「Wcc」)のすべてが含まれます。さらに、このファイルには冒頭付近にセレクタ、グローバル・エイリアス、ブランド・バーおよび色スキームに関連するスキンのカスタマイズのヒントを一覧にしたセクションがあります。
wcc-skin.css: このファイルには、基本のADF定義をオーバーライドするWebCenter Content拡張が含まれています。このファイルでは新しいセレクタは定義されていません。
これらのファイルのいずれかからルールを見つけてコピーし、「ソース」タブでカスタム・スキンの.cssファイルに貼り付け、そこでルールを修正すると簡単です。
|
注意: wcc-styles.cssファイルおよびwcc-skin.cssファイルで直接セレクタ・ルールを修正することはできません。
カスタム・スキン用の |
たとえば、Web UIブランディング・バー・タイトル・セレクタをカスタマイズする手順は、次のとおりです。
スキン・エディタの左上隅にある「セレクタ」タブで、「拡張スキン」メニューをクリックし、simple.desktop→wcc-styles.cssを選択します。
「ソース」タブで、「検索」バーを使用してWccBrandingBarTitleを検索します。必要に応じて、検索バー右側の下矢印を使用して後続のインスタンスを検索します。
名前および関連する定義を含む行を選択し、その上で右クリックして「コピー」を選択します。
.WccBrandingBarTitle
{
-tr-rule-ref: selector(".AFBrandingBarTitle");
}
wcc-custom-skin.cssファイルをエディタで開いた場合は、そのタブをクリックしてこのファイルに切り替えます。開かれない場合、「アプリケーション・ナビゲータ」タブでその場所を指定し、ダブルクリックしてエディタで開きます。
ViewController > Web Content > skins > wcc-custom-skin > wcc-custom-skin.css
「ソース」タブをクリックし、定義が必要なファイルにカーソルを置き、右クリックして「貼付け」を選択してルールを貼り付けます。
カスタム拡張の一部としてオーバーライドしない定義のある行を削除し、カスタマイズ用の行を追加します。たとえば、次のようにカスタム・カラーを選択します。
.WccBrandingBarTitle
{
color: #993300;
}
「ファイル」メニューから「保存」を選択します。
スキンのカスタマイズが終了したら、アプリケーションを停止します。「実行」メニューから「終了」を選択し、続いてWccAdfCustomizationを選択します。
JDeveloperでは、WebCenter Contentユーザー・インタフェースのカスタム・スキンをデプロイして、そのスキンをWccAdfCustomSkin.jarファイルにパッケージ化できます。
カスタム・スキンをパッケージ化するには:
「アプリケーション・ナビゲータ」タブで、「ViewController」プロジェクトを右クリックし、「デプロイ」メニューから「WccAdfCustomSkin」を選択します。
デフォルトのデプロイメント・アクション(「ADFライブラリのJARファイルへのデプロイ」)を継続し、「終了」をクリックします。ViewController/deploy/の下にWccAdfCustomSkin.jarファイルが生成されます。
WebCenter Contentユーザー・インタフェースでは、customerというシード・カスタマイズ・レイヤーを定義しています。このレイヤーは、顧客がユーザー・インタフェースにシード・カスタマイズを定義するためのものです。顧客は、このcustomerレイヤーに1つまたは複数のレイヤー値を定義できます。ほとんどの場合は、1つのレイヤー値で十分です。ただし、複数のレイヤー値を定義している場合、それらのレイヤー値に対するカスタマイズは、それらの値が定義された順序で適用されます。
customerレイヤーの値は、adf-config.xmlファイルとCustomizationLayerValues.xmlファイルで定義できます。
アプリケーション・ナビゲータの「アプリケーション・リソース」パネルで、「ディスクリプタ」→ADF META-INFの順に開きます。
adf-config.xmlファイルをエディタで開きます。
「ソース」タブで、<customerCustomizationLayerValues>タグを探して、そのタグの値を編集します。次に例を示します。
<customerCustomizationLayerValues>demo</customerCustomizationLayerValues>
「概要」タブで、左側のパネルから「MDS」を選択します。
右側で、「デザインタイム・カスタマイズ・レイヤー値の構成」リンクをクリックします。
これにより、新しいエディタ・ウィンドウでCustomizationLayerValues.xmlファイルを開きます。customerレイヤーを見つけて、そのレイヤーに同じレイヤー値を定義します。次に例を示します。
<cust-layer name="customer" id-prefix="c"> <cust-layer-value value="demo" display-name="Demo" id-prefix="d"/> </cust-layer>
「すべて保存」をクリックします。
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]をクリックして変更を保存します。
「すべて保存」をクリックします。
シード・カスタマイズの指定とテストが完了したら、そのカスタマイズをデプロイ用にWccAdfCustomization.marファイルにパッケージ化します。
シード・カスタマイズをパッケージ化するには:
WccAdfCustomizationアプリケーションを右クリックし、「デプロイ」→WccAdfCustomization…の順に選択します。
「WccAdfCustomizationのデプロイ」ダイアログ・ボックスでは、デプロイメント・アクションをデフォルトの選択(「MARにデプロイ」)のままにして、「終了」をクリックします。
これにより、deploy/ディレクトリ内にWccAdfCustomization.marファイルが生成されます。
インストール済のOracle WebCenterユーザー・インタフェース環境にカスタマイズを適用するには、カスタム・スキンとシード・カスタマイズを適用します。
インストール済環境のWebCenter Contentユーザー・インタフェースに、新しいWccAdfCustomSkin.jarファイルで定義したカスタム・スキンを適用するには、新しいスキンをポイントして、WebCenter Contentドメイン内のWccAdfCustomSkin.jarファイルを新しいものに置換するように、ユーザー・インタフェースのアプリケーション構成を更新します。
WLSTコマンドを実行して、新しいスキンをポイントするようにWebCenter Contentユーザー・インタフェース・アプリケーションの構成を更新します。
WCC_MW_HOME/oracle_common/common/binに移動して、wlst.shまたはwlst.cmdを実行します。
WCCADF_server1のポートに接続します。このポートのデフォルトは、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')
WebCenter Contentドメインで、WCCADF_server1を停止します。
WCC_MW_HOME/wccontent/wccadf内のWccAdfCustomSkin.jarファイルを、生成したファイルに置き換えます。
WebCenter Contentドメインで、WCCADF_server1を再起動します。
新しいWccAdfCustomSkin.jarファイルで定義されたカスタム・スキンが、ただちに有効になります。ブラウザのキャッシュをクリアし、WebCenter Contentユーザー・インタフェースにログインして、カスタマイズを確認します。
インストール済環境内のWebCenter Contentユーザー・インタフェースに、WccAdfCustomization.marファイルで定義したシード・カスタマイズを適用するには、customerカスタマイズ・レイヤーの値を定義し、WebCenter ContentドメインのMDSリポジトリにWccAdfCustomization.marファイルをインポートするように、WebCenter Contentユーザー・インタフェース・アプリケーションの構成を更新します。
WebCenter Contentユーザー・インタフェースにシード・カスタマイズを適用するには:
WccAdfCustomization.marファイルをステージングの場所(例: /tmp/WccAdfCustomization.mar)にコピーします。
WLSTコマンドを実行して、customerカスタマイズ・レイヤーの値を定義するように、WebCenter Contentユーザー・インタフェース・アプリケーション構成の構成を更新します。
WCC_MW_HOME/oracle_common/common/binに移動して、wlst.shまたはwlst.cmdを実行します。
WCCADF_server1のポートに接続します。このポートのデフォルトは、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')
WLSTコマンドを実行して、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')
WebCenter Contentドメインで、WCCADF_server1を停止します。
WebCenter Contentドメインで、WCCADF_server1を再起動します。
このWccAdfCustomization.marファイルで定義したシード・カスタマイズは、すぐに有効になります。ブラウザのキャッシュをクリアし、WebCenter Contentユーザー・インタフェースにログインして、カスタマイズを確認します。
