Um zu zeigen, wie eine auf dem Web Builder basierende Anwendung funktioniert, werfen wir hier einen genaueren Blick auf die Scrivito Portal App, eine funktionsreiche JavaScript-Web-Anwendung, auf deren Grundlage man zügig seine professionelle Website erstellen kann.
In dem Artikel Erste Schritte mit der Scrivito Portal App oder im Readme auf GitHub erfahren Sie, wie sich die Portal App installieren und lokal ausführen lässt.
Der Web 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 Web-Builder-SDK nutzt React, um auf die Inhalte in Ihrer Web-Builder-Instanz zuzugreifen und sie zu rendern. Redakteure können diese Inhalte mit der Web-Builder-Benutzerschnittstelle unter edit.scrivito.com direkt auf den Webseiten erstellen und bearbeiten.
Nachdem die Portal App aufgesetzt und gestartet wurde, wird sie über die Datei „index.html“ aus dem „src“-Verzeichnis im lokalen Repository ausgeliefert. Dieser Datei widmen wir uns zuerst:
Das <head>-Element enthält nichts Besonderes, abgesehen davon, dass eine Verbindung zu diversen Ressourcen hergestellt wird, um diese schneller zur Verfügung zu haben.
Wie oben zu sehen, ist der einzige sichtbare Teil im <body> von „index.html“ ein „loader“, der den Ladevorgang visualisiert. Jedoch wird ein Skript namens „main.tsx“ ausgeführt, um die App zu booten und die betreffende Website oder die Websites zu konfigurieren. Als Teil dieses Vorgangs wird „renderOrHydrateApp.tsx“ aufgerufen, um die (vorgerenderte) App zu rendern, also die aktuelle Seite, einschließlich deren Umgebung und der Komponenten, aus denen sie besteht. Dies geschieht über die „App“-Komponente aus „App.tsx“.
Die Komponente App rendert die aktuelle Seite, indem sie die im SDK enthaltene React-Komponente Scrivito.CurrentPage aufruft.
Initial entspricht die aktuelle Seite der Homepage Ihrer Web-Builder-Instanz. Navigiert der Besucher auf der Website, ändert sich die aktuelle Seite natürlich.
Wie bestimmt Scrivito.CurrentPage beim Start der Applikation, welches Objekt in Ihrem Web Builder die Homepage ist?
Um die Homepage beim Start zu ermitteln und anzuzeigen, sucht <Scrivito.CurrentPage /> das Inhaltsobjekt 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 Web Builder sind in den Attributen 🇺🇸 der Inhaltsobjekte gespeichert. Um unterschiedliche Arten von Objekten zur Verfügung zu haben, etwa Homepages, Landing-Pages oder Standardseiten, können Sie Objektklassen definieren 🇺🇸 und diese mit Attributen Ihrer Wahl ausstatten.
Um einen Überblick der Objektklassen in der 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 Web-Builder-Anwendung gibt, werden durch Verzeichnisse strukturiert, die den Namen des jeweiligen Typs haben. Jedes dieser Verzeichnisse enthält bis zu fünf JavaScript-Dateien, eine für die Modellklasse, (beispielsweise „HomepageObjClass.js“), je eine für die Komponente, die deren Instanzen und Layout rendert, eine für das CSS, eine für die Konfiguration der Attribute, die Redakteure über die Eigenschaften eines Inhaltsobjekts bearbeiten können, und optional eine für das Symbolbild im Seitentyp-Auswahldialog. Mit Ausnahmer der Layout-Komponente verhält es sich bei den Widget-Typen im „Widgets“-Verzeichnis analog.
Als Ergänzung zu den diversen Seitentypen gibt es auch eine Objektklasse für Bilder. In der Datei „ImageObjClass.ts” im ImageWidget-Verzeichnis ist zu erkennen, dass Bild-Objekte ganz gewöhnliche Inhaltsobjekte sind, man ihnen also ebenfalls Attribute geben kann.
Dasselbe gilt für Objekte vom Typ Download.
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 Portal 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 Portal-App-Projekt.
Die Portal 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 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 Fehlerseite, die Ladeanzeige, Hinweisfenster (Toasts) und andere Fragmente, die auf den Seiten zum Einsatz kommen. Im „utils“-Verzeichnis befinden sich Hilfsfunktionen, und in den Verzeichnissen „assets“ und „config“ liegen beispielsweise Thumbnails und CSS-Dateien bzw. Konfigurationsdateien.
Finden Sie die Portal App nützlich? Sprechen Sie uns an, wenn Sie Unterstützung benötigen oder mehr wissen möchten!