ContextHub innehåller flera exempelmoduler för användargränssnitt som du kan använda i dina lösningar. Följande information tillhandahålls:
Mer information om hur du lägger till gränssnittsmoduler i ContextHub finns i Lägga till en gränssnittsmodul. Mer information om hur du utvecklar gränssnittsmoduler finns i Skapar gränssnittsmodultyper för ContextHub.
Modultypen context.base är bastypen för alla andra gränssnittsmodultyper. Det innehåller därför generiska funktioner för återgivning av butiksdata.
Följande funktioner är tillgängliga:
Källkoden finns på /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js
.
Konfigurera gränssnittsmodulen contexthub.base med hjälp av ett JavaScript-objekt i JSON-format. Inkludera någon av följande egenskaper för att konfigurera gränssnittsmodulens funktioner:
true
för helskärmsläge och false
för att förhindra helskärmsläge.<p>
-taggar.listType
för att konfigurera andra utseenden (se nedan).list
objekt.I följande exempel konfigureras en contexthub.base
Gränssnittsmodulen för att visa information från en contexthub.emulators butik. The template
visar hur du hämtar data från arkivet med hjälp av nyckeln som storeMapping
artikel upprättas.
{
"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
Gränssnittsmodulen visar information om klientens webbläsare och operativsystem. Information hämtas från surferinfo-butiken baserat på contexthub.surferinfo lagringskandidat.
Källkoden för användargränssnittsmodulen finns på /libs/granite/contexthub/components/modules/browserinfo
. Fast contexthub.browserinfo
utökar contexthub.base
Gränssnittsmodulen åsidosätter inte eller tillhandahåller inga ytterligare funktioner. Implementeringen innehåller en standardkonfiguration för återgivning av webbläsarinformation.
Instanser av gränssnittsmodulen contexthub.browserinfo kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.
{
"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-modulen visar det datum och den tid som lagras i en butik med namnet datetime som baseras på contexthub.datetime
lagringskandidat.
Modulen innehåller ett leveransformulär där du kan ändra datum och tid i butiken.
Källan till contexthub.datetime
Gränssnittsmodulen finns på /libs/granite/contexthub/components/modules/datetime
.
Instanser av gränssnittsmodulen contexthub.datetime kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.
{
"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
Gränssnittsmodulen visar klientens longitud och latitud. Modulen innehåller en portfölj som visar en Google-karta som du kan klicka på för att ändra den aktuella platsen. Modulen hämtar information från ett ContextHub-arkiv med namnet geolocation som baseras på contexthub.geolocation lagringskandidat.
Källan till användargränssnittsmodulen finns på /etc/cloudsettings/default/contexthub/geolocation
.
Instanser av gränssnittsmodulen contexthub.location kräver inget värde för detaljkonfigurationen. Följande JSON-text representerar modulens standardkonfiguration.
{
"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
Gränssnittsmodulen visar klientens aktuella skärmorientering. Modulen är inaktiverad som standard, men den innehåller en funktion som gör att du kan välja en orientering. Modulen hämtar information från ett ContextHub-lager med namnet emulators som är baserat på granite.emulators lagringskandidat.
Källan till användargränssnittsmodulen finns på /libs/granite/contexthub/components/modules/screen-orientation
.
Förekomster av contexthub.screen-orientation
Gränssnittsmodulen kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration. The clickable
egenskapen är false
som standard. Om du åsidosätter standardkonfigurationen som ska anges clickable
till true
Om du klickar på modulen visas ett popup-fönster där du kan välja orientering.
{
"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
I modulen Gränssnitt visas information om taggar. I verktygsfältet visar gränssnittsmodulen antalet taggar. I popup-fönstret visas ett tagcloud och en textruta för att lägga till nya taggar. Användargränssnittsmodulen hämtar information från ett ContextHub-arkiv med namnet tagcloud som är baserat på contexthub.tagcloud
lagringskandidat.
Källan till användargränssnittsmodulen finns på /libs/granite/contexthub/components/modules/tagcloud
.
Förekomster av contexthub.tagcloud
Gränssnittsmodulen kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.
{
"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
Användargränssnittsmodulen ContextHub visar visningsnamnet för den aktuella användaren. Popup-fönstret visar användarens inloggningsnamn och gör att du kan ändra värdet för visningsnamnet. Användargränssnittsmodulen hämtar information från ett ContextHub-arkiv med namnet profile som är baserad på granite.profile lagringskandidat.
Källan till användargränssnittsmodulen finns på /libs/granite/contexthub/components/modules/profile
.
Förekomster av granite.profile
Gränssnittsmodulen kräver inget värde för Detaljkonfiguration. Följande JSON-text representerar modulens standardkonfiguration.
{
"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"
}