Neue Scrivito Widgets

Meine ersten Stateful React Components

In diesem Beitrag möchte ich neue Scrivito Widgets vorstellen, die ich entwickelt habe. Dazu gehören auch meine ersten Stateful React Components. Stateful Components fügen einem Widget Interaktivität hinzu. In diesem Fall wird über Tabs der Inhalt des Widgets ausgetauscht. Wie immer beim Scrivito CMS sind die Inhalte der Widgets kinderleicht zu pflegen. Technisch betrachtet sind die Widgets natürlich nichts Besonderes. Aber immerhin ist kein jQuery notwendig, sondern einfach nur React und das Scrivito SDK.

Das folgende Widget "Tabbed Content" ermöglicht es Inhalte zu kategorisieren. Die Tabs werden automatisch aus den Kategorien generiert.

Scrivito Widgets

Das Herzstück von Scrivito sind Widgets. Das sind spezielle ReactJS Komponenten, deren Inhalte und Eigenschaften sehr einfach im Browser editiert werden können. Aber nicht über ein vom Frontend getrenntes, nichtssagendes Textfeld oder einen sog. Wysiwyg-Editor, sondern direkt innerhalb der Komponente. Sie klicken auf ein Element und geben Text ein. Dabei sehen Sie immer genau, wie das Ergebnis aussieht. Kein Umständliches Wechseln mehr zwischen Front- und Backend. Und das Speichern geschieht immer automatisch im Hintergrund.

Stateless Widgets

Die meisten Widgets sind statischer Natur. Sie zeigen gespeicherte Inhalte in einem bestimmten Layout und Design an. Eigenschaften, wie Farben oder Textausrichtung lassen sich über das CMS ändern, aber bleiben statisch. Diese Widgets reagieren nicht auf Benutzerinteraktionen oder andere Einflüsse von außen, wie z.B. die Tageszeit.

Stateful Widgets

Wird ein Widget benötigt, das auf Benutzerinteraktionen oder äußere Umstände, wie z.B. die Uhrzeit, reagiert, müssen sog. Stateful ReactJS Komponenten programmiert werden. Diese lassen sich aber auch, wie die einfachen, statischen Widgets von Redakteuren pflegen. Es kommt halt Dynamik ins Spiel. In dieser Komponente sind es die Tabs, die den Zustand der Komponente ändern. Es wird anderer Inhalt angezeigt. Das Ereignis, das den Wechsel des Zustands auslöst, muss aber kein Klick auf ein Element sein. Der Inhalt oder eine Eigenschaft, wie eine Hintergrundfarbe, könnte auch zu einer konfigurierbaren Uhrzeit, geändert werden.

Natürlich können meine neuen Widgets beliebig mit vorhandenen Widgets kombiniert werden. So wie hier, das Grid Widget mit einem Bild und meinem Tabbed Content Widget.

Block 1

Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem. Nulla consequat massa quis enim.

Block 2

Donec pede justo, fringilla vel, aliquet nec, vulputate eget, arcu. In enim justo, rhoncus ut, imperdiet a, venenatis vitae, justo. Nullam dictum felis eu pede mollis pretium. Integer tincidunt. Cras dapibus. Vivamus elementum semper nisi. Aenean vulputate eleifend tellus.

Block 3

Aenean leo ligula, porttitor eu, consequat vitae, eleifend ac, enim. Aliquam lorem ante, dapibus in, viverra quis, feugiat a, tellus. Phasellus viverra nulla ut metus varius laoreet. Quisque rutrum. Aenean imperdiet.