Tipi di moduli di interfaccia utente ContextHub di esempio

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

  • Funzioni principali del modulo dell’interfaccia utente.
  • Dove trovare il codice sorgente in modo da poterlo aprire a scopo di apprendimento.
  • Come configurare il modulo dell’interfaccia utente.

Per informazioni sull’aggiunta di moduli di interfaccia utente a ContextHub, consulta Aggiunta di un modulo dell’interfaccia utente. Per informazioni sullo sviluppo di moduli di interfaccia utente, vedi Creazione di tipi di moduli di interfaccia utente ContextHub.

tipo di modulo interfaccia utente contexthub.base

Il tipo di modulo dell’interfaccia utente contexthub.base è il tipo di base per tutti gli altri tipi di moduli dell’interfaccia utente. In quanto tale, fornisce funzioni generiche per il rendering dei dati archiviati.

Sono disponibili le seguenti funzioni:

  • Titolo e icona: Specifica un titolo per il modulo dell’interfaccia utente e un’icona. È possibile fare riferimento all’icona utilizzando un URL o dalla libreria di icone dell’interfaccia utente Coral.
  • Archivia dati: Identificare uno o più negozi da cui recuperare i dati.
  • Contenuto: Specifica il contenuto visualizzato nel modulo dell’interfaccia utente così come viene visualizzato nella barra degli strumenti di ContextHub.
  • Contenuto del pover: Specifica il contenuto visualizzato in un pover quando fai clic o tocca il modulo dell’interfaccia utente.
  • Modalità a schermo intero: Controllare se la modalità a schermo intero è consentita.

Il codice sorgente si trova in /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js.

Configurazione

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

  • immagine: URL di un’immagine da visualizzare come icona.
  • icona: Nome di un Icona dell’interfaccia utente Coral classe. Se specifichi un valore sia per l’icona che per le proprietà dell’immagine, l’immagine viene utilizzata.
  • titolo: Un titolo per il modulo dell’interfaccia utente. Il titolo viene visualizzato quando il puntatore viene messo in pausa sull’icona del modulo dell’interfaccia utente.
  • a schermo intero: Valore booleano che indica se il modulo dell’interfaccia utente supporta la modalità a schermo intero. Utilizzo true per supportare a schermo intero e false per impedire la modalità a schermo intero.
  • modello: A Handlebars modello che specifica il contenuto di cui eseguire il rendering nella barra degli strumenti di ContextHub. Utilizza al massimo due <p> tag.
  • storeMapping: Mappatura chiave/archivio. Utilizza la chiave nei modelli Handlebar per accedere ai dati dell’archivio ContextHub associati.
  • elenco: Matrice di elementi da visualizzare come elenco in un pover quando si fa clic sul modulo dell’interfaccia utente. Se includi questo elemento, non includere poverTemplate. Il valore è una matrice di oggetti con le seguenti chiavi:
    • titolo: Testo da visualizzare per l'elemento
    • immagine: (Facoltativo) URL di un'immagine che deve essere visualizzata a sinistra
    • icona: (Facoltativo) Una classe icona CUI che deve essere visualizzata a sinistra; ignorato se è specificata un'immagine
    • selezionato: (Facoltativo) Un valore booleano che specifica se l'elemento deve essere visualizzato come selezionato (true=selected). Per impostazione predefinita, gli elementi selezionati vengono visualizzati in grassetto. Utilizza un listType per configurare altri aspetti (vedi di seguito).
  • listType: Stile da utilizzare per gli elementi dell’elenco di pover. Utilizzare uno dei seguenti valori:
    • segno di spunta
    • spunta
    • radio
  • poverTemplate: Modello Handlebars che specifica il contenuto da eseguire nel popover quando si fa clic sul modulo dell’interfaccia utente. Se includi questo elemento, non includere list oggetto.

Esempio

L'esempio seguente configura a contexthub.base Modulo dell’interfaccia utente per visualizzare informazioni da un contexthub.emulators archiviare. La template l'elemento illustra come ottenere i dati dall'archivio utilizzando la chiave storeMapping l'articolo stabilisce.

{
   "icon": "coral-Icon--move",
    "title": "Screen Resolution",
    "storeMapping": {
      "emulator": "emulators"
    },
    "template": "<p>{{{ i18n \"Resolution\"}}}</p><p>{{{emulator.currentDevice.width}}} x {{{emulator.currentDevice.height}}}</p>"
}

modulo contexthub.base

tipo di modulo interfaccia utente contexthub.browserinfo

La contexthub.browserinfo Il modulo Interfaccia utente visualizza informazioni sul browser Web client e sul sistema operativo. Le informazioni sono ottenute dal negozio surferinfo, in base al contexthub.surferinfo archiviare il candidato.

modulo contexthub.browserinfo

Il codice sorgente per il modulo di interfaccia utente si trova in /libs/granite/contexthub/components/modules/browserinfo. Nonostante contexthub.browserinfo estende contexthub.base Il modulo dell’interfaccia utente non sostituisce né fornisce funzioni aggiuntive. L’implementazione fornisce una configurazione predefinita per il rendering delle informazioni sul browser.

Configurazione

Le istanze del modulo dell’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>"
}

tipo di modulo interfaccia utente contexthub.datetime

La contexthub.datetime Il modulo dell’interfaccia utente visualizza la data e l’ora memorizzate in un archivio denominato datetime basato su contexthub.datetime archiviare il candidato.

modulo contexthub.datetime

Il modulo fornisce un modulo di sostituzione che consente di modificare la data e l’ora nello store.

La fonte contexthub.datetime Il modulo dell’interfaccia utente si trova in /libs/granite/contexthub/components/modules/datetime.

Configurazione

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>"
}

tipo di modulo interfaccia utente contexthub.location

La contexthub.location Il modulo dell’interfaccia utente visualizza la longitudine e la latitudine del client. Il modulo fornisce un puntatore che visualizza una mappa Google su cui è possibile fare clic per modificare la posizione corrente. Il modulo ottiene informazioni da un archivio ContextHub denominato geolocalizzazione basata su contexthub.geolocation archiviare il candidato.

modulo contexthub.location

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

Configurazione

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"
}

tipo di modulo interfaccia utente contexthub.screen-orientation

La contexthub.screen-orientation Il modulo dell’interfaccia utente visualizza l’orientamento dello schermo corrente del client. Anche se disattivato per impostazione predefinita, il modulo fornisce un puntatore che consente di selezionare un orientamento. Il modulo ottiene informazioni da un archivio ContextHub denominato emulatori basato su granite.emulatori archiviare il candidato.

modulo contexthub.screen-orientation

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

Configurazione

Istanze di contexthub.screen-orientation Il modulo dell’interfaccia utente non richiede un valore per la configurazione dei dettagli. Il seguente testo JSON rappresenta la configurazione predefinita del modulo. Tieni presente che clickable è false per impostazione predefinita. Se si sostituisce la configurazione predefinita da impostare clickable a 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"
}

tipo di modulo interfaccia utente contexthub.tagcloud

La contexthub.tagcloud Il modulo 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 mostra un tag cloud e una casella di testo per l’aggiunta di nuovi tag. Il modulo dell’interfaccia utente ottiene informazioni da un archivio ContextHub denominato tagcloud basato su contexthub.tagcloud archiviare il candidato.

modulo contexthub.tagcloud

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

Configurazione

Istanze di contexthub.tagcloud Il modulo dell’interfaccia utente non richiede 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>"
}

tipo di modulo interfaccia utente granite.profile

La granite.profile Il modulo dell’interfaccia utente di ContextHub visualizza il nome visualizzato dell’utente corrente. La finestra a comparsa rivela il nome di accesso dell'utente e consente di modificare il valore del nome visualizzato. Il modulo dell’interfaccia utente ottiene informazioni da un archivio ContextHub denominato profilo basato su granite.profile archiviare il candidato.

modulo granite.profile

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

Configurazione

Istanze di granite.profile Il modulo dell’interfaccia utente non richiede 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"
}

In questa pagina