Sie sehen sich Hilfeinhalte der folgenden Version an:

ContextHub bietet mehrere Musterbenutzeroberflächenmodule, die Sie in Ihren Lösungen verwenden können. Die folgenden Informationen werden bereitgestellt:

  • Die Hauptfunktionen des Benutzeroberflächenmoduls.
  • Gibt an, wo der Quellcode zu finden ist, damit Sie ihn zum Lernen öffnen können.
  • So wird das Benutzeroberflächenmodul konfiguriert.

Informationen zum Hinzufügen von Benutzeroberflächenmodulen zu ContextHub finden Sie unter Hinzufügen eines Benutzeroberflächenmoduls. Informationen zum Entwickeln von Benutzeroberflächenmodulen finden Sie unter Erstellen von ContextHub-Benutzeroberflächenmodultypen.

Benutzeroberflächenmodultyp contexthub.base

Der Benutzeroberflächenmodultyp contexthub.base ist der Basistyp für alle anderen Benutzeroberflächenmodultypen. Als solches stellt er allgemeine Funktionen zum Rendern von Storedaten bereit.

Die folgenden Eigenschaften sind verfügbar:

  • Titel und Symbol: Geben Sie einen Titel für das Benutzeroberflächenmodul und ein Symbol an. Das Symbol kann über eine URL oder über die Coral-Benutzeroberflächensymbolbibliothek referenziert werden.
  • Storedaten: Identifizieren Sie einen oder mehrere Stores, von denen Daten abgerufen werden sollen.
  • Inhalt: Geben Sie den Inhalt an, der im Benutzeroberflächenmodul angezeigt wird, so wie er in der ContextHub-Symbolleiste angezeigt wird.
  • Popover-Inhalt: Geben Sie den Inhalt an, der in einem Popover angezeigt wird, wenn auf das Benutzeroberflächenmodul geklickt oder getippt wird.
  • Vollbildmodus: Kontrollieren Sie, ob der Vollbildmodus erlaubt ist.

Der Quellcode befindet sich unter /libs/granite/contexthub/code/ui/container/js/ContextHub.UI.BaseModuleRenderer.js.

Konfiguration

Konfigurieren Sie das Benutzeroberflächenmodul contexthub.base mithilfe eines JavaScript-Objekts im JSON-Format. Fügen Sie eine der folgenden Eigenschaften zum Konfigurieren der Benutzeroberflächenmodulfunktionen hinzu:

  • image: eine URL zu einem Bild, das als Symbol angezeigt werden solle.
  • icon: der Name einer Coral-Benutzeroberflächensymbolklasse. Wenn Sie einen Wert für das Symbol und die Bildeigenschaften angeben, wird das Bild verwendet.
  • title: ein Titel für das Benutzeroberflächenmodul. Der Titel wird angezeigt, wenn der Mauszeiger auf dem Benutzeroberflächenmodulsymbol platziert wird.
  • fullscreen: Ein boolescher Wert, der angibt, ob das Benutzeroberflächenmodul den Vollbildmodus unterstützt. Verwenden Sie true, um Vollbilder zu unterstützen, und false, um den Vollbildmodus zu verhindern.
  • template: Eine Handlebars-Vorlage, die den Inhalt angibt, der in der ContextHub-Symbolleiste gerendert werden soll. Verwenden Sie höchstens zwei <p> -Tags.
  • storeMapping: Ein Schlüssel-/Storediagramm. Verwenden Sie den Schlüssel in den Handlebar-Vorlagen, um auf die zugehörigen ContextHub-Storedaten zuzugreifen.
  • list: Ein Array von Elementen, die beim Klicken auf das Benutzeroberflächenmodul als Liste in einem Popover angezeigt werden. Wenn Sie diesen Artikel einschließen, schließen Sie popoverTemplate nicht ein. Der Wert ist ein Array von Objekten mit folgenden Schlüsseln:
    • title: Der Text, der für diesen Artikel angezeigt werden soll
    • image: (optional) Eine URL zu einem Bild, das links angezeigt werden soll
    • icon: (optional) Eine CUI-Symbolklasse, die auf der linken Seite angezeigt werden soll. wird ignoriert, wenn ein Bild angegeben wird
    • selected: (optional) Ein boolescher Wert, der angibt, ob dieses Element als ausgewählt angezeigt werden soll (true=ausgewählt). Standardmäßig werden ausgewählte Elemente in Fettschrift angezeigt. Verwenden Sie eine listType-Eigenschaft, um andere Erscheinungen zu konfigurieren (siehe unten).
  • listType: Der für Popover-Listenelemente zu verwendende Stil. Verwenden Sie einen der folgenden Werte:
    • checkmark
    • checkbox
    • radio
  • popoverTemplate: Eine Handlebar-Vorlage, die den Inhalt angibt, der im Popover gerendert werden soll, wenn auf das Benutzeroberflächenmodul geklickt wird. Wenn Sie diesen Artikel einschließen, schließen Sie das list-Element nicht ein.

Beispiel

Im folgenden Beispiel wird ein contexthub.base-Benutzeroberflächenmodul zum Anzeigen von Informationen aus einem contexthub.emulators-Store konfiguriert. Das template-Element veranschaulicht, wie Daten aus dem Store mithilfe des Schlüssels abgerufen werden, den das storeMapping-Element erstellt.

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

Benutzeroberflächenmodultyp contexthub.browserinfo

Das Benutzeroberflächenmodul contexthub.browserinfo zeigt Informationen über den Client-Webbrowser und das Betriebssystem an. Informationen werden vom Store „surferinfo“ bezogen, der auf dem Storekandidaten contexthub.surferinfo basiert.

chlimage_1

Der Quellcode für das UI-Modul befindet sich unter /libs/granite/contexthub/components/modules/browserinfo. Obwohl contexthub.browserinfo das Benutzeroberflächenmodul contexthub.base erweitert, werden keine zusätzlichen Funktionen überschrieben oder bereitgestellt. Die Implementierung stellt eine Standardkonfiguration zum Rendern von Browserinformationen bereit.

Konfiguration

Instanzen des Benutzeroberflächenmoduls contexthub.browserinfo benötigen keinen Wert für die Detailkonfiguration. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls.

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

Benutzeroberflächenmodultyp contexthub.datetime

Das Benutzeroberflächenmodul contexthub.datetime zeigt das Datum und die Uhrzeit an, die in einem Store mit dem Namen datetime gespeichert sind, der auf dem Storekandidaten contexhub.datetime basiert.

chlimage_1

Das Modul enthält ein Popover-Formular, mit dem Sie Datum und Uhrzeit im Store ändern können.

Die Quelle des Benutzeroberflächenmoduls contexthub.datetime befindet sich unter /libs/granite/contexthub/components/modules/datetime.

Konfiguration

Instanzen des Benutzeroberflächenmoduls contexthub.datetime benötigen keinen Wert für die Detailkonfiguration. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls.

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

Benutzeroberflächenmodultyp contexthub.device

Das Benutzeroberflächenmodul contexthub.device zeigt den Namen des Client-Geräts an. Das Modul erhält Informationen von einem ContextHub-Store namens Emulatoren, der auf dem Storekandidaten granite.emulators basiert.

chlimage_1

Der Quellcode für das Modul befindet sich unter /etc/cloudsettings/default/contexthub/emulators.

Konfiguration

Instanzen des Benutzeroberflächenmoduls contexthub.datetime benötigen keinen Wert für die Detailkonfiguration. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls. Beachten Sie, dass die anklickbare Eigenschaft standardmäßig false ist. Wenn Sie die Standardkonfiguration überschreiben, um anklickbar auf true zu setzen, wird beim Klicken auf das Modul ein Popup angezeigt, in dem Sie das aktuelle Gerät auswählen können.

{
   "icon":"coral-Icon--deviceMobile",
   "title":"Device",
   "clickable":false,
   "storeMapping":{"emulator":"emulators"},
   "template":"<p>{{i18n \"Device\"}}</p><p>{{emulator.currentDevice.title}}",
   "listReference":"/emulators/devices","listType":"checkmark"
}

Benutzeroberflächenmodultyp contexthub.location

Das Benutzeroberflächenmodul contexthub.location zeigt den Längen- und Breitengrad des Clients an. Das Modul bietet ein Popover mit einer Google-Karte, auf die Sie klicken können, um den aktuellen Standort zu ändern. Das Modul erhält Informationen von einem ContextHub-Store namens Geolocation, der auf dem Storekandidaten contexthub.geolocation basiert.

chlimage_1

Die Quelle des UI-Moduls befindet sich unter /etc/cloudsettings/default/contexthub/geolocation.

Konfiguration

Instanzen des Benutzeroberflächenmoduls contexthub.location erfordern keinen Wert für die Detailkonfiguration. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls.

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

Benutzeroberflächenmodultyp contexthub.screen-orientation

Das Benutzeroberflächenmodul contexthub.screen-orientation zeigt die aktuelle Bildschirmausrichtung des Clients an. Obwohl standardmäßig deaktiviert, bietet das Modul ein Popover, mit dem Sie eine Ausrichtung auswählen können. Das Modul erhält Informationen von einem ContextHub-Store namens emulators, der auf dem Storekandidaten granite.emulators basiert.

chlimage_1

Die Quelle des Benutzeroberflächenmoduls befindet sich unter /libs/granite/contexthub/components/modules/screen-orientation.

Konfiguration

Instanzen des Benutzeroberflächenmoduls contexthub.screen-orientation benötigen keinen Wert für die Detailkonfiguration. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls. Beachten Sie, dass die anklickbare Eigenschaft standardmäßig false ist. Wenn Sie die Standardkonfiguration überschreiben, um anklickbar auf true zu setzen, wird beim Klicken auf das Modul ein Popup angezeigt, in dem Sie die Ausrichtung auswählen können.

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

Benutzeroberflächenmodultyp contexthub.tagcloud

Das Benutzeroberflächenmodul contexthub.tagcloud zeigt Informationen zu Tags an. Auf der Symbolleiste zeigt das UI-Modul die Anzahl der Tags an. Das Popupmenü zeigt eine Tagcloud und ein Textfeld zum Hinzufügen neuer Tags an. Das Benutzeroberflächenmodul ruft Informationen aus einem ContextHub-Store namens tagcloud ab, der auf dem der Storekandidat contexthub.tagcloud basiert.

chlimage_1

Die Quelle des Benutzeroberflächenmoduls befindet sich unter /libs/granite/contexthub/components/modules/tagcloud.

Konfiguration

Für Instanzen des Benutzeroberflächenmoduls contexthub.tagcloud ist kein Wert für die Detailkonfiguration erforderlich. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls.

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

Benutzeroberflächenmodultyp granite.profile

Das ContextHub-Benutzeroberflächenmodul granite.profile zeigt den Anzeigenamen des aktuellen Benutzers an. Das Popupmenü zeigt den Anmeldenamen des Benutzers auf, was Ihnen ermöglicht, den Wert der Anzeigename zu ändern. Das Benutzeroberflächenmodul erhält Informationen von einem ContextHub-Store namens Profile, der auf dem Storekandidaten granite.profile basiert.

chlimage_1

Die Quelle des Benutzeroberflächenmoduls befindet sich unter /libs/granite/contexthub/components/modules/profile.

Konfiguration

Instanzen des Benutzeroberflächenmoduls granite.profile benötigen keinen Wert für die Detailkonfiguration. Der folgende JSON-Text repräsentiert die Standardkonfiguration des Moduls.

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

Dieses Werk unterliegt den Bedingungen der Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License.  Twitter™- und Facebook-Beiträge fallen nicht unter die Bedingungen der Creative Commons-Lizenz.

Rechtliche Hinweise   |   Online-Datenschutzrichtlinie