範例ContextHub UI模組類型

ContextHub提供數個範例UI模組，您可在解決方案中使用。提供下列資訊：

UI模組的主要功能。
在何處查找原始碼，以便您可以開啟它以學習。
如何設定UI模組。

有關將UI模組添加到ContextHub的資訊，請參閱添加UI模組。有關開發UI模組的資訊，請參閱建立ContextHub UI模組類型。

contexthub.base UI模組類型

contexthub.base UI模組類型是所有其他UI模組類型的基本類型。因此，它提供轉譯儲存資料的通用功能。

提供下列功能：

標題和圖示： 指定UI模組的標題和圖示。您可以使用URL或Coral UI圖示庫來參照圖示。
儲存資料： 識別要從中擷取資料的一或多個儲存。
內容： 指定UI模組中顯示的內容，與ContextHub工具列中顯示的內容相同。
彈出式內容： 指定在按一下或點選UI模組時，出現在彈出式視窗中的內容。
全螢幕模式： 控制是否允許全螢幕模式。

原始碼位於/libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js。

設定

使用JSON格式的Javascript物件來設定contexthub.base UI模組。納入下列任一屬性以設定UI模組功能：

影像： 要顯示為圖示之影像的URL。
圖示： Coral UI圖示類別的名稱。如果您同時為圖示和影像屬性指定值，則會使用影像。
title: UI模組的標題。當指標暫停在UI模組圖示上時，標題就會顯示。
fullscreen: 指出UI模組是否支援全螢幕模式的布林值。使用true支援全螢幕，使用false防止全螢幕模式。
範本： Handlebarstemplate，指 🔗 定要在ContextHub工具列中呈現的內容。最多使用兩個<p>標籤。
storeMapping: 索引鍵/存放區對應。使用Handlebar範本中的索引鍵存取相關聯的ContextHub存放區資料。
list: 按一下UI模組時，在彈出式視窗中顯示為清單的項目陣列。如果包含此項目，請勿包含popoverTemplate。值是物件的陣列，具有下列鍵值：
- 標題：要針對此項目顯示的文本
- 影像：（選用）應顯示在左側的影像URL
- 圖示：（可選）左側應顯示的CUI表徵圖類；如果指定影像，則忽略
- 已選取：（可選）一個布林值，它指定是否應將此項顯示為選定項(true=selected)。依預設，選取的項目會以粗體字型顯示。使用listType屬性來配置其他外觀（請參見下面）。
listType: 用於彈出式清單項目的樣式。使用下列其中一個值：
- 勾號
- 核取方塊
- 廣播
popoverTemplate: Handlebars範本，指定當按一下UI模組時，要在彈出視窗中呈現的內容。如果包括此項目，則不要包括list項目。

範例

下列範例會設定contexthub.base UI模組，以顯示contexthub.emulators存放區的資訊。 template項目示範如何使用storeMapping項目建立的索引鍵，從存放區取得資料。

{
   "icon": "coral-Icon--move",
    "title": "Screen Resolution",
    "storeMapping": {
      "emulator": "emulators"
    },
    "template": "<p>{{{ i18n \"Resolution\"}}}</p><p>{{{emulator.currentDevice.width}}} x {{{emulator.currentDevice.height}}}</p>"
}

chlimage_1-76

contexthub.browserinfo UI模組類型

contexthub.browserinfo UI模組會顯示用戶端網頁瀏覽器和作業系統的相關資訊。根據contexthub.surferinfo儲存候選項，從surferinfo儲存中獲得資訊。

chlimage_1-77

UI模組的原始碼位於/libs/granite/contexthub/components/modules/browserinfo。雖然contexthub.browserinfo擴充了contexthub.base UI模組，但不會覆寫或提供其他功能。實施提供轉譯瀏覽器資訊的預設設定。

設定

contexthub.browserinfo UI模組的例項不需要「詳細設定」的值。下列JSON文字代表模組的預設設定。

{
   "icon":"coral-Icon--globe",
   "title":"Browser/OS Information",
   "storeMapping":{"surferinfo":"surferinfo"},
   "template":"<p>{{surferinfo.browser.family}} {{surferinfo.browser.version}}</p><p>{{surferinfo.os.name}} {{surferinfo.os.version}}</p>"
}

contexthub.datetime UI模組類型

contexthub.datetime UI模組顯示儲存在名為datetime的儲存中的日期和時間，該儲存基於contexthub.datetime儲存候選。

chlimage_1-78

模組提供彈出式表單，可讓您變更商店中的日期和時間。

contexthub.datetime UI模組的源位於/libs/granite/contexthub/components/modules/datetime。

設定

contexthub.datetime UI模組的實例不需要「詳細配置」的值。下列JSON文字代表模組的預設設定。

{
   "icon":"coral-Icon--clock",
   "title":"DATE&TIME",
   "clickable":true,
   "storeMapping":{"d":"datetime"},
   "template":"<p class=\"contexthub-module-line1\">{{i18n \"Date&Time\"}}</p><p class=\"contexthub-module-line2\">{{d.formatted.locale.date}} {{d.formatted.locale.time}}</p>",
   "popoverTemplate":"<div class=\"datetime center\"><div class=\"coral-DatePicker-calendar\" data-init=\"datepicker\"><input class=\"coral-Textfield\" type=\"datetime\" value=\"{{d.formatted.iso}}\"><button class=\"coral-Button coral-Button--secondary coral-Button--square\" title=\"{{i18n \"Datetime picker\"}}\"><i class=\"coral-Icon coral-Icon--calendar coral-Icon--sizeS\"></i></button></div></div>"
}

contexthub.location UI模組類型

contexthub.location UI模組會顯示用戶端的經度和緯度。模組會提供彈出視窗，顯示Google地圖，您可以按一下該地圖來變更目前位置。模組從名為geolocation的ContextHub儲存區獲取資訊，該儲存區基於contexthub.geolocation儲存候選。

chlimage_1-80

UI模組的來源位於/etc/cloudsettings/default/contexthub/geolocation。

設定

contexthub.location UI模組的例項不需要「詳細設定」的值。下列JSON文字代表模組的預設設定。

{
 "icon":"coral-Icon--compass",
 "title":"Location",
 "clickable":true,
 "editable":{"key":"/geolocation","disabled":[],"hidden":["/geolocation/generatedThumbnail","/geolocation/city","/geolocation/country"]},
 "fullscreen":true,
 "storeMapping":{"g":"geolocation"},
 "template":"<p>{{i18n \"Location\"}}</p><p>{{g.address.postalCode}} {{g.address.city}}{{#if g.address.city}}{{#if g.address.region}},{{/if}}{{/if}} {{g.address.region}}</p>",
 "list":[
  {"title":"Basel, Switzerland",
  "data":{"longitude":7.58929,"latitude":47.554746,"city":"Basel","country":"Switzerland"}},
  {"title":"Melbourne, Australia",
  "data":{"longitude":144.96328,"latitude":-37.814107,"city":"Melbourne","country":"Australia"}},
  {"title":"Beijing, China",
  "data":{"longitude":116.407526,"latitude":39.90403,"city":"Beijing","country":"China"}},
  {"title":"New York, NY, USA",
  "data":{"longitude":-74.005973,"latitude":40.714353,"city":"New York","country":"United States"}},
  {"title":"Paris, France",
  "data":{"longitude":2.352222,"latitude":48.856614,"city":"Paris","country":"France"}},
  {"title":"Rio de Janeiro, Brazil",
  "data":{"longitude":-43.20071,"latitude":-22.913395,"city":"Rio","country":"Brazil"}},
  {"title":"San Jose, CA, USA",
  "data":{"longitude":-121.894955,"latitude":37.339386,"city":"San Jose","country":"United States"}},
  {"title":"Tokyo, Japan",
  "data":{"longitude":139.691706,"latitude":35.689487,"city":"Shinjuku","country":"Japan"}}
 ],
 "listType":"checkmark"
}

contexthub.screen-orientation UI模組類型

contexthub.screen-orientation UI模組會顯示用戶端的目前螢幕方向。雖然預設為停用，但模組會提供彈出視窗，讓您選取方向。該模組從ContextHub儲存區獲取資訊，該儲存區命名模擬器基於granite.emulators儲存候選。

chlimage_1-81

UI模組的來源位於/libs/granite/contexthub/components/modules/screen-orientation。

設定

Contexthub.screen-orientation UI模組的例項不需要「詳細設定」的值。下列JSON文字代表模組的預設設定。請注意，預設情況下，clickable屬性為false。如果覆蓋將clickable設定為true的預設配置，按一下模組將顯示彈出窗口，您可以在其中選擇方向。

{
   "icon":"coral-Icon--rotateRight",
   "title":"Screen Orientation",
   "clickable":false,
   "storeMapping":{"emulator":"emulators"},
   "template":"<p>{{{ i18n \"Screen Orientation\" }}}</p><p>{{{ emulator.currentDevice.orientation }}}",
   "listReference":"/emulators/orientations",
   "listType":"checkmark"
}

contexthub.tagcloud UI模組會顯示標籤的相關資訊。在工具列上，UI模組會顯示標籤數。彈出式功能表會顯示新增標籤的標籤雲和文字方塊。 UI模組從名為tagcloud的ContextHub存放區取得資訊，該存放區是以contexthub.tagcloud存放區候選項為基礎。

chlimage_1-82

UI模組的來源位於/libs/granite/contexthub/components/modules/tagcloud。

設定

Contexthub.tagcloud UI模組的例項不需要「詳細設定」的值。下列JSON文字代表模組的預設設定。

{
   "icon":"coral-Icon--tag",
   "title":"TagCloud",
   "clickable":true,
   "storeMapping":{"t":"tagcloud"},
   "maxTags":20,
   "template":"<p class=\"contexthub-module-line1\">{{i18n \"TagCloud\"}}</p><p class=\"contexthub-module-line2\">{{stats.total}} {{i18n \"Tags\"}}</p>",
   "popoverTemplate":"<div class=\"contexthub-popover-content center\"><p class=\"stats\">{{stats.total}} {{i18n \"Tags\"}} | {{stats.hits}} {{i18n \"Hits\"}} | {{i18n \"Last tag\"}}: {{#if stats.recent}}{{stats.recent}}{{else}}{{i18n \"Unknown\"}}{{/if}}</p><p class=\"tagcloud\">{{#each tags}}<span class=\"tag{{this.weight}}\">{{this.name}}</span> {{/each}}</p><div class=\"coral-InputGroup\"><input type=\"text\" class=\"coral-InputGroup-input coral-Textfield tag-name\" placeholder=\"{{i18n \"Add a namespace:my/tag\"}}\" pattern=\"^[A-Za-z0-9_\\-]+(:[A-Za-z0-9_\\-\\/]+)?$\" title=\"{{i18n \"namespace:my/tag\"}}\"><span class=\"coral-InputGroup-button\"><button class=\"coral-Button coral-Button--secondary coral-Button--square contexthub-new-tag\" type=\"button\" title=\"{{i18n \"increment\"}}\"><i class=\"coral-Icon coral-Icon--sizeS coral-Icon--add\"></i></button></span></div></div>"
}

granite.profile UI模組類型

granite.profile ContextHub UI模組會顯示目前使用者的顯示名稱。彈出式功能會顯示使用者的登入名稱，並讓您變更顯示名稱的值。 UI模組從名為profile的ContextHub存放區取得資訊，該存放區是以granite.profile存放候選項為基礎。

chlimage_1-83

UI模組的來源為/libs/granite/contexthub/components/modules/profile。

設定

grantie.profile UI模組的例項不需要「詳細設定」的值。下列JSON文字代表模組的預設設定。

{
   "icon":"coral-Icon--user",
   "title":"Profile",
   "clickable":true,
   "editable":{
      "key":"/profile",
      "disabled":["/profile/authorizableId"],
      "hidden":["/profile/avatar","/profile/path"]},
   "storeMapping":{"p":"profile"},
   "template":"<p class=\"contexthub-module-line1\">{{i18n \"Persona\"}}</p><p class=\"contexthub-module-line2\">{{p.displayName}}</p>",
   "listType":"checkmark"
}

Business.Adobe.com資源

Multichannel Communication Cms Cloud Asset Collections Mobile Forms Content Management Digital Signage

全新的改善搜尋

範例ContextHub UI模組類型

contexthub.base UI模組類型

設定

範例

contexthub.browserinfo UI模組類型

設定

contexthub.datetime UI模組類型

設定

contexthub.location UI模組類型

設定

contexthub.screen-orientation UI模組類型

設定

設定

granite.profile UI模組類型

設定

Business.Adobe.com資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe

範例ContextHub UI模組類型

contexthub.base UI模組類型

設定

範例

contexthub.browserinfo UI模組類型

設定

contexthub.datetime UI模組類型

設定

contexthub.location UI模組類型

設定

contexthub.screen-orientation UI模組類型

設定

contexthub.tagcloud UI模組類型

設定

granite.profile UI模組類型

設定

Business.Adobe.com資源

本頁內容

檢視下一個:

學習

說明文件

社群

技術支援

資源

Adobe 帳戶

Adobe