Zum Inhalt

Beispiel einer Komponente

Eine Webkomponente ist im wesentlichen eine über Javascript nachgeladenes Dokument, dass alle notwendigen Elemente wie Javascripts, Templates und CSS-Dateien enthält.

Erstellen einer Komponente

Eine einfache Web-Komponente besteht aus einem gültiges HTML5 Dokument. Das folgende Beispiel zeigt ein Webkomponente ohne Funktion und Inhalt.

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Meine Komponente</title>
</head>
<body>
</body>
</html>

Um diese Komponente mit Leben zu füllen, müssen Javascript-Elemente hinzugefügt werden. Eine Beispieldatei für eine Alvine Webkomponente ist über Github abrufbar https://github.com/Alvine-IO/console/blob/master/templates/webcomponent.html

Die Webkomponente wird über die Modulfunktion des Console-Hosts in das Hauptdokument eingebunden. Die einzubindenden Komponenten werden dem Host über die zentrale Konfigurationsdatei mitgeteilt.

Konfiguration

Die Komponente kann über die zentrale Konfiguration eingerichtet und mit einem Navigationshandel verbunden werden. Dazu muss unter components > component ein Eintrag hinzugefügt werden:

"components": {
  "component": [
    {
      "module": {
        "prototype": "Alvine.Package.UI.Content.Iframe",
        "location": "//cdn.alvine.io/console/latest/alvine/package/ui/content/iframe.min.html"
      },
      "handler": "example",
      "keybinding": "e",
      "navigation": {
        "label": "i18n:example",
        "mountpoint": "main.menu.favourites"
      }
    }
  ]
}

In der folgenden Tabelle sind die Eigenschaften, die in der Konfigurationsdatei zu definierne sind aufgeführt.

Schlüssel Pflicht Beschreibung Beispiel
module.prototype x Name des Modules; Name des Javascript-Objekte-Konstruktors Alvine.Package.UI.Content.Iframe
module.location x URL der zu ladenden Komponente
handler x Entweder Hash, absolute oder relative URL #google
keybinding Tastaturbefehl zum aufruf des Handels g
navigation.label Name des Navigationseintrages i18n:example
navigation.mountpoint Pfad der auf einen Punkt in der Registry zeigt und an dem der Navigationspunkt eingehängt wird main.menu.favourites
arguments Konfiguration der Komponente

Zusätzlich zu diesen Eigenschaften kann eine Komponente weitere Eigenschaften besitzen

Referenzen

Kommentare