Neue Scrivito Widgets
Aktualisiert: vor 3 Stunden
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 CMSsind 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.
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.
Bisher entwickelte Widgets
Share This
Eyecatcher - Störer
Bootstrap 4 Cards - mit Card Deck und Card Group Option
Link Liste mit einem App Layout
Bootstrap 4 Media Object
Artikel Header - Headline plus Subtitle
Timeline
Tabbed Content
Tabbed Blocks
Swipeable Content
Up Counter
Time ago
Countdown
JW-Player
Teaser-Referenzen
Ranking
Twitter Timeline
Hubspot Widgets
Newsapi Widgets
Europeana Widgets
Eventbrite Widgets
Unsplash Widget