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オブジェクトには、クライアント側アプリケーションが期待するプロパティを設定することにより、関数本体で自由に操作できます。
また、次に説明するように、クライアント側アプリケーションはサーバー側から追加の構成プロパティを取得できるため、複数の場所にグローバル・プロパティを重複させることなく、複数のソースから設定をマージできます。
表71-1は、システム定義の構成プロパティについて説明し、どのプロパティが変更可能であるかを示しています。
表71-1 UI/Config/GlobalHtmlの構成プロパティ
| プロパティ名 | 説明 | 値および例 |
|---|---|---|
|
同時に開いたままにできるタブの最大数。タブとは、開かれたアセットのタブのことです。 |
例:
|
|
ユーザーがWebモードで作業する場合に、デフォルトのブラウザ・コンテキスト(右クリック)メニューを有効にする必要があるかどうかを示します。 |
例:
|
|
Webモードを有効にする必要があるかどうかを示します。このプロパティを デフォルトでは、このプロパティは、 |
例:
|
|
日付ベースのプレビューを有効にする必要があるかどうかを示します。 デフォルトでは、このプロパティは、 |
例:
|
|
プレビューが許可されるかどうかを示します。 デフォルトでは、このプロパティは、「サイトの編集」フォームの「プレビュー方法」属性の値をとります(Adminインタフェースからアクセス可能: 「管理」タブを選択して「サイト」を開き、「SampleSite」をダブルクリックして「編集」を選択します)。 |
例:
|
|
アセットを使用するための優先ビューを定義します(アセットがデフォルトでは、フォーム・モードまたはWebモードのどちらで表示されるかなど)。 注意: アセットはデフォルト・テンプレートに関連付けられている場合にのみ、Webモードで開かれます。 |
予想される値は次のいずれかです。
config.defaultView = {
"default": "form",
"AVIArticle": "web",
"Page/AVISection": "web"
}
|
|
ビューのタイプごとに、使用可能なツールバー・アクションのリストを定義します。 |
「ツールバーのカスタマイズ」を参照してください。 |
|
特定のツールバー・ボタンの動作の定義に使用します。 |
「カスタム・アクションを使用したツールバーのカスタマイズ」を参照してください。 |
|
メニュー・バーで使用可能なアクションのリストを定義します。 |
「メニュー・バーのカスタマイズ」を参照してください。 |
|
ドキュメントの使用可能な実装を登録します。 |
このプロパティの値は変更しないでください。 サポートされる値は |
|
ビューの実装を登録します。 |
このプロパティの値は変更しないでください。 |
|
コントローラの実装、および各コントローラでサポートされるアクションのセットを登録します。 |
このプロパティの値は変更しないでください。 |
|
現在ログインしているユーザーのロールのリストが含まれます。 |
このプロパティの値は変更しないでください。 |
|
Contributorインタフェースから編集可能なアセット・タイプのリストが含まれます。 |
このプロパティの値は変更しないでください。 |
|
Contributorインタフェースから検索可能なアセット・タイプのリストが含まれます。 |
このプロパティの値は変更しないでください。 |
|
バイナリ・ファイルをアップロードする際のセキュリティ保護に使用します。 |
このプロパティの値は変更しないでください。 |
|
バイナリ・ファイルをアップロードする際のセキュリティ保護に使用します。 |
このプロパティの値は変更しないでください。 |
|
コンテキスト・メニューで使用可能なアクションのリストを定義します。 |
「コンテキスト・メニューのカスタマイズ」を参照してください。 |
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>
構成エレメントのロード
グローバル構成エレメントは常に最初にロードされます。追加の構成エレメントは、アルファベット順にロードされます。たとえば、前述の例を使用すると、構成プロパティは次の順序でロードされます。
UI/Config/GlobalHtmlUI/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モードで使用可能なツールバー・アクションが決定します。
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ページ・アセットを調査すると、図71-1に示すツールバーが表示されます。
注意:
次のことに注意してください。
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!!');
}
}
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
}
注意:
この例では、図71-2に示すように、セパレータ(垂直線)とカスタム・ボタンをツールバーの末尾に追加しています。
より複雑な例として、アセットのidおよびタイプを出力するCSElementを作成し、クリックしたときにエレメントをコールするツールバー・オプションを作成する操作があります。例:
メニュー・バーは、特定のタイプまたはタイプ/サブタイプのアセット上で動作するメニューをサポートするようにカスタマイズできます。サブメニューには、アクション可能なアイテム、追加メニューまたはメニュー・セパレータを指定できます。
この項には次のトピックが含まれます:
メニュー・バーの構成は、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という単一メニュー・アイテムを使用して、カスタム・メニューというメニュー・バーに新しいエントリを追加します。この手順は次のとおりです。
コンテキスト・メニューは右クリックで開き、右クリックされたオブジェクトを操作できるメニューが表示されます。コンテキスト・メニューで使用可能な特定のアイテムおよびオブジェクトが表示される順序は、カスタマイズできます。
コンテキスト・メニューを定義するには、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"]