ContextHub提供幾個可在解決方案中使用的範例UI模組。 提供下列資訊:
有關將UI模組添加到ContextHub的資訊,請參閱添加UI模組。 有關開發UI模組的資訊,請參閱建立ContextHub UI模組類型。
contexthub.base UI模組類型是所有其他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
防止全螢幕模式。
範本:指 定要在 ContextHub工具列中演算的內容的Handlebarstemplate。最多使用兩個<p>
標籤。
storeMapping: 金鑰/商店對應。使用Handlebar範本中的索引鍵,存取相關的ContextHub儲存資料。
list:按 一下UI模組時,要在快顯視窗中顯示為清單的項目陣列。如果您包含此項目,請勿包含poverTemplate。 該值是具有以下鍵的對象陣列:
listType
屬性來設定其他外觀(請參閱下面)。listType:用 於快顯清單項目的樣式。請使用下列其中一個值:
poverTemplate:指 定在按下UI模組時,要在快顯視窗中演算的內容的Handlebars範本。如果您包含此項目,請勿包含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>"
}
contexthub.browserinfo UI模組顯示有關客戶端Web瀏覽器和作業系統的資訊。 根據contexthub.surferinfo儲存候選項,從surferinfo儲存獲取資訊。
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模組顯示儲存在名為datetime的儲存中的日期和時間,該儲存基於contexthub.datetime儲存候選。
此模組提供快顯表格,讓您變更商店中的日期和時間。
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模組會顯示用戶端的經度和緯度。 此模組提供一個快顯視窗,可顯示您按一下以變更目前位置的Google地圖。 該模組從名為geolocation的ContextHub儲存器獲取資訊,該geolocation基於contexthub.geolocation儲存候選。
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模組會顯示用戶端的目前畫面方向。 雖然依預設會停用,但模組會提供一個快顯視窗,讓您選取方向。 該模組從基於granite.emulators儲存候選項的命名模擬器獲取資訊。
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儲存中獲取資訊,該tagcloud基於contexthub.tagcloud儲存候選。
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 ContextHub UI模組顯示當前用戶的顯示名稱。 彈出式功能表會顯示使用者的登入名稱,並讓您變更顯示名稱的值。 UI模組從基於granite.profile儲存候選項的ContextHub儲存器命名配置檔案中獲取資訊。
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"
}