Oracle WebCenter Sites 11g： グローバル構成プロパティ、ツールバー、メニュー・バーのカスタマイズ

概要

    目的

    このチュートリアルでは、Oracle WebCenter Sites 11gのContributorインタフェースのグローバル構成プロパティ、ツールバー、およびメニュー・バーをカスタマイズする方法について説明します。

    所要時間

    約60分

    概要

    WebCenterスタックOracle WebCenterは、ソーシャル・ビジネスで対象を絞ったWebサイトを使って顧客ロイヤルティを向上させることが可能な統合プラットフォームです。 このWebサイトにより、ソーシャル・ビジネスの顧客はコンテキストに合った情報にシームレスにアクセスできます。

    Oracle WebCenterの重要な柱の1つが、Oracle WebCenter Sitesです。 Oracle WebCenter Sites 11g Webエクスペリエンス管理（WEM）プラットフォームを使用すると、マーケティング担当者とビジネス・ユーザーは、複数のチャネルを通じてグローバルに、コンテキストに即したソーシャル体験や双方向のオンライン体験を簡単に作成、管理し、売上げとロイヤルティの向上を図ることができます。

    このチュートリアルでは、Contributorインタフェースのグローバル構成プロパティ、ツールバー、およびメニュー・バーをカスタマイズする方法について説明します。

    シナリオ

    このチュートリアルでは、以下を実行します。

    • 同時に開くことができるタブの数を変更する
    • AVIArticleの調査ビューのツールバーにカスタムのボタンとアクションを追加する
    • AVIArticleのメニュー・バーにカスタムのメニューとメニュー・コマンドを追加する

    ハードウェアとソフトウェアの要件

    • Oracle WebCenter Sites 11gのJumpStart Kit、またはインストールされ実行されているサンプル・サイトの完全なインストール
    • インストールおよび構成されて実行されているWebCenter Sites Developer Toolsプラグイン、またはWebCenter Sites Explorer（Oracle WebCenter Sitesに含まれる）
    • Oracle Technology Network（OTN）からダウンロードしたDeveloper's Guide for Customizing the Contributor Interface
    • 開発者ガイドで提供されているサンプル・エレメント
    • Mozilla FirefoxまたはMicrosoft Internet Explorer Webブラウザ

    前提条件

    このチュートリアルを適切に完了するには、以下が必要です。

    • Oracle Universityで提供されているトレーニング・コースOracle WebCenter Sites 11g for Developerに参加している
    • Oracle WebCenter Sites 11g Contributorインタフェースの実用的な知識を持っている
    • Java、JavaScript、Dojo Toolkit、およびHTMLの経験がある
    • WebCenter Sites Developer Toolsプラグインに精通している
    • Developer's Guide for Customizing the Contributor Interface（特に第1章と第2章）の内容を十分に確認している

ユーザー・インタフェースのフレームワーク

    この項では、UI Controllerのユーザー・インタフェース（UI）のフレームワークとプロセス・フローについて学習します。

    Contributorインタフェースのフレームワークはサービス・レイヤーの上に配置され、クライアントのリクエストを処理します。 UIフレームワークは、プレゼンテーション・レイヤーとUI Controllerで構成されます。

    UIFramework

    プレゼンテーション・レイヤーは、ビューをレンダリングするエレメントとレスポンスを生成するエレメントで構成されます。 Contributorインタフェースからリクエストを受信すると、UI Controllerは次の3つのフェーズでリクエストを処理します。

    • 構成フェーズ
    • アクション・フェーズ
    • プレゼンテーション・フェーズ

    UI Controllerは、各フェーズでカスタム・エレメントをチェックします。 各フェーズは条件付きです。 UI Controllerは、そのフェーズのカスタム・エレメントが存在しないことを検出すると、次のフェーズに進みます。 ElementCatalog表のCustomElements下のすべてのパスを次の順序で調べて、カスタム・エレメントを検出します （次のリストに、構成フェーズのカスタム・エレメントのサンプル・パスを示します）。

    1. 単一サイトのアセット・タイプ固有のパス： CustomElements/<SiteName>/<AssetType>/<controllerElementName>Config
    2. すべてのサイトのアセット・タイプ固有のパス： CustomElements/<AssetType>/<controllerElementName>Config
    3. サイト固有のパス： CustomElements/<SiteName>/<controllerElementName>Config
    4. グローバルパス： CustomElements/<controllerElementName>Config

    ElementCatalogのCustomElementsの下にカスタム・エレメントを作成します。 次に、エレメントのネーミング規則を示します。

    • 構成フェーズのエレメント： <controllerElementName>Config
    • アクション・フェーズのエレメント： <controllerElementName>Action
    • プレゼンテーション・フェーズのエレメント： <controllerElementName>Html

    次の図に、UI Controllerのプロセス・フローを示します。

    UIControllerFlow

    カスタム・エレメントとシステム・デフォルト・エレメントを別々に保存することを推奨します。 システム・デフォルトを直接オーバーライドすると、システムを新しいバージョンのOracle WebCenter Sitesにアップグレードしたときに、カスタマイズの内容がオーバーライドされます。 次に、WebCenter Sites ExplorerでのCustomElementsのデータ構造ビューの例を示します。

    CustomElements

構成プロパティのカスタマイズ

    構成プロパティで、すべてのコンテンツ管理サイトのContributorインタフェースの表示条件を設定します。 この項では、以下のトピックについて説明します。

    • configオブジェクト
    • システム定義の構成プロパティ

    configオブジェクト

      クライアント側のフレームワークでは、サーバー側のコントローラ・エレメントUI/Config/GlobalHtmlからクライアント側のおもな構成設定を取得します。 クライアント側のアプリケーションは、起動時にこのプレゼンテーション・エレメントを実行します。 プレゼンテーション・エレメントはJavaScriptコードを提供し、このJavaScriptコードによって、クライアント側のアプリケーションがリクエスト・パラメータとして名前を付与するJavaScript関数が定義されます。

      <%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld"%>
      <cs:ftcs>
          webcenter.sites['${param.namespace}'] = function (config) {
              config.maxTabCount = 50;
              config.defaultView = …;
              … merge
          }
      </cs:ftcs>

      関数本体で、必要に応じてconfigオブジェクトを操作します。 クライアント側のアプリケーションでは、エレメントUI/Config/GlobalHtmlに指定されているように構成プロパティを設定します。 クライアント側のアプリケーションは、サーバー側のコントローラ・エレメントから追加の構成プロパティを取得して、複数の場所にグローバル構成プロパティを複製することなく、複数のソースの設定をマージできます。 複数のソースから取得する構成設定の例として、デフォルトのグローバル構成、サイト固有の構成、およびカスタム構成があります。

    システム定義の構成プロパティ

      次に、変更可能なシステム定義の構成プロパティのリストを示します。 システム定義の構成プロパティの詳細については、Developer's Guide to Customizing the Contributor Interfaceを参照してください。

      system-defined-props

      注：デフォルトでは、enableWebModeプロパティとenableDatePreviewプロパティは、futuretense.iniシステム・ファイルに配置されているxcelerate.enableinsiteプロパティとcs.sitepreviewプロパティの値をとります。 これらの値をオーバーライドするには、futuretense.iniファイルでこれらの値を変更するか、次の項の手順に従ってカスタムのグローバル構成エレメントを作成します。

カスタムのグローバル構成プロパティの追加

    クライアント側のアプリケーションによって、UI/Configのすべてのエレメントから構成設定が取得され、これらの構成設定がマージされます。 カスタムのグローバル・プロパティを追加するには、UI/Config下にエレメントを作成してから、CustomElementsに対応するカスタム・エレメントを作成します。 このカスタム・エレメントによって、すべてのサイトのmaxTabCountのデフォルト値が（50から5に）変更されて、fooと呼ばれるカスタムのグローバル・プロパティが導入されます。 この項では、以下のタスクを完了します。

    • カスタム・エレメントUI/Configの作成
    • カスタマイズのテスト

    カスタム・エレメントUI/Configの作成

      WebCenter Sites Explorerを起動し、以下の手順を完了してログインします。

      a. Fileメニューから「Open Oracle WebCenter Sites」を選択します。

      b. Oracle WebCenter Sites Loginウィンドウで、次の値を入力し、「OK」をクリックします。

      • Host name or address： localhost
      • Username： fwadmin
      • Password： xceladmin
      • Port： 8080
      • Select application server URL path： CS servlet (/cs/CatalogManager)

      sitesexplorer-login

      「Tables」、「ElementCatalog」、および「UI」を展開し、「Config」をクリックします。 右側にConfigのコンテンツが表示されます。

      ui-config

      右側のパネルで、elementname列の下を右クリックし、「New」を選択します。

      ui-config-new

      エレメント名にCustomConfigHtmlと入力します。

      ui-config-custom

      CustomConfigHtmlで、url列の下をクリックし、表示されたボタンをクリックします。

      ui-config-button

      New fileダイアログ・ボックスで、Type/Ext.が「.jsp」に設定されていることを確認して、「OK」をクリックします。

      customconfig-newfile

      エレメント・ウィンドウで、<!-- user code here -->の後に次のコード・スニペットを入力します。

      webcenter.sites['${param.namespace}'] = function (config) {
          // override this element in order to provide site-specific configuration settings
          // (CustomElements/UI/Config/CustomConfigHtml)
      }

      「Save」をクリックします。

      customconfig-save

      Close「x」ボタンをクリックして、エレメント・ウィンドウを閉じます。

      customconfig-close

      左側のパネルで、「CustomElements」を右クリックして、「New」→「Folder」を選択します。

      sitesexplorer-customelements2

      フォルダ名にUIと入力します。

      sitesexplorer-UI

      「UI」を右クリックして、「New」→「Folder」を選択します。

      sitesexplorer-UI2

      フォルダ名にConfigと入力し、「Config」をクリックして右側のパネルにコンテンツを開きます。

      sitesexplorer-UI-Config

      右側のパネルで、elementname列の下を右クリックし、「New」を選択します。

      sitesexplorer-newelement

      エレメント名にCustomConfigHtmlと入力します。

      sitesexplorer-customconfig

      CustomConfigHtmlで、url列の下をクリックし、表示されたボタンをクリックします。

      sitesexplorer-customconfig-2

      New fileダイアログ・ボックスで、Type/Ext.が「.jsp」に設定されていることを確認して、「OK」をクリックします。

      newfile-jsp

      エレメント・ウィンドウで、すべてのコードを次のコード・スニペットに置き換えます。

      <%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %>
      <%@ taglib prefix="ics" uri="futuretense_cs/ics.tld" %>
      <cs:ftcs>
      webcenter.sites['${param.namespace}'] = function (config) {
          // override existing properties
          config.maxTabCount = 5;
          // add custom properties
          config.foo = "bar";
      }
      </cs:ftcs>

      「Save」をクリックします。

      custom-config-save

      Close「x」ボタンをクリックして、エレメント・ウィンドウを閉じます。

      custom-config-close

      「Save」をクリックして、データベースの変更をコミットします。

      save-to-commit

    カスタマイズのテスト

      Webブラウザで、パスワードxceladminを使ってfwadminとしてContributorインタフェースにログインします。

      contrib-login

      Siteで、「avisports」を選択して、「Contributor」ボタンをクリックします。

      contrib-select-site-app

      左側のパネルで、「Content Tree」をクリックします。

      ui-content-tree

      Content Treeで、「Articles」と「Baseball Articles」を展開します。

      ui-contenttree-contents

      アーティクルをダブルクリックして、右側のパネルにコンテンツを表示します。

      article-tab1

      左側のパネルで、他の4つのアーティクルをダブルクリックします。 アーティクルをいくつ開いたら、次のメッセージが表示されましたか。

      ui-warning

      maxTabCountプロパティを5に設定しているため、同時に4つのアーティクル・アセット・タブを開くことができます。 Homeタブ（閉じることができない）は開いたタブとしてカウントされます。 グローバル構成エレメントを作成したため、同じインストールの他のサイトでこのエレメントをテストできます。

カスタムのサイト固有の構成プロパティの追加

    コントローラによって、エレメントUI/Configから次の順序で構成設定がロードされます。

    1. GlobalHtml
    2. CustomConfigHtml（または他のカスタムのグローバル・プロパティ・エレメント）
    3. SiteConfigHtml

    コントローラ・エレメントUI/Config/SiteConfigHtmlで、サイト固有のプロパティを指定します。 デフォルトでは、UI/Config/SiteConfigHtmlで、サイト固有のプロパティは提供されません。 CustomElements/your_site_name/UI/Config/下に独自のSiteConfigHtmlを作成すると、システム・デフォルトのコントローラUI/Config/SiteConfigHtmlをオーバーライドできます。 次に、実行可能な2つのタイプのサイト固有のカスタマイズを示します。

    • ツールバーのカスタマイズ
    • メニュー・バーのカスタマイズ

    ツールバーのカスタマイズ

      アセットでWebモードまたはフォーム・モードで動作するアクションを表示するように、ツールバーをカスタマイズできます。 特定のアセット・タイプやサブタイプのツールバーについてさらにカスタマイズできます。 次に、ページ・アセットのデフォルトのツールバーを示します。

      contrib-toolbar

      エレメントUI/Config/GlobalHtmlは、ツールバーで特定のビュー向けに表示するアクション（Webモードでのアセットの調査、フォーム・モードでのアセットの編集など）のリストを示します。 ツールバーを構成するには、toolbarプロパティを使用します。

          config.toolbars = {
              "viewAlias":  {
                  "view_mode_1" : [action_1, action_2, ...],
                  "view_mode_2" : [action_1, action_2, ...]
          ...
          }

      構成設定viewAliasで、このツールバーを表示するビューのタイプを指定します。 エイリアスが、config.views下のエレメントUI/Config/GlobalHtmlに定義されている利用可能なエイリアスのいずれかと一致している必要があります。 サポートされているエイリアスは、次のとおりです。

      views

      view_mode_iモードは、editやviewなどのビューでサポートされているモードの1つです。 たとえば、アセットをWebモードで編集および表示できます。

          config.toolbars = {
              "web":  {
                  "edit" : [action_1, action_2, ...],
                  "view" : [action_1, action_2, ...]
          ...
          }

      構成設定action_iは、ツールバーに含まれるアクションを示します。 saveやapproveなどの標準のアクションが、それぞれのアイコン、タイトル、代替のテキストなどにマッピングされます。 たとえば、次のようになります。

          config.toolbars = {
              "web":  {
                  "edit" : ["form-mode", "inspect", "separator", "save", "preview", ...],
                  "view" : ["form-mode", "edit", "separator", "preview", "approve", ...]

      ツールバーにサイトの特定のアセット・タイプのカスタム・アクションを追加するには、カスタム・エレメントSiteConfigHtmlを作成します。 次の項では、エレメントSiteConfigHtmlを変更してカスタム・ツールバー・アクションを追加し、カスタマイズをテストします。 カスタム・ツールバー・アクションによって、ツールバーにボタンが追加されます。 ボタンをクリックすると、アセット画面にメッセージが表示されます。 アセットAVIArticleの調査ビューのツールバーは、現在、次のように表示されています。

      article-toolbar-callouts

      エレメントSiteConfigHtml.jspの変更

        WebCenter Sites Explorerを起動し、以下の手順を完了してログインします。

        a. Fileメニューから「Open Oracle WebCenter Sites」を選択します。

        b. Oracle WebCenter Sites Loginウィンドウで、次の値を入力し、「OK」をクリックします。

        • Host name or address： localhost
        • Username： fwadmin
        • Password： xceladmin
        • Port： 8080
        • Select application server URL path： CS servlet (/cs/CatalogManager)

        sitesexplorer-login

        左側のパネルで、「Tables」、「ElementCatalog」、「CustomElements」、「avisports」、および「UI」を展開し、「Config」をクリックしてコンテンツを表示します。

        avisports-ui-config

        SiteConfigHtmlで、url列内をクリックし、表示されたボタンをクリックします。

        siteconfightml-url

        エレメント・ウィンドウで、最後の右かっこ（}）の前に次のコード・スニペットを追加します。

            config.toolbars["web/AVIArticle"] = {
                "view":
                    ["form-mode", "edit", "separator", "preview", "approve", "separator", "checkincheckout", "separator", "helloWorld", "refresh"],
                "edit": config.toolbars.web.edit // reuse default web mode toolbar
            }
            config.toolbarButtons.helloWorld = {
                src: 'js/fw/images/ui/ui/toolbarButton/smartlist.png',
                onClick: function () {
                    var doc = SitesApp.getActiveDocument(), // the document in the active tab
                    asset = doc.get('asset'), // the asset object
                    view = SitesApp.getActiveView(); // the active view
                    view.info('Hello World! The asset is an ' + asset.type + ' with id: ' + asset.id);
                }
            }

        siteconfig-element

        「Save」をクリックします。

        siteconfig-save

        Close「x」ボタンをクリックして、エレメント・ウィンドウを閉じます。

        siteconfig-close

        「Save」をクリックして、データベースの変更をコミットします。

        sitesexplorer-siteconfig-save

      カスタマイズのテスト

        Webブラウザで、パスワードxceladminを使ってfwadminとしてContributorインタフェースにログインします。

        contrib-login

        選択を求められたら、Siteメニューから「avisports」を選択して、「Contributor」ボタンをクリックします。

        contrib-select-site-app

        左側のパネルで、「Content Tree」をクリックします。

        content-tree

        Content Treeで、「Articles」と「Baseball Articles」を展開します。

        content-tree-contents

        アーティクルをダブルクリックして、右側のパネルにコンテンツを表示します。

        article-tab2

        アーティクル・タブのツールバーに新しいアイコンが表示されます。

        このアイコンをクリックします。

        article-newicon

        カスタム・メッセージが表示されます。

        article-customaction

    メニュー・バーへのカスタム・メニューの追加

      すべてのアセット・タイプのメニュー・バーまたは特定のアセット・タイプとそのサブタイプのメニュー・バーに、カスタムのメニュー・コマンドとアクションを追加できます。 この項では、アセット・タイプAVIArticleのメニュー・バーにカスタム・メニューを追加します。 カスタム・メニューは、1つのカスタム・オプションで構成されます。 次のタスクについて説明します。

      • エレメントSiteConfigHtml.jspの変更
      • カスタマイズのテスト

      カスタマイズがない場合、AVIArticleのメニュー・バーは次のように表示されます。

      article-default-menubar

      エレメントSiteConfigHtml.jspの変更

        WebCenter Sites Explorerを起動し、以下の手順を完了してログインします。

        a. Fileメニューから「Open Oracle WebCenter Sites」を選択します。

        b. Oracle WebCenter Sites Loginウィンドウで、次の値を入力し、「OK」をクリックします。

        • Host name or address： localhost
        • Username： fwadmin
        • Password： xceladmin
        • Port： 8080
        • Select application server URL path： CS servlet (/cs/CatalogManager)

        sitesExplorer_login

        「Tables」、「ElementCatalog」、「CustomElements」、「avisports」、および「UI」を展開し、「Config」をクリックして、右側のパネルにコンテンツを表示します。

        avisports-config

        SiteConfigHtmlで、url列の下をクリックし、表示されたボタンをクリックします

        siteconfightml-url

        エレメント・ウィンドウで、最後の右かっこ（}）の前に次のコード・スニペットを追加します。

            config.menubar["AVIArticle"] = config.menubar["default"].slice(0);
            config.menubar["AVIArticle"].push({
                "id": "customMenu",
                "label": "Custom Menu",
                "children": [{
                    "label": "Custom Action",
                    "action": function () { alert("My custom action"); }
                }]
            });

        siteconfightml-custommenu

        「Save」をクリックします。

        siteconfightml-custommenu-save

        Close「x」ボタンをクリックして、エレメント・ウィンドウを閉じます。

        siteconfightml-custommenu-close

        「Save」をクリックして、データベースの変更をコミットします。

        sitesexplorer-siteconfig-save.png

      カスタマイズのテスト

        Webブラウザで、パスワードxceladminを使ってfwadminとしてContributorインタフェースにログインします。

        contributor-ui-login

        選択を求められたら、Siteメニューから「avisports」を選択して、「Contributor」ボタンをクリックします。

        contrib-select-site-app

        左側のパネルで、「Content Tree」をクリックします。

        content-tree

        Content Treeで、「Articles」と「Baseball Articles」を展開します。

        content-tree-contents

        アーティクルをダブルクリックして、右側のパネルにコンテンツを表示します。

        contrib-article

        アーティクルの調査ビューのメニュー・バーに、カスタム・メニューが表示されます。

        「Custom Menu」の上にカーソルを置いてメニュー・コマンドを表示し、「Custom Action」をクリックします。

        contrib-article-custommenu

        次のようなアラートが表示されます。

        contrib-article-customaction

まとめ

    このチュートリアルで学習した内容は、次のとおりです。

    • 同時に開くことができるタブの数を変更する
    • AVIArticleの調査ビューのツールバーにカスタムのボタンとアクションを追加する
    • AVIArticleのメニュー・バーにカスタムのメニューとメニュー・コマンドを追加する

    参考資料

    著者

    • カリキュラムの開発責任者： Jenny Wongtangswad
    • 編集者： Susan Moxley
    • QA： Veera PutrevuおよびKrishna Chitta

このOracle by Exampleチュートリアルをナビゲートする際、次の機能を使用できます。

ヘッダー・ボタンの非表示：
ヘッダー内のボタンを非表示にするには、タイトルをクリックします。 ボタンを再表示するには、もう一度タイトルをクリックします。
トピック一覧：
トピックをクリックすると、その項に移動します。
すべてのトピックを開く：
該当する項の詳細を表示または非表示にするには、ボタンをクリックします。 デフォルトでは、すべてのトピックが閉じられています。
すべてのイメージを非表示：
スクリーンショットを表示または非表示にするには、ボタンをクリックします。 デフォルトでは、すべてのイメージが表示されています。
印刷：
コンテンツを印刷するには、ボタンをクリックします。 現在表示または非表示にされているコンテンツが印刷されます。

このチュートリアルの特定の項に移動するには、一覧からトピックを選択してください。