Um zu zeigen, wie eine auf dem Interface Builder basierende Anwendung funktioniert, werfen wir hier einen genaueren Blick auf die Example Application, eine einfache, doch funktionsreiche JavaScript-Web-Anwendung, auf deren Grundlage man zügig eine professionelle Website erstellen kann.
In dem Artikel Erste Schritte mit dem Interface Builder oder im Readme auf GitHub erfahren Sie, wie sich die Example App installieren und lokal ausführen lässt.
Der JustRelate Web Interface Builder besteht aus zwei Hauptkomponenten, die miteinander interagieren, einem Backend zur transparenten Verwaltung Ihrer Inhalte sowie einer JavaScript-Bibliothek (dem SDK), das in einer React-basierten Web-Anwendung als Content-Management-Schicht fungiert.
React ist Facebooks Lösung für die Erstellung interaktiver Web-Benutzerschnittstellen mittels in sich geschlossener JavaScript-Komponenten. Das Interface-Builder-SDK verwendet React, um die in Ihrer Interface-Builder-Instanz gespeicherten Inhalte anzuzeigen. Redakteure können diese Inhalte mit der Bedienschnittstelle des Interface Builders über edit.scrivito.com direkt auf den Seiten erstellen und bearbeiten.
Nachdem die Example App aufgesetzt und gestartet wurde, wird sie aus dem „src“-Verzeichnis im lokalen Repository ausgeliefert, initial über die Datei „catch_all_index.html“. Dieser Datei widmen wir uns zuerst:
Das <head>-Element enthält nichts Besonderes, abgesehen von der eingebundenen Datei „js_snippets_head.js“. Wenn Ihre Website Drittanbieterdienste nutzt, können Sie den dazu gehörenden Code in dieser Datei ablegen. Analog hierzu wird am Ende des <body>-Elements „js_snippets_before_body_end.js“ eingebunden, um solchen Diensten die Möglichkeit zu geben, zusätzliches HTML-Markup zu rendern, falls erforderlich.
Wie oben zu sehen, ist der einzige sichtbare Teil im <body> von “catch_all_index.html” ein <div>-Element, dessen ID „application“ lautet. In dieses Element rendert das „index.js“-Skript aus dem „src“-Verzeichnis alle Inhalte auf der Seite:
Der Aufruf von „ReactDOM.render“ fügt die Komponente App in das erwähnte DOM-Element „application” ein.
Wenn Sie jetzt vermuten, dass App eine Funktion in „App.js“ ist, dann stimmt das ganz genau: sie stellt eine Seite dar, indem sie eine Navigation generiert und die Inhalte der aktuellen Seite rendert. Falls letztere nicht ermittelt werden kann, wird eine entsprechende Fehlermeldung angezeigt.
Wir sollten uns die Funktion App genauer anschauen!
Die Funktion App rendert die aktuelle Seite, indem sie die im SDK enthaltene React-Komponente Scrivito.CurrentPage aufruft.
Initial entspricht die Homepage Ihres Interface Builders der aktuellen Seite. Navigiert der Besucher auf der Website, ändert sich die aktuelle Seite natürlich.
Woher weiß Scrivito.CurrentPage beim Start der Applikation, welches Objekt in Ihrem Interface Builder die Homepage ist?
Um die Homepage beim Start zu ermitteln und anzuzeigen, sucht <Scrivito.CurrentPage /> das Inhaltsobject mit dem Pfad (path) „/“. Wird anschließend auf der Website navigiert, wird die dann anzuzeigende aktuelle Seite anhand der ID (id) des betreffenden Objekts identifiziert, die ein Teil der verlinkten URL ist.
Sämtliche Inhalte im Interface Builder sind in den Attributen 🇺🇸 der Inhaltsobjekte gespeichert. Um unterschiedliche Arten von Objekten zur Verfügung zu haben, etwa Homepages, Landing-Pages oder Blogposts, können Sie Objektklassen definieren 🇺🇸 und diese mit Attributen Ihrer Wahl ausstatten.
Um einen Überblick der Objektklassen in der Example App zu erhalten, lassen Sie uns einen weiteren Blick in das Projektverzeichnis werfen, dieses Mal in das Unterverzeichnis „src/Objs“.
Die einzelnen Seitentypen, die es in einer Interface-Builder-Anwendung gibt, werden durch Verzeichnisse strukturiert, die den Namen des jeweiligen Typs haben. Jedes dieser Verzeichnisse enthält bis zu vier JavaScript-Dateien, eine für die Modellklasse, (beispielsweise „HomepageObjClass.js“), eine für die Komponente, die deren Instanzen rendert, eine für das CSS sowie eine für die Konfiguration der Darstellung der Attribute, die Redakteure über die Eigenschaften eines Inhaltsobjekts bearbeiten können. Bei den Widget-Typen im „Widgets“-Verzeichnis verhält es sich analog.
Als Ergänzung zu den diversen Seitentypen gibt es auch eine Objektklasse für Bilder. In der Datei „ImageObjClass.js” im ImageWidget-Verzeichnis ist zu erkennen, dass Bild-Objekte ganz gewöhnliche Inhaltsobjekte sind, man ihnen also ebenfalls Attribute geben kann.
Kehren wir nun zu der Frage zurück, wie Seiten angezeigt werden. Wir halten erstens fest, dass sämtliche Inhalte einer Seite von der React-Komponente gerendert werden, die für die Instanzen der betreffenden Objektklasse, also des Seitentyps zur Verfügung gestellt wurde. Zweitens haben alle Seiten, deren Inhalte bearbeitbar sein sollen, ein Attribut vom Typ widgetlist. In der Example App heißt dieses Attribut body, aber der Name ist natürlich frei wählbar. In diesem widgetlist-Attribut wird der gesamte Hauptinhalt der Seite abgelegt, in der Form von Widgets, die ein Redakteur auf der Seite platziert.
Die Darstellung einer Seite lässt sich also herunterbrechen auf die Bestandteile, die alle Seiten dieses Typs haben (einen Header, eine Navigation, einen Footer, usw.), sowie die im body-Attribut enthaltenen Widgets. Hierfür muss die zum Seitentyp gehörende React-Komponente lediglich dieses Attribut rendern:
Obiges bewirkt, dass der Inhalt der body-widgetlist von den Komponenten der darin enthaltenen Widgets gerendert wird. Werfen wir nun einen Blick in das „src/Widgets“-Unterverzeichnis im Example-App-Projekt.
Die Example App enthält zahlreiche Widget-Typen, die Sie jederzeit anpassen und erweitern können. Analog zu Objektklassen definieren Widget-Klassen die Attribute ihrer Instanzen, und um diese zu rendern, wird eine React-Komponente benötigt.
Viele oder sogar die meisten Widgets haben Eigenschaften, die nicht direkt auf der Webseite bearbeitet werden können. So kann man beim Image-Widget dessen Ausrichtung über das Attribut alignment steuern. Um dieses Attribut in den Widget-Eigenschaften bearbeiten zu können, kann die Widget-Modellklasse mittels Scrivito.provideEditingConfig mit einer entsprechenden Konfiguration versehen werden:
Einige Komponenten der Example App befinden sich in Unterverzeichnissen von „src“, entweder der Übersichtlichkeit halber oder weil sie an mehreren Stellen verwendet werden. Das Verzeichnis „Components“ zum Beispiel enthält die React-Komponenten für die Navigation, den Footer, Blogpost-Bestandteile und andere Fragmente, die auf den Seiten zum Einsatz kommen. Im „utils“-Verzeichnis befinden sich Hilfsfunktionen, und in den Verzeichnissen „assets“ und „config“ liegen Zusätze oder Konfigurationsdateien.
Finden Sie die Example App nützlich? Sprechen Sie uns an, wenn Sie Unterstützung benötigen oder uns Feedback geben möchten!