1. Oracle WebCenter Sitesでの開発
  2. Oracle WebCenter Sitesのカスタマイズ
  3. Contributorインタフェースでのグローバル・プロパティ、ツールバーおよびメニュー・バーのカスタマイズ

61 Contributorインタフェースでのグローバル・プロパティ、ツールバーおよびメニュー・バーのカスタマイズ

グローバル構成エレメント(UI/Config/GlobalHtml)を操作して、Contributorインタフェースのグローバルな機能(グローバル・プロパティ、ツールバー、メニュー・バーなど)をカスタマイズします。

トピック:

グローバル構成プロパティのカスタマイズ

グローバル構成プロパティは、コンテンツ管理サイト全体にContributorインタフェースの表示条件を設定するために使用します。

この項には次のトピックが含まれます:

構成プロパティについて

クライアント側のフレームワークにより、サーバー側のコントローラ・エレメント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オブジェクトには、クライアント側アプリケーションが期待するプロパティを設定することにより、関数本体で自由に操作できます。

また、次に説明するように、クライアント側アプリケーションはサーバー側から追加の構成プロパティを取得できるため、複数の場所にグローバル・プロパティを重複させることなく、複数のソースから設定をマージできます。

変更可能なデフォルトの構成プロパティ

次の説明は、システム定義の構成プロパティについて説明し、どのプロパティが変更可能であるかを示しています。

表61-1 UI/Config/GlobalHtmlの構成プロパティ

プロパティ名 説明 値および例

maxTabCount

同時に開いたままにできるタブの最大数。タブとは、開かれたアセットのタブのことです。

0より大きい整数。

たとえば:

config.maxTabCount = 30;

enableContextMenu

ユーザーがWebモードで作業する場合に、デフォルトのブラウザ・コンテキスト(右クリック)メニューを有効にする必要があるかどうかを示します。

true | false

たとえば:

config.enableContextMenu = true;

enableWebMode

Webモードを有効にする必要があるかどうかを示します。このプロパティをfalseに設定すると、フォーム・モードでのみアセットが操作可能になり、プレビュー機能が使用できます。

デフォルトでは、このプロパティは、wcs_properties.jsonにあるxcelerate.enableinsiteプロパティの値をとります。

true | false

たとえば:

config.enableWebMode = true;

enableDatePreview

日付ベースのプレビューを有効にする必要があるかどうかを示します。

デフォルトでは、このプロパティは、wcs_properties.jsonにあるcs.sitepreviewプロパティの値をとります。

true | false

たとえば:

config.enableDatePreview = false;

enablePreview

プレビューが許可されるかどうかを示します。

デフォルトでは、このプロパティは、「サイトの編集」フォームの「プレビュー方法」属性の値をとります(Adminインタフェースからアクセス可能: 「管理」タブを選択して「サイト」を開き、「SampleSite」をダブルクリックして「編集」を選択します)。

true | false

たとえば:

config.enablePreview = true;

defaultView

アセットを使用するための優先ビューを定義します(アセットがデフォルトでは、フォーム・モードまたはWebモードのどちらで表示されるかなど)。

ノート: アセットはデフォルト・テンプレートに関連付けられている場合にのみ、Webモードで開かれます。

予想される値は次のいずれかです。

  • "default": "form" | "web"

  • "assetType" : "form" | "web"

  • "assetType/subtype": "form" | "web"

assetTypeは有効なアセット・タイプ名で、subtypeは有効なサブタイプまたは定義名です。たとえば: 

config.defaultView = {
 "default": "form",
 "AVIArticle": "web",
 "Page/AVISection": "web"
}

toolbars

ビューのタイプごとに、使用可能なツールバー・アクションのリストを定義します。

「ツールバーのカスタマイズ」を参照してください。

toolbarButtons

特定のツールバー・ボタンの動作の定義に使用します。

「カスタム・アクションを使用したツールバーのカスタマイズ」を参照してください。

menubar

メニュー・バーで使用可能なアクションのリストを定義します。

「メニュー・バーのカスタマイズ」を参照してください。

documents

ドキュメントの使用可能な実装を登録します。

このプロパティの値は変更しないでください。

サポートされる値はassetのみです。

views

ビューの実装を登録します。

このプロパティの値は変更しないでください。

controllers

コントローラの実装、および各コントローラでサポートされるアクションのセットを登録します。

このプロパティの値は変更しないでください。

roles

現在ログインしているユーザーのロールのリストが含まれます。

このプロパティの値は変更しないでください。

supportedTypes

Contributorインタフェースから編集可能なアセット・タイプのリストが含まれます。

このプロパティの値は変更しないでください。

searchableTypes

Contributorインタフェースから検索可能なアセット・タイプのリストが含まれます。

このプロパティの値は変更しないでください。

token

バイナリ・ファイルをアップロードする際のセキュリティ保護に使用します。

このプロパティの値は変更しないでください。

sessionid

バイナリ・ファイルをアップロードする際のセキュリティ保護に使用します。

このプロパティの値は変更しないでください。

contextMenus

コンテキスト・メニューで使用可能なアクションのリストを定義します。

「コンテキスト・メニューのカスタマイズ」を参照してください。

カスタム構成プロパティの追加

UI/Config/GlobalHtmlに格納されているグローパル・プロパティを取得するほかに、Contributorアプリケーションは、UI/Config/SiteConfigの追加設定およびUI/Configに存在するエレメントを取得しようとします。要件によっては、UI/Config/GlobalHtmlに定義されているすべてのプロパティをレプリケートせずに、グローパル・プロパティまたはサイト固有のプロパティを設定できます。

この項には次のトピックが含まれます:

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

カスタム・グローバル・プロパティは、指定されたコンテンツ管理システム上のすべてのサイトで共有されます。推奨されるアプローチは、次のように定義されたカスタム構成エレメントを作成することです。

  • プレゼンテーション・エレメント名は、UI/Config/SiteConfigHtmlである必要があります。

  • エレメント・コードは、「構成プロパティについて」に示すパターンに従う必要があります。

たとえば、次のような操作を一時的に行う場合があります。

  • すべてのサイトのmaxTabCountの値をオーバーライドします。

  • ページ・アセットのデフォルト・ビューをオーバーライドします。

  • また、fooという追加のカスタム・プロパティを定義します。

そのためには、次のコードを含む、CustomElements/UI/Config/SiteConfigHtmlというエレメントを作成します。 

<%@ taglib prefix="cs" uri="futuretense_cs/ftcs1_0.tld" %> 
<cs:ftcs>
webcenter.sites['${param.namespace}'] = function (config) {
    // override existing properties
    config.maxTabCount = 60;
    config.defaultView.Page = "form";

    // add custom properties
    config.foo = "bar";

}
</cs:ftcs>
サイト固有のプロパティの追加

Contributorインタフェースは、コンテンツ管理サイトごとに異なる方法で構成する必要がある場合があります。UI/Config/SiteConfigというコア・コントローラ・エレメントをオーバーライドすることをお薦めします。

UI/Config/SiteConfigコア・エレメントをオーバーライドするには、次のようにエレメントを作成します。 

CustomElements/siteName/UI/Config/SiteConfigHtml

ここで、siteNameは、コンテンツ管理サイトの名前です(avisportsなど)。

たとえば、avisportsデモ・サイトでは、PageおよびAVIArticleアセット・タイプに対してデフォルト・モードとしてWebモードが実行されます。これは、JSPエレメントCustomElements/avisports/UI/Config/SiteConfigHtmlを定義し、次の設定を提供することによって実行されます。 

<%@ 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) {
    // default view modes for avisports
    config.defaultView.Page = "web";
    config.defaultView.AVIArticle = "web";
}
</cs:ftcs>

構成エレメントのロード

グローバル構成エレメントは常に最初にロードされます。追加の構成エレメントは、アルファベット順にロードされます。たとえば、前述の例を使用すると、構成プロパティは次の順序でロードされます。

  1. UI/Config/GlobalHtml
  2. UI/Config/SiteConfigHtml

プロパティ値

ある場合、一部のプロパティの値はオブジェクトになります。つまり、次のようになります。

config.someProperty = {
  foo: "bar",
  x: 123
};

このプロパティを部分的にオーバーライドする場合、次の2つのタイプのコードの違いを見極める必要があります。

config.someProperty = {
  x: 3456
};

と 

config.someProperty.x = 3456;

最初のコードでは、プロパティfooが未定義としてオーバーライドされますが、2番目のコードでは、 fooの元の値が保持されます。

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

ツールバーに、Webモードまたはフォーム・モードのアセット上で動作するアクションをリストできます。アセット・タイプおよびサブタイプごとにツールバーを詳細にカスタマイズできます。

トピック:

ツールバーのカスタマイズについて

グローバル構成エレメント(UI/Config/GlobalHtml)は、各ビュー・タイプ(Webモード調査、Webモード編集、フォーム・モード編集、フォーム・モード調査など)について、ツールバーで表示されるアクションのリストを示します。これは、toolbarsプロパティで行えます。その値は、次の構文を持つオブジェクトです。 

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

ここで:

viewAliasは、このツールバーをどのビュー・タイプで使用する必要があるかを示します。別名は、config.viewsセクションで定義されるビューの別名のいずれかに一致する必要があります。

action_iはアクション名です。save、approveなどの標準アクションの場合、アクション名は、指定されたアイコン、タイトル、代替テキストなどに自動的にマッピングされます。標準アクション、カスタム・アクション、またはカスタム・ボタンの外観のカスタマイズ方法の詳細は、「ツールバー・カスタマイズの例」を参照してください。

view_mode_iは、ビューによってサポートされているモードのいずれかです(通常はeditまたはview)。

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

この項には次のトピックが含まれます:

Webモード用の標準アクションを使用したツールバーのカスタマイズ

  • 次の構成を使用して、すべてのアセット・タイプに対してWebモードで使用可能なツールバー・アクションが決定します。

    config.toolbars = {
    ( …)
 
    "web": {
      "edit": ["form-mode", "inspect", "separator", "save", "preview",
               "approve", "delete", "separator", "changelayout",
               "separator", "checkincheckout", "refresh"],
      "view": ["form-mode", "edit", "separator", "preview", "approve",
               "delete", "separator", "checkincheckout", "refresh"]

    ( …)

}

前述の構成により、アセットのビュー(「編集」および「調査」)に対応する2つのアクションのリスト(editおよびview)が定義されます。

ノート:

標準アクションのセットを検索するには、controllersプロパティの下にある次のプロパティで指定されているアクションのリストを参照してください。

  • fw.ui.document.AssetDocument(アセットによってサポートされているすべてのアクション)

  • fw.ui.controller.InsiteController (ビュー・コントローラによってサポートされているすべてのアクション)。

アセット・タイプおよびサブタイプ用の標準アクションを使用したツールバーのカスタマイズ

各ツールバー構成は、次の名前のプロパティを追加することによって、アセット・タイプおよびサブタイプ別にカスタマイズできます。

  • viewAlias/assetType

  • viewAlias/assetType/assetSubtype

たとえば、Webモードでページ・アセットの「ブックマーク」/「ブックマーク解除」ボタンを追加します。

  • カスタム構成エレメント(CustomElements/avisports/UI/Config/SiteConfigHtmlなど)で、次のプロパティを追加します。 

    config.toolbars["web/Page/AVISection"] = {
    "edit": config.toolbars.web.edit, // reuse default for edit mode
    "view": ["form-mode", "edit", "separator", "preview", "approve", "delete",
                    "bookmark", "unbookmark", "separator",
                    "checkincheckout",  "refresh"]
}

    Surfingページ・アセットを調査すると、ツールバーが表示されます。

    図61-1 Surfingページ・アセット・ツールバー

    図61-1の説明が続きます
    「図61-1 Surfingページ・アセット・ツールバー」の説明

ノート:

次のことに注意してください。

  • viewモードのみをカスタマイズします。Page/AVISectionアセットがWebモードで編集されている場合、標準ツールバーが表示されます。

  • 「ブックマーク」および「ブックマーク解除」ボタンは、両方ともアセットの現在の状態(すでにブックマークを付けているかどうか)に依存しているため、同時には表示されません。

カスタム・アクションを使用したツールバーのカスタマイズ

  • カスタム・アクションを定義するには、次のように、config.toolbarButtonsプロパティに新しいエントリを追加します。 

    config.toolbarButtons.<customActionName> = {
  src: <path_to_icon>,
  onClick: <click_handler>
}

  • たとえば、次のhelloWorldカスタム・アクションを定義します。 

    config.toolbarButtons.helloWorld = {
      src: 'js/fw/images/ui/ui/toolbarButton/smartlist.png',
      onClick: function () {
          alert('Hello World!!');
      },
      buttonType: 'button'
}

    helloWorldアクションは、次のように、ツールバー構成から参照できます(前の項の例を再使用します)。 

    config.toolbars["web/Page/AVISection"] = {
    "view":
          ["form-mode", "edit", "separator", "preview", "approve",
           "bookmark", "unbookmark", "separator",
           "checkincheckout", "separator", "helloWorld", "refresh"],

    "edit": config.toolbars.web.edit // reuse default web mode toolbar
}

    ノート:

    この例では、セパレータ(垂直線)とカスタム・ボタンをツールバーに追加しています。

    図61-2 セパレータおよびツールバー・ボタン

    図61-2の説明が続きます
    「図61-2 セパレータおよびツールバー・ボタン」の説明

より複雑な例として、アセットのidおよびタイプを出力するCSElementを作成し、クリックしたときにエレメントをコールするツールバー・オプションを作成する操作があります。たとえば:

  1. アセットのidおよびタイプを出力するCSElement (この例ではHelloAsset)を作成します。
  2. ここで、次のように、新しいエントリをconfig.toolbarButtonsプロパティ(SitesConfigHTML.jsp内)に追加して、helloAssetカスタム・アクションを定義します。
    config.toolbarButtons.helloAsset = {
      src: 'js/fw/images/ui/ui/toolbarButton/smartlist.png',
      onClick: function () {
       /* current active document which holds the asset*/      
        var doc = SitesApp.getActiveDocument(); 
        var asset = doc.get('asset');
        var id = asset.get("id"); 
        var type = asset.get("type"); 
        /* make an ajax call to call an element */
        dojo.xhrGet({ 
             url: "url of element to call", /*url of the element*/
             /*pass any parameters that need to be passed to the element */
             content:{"id":id,"type":type}
             /*handleAs:"json" */ /* this is needed only if the element returns json response */                                                  
             }).then(function(response) { 
                 console.log("Response:", response);
                 /*handle response from the element here */  
                 alert(response);                                               
            }, 
                function(err){
                     /*handle error*/ 
                     console.log("error on ajax call");
           });           
     }
};
  3. カスタム・ボタン(ステップ2で定義)をconfig.toolbars ={ }のツールバーに追加します。たとえば:
    /*add the custom button in web mode for AVIArticle*/  
      config.toolbars["web/AVIArticle"] = {
            "view" : ["form-mode", "edit", "separator", "preview", "approve", "delete",
            "bookmark", "unbookmark", "separator", "checkincheckout", "helloAsset",
            "separator", "refresh",]
      };

    この図に、ツールバーのカスタム・オプションを示します。

    図61-3 カスタムhelloAssetツールバー・ボタン

    図61-3の説明が続きます
    「図61-3 カスタムhelloAssetツールバー・ボタン」の説明

カスタムhelloAssetボタンをクリックすると、CSElement (ステップ1で作成)がコールされ、ダイアログ・ボックスが開き、アセット名、idおよびタイプが表示されます。

図61-4 アセット名、IDおよびタイプを示すダイアログ・ボックス

図61-4の説明が続きます
「図61-4 アセット名、IDおよびタイプを示すダイアログ・ボックス」の説明

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

メニュー・バーで、コントリビュータが特定のタイプおよびサブタイプのアセットで操作するサブメニューを追加できます。これらのサブメニューは、アクション可能なアイテム、追加メニューまたはメニュー・セパレータにすることができます。

トピック:

メニュー・バーのカスタマイズについて

メニュー・バーの構成は、config.menubarプロパティによって定義されます。 

config.menubar = {		
		    "key_i": [
			          //menu_i
			          {
				              "id": "menu_id",
				              "label": "menu_label",			
				              "children": [				
				                  //submenus
				                  //- actionable menu item
					                  {
						                     label: 'menu_item_label', 
						                     action: 'action_name' | click_handler
					                  },
					                  //- deferred pop-up menu
					                  {
						                     label: 'menu_item_label', 
						                     deferred: 'controller_element', 
						                     cache: true|false
					                  },					
					                  //- pop-up menu
					                  {
						                     label: 'menu_item_label', 
						                     children: [
							                         // submenu_1
							                         {
								                            label: 'menu_item_label', 
								                            action: 'action_name' | click_handler
							                         }'
							                         // submenu_2
							                         {
								                            label: 'menu_item_label', 
								                            action: 'action_name' | click_handler
							                         },							
							                          …
							                          …
							                          …
						                     ]
					                  },					
					                  //- menu item separator
					                  {separator: true}

				              //additional menu_i 
               …
               …
               …
              ]
			          }

ここで:

key_iは次のいずれかです。

  • default: デフォルトのメニュー・バーを定義します。

  • assetType: タイプassetTypeのすべてのアセットに対するカスタマイズされたメニュー・バーを定義します。

  • assetType/subtype: タイプassetTypeおよびサブタイプsubtypeのすべてのアセットに対するカスタマイズされたメニュー・バーを定義します。

//menu_iは、各トップ・メニューを示すセクションを開始します。

  • menu_idは、メニューの識別子です。

  • menu_labelは、メニューの表示名です。

  • submenusは、次のいずれかとなります。

    • アクション可能なメニュー・アイテム(メニュー・アイテムをクリックすると、アクションが生成される)。

      • labelは、メニュー・アイテムの表示名を指定します。

      • actionには、editおよびinspectなどの、コントローラによってサポートされるアクションまたはカスタム・クリック・ハンドラを指定できます(「カスタム・アクションのメニュー・バーへの追加」のカスタマイズ例を参照)。

        ノート:

        指定されたアクションが現在のドキュメント/ビューでサポートされていない場合、メニューでは無効になります(グレー表示されます)。

      たとえば、saveアクションをトリガーするメニュー・アイテムは、次のように定義されます。 

      {
    label: "Save",
    action: "save"
}

    • 遅延ポップアップ・メニュー(ポップアップ・メニューは、サーバー側でコントローラ・エレメントを実行することによって動的に決定される)。

      • labelは、メニュー・アイテムの表示名を指定します。

      • deferredは、UI/Data/StartMenu/Newなど、コントローラのエレメント名を指定します。

      • cacheは、コントローラ・エレメントの出力がキャッシュされる必要があるかどうかを示すブール値です。

      たとえば、現在のサイト/ユーザーのすべての使用可能なスタート・メニュー・アイテムを読み取る「新規」ポップアップ・メニューは、次のように定義されます。 

      {
    label: New,
    deferred: "UI/Data/StartMenu/New",
    cache: true
}

    • ポップアップ・メニュー(子メニュー・アイテムが構成自体にハード・ワイヤリングされる)。

    • メニュー・アイテム・セパレータ(横線、メニュー・エントリをグループ化するために使用する)。

カスタム・アクションのメニュー・バーへの追加

この例では、(カスタムonClickハンドラを実行するため)「カスタム・アクションを使用したツールバーのカスタマイズ」で定義したhelloWorldカスタム・アクションをメニュー・バーに追加します。このアクションを追加するには、カスタム・アクションをトリガーする、Hello Worldという単一メニュー・アイテムを使用して、カスタム・メニューというメニュー・バーに新しいエントリを追加します。このステップは次のとおりです。

  1. 最初に、デフォルトのメニュー・バーを再利用して、それに追加します。これを行う最も簡単な方法は、元の配列のコピーを作成することです。
    config.menubar["Page/AVISection"] = config.menubar["default"].slice(0);
  2. 次のように、メニューを追加します。
    config.menubar["Page/AVISection"].push(
    "id": "myCustomMenu",
    "label": "Custom Menu",
    "children": [ 
        // Children go here
    ]
);
  3. 子メニュー・アイテムを定義します。
    config.menubar["Page/AVISection"].push({
    "id": "myCustomMenu",
    "label": "Custom Menu",
    "children": [{ 
      "label": "Hello World",
      "action": function () {
         alert("Hello from the top menubar!");
      }
    }]
});

    Custom Menuが、AVISectionページ・セクションと一緒に表示されるようになります。

    図61-5 カスタム・メニュー

    図61-5の説明が続きます
    「図61-5 カスタム・メニュー」の説明

    Hello Worldメニュー・アイテムを選択すると、次のようなカスタムonClickハンドラが実行されるはずです。

    図61-6 カスタムonClickハンドラ

    図61-6の説明が続きます
    「図61-6 カスタムonClickハンドラ」の説明
  4. メニュー・バーとツールバーのどちらからクリックする場合でも、まったく同じコードを実行するには、次のようにコーディングします。
    // define the helloWorld code once
config.myActions = {
    hello: function (args) {
      var doc = SitesApp.getActiveDocument(),
        asset = doc.get('asset'),
        view = SitesApp.getActiveView();

      view.info('Hello World!! The asset is a ' + asset.type + 	' with id: 
            + asset.id);
    }
};

// attach it to the helloWorld button
config.toolbarButtons['helloworld'] = {
    src: 'js/fw/images/ui/ui/toolbarButton/smartlist.png',
    onClick: config.myActions.hello
};

config.toolbars["web/Page/AVISection"] = {
    "edit": config.toolbars.web.edit, // reuse default for edit mode
    "view": [  "form-mode", "edit", "separator", "preview", "approve",
    "delete", "bookmark", "unbookmark", "separator",
    "checkincheckout","separator","helloworld", "refresh"]
}

// attach it to the menubar, under "Custom Menu">"Hello World"
config.menubar['Page/AVISection'] = config.menubar['default'].slice(0);

config.menubar["Page/AVISection"].push({
    "id": "myCustomMenu",
    "label": "Custom Menu",
    "children": [{
        "label": "Hello World",	
        "action": config.myActions.hello
    }]
});

コンテキスト・メニューのカスタマイズ

右クリックすると、コントリビュータが右クリックしたオブジェクトで行う必要があることを選択できるオプションが、コンテキスト・メニューによって表示されます。コンテキスト・メニューで使用可能な特定のアイテム、およびオブジェクトが表示される順序をカスタマイズできます。

コンテキスト・メニューを定義するには、config.contextMenusプロパティを使用します。 

config.contextMenus = {
   	"default": ["action_1", "action_2", … "action_n"]		
   "asset": ["action_1", "action_2", … "action_n"],
   "asset/assetType": ["action_1", "action_2", … "action_n"],
}

値は、次のように定義されます。

  • default: コンテキスト・メニューのデフォルトのリストを定義します。リストに表示される各メニュー・アイテムは、actionです。

  • asset: すべてのアセットのコンテキスト・メニューのカスタマイズされたリストを定義します。リストに表示される各メニュー・アイテムは、actionです。

  • asset/assetType: タイプassetTypeのアセットのコンテキスト・メニュー・アイテムのカスタマイズされたリストを定義します。リストに表示される各メニュー・アイテムは、actionです。

アセット・タイプPageのコンテキスト・メニュー構成の例は次のとおりです。

"asset/Page":["edit", "copy", "preview", "delete", "bookmark", "tagasset"]