ContextHub provides several sample UI modules that you can use in your solutions. The following information is provided:
For information about adding UI modules to ContextHub, see Adding a UI Module. For information about developing UI modules, see Creating ContextHub UI Module Types.
The contexthub.base UI module type is the base type for all other UI module types. As such it provides generic features for rendering store data.
The following features are available:
The source code is located at /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js
.
Configure the contexthub.base UI module using a JavaScript object in JSON format. Include any of the following properties to configure the UI module features:
true
to support fullscreen and false
to prevent fullscreen mode.<p>
tags.listType
property to configure other appearances (see below).list
item.The following example configures a contexthub.base
UI module to display information from a contexthub.emulators store. The template
item demonstrates how to obtain data from the store by using the key that the storeMapping
item establishes.
{
"icon": "coral-Icon--move",
"title": "Screen Resolution",
"storeMapping": {
"emulator": "emulators"
},
"template": "<p>{{{ i18n \"Resolution\"}}}</p><p>{{{emulator.currentDevice.width}}} x {{{emulator.currentDevice.height}}}</p>"
}
The contexthub.browserinfo
UI module displays information about the client web browser and operating system. Information is obtained from the surferinfo store, based on the contexthub.surferinfo store candidate.
The source code for the UI module is located at /libs/granite/contexthub/components/modules/browserinfo
. Although contexthub.browserinfo
extends the contexthub.base
UI module, it does not override or provide additional functions. The implementation provides a default configuration for rendering browser information.
Instances of the contexthub.browserinfo UI module do not require a value for the Detail Configuration. The following JSON text represents the default configuration of the module.
{
"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>"
}
The contexthub.datetime
UI module displays the date and time that is stored in a store named datetime that is based on the contexthub.datetime
store candidate.
The module provides a popover form that enables you to change the date and time in the store.
The source of the contexthub.datetime
UI module is located at /libs/granite/contexthub/components/modules/datetime
.
Instances of the contexthub.datetime UI module do not require a value for the Detail Configuration. The following JSON text represents the default configuration of the module.
{
"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>"
}
The contexthub.location
UI module displays the longitude and latitude of the client. The module provides a popover that displays a Google map that you can click to change the current location. The module obtains information from a ContextHub store named geolocation that is based on the contexthub.geolocation store candidate.
The source of the UI module is located at /etc/cloudsettings/default/contexthub/geolocation
.
Instances of the contexthub.location UI module do not require a value for the Detail Configuration. The following JSON text represents the default configuration of the module.
{
"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"
}
The contexthub.screen-orientation
UI module displays the current screen orientation of the client. Although disabled by default, the module provides a popover that enables you to select an orientation. The module obtains information from a ContextHub store named emulators that is based on the granite.emulators store candidate.
The source of the UI module is located at /libs/granite/contexthub/components/modules/screen-orientation
.
Instances of the contexthub.screen-orientation
UI module do not require a value for the Detail Configuration. The following JSON text represents the default configuration of the module. Note that the clickable
property is false
by default. If you override the default configuration to set clickable
to true
, clicking the module reveals a popup where you can select the orientation.
{
"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"
}
The contexthub.tagcloud
UI module displays information about tags. On the toolbar the UI module shows the number of tags. The popup reveals a tagcloud and a texbox for adding new tags. The UI module obtains information from a ContextHub store named tagcloud that is based on the contexthub.tagcloud
store candidate.
The source of the UI module is located at /libs/granite/contexthub/components/modules/tagcloud
.
Instances of the contexthub.tagcloud
UI module do not require a value for the Detail Configuration. The following JSON text represents the default configuration of the module.
{
"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>"
}
The granite.profile
ContextHub UI module displays the display name of the current user. The popup reveals the login name of the user and enables you to change the value of the display name. The UI module obtains information from a ContextHub store named profile that is based on the granite.profile store candidate.
The source of the UI module is at /libs/granite/contexthub/components/modules/profile
.
Instances of the granite.profile
UI module do not require a value for the Detail Configuration. The following JSON text represents the default configuration of the module.
{
"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"
}