Tipi di modulo interfaccia utente ContextHub di esempio sample-contexthub-ui-module-types

ContextHub fornisce diversi moduli di interfaccia utente di esempio che puoi utilizzare nelle soluzioni. Vengono fornite le seguenti informazioni:

Per informazioni sull'aggiunta di moduli UI a ContextHub, vedere Aggiunta di un modulo UI. Per informazioni sullo sviluppo di moduli di interfaccia utente, vedere Creazione di tipi di moduli di interfaccia utente ContextHub.

Tipo di modulo dell’interfaccia utente contexthub.base contexthub-base-ui-module-type

Il tipo di modulo dell’interfaccia utente contexthub.base è il tipo di base per tutti gli altri tipi di modulo dell’interfaccia utente. Fornisce funzioni generiche per il rendering dei dati dell'archivio.

Sono disponibili le seguenti funzioni:

Codice sorgente in /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js.

Configurazione configuration

Configura il modulo dell’interfaccia utente contexthub.base utilizzando un oggetto JavaScript in formato JSON. Includi una delle seguenti proprietà per configurare le funzioni del modulo dell’interfaccia utente:

Esempio example

Nell'esempio seguente viene configurato un modulo dell'interfaccia utente contexthub.base per visualizzare informazioni da un archivio contexthub.emulators. L'elemento template illustra come ottenere dati dall'archivio 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>"
}

Tipo di modulo interfaccia utente contexthub.browserinfo contexthub-browserinfo-ui-module-type

Il modulo dell'interfaccia utente contexthub.browserinfo visualizza informazioni sul browser Web client e sul sistema operativo. Le informazioni vengono ottenute dall'archivio surferinfo in base al candidato dell'archivio contexthub.surferinfo.

Il codice sorgente del modulo dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/browserinfo. Anche se contexthub.browserinfo estende il modulo dell'interfaccia utente contexthub.base, non esegue l'override né fornisce funzioni aggiuntive. L’implementazione fornisce una configurazione predefinita per il rendering delle informazioni del browser.

Configurazione configuration-1

Le istanze del modulo dell’interfaccia utente contexthub.browserinfo non richiedono un valore per Configurazione 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>"
}

Tipo di modulo dell’interfaccia utente contexthub.datetime contexthub-datetime-ui-module-type

Il modulo dell'interfaccia utente contexthub.datetime visualizza la data e l'ora memorizzate in un archivio denominato datetime basato sul candidato dell'archivio contexthub.datetime.

Il modulo fornisce un modulo a comparsa che consente di modificare la data e l’ora nell’archivio.

L'origine del modulo interfaccia utente contexthub.datetime si trova in /libs/granite/contexthub/components/modules/datetime.

Configurazione configuration-2

Le istanze del modulo dell’interfaccia utente contexthub.datetime non richiedono un valore per Configurazione 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>"
}

Tipo di modulo dell’interfaccia utente contexthub.location contexthub-location-ui-module-type

Il modulo dell'interfaccia utente contexthub.location visualizza la longitudine e la latitudine del client. Il modulo fornisce un elemento a comparsa che visualizza una mappa di Google su cui è possibile fare clic per modificare la posizione corrente. Il modulo ottiene informazioni da un archivio ContextHub denominato geolocation basato sul candidato dell'archivio contexthub.geolocation.

L'origine del modulo dell'interfaccia utente si trova in /etc/cloudsettings/default/contexthub/geolocation.

Configurazione configuration-4

Le istanze del modulo dell’interfaccia utente contexthub.location non richiedono un valore per Configurazione 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"
}

Tipo di modulo dell’interfaccia utente orientato a contexthub.screen contexthub-screen-orientation-ui-module-type

Il modulo dell'interfaccia utente contexthub.screen-orientation visualizza l'orientamento corrente dello schermo del client. Sebbene sia disattivato per impostazione predefinita, il modulo fornisce un elemento a comparsa che consente di selezionare un orientamento. Il modulo ottiene informazioni da un archivio ContextHub denominato emulatori basato sul candidato dell'archivio granite.emulators.

L'origine del modulo dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/screen-orientation.

Configurazione configuration-5

Le istanze del modulo dell'interfaccia utente contexthub.screen-orientation non richiedono un valore per Configurazione dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo. La proprietà clickable è false per impostazione predefinita. Se si esegue l'override della configurazione predefinita per impostare clickable su true, facendo clic sul modulo viene visualizzata una finestra popup 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"
}

Tipo di modulo dell’interfaccia utente contexthub.tagcloud contexthub-tagcloud-ui-module-type

Il modulo dell'interfaccia utente contexthub.tagcloud visualizza informazioni sui tag. Sulla barra degli strumenti il modulo UI mostra il numero di tag. Il pop-up mostra un tagcloud e una casella di testo per aggiungere nuovi tag. Il modulo dell'interfaccia utente ottiene informazioni da un archivio ContextHub denominato tagcloud basate sul candidato dell'archivio contexthub.tagcloud.

L'origine del modulo dell'interfaccia utente si trova in /libs/granite/contexthub/components/modules/tagcloud.

Configurazione configuration-6

Le istanze del modulo dell'interfaccia utente contexthub.tagcloud non richiedono un valore per Configurazione 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>"
}

Tipo di modulo dell’interfaccia utente granite.profile granite-profile-ui-module-type

Il modulo dell'interfaccia utente ContextHub granite.profile visualizza il nome visualizzato dell'utente corrente. Il pop-up mostra il nome di accesso dell'utente e consente di modificare il valore del nome visualizzato. Il modulo di interfaccia utente ottiene informazioni da un archivio ContextHub denominato profile basato sul candidato dell'archivio granite.profile.

L'origine del modulo dell'interfaccia utente è /libs/granite/contexthub/components/modules/profile.

Configurazione configuration-7

Le istanze del modulo dell'interfaccia utente granite.profile non richiedono un valore per Configurazione 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"
}