ReactJS Programmierung

Entwicklung von Widgets mit Scrivito.

---

Mein erstes selbst entwickeltes Scrivito Widget. Unterhalb dieses Bereichs sehen Sie eine “Share This” Komponente. Die gleiche Komponente habe ich vor längerer Zeit mit Vue.js entwickelt. Da lag es nahe, dass ich diese Komponente, als Vorlage für mein erstes Scrivito Widget benutzt habe. Scrivito Widgets werden mit React entwickelt und der Unterschied zwischen Vue und React ist nicht so groß.

Scrivito Architektur Um ein Widget für Scrivito zu erstellen, braucht es drei React Dateien.

1. SocialLinksWidgetClass.js

2. SocialLinksWidgetEditing.js

3. SocialLinksWidgetComponent.js

Die Namensvergabe ist zwingend einzuhalten. Vorne steht immer der Name des Widgets, dann folgt “Widget“ und dann “Class“, “Editing" und “Component“. In der ersten Datei wird das Datenmodel des Widgets festgelegt. Daraus generiert Scrivito ein Formular zur Erfassung von Attributen. In meinem SocialLinks Widget wird eine URL und ein kurzer Text benötigt. Verglichen mit anderen CMS ist die Erstellung eines Formulars sehr einfach. Attribute können alles mögliche speichern, so z.B. auch Hintergrundfarben, Größen, Ausrichtungen von Elementen und was man sich sonst noch alles so vorstellen kann. In der SocialLinksWidgetEditing.js wird das Widget und seine Attribute detailiert beschrieben: Die letzte JS-Datei ist schließlich die React Komponente, welche das Widget für die Ausgabe im Frontend rendered. Da der Code etwas länger ist, möchte ich hier darauf verzichten ihn hier anzuzeigen. Im Grunde genommen kann hier in JSX auf die Daten der Attribute zugegriffen werden und jegliches HTML benutzt werden.

So werden in meiner Komponente die Links zu Twitter und Facebook generiert. Endbenutzer können dieses Widget nun überall nutzen und sehr einfach den Link und den Text, der geteilt werden soll, vergeben. Eine Verbesserung wäre noch, wenn die URL vom Widget automatisch generiert wird. Komplexere Widgets haben natürlich komplizierteren Code, als dieses kleine Beispiel. Aber zum erlernen der Scrivito Widget-Programmierung bieten sich einfache Widgets an. Bootstrap Cards Scrivito verfügt zwar schon über ein Card Widget, allerdings gefällt mir die Implementierung nicht so richtig. Es fehlt die Möglichkeit die Cards, als Deck oder als Group zu rendern. Das ist bei meinem Widget der Fall. Im Card Container Widget kann der Benutzer einfach Deck oder Group wählen. Alles weitere geschieht, beim Hinzufügen von Cards, automatisch.