| Oracle® Fusion Middleware Oracle WebCenter Contentでの開発 12c (12.2.1.3.0) E90143-05 |
|
 前 |
 次 |
この章の内容は次のとおりです。
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_HOMEwccontent/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_HOMEoracle_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_HOMEoracle_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ユーザー・インタフェースにログインして、カスタマイズを確認します。
