Mit Scrivito können Sie die Bearbeitung von Seiten- und Widget-Eigenschaften um Funktionalität ergänzen, die Sie selber bereitstellen. Die eingebauten Tools, mit denen Texte, Zahlen, Bilder usw. bearbeitet werden können, erfüllen zwar auch gehobene Ansprüche, jedoch sind auch Anwendungsfälle denkbar, in denen Spezialfunktionalität für die Bearbeitung von Inhalten wünschenswert oder erforderlich ist. In solchen Situationen trifft es sich gut, dass die Bedienschnittstelle von Scrivito erweiterbar ist. So enthält beispielsweise die Example App als Scrivito-Erweiterung ein schickes Icon-Widget mit einem leicht zu bedienenden Auswahlmechanismus.

In diesem Tutorial entwickeln wir eine Instagram-Stil-Auswahl als Erweiterung für das ImageWidget der Example App. Damit lässt sich ein Bild in einem ImageWidget mit einem von zahlreichen Instagram-„Filtern“ versehen, um interessante optische Farbeffekte zu erzielen.

Bei Scrivito kann man einen Benutzer eine von mehreren Optionen mittels eines Attributs vom Typ enum wählen lassen. Zwar verfügt Scrivito über ein Bearbeitungselement für enum-Werte, jedoch wird der Eigenschaften-Dialog mit einer zunehmenden Anzahl von Optionen schnell unübersichtlich, so dass es naheliegend ist, dafür eine Erweiterung zu implementieren. Darüber hinaus würden wir gern eine Vorschau des Bildes mit dem anzuwendenden Stil anzeigen.

Zu Beginn benötigen wir die Stile, die bei Bildern auswählbar sein sollen. Sie stammen von Yan Zhu, und Sie können die CSS-Datei direkt bei GitHub herunterladen.

Speichern Sie die CSS-Datei im Verzeichnis „src/assets/stylesheets“ Ihrer App. Öffnen Sie anschließend die Datei „index.scss“ im selben Verzeichnis und fügen Sie die CSS-Datei zu den „imports“ hinzu:

Das war es schon! Die Stile können nun verwendet werden.

Um den Namen des ausgewählten Instagram-„Filters“ in Image-Widget-Instanzen speichern zu können, benötigen wir ein Attribut. Öffnen Sie also bitte „src/Widgets/ImageWidget/ImageWidgetClass.js“ und fügen Sie ein Attribut vom Typ enum hinzu. Wir haben es hier instagramStyle genannt und mit den CSS-Klassennamen aus dem Repository belegt:

Der Attributtyp enum stellt sicher, dass in der noch zu schreibenden Komponente nur ein einziger Wert ausgewählt werden kann.

Die Eigenschaften eines Widgets (oder einer Seite) können mit einem Aufruf von Scrivito.provideEditingConfig in der entsprechenden Datei „*EditingConfig.js“ konfiguriert werden. Lassen Sie uns also die noch nicht existierende Komponente für die Instagram-Stil-Auswahl in die Eigenschaften von Image-Widgets aufnehmen: Fügen Sie ein propertiesGroups-Array mit einem einzelnen Element auf oberster Ebene der Konfiguration ein, so wie hier (unterhalb von properties) gezeigt:

Jedes vom propertiesGroups-Callback zurückgegebene Element fügt einen Reiter zum Eigenschaften-Dialog hinzu. Neben den Schlüsselwörtern title und key können Sie die zu verwendende Komponente (component) oder die auf dem Reiter bearbeitbaren Attribute (properties) angeben.

Analog zum obigen instagramStyle-Attribut haben wir unsere Komponente InstagramStyleTab genannt. Wenn man eine component für einen Reiter angibt, muss sie sich um sämtliche Bearbeitungsfunktionen darauf kümmern, wohingegen properties von Scrivito gehandhabt werden. (Wenn also ein Widget oder eine Seite mit einer Vielzahl von Attributen ausgestattet ist, können diese auf mehrere Reiter aufgeteilt werden, anstatt den Reiter „Allgemein“ mittels properties auf oberster Ebene zu überfrachten.)

Bei der Example App befinden sich die Erweiterungen der Bedienschnittstelle im Verzeichnis „src/Components/ScrivitoExtensions“, wo wir auch unsere Komponente für die Instagram-Stil-Auswahl abgelegt haben:

Die Liste der Filternamen befindet sich direkt in der Komponente, jedoch könnten Sie sie auch importieren, um den Code übersichtlich zu halten. Die render-Methode iteriert diese Liste, um daraus option-Elemente innerhalb eines select-Elements zu erzeugen. Jedes option-Tag erhält einen value für die jeweilige wählbare Option, und das select-Tag hat ein onChange-Attribut mit dem bei der Auswahl aufzurufenden Event-Handler.

Der Event-Handler setInstagramStyle aktualisiert das instagramStyle-Attribut des Widgets. Er konvertiert die leere Zeichenkette, die für „Nichts“ steht, zu null, dem Äquivalent für „nichts ausgewählt“ bei enum-Attributen. Im select-Tag wird der aktuelle Wert über die umgekehrte Zuweisung gesetzt, d.h. null wird zur leeren Zeichenkette.

Beachten Sie bitte, dass die Komponente keinen state benötigt, da der ausgewählte Wert direkt in das Widget geschrieben wird, wodurch Scrivito die Widget-Instanz auf der Seite sofort aktualisiert.

Nachdem das select-Element erzeugt wurde, zeigt die render-Methode das Image-Widget unter Verwendung des ausgewählten Stils an, wodurch der Benutzer das Ergebnis seiner Auswahl unmittelbar sehen kann.

Für das Styling des Reiters haben wir die CSS-Klassen des „Social cards“-Reiters der Example App verwendet.

Anstatt die Stile mit einem select-Element anzubieten und den ausgewählten Stil auf ein Vorschaubild anzuwenden, könnten Sie für jeden Filter ein klickbares Miniaturbild rendern, damit der Benutzer einen Eindruck von der ganzen Palette der verfügbaren Stile gewinnen kann.

In der obigen Komponente wird Scrivito.ImageTag verwendet, um die Vorschau des Bildes im Widget zu rendern. Im Bearbeitungsmodus wird das Bild dadurch im Content Browser auswählbar. Wenn Sie dies nicht möchten, können Sie stattdessen ein gewöhnliches <img>-Element verwenden: