ContextHub offre diversi moduli di interfaccia utente di esempio che è possibile utilizzare nelle soluzioni. Vengono fornite le seguenti informazioni:
Per informazioni sull'aggiunta di moduli dell'interfaccia utente a ContextHub, vedere Aggiunta di un modulo dell'interfaccia utente. Per informazioni sullo sviluppo di moduli dell'interfaccia utente, vedere Creazione di moduli dell'interfaccia utente ContextHub.
Il tipo di modulo dell’interfaccia utente contexthub.base è il tipo di base per tutti gli altri tipi di moduli dell’interfaccia utente. Fornisce pertanto funzionalità generiche per il rendering dei dati dell'archivio.
Sono disponibili le seguenti funzioni:
Il codice sorgente si trova in /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js
.
Configurate il modulo dell'interfaccia utente contexthub.base utilizzando un oggetto Javascript in formato JSON. Per configurare le funzioni del modulo dell’interfaccia utente, includete una delle seguenti proprietà:
true
per supportare fullscreen e false
per impedire la modalità a schermo intero.<p>
.listType
per configurare altri aspetti (vedere di seguito).list
.L'esempio seguente configura un modulo dell'interfaccia utente contexthub.base
per visualizzare informazioni da uno store contexthub.emulators. L'elemento template
illustra come ottenere dati dallo store utilizzando la chiave stabilita dall'elemento 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>"
}
Il modulo dell'interfaccia utente contexthub.browserinfo
visualizza informazioni sul browser Web client e sul sistema operativo. Le informazioni sono ottenute dallo store surferinfo, in base al candidato contexthub.surferinfo.
Il codice sorgente per il modulo dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/browserinfo
. Sebbene contexthub.browserinfo
estenda il modulo contexthub.base
dell'interfaccia utente, esso non esclude né fornisce funzioni aggiuntive. L'implementazione fornisce una configurazione predefinita per il rendering delle informazioni del browser.
Le istanze del modulo di interfaccia utente contexthub.browserinfo non richiedono un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo.
{
"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>"
}
Il modulo dell'interfaccia utente contexthub.datetime
visualizza la data e l'ora memorizzate in uno store denominato datetime, in base al candidato contexthub.datetime
per lo store.
Il modulo fornisce un modulo per la verifica che consente di modificare la data e l'ora nello store.
L'origine del modulo contexthub.datetime
dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/datetime
.
Le istanze del modulo dell’interfaccia utente contexthub.datetime non richiedono un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo.
{
"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>"
}
Il modulo contexthub.location
dell'interfaccia utente visualizza la longitudine e la latitudine del client. Il modulo fornisce un contenitore che mostra una mappa Google su cui potete fare clic per cambiare la posizione corrente. Il modulo ottiene informazioni da uno store ContextHub denominato geolocation basato sul programma di archiviazione contexthub.geolocation.
L'origine del modulo dell'interfaccia utente si trova in /etc/cloudsettings/default/contexthub/geolocation
.
Le istanze del modulo dell’interfaccia utente contexthub.location non richiedono un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo.
{
"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"
}
Il modulo contexthub.screen-orientation
dell'interfaccia utente visualizza l'orientamento dello schermo corrente del client. Anche se disabilitato per impostazione predefinita, il modulo fornisce un puntatore che consente di selezionare un orientamento. Il modulo ottiene informazioni da uno store ContextHub denominato emulatori basato sul programma di archiviazione granite.emulators.
L'origine del modulo dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/screen-orientation
.
Le istanze del modulo contexthub.screen-orientation
dell'interfaccia utente non richiedono un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo. Tenere presente che per impostazione predefinita la proprietà clickable
è false
. Se si ignora la configurazione predefinita per impostare clickable
su true
, facendo clic sul modulo viene visualizzata una finestra a comparsa in cui è possibile selezionare l'orientamento.
{
"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"
}
Il modulo contexthub.tagcloud
dell'interfaccia utente visualizza informazioni sui tag. Sulla barra degli strumenti, il modulo dell’interfaccia utente mostra il numero di tag. La finestra a comparsa presenta un tag cloud e una casella di testo per l’aggiunta di nuovi tag. Il modulo dell'interfaccia utente ottiene informazioni da uno store ContextHub denominato tagcloud, basato sul candidato per lo store contexthub.tagcloud
.
L'origine del modulo dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/tagcloud
.
Le istanze del modulo contexthub.tagcloud
dell'interfaccia utente non richiedono un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo.
{
"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>"
}
Il modulo dell'interfaccia utente ContextHub granite.profile
visualizza il nome visualizzato dell'utente corrente. La finestra a comparsa mostra il nome di accesso dell'utente e consente di modificare il valore del nome visualizzato. Il modulo dell'interfaccia utente ottiene informazioni da uno store ContextHub denominato profile basato sul candidato dello store granite.profile.
L'origine del modulo dell'interfaccia utente è /libs/granite/contexthub/components/modules/profile
.
Le istanze del modulo granite.profile
dell'interfaccia utente non richiedono un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo.
{
"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"
}