Wie auch in der Einführung zu Interface-Builder-Apps erwähnt, werden alle Widget-Typen mittels Dateien definiert, die im Repository unter „src/Widgets” liegen. Um zu zeigen, wie leicht sich Widgets erweitern lassen, fügen wir in dieser Anleitung zum Headline-Widget eine Option zur Auswahl der Hintergrundfarbe solcher Widgets hinzu.

Die HeadlineWidget-Modellklasse könnte folgendermaßen definiert sein:

Jede auf dem Interface Builder basierende App macht zum Zwecke des Stylings von Bootstrap Gebrauch. Wir beschränken uns hier auf die Farben, die von Bootstrap zur Verfügung gestellt werden, und bieten sie den Redakteuren als optionale Hintergrundfarben für Überschriften an.

In der obigen Definition der HeadlineWidget-Klasse ist zu sehen, dass es bereits zwei Attribute gibt, mit denen Redakteure einen von mehreren Werten auswählen können, level und style. Bei ihnen handelt es sich um Attribute vom Typ enum, mit denen man keinen oder einen einzelnen Wert auswählen kann, im Gegensatz zum multienum-Typ zur Auswahl mehrerer Werte.

Das neue Attribut hat den Namen backgroundColor. Fügen Sie es zur Liste der Attribute hinzu, wie hier direkt unterhalb von headline:

Wir haben von den oben erwähnten Bootstrap-CSS-Klassennamen (bg-primary usw.) das Präfix bg- entfernt, damit die obige Attributdefinition etwas kürzer wird und wir später noch zeigen können, wie man eine solche konstante Zeichenkette beim Rendern wieder hinzufügen kann.

Damit das neue Attribut in den Eigenschaften der Headline-Widgets auftaucht und genutzt werden kann, geben wir es im provideEditingConfig-Aufruf für die HeadlineWidget-Klasse an. Hier befindet sich die entsprechende Spezifikation gleich am Anfang der attributes-Liste:

Sie können Anzeigewerte für jedes Element eines enum-Aufzählungsattributs angeben, um sie benutzerfreundlicher zu machen. So bildet beispielsweise das style-Attribut seine Werte (values) „h1“ bis „h6“ auf „Heading *“-Titel ab:

Darüber hinaus können Sie Attribute in dem Moment initialisieren, in dem sie für ein Widget (oder eine Seite) angelegt werden. Hierfür gibt es das Schlüsselwort initialContent in der Funktion Scrivito.provideEditingConfig. Verwenden Sie es folgendermaßen, um den Wert des Attributs backgroundColor auf primary zu setzen, sobald ein neues Headline-Widget auf einer Seite platziert wird:

Öffnet man jetzt den Dialog mit den Eigenschaften eines Headline-Widgets, ist dort das neue Attribut aufgeführt und kann zur Auswahl einer Hintergrundfarbe verwendet werden.

Allerdings hat die Auswahl einer Farbe noch keine Wirkung, weil der Attributwert noch nicht als Style gerendert wird.

Seiten und die Widgets darauf werden von React-Komponenten gerendert, die durch einen Aufruf von provideComponent mit der jeweiligen Seiten- oder Widget-Klasse verbunden wurden. Beim HeadlineWidget (und vielen anderen Widgets) besteht die Hauptaufgabe der Komponente darin, die als Attributwerte hinterlegten CSS-Klassennamen zusammenzutragen und als className-Prop in einem Aufruf von Scrivito.ContentTag zu verwenden. Dieser Aufruf rendert dann den betreffenden Inhalt (aus einem anderen Attribut, hier headline).

Lassen Sie uns nun die Hintergrundfarbe, d.h. den Wert von backgroundColor zum classNames-Array hinzufügen. Dies ist nur erforderlich, wenn für die Überschrift tatsächlich eine Hintergrundfarbe ausgewählt wurde. In diesem Fall muss dann aber auch das oben entfallene Präfix bg- wiederhergestellt werden:

Nachdem Sie die obigen Code-Zeilen vor dem return-Statement eingefügt und die Datei gespeichert haben, wird die in den Eigenschaften ausgewählte Hintergrundfarbe sofort sichtbar.

Das war es auch schon! Sie haben ein Scrivito-Widget angepasst, indem Sie ein Attribut zu dessen Modellklasse hinzugefügt, die Konfiguration des Dialogs zur Bearbeitung der Widget-Eigenschaften erweitert sowie dafür gesorgt haben, dass der Attributwert gerendert wird!