In diesem Tutorial erweitern wir die Scrivito Example Application so, dass Redakteure zu beliebigen Seiten Navigationen für Unterseiten hinzufügen können.

Hierfür werden wir ein Widget entwickeln, das sich Scrivitos Unterstützung für hierarchische Beziehungen zwischen CMS-Objekten zunutze macht. Jede mit Scrivito erstellte Website, die sich von einer Startseite ausgehend verzweigt, hat eine solche hierarchische Struktur.

In dieser Struktur dienen Seiten als „Eltern“ (oder Knoten), zu denen „Kinder” (Unterseiten) hinzugefügt werden können, von denen jedes wiederum als Knoten dienen kann. Die Seite ganz oben, der Ursprung aller Nachfolgerinnen, ist die Hauptseite (engl.: „root page“), die meist auch die Homepage ist. Die Stelle, die eine jede Seite in der Hierarchie einnimmt, ist durch ihren jeweiligen eindeutigen Pfad spezifiziert, der im Attribut _path abgelegt ist. Bei einem Pfad wie „/firma/mitarbeiter“, entspräche der erste „/“ der Homepage, „firma“ wäre eines ihrer „Kinder“, das zugleich die „Elternseite“ von „mitarbeiter“ wäre.

Normalerweise brauchen Sie sich um Pfade keine Gedanken zu machen, weil Scrivito sich um sie kümmert. Als Redakteurin können Sie Unterseiten mit Hilfe des Hauptmenüs anlegen, das sich rechts oben befindet. Wenn Navigationen mit der eingebauten Komponente Scrivito.ChildListTag ausgegeben werden, lassen sich Unterseiten über das Menü hinter dem blauen „Griff“ einer solchen automatischen Navigation anlegen, wie es auf dem Screenshot zu sehen ist.

Wir möchten, dass der Einstiegspunkt unserer Navigation konfigurierbar ist, sodass sie die Unterseiten einer beliebigen Seite der Website auflisten kann, nicht nur diejenigen unterhalb der Seite, die das Widget enthält. Darüber hinaus soll das Widget einen Link rendern, mit dem man eine Ebene höher gelangt, sowie einen Titel haben und anzeigen können.

Ferner zeigen wir hier, wie Sie Navigationen mit eigenen Stilen versehen können, als Beispiel dafür, wie sich das Erscheinungsbild einer auf Scrivito basierenden Website ganz allgemein anpassen lässt.

Jeder CMS-Objekt- oder Widget-Typ erfordert eine Modellklasse, die die Attribute ihrer Instanzen spezifiziert. In einer Scrivito-App befinden sich die zu einem Widget-Typ gehörenden Dateien in einem nach dem Widget benannten Verzeichnis unterhalb von „src/Widgets“. Wir haben das Widget ChildNavigationWidget genannt, also legen wir dort ein Verzeichnis mit diesem Namen an und statten es anschließend in der Datei für die Klasse mit zwei Attributen aus, die die oben genannten Features abdecken:

Das Modell hat ein Attribut namens parentPage, das dazu dient, die Einstiegsseite der Navigation festlegen zu können. Es ist vom Typ reference, der genau diesen Zweck erfüllt, nämlich auf CMS-Objekte zu verweisen. Redakteure können Attributen dieses Typs bequem mit dem Content Browser einen Wert zuweisen. Das zweite Attribut, navTitle, ist ein string, in dem der Titel der Navigation gespeichert wird. Das ist bereits alles, was wir benötigen. Wenn Ihnen das Konzept hinter diesem Widget gefällt und Sie es später erweitern möchten, werden bestimmt weitere Attribute erforderlich.

Bevor wir uns der Komponente zuwenden, die die Instanzen unseres Widgets rendert, möchten wir noch kurz die Konfiguration bereitstellen, die es Redakteuren ermöglicht, den Einstiegspunkt für die Navigation, also den Wert von parentPage in den Widget-Eigenschaften festzulegen. Am importierten Icon können Sie erkennen, dass wir das LinkListWidget als Vorlage für unser ChildNavigationWidget verwendet haben:

Neben den Eigenschaften für die Darstellung des Widget-Typs im Widget-Auswahldialog (title, description, thumbnail) wird hier nur parentPage konfiguriert, d.h. zum Eigenschaftendialog der Widget-Instanzen hinzugefügt. Das andere Attribut, navTitle, braucht nicht konfiguriert zu werden, weil wir es direkt auf den Seiten bearbeitbar machen werden.

Im Allgemeinen ist es sinnvoll, nur solche Attribute in Eigenschaftendialoge aufzunehmen, die nicht direkt auf den Seiten bearbeitet werden können. Dadurch lassen sich solche Dialoge übersichtlich halten.

Die „Infrastruktur“ unseres Widget-Typs ist nun vollständig, sodass wir uns darum kümmern können, wie dessen Instanzen gerendert werden.

Die ChildNavigationWidget-Komponente soll

1. das Attribut navTitle rendern,
2. einen Link für den Wechsel zur übergeordneten Seite rendern sowie
3. Links auf die Unterseiten des parentPage-Objekts rendern.

Redakteure sollen nicht zwingend eine parentPage angeben müssen, sondern optional angeben können. Ist sie nicht definiert, wird diejenige Seite als parentPage verwendet, die das Widget enthält.

Da die Logik für den Link auf die „Eltern“-Seite etwas umfangreicher ist, haben wir sie in einer separaten Komponente namens ParentLink untergebracht. Damit diese Komponente auf Inhalte zugreifen kann, ist sie über Scrivito.connect mit Scrivito verbunden. Fügen Sie den folgenden Code zu der Datei „ChildNavigationWidgetComponent.js“ hinzu:

Die ParentLink-Komponente erhält das parentPage-Objekt des Widgets als ein Property. Sie rendert den Link nur dann, wenn weder das übergebene Objekt noch dessen „Eltern“-Objekt null ist. Diese Vorsichtsmaßnahme ist angeraten, weil Scrivito Inhalte asynchron lädt, wodurch die Objekte möglicherweise noch gar nicht zugreifbar sind, wenn die Komponente gerendert wird.

Die Komponente überprüft auch, ob das übergebene CMS-Objekt der aktuellen Seite entspricht. In diesem Fall verlinkt sie nicht die bereits angezeigte Seite, sondern die ihr übergeordnete. Der Link wird mit Scrivito.LinkTag generiert.

Die Links auf die „Kinder“ des „Eltern“-Objekts bilden die eigentliche Navigation und werden (wie oben gezeigt) mit der Komponente Scrivito.ChildListTag gerendert. Voreingestellt erzeugt Scrivito.ChildListTag für jeden Link ein <li>-Element. Über das renderChild-Property, dem eine eigene Rendering-Funktion übergeben werden kann, lässt sich dieses Verhalten jedoch anpassen. Wir machen von dieser Möglichkeit Gebrauch, um den einzelnen <li>-Elementen noch CSS-Klassennamen mitzugeben. Unsere Rendering-Funktion, die sich ebenfalls in der Datei “ChildNavigationWidgetComponent.js” befindet, sieht so aus:

Beim Rendern der Navigation wendet die Komponente des ChildNavigationWidgets die (noch nicht existierende) CSS-Klasse childNav auf das umgebende <div>-Element an.

Um die childNav-CSS-Klasse bereitzustellen, speichern Sie sie als Datei mit der Namensendung „.scss“ im Verzeichnis „src/assets/stylesheets“ in Ihrem Projekt und importieren Sie sie anschließend in der Datei „index.scss“ wie in Extending the Example App Styles beschrieben.

Mit der CSS-Klasse childNav lässt sich das Styling des Widgets mittels der hier exemplarisch aufgeführten Stile anpassen, die wir in der Datei „_childnav.scss“ abgelegt haben.

Nachdem die Datei gespeichert und importiert wurde, ist die Klasse sofort wirksam. Um die verlinkten Listenelemente noch ansprechender zu gestalten, können Sie die als Platzhalter dienende Klasse child in der renderChild-Funktion beispielsweise durch eine vordefinierte Icon-Klasse wie fa fa-caret-right ersetzen.

Auf dem folgenden Screenshot sehen Sie, was die neue CSS-Klasse childNav bewirkt. Denken Sie bitte daran, das Widget auf einer Seite zu platzieren, die Unterseiten hat (wie etwa die Homepage oder die Seite „Pages & Widgets“ in der Scrivito Example Application). Geben Sie bei Bedarf in den Widget-Eigenschaften eine geeignete Seite als Einstiegspunkt an, damit die Navigation Elemente enthält.

Fertig! Sie verfügen nun über ein Widget, mit dem Sie Navigationen für Unterseiten auf jeder beliebigen Seite platzieren können! Wie viele neue Seiten- und Widget-Typen hat auch dieser Typ natürlich Potenzial: Das Widget zeigt in der hier vorgestellten Form die Navigation unabhängig davon an, ob die parentPage Unterseiten hat oder nicht. Auch wäre es wünschenswert, dass Redakteure beispielsweise die horizontale Ausrichtung der Navigation auswählen können. Beides dürfte nicht schwer zu implementieren sein…