Exempeltyper för ContextHub-gränssnittsmodul

ContextHub innehåller flera exempelmoduler för användargränssnitt som du kan använda i dina lösningar. Följande information tillhandahålls:

• Huvudfunktionerna i gränssnittsmodulen.
• Var du hittar källkoden så att du kan öppna den i utbildningssyfte.
• Konfigurera gränssnittsmodulen.

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.

contexthub.base UI-modultyp

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:

• Titel och ikon: Ange en rubrik för användargränssnittsmodulen och en ikon. Ikonen kan refereras via en URL eller från ikonbiblioteket för Coral UI.
• Lagra data: Identifiera ett eller flera arkiv som data ska hämtas från.
• Innehåll: Ange innehållet som visas i gränssnittsmodulen så som det visas i ContextHub-verktygsfältet.
• Leveransinnehåll: Ange innehållet som visas i en pekare när användaren klickar eller trycker på gränssnittsmodulen.
• Helskärmsläge: Kontrollera om helskärmsläge tillåts.

Källkoden finns på /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js.

Konfiguration

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:

• bild: En URL till en bild som ska visas som ikon.
• ikon: Namnet på en Coral UI icon klassen. Om du anger ett värde för både ikonen och bildegenskaperna används bilden.
• titel: En rubrik för gränssnittsmodulen. Titeln visas när pekaren pausas över ikonen för modulen Gränssnitt.
• helskärm: Ett booleskt värde som anger om gränssnittsmodulen stöder helskärmsläge. Använd true för helskärmsläge och false för att förhindra helskärmsläge.
• mall: A Handtag mall som anger det innehåll som ska återges i ContextHub-verktygsfältet. Använd högst två <p> -taggar.
• storeMapping: En nyckel/arkivmappning. Använd nyckeln i Handlebar-mallar för att komma åt associerade ContextHub-lagringsdata.
• lista: En array med objekt som ska visas som en lista i en portfölj när användaren klickar på gränssnittsmodulen. Om du tar med det här objektet ska du inte ta med poverTemplate. Värdet är en array med objekt med följande tangenter:
  • title: Den text som ska visas för objektet
  • image: (Valfritt) En URL till en bild som ska visas till vänster
  • ikon: (Valfritt) En CUI-ikonklass som ska visas till vänster, ignoreras om en bild har angetts
  • selected: (Valfritt) Ett booleskt värde som anger om objektet ska visas som markerat (true=selected). Som standard visas markerade objekt med ett fetstil. Använd en listType för att konfigurera andra utseenden (se nedan).
• listType: Det format som ska användas för att överföra listobjekt. Använd något av följande värden:
  • bock
  • kryssruta
  • radio
• popoverTemplate: En mall för hanteringsfält som anger innehållet som ska återges i pekaren när användaren klickar på gränssnittsmodulen. Om du tar med det här objektet ska du inte ta med list objekt.

Exempel

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

contexthub.browserinfo UI Module Type

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.

Konfiguration

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

kontexthub.datetime, gränssnittsmodul, typ

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.

Konfiguration

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

kontexthub.location, gränssnittsmodultyp

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.

Konfiguration

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

contexthub.screen-orientation UI Module Type

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.

Konfiguration

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

contexthub.tagcloud-modultyp

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.

Konfiguration

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

granite.profile UI Module Type

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.

Konfiguration

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