JSON Forms: Tutorial – Erweiterung des UI-Schemas

© Shutterstock / vasabii
Mit dem Framework JSON Forms lassen sich Web-UIs auf Basis von Formularen erstellen. Die UIs sind auf die Eingabe, Bearbeitung und Anzeige von Daten spezialisiert und werden in der Regel in andere Anwendungen eingebettet. In dieser Tutorial-Reihe stellen wir das Framework anhand einer realen Beispielanwendung vor. Heute wollen wir das bislang erstellte UI Schema mit zusätzlicher Funktionalität anreichern.
JSON Forms
Durch die Verwendung von JSON Forms ist es nicht mehr notwendig, HTML-Templates und Javascript für das manuelle Data Binding zu schreiben, um personalisierbare Formulare zu erzeugen. Dafür werden die Möglichkeiten von JSON und JSON Schema eingesetzt und mit einem einfachen, deklarativen Weg zur Beschreibung von Formularen ergänzt. Formulare werden dann innerhalb eines UI Frameworks gerendert, derzeit basierend auf AngularJS. Die JSON Forms Homepage stellt einen guten Ausgangspunkt für alle dar, die mehr über JSON Forms wissen wollen.
In dieser Blog-Serie möchten wir das Framework am Beispiel einer realweltlichen Applikation, einem Task-Tracker namens „Make It happen“ vorstellen. An Tag 1 haben wir unser erstes Formular definiert, am Tag 2 haben wir das UI-Schema eingeführt und an unsere Beispielanwendung angepasst.
Make It happen – Tag 3: Erweiterung des UI-Schemas
Tag 2 resultierte in einem funktionsfähigen Formular, das so aussah wie dieses:
Das Ziel der dritten Iteration des Beispiels „Make It Happen“ ist es, das Datenschema mit zusätzlichen Attributen zu versehen und das UI-Schema entsprechend zu aktualisieren.
Bisher hat das JSON-Schema unserer Dateneinheit drei Attribute definiert:
- „Name“ (String) – obligatorisch
- „Description“ (mehrzeiliger String)
- „Done“ (Boolean)
In unserer dritten Iteration fügen wir nun zwei zusätzliche Attribute zur Task Entity hinzu. Diese Attribute sind:
- „Due Date“ (Date)
- „Rating“ (Integer)
Da JSON Forms die Nutzung des JSON Schemas als Grundlage für alle Formulare erleichtert, beginnen wir mit der Erweiterung des Datenschemas mit den neuen Attributen. Das folgende Listing zeigt das komplette Datenschema – nur Due_Date und Rating müssen noch hinzugefügt werden:
{ "type": "object", "properties": { "name": { "type": "string" }, "description": { "type": "string" }, "done": { "type": "boolean" }, "due_date": { "type": "string", "format": "date" }, "rating": { "type": "integer", "maximum": 5 } }, "required": ["name"] }
Basierend auf dem erweiterten Datenschema müssen wir auch das UI-Schema um unsere neuen Eigenschaften erweitern, damit diese dem gerenderten Formular hinzugefügt werden:
{ "type": "VerticalLayout", "elements": [ { "type": "Control", "scope": { "$ref": "#/properties/name" } }, { "type": "Control", "label": false, "scope": { "$ref": "#/properties/done" } }, { "type": "Control", "scope": { "$ref": "#/properties/description" }, "options": { "multi":true } }, { "type": "Control", "scope": { "$ref": "#/properties/due_date" } }, { "type": "Control", "scope": { "$ref": "#/properties/rating" } } ] }
Auf diesen zwei Schemata aufbauend, wird der JSON Form Renderer automatisch das folgende Formular generieren:
Beachten Sie, dass JSON Forms automatisch die passenden Widgets für die neuen Attribute erstellt: Eine Datumsauswahl für das „Due Date“ und ein Eingabefeld für das „Rating“. Für das Rating wäre es allerdings schön, eine besondere Kontrolle über die Eingabe zu haben. Mit JSON Forms ist das kein Problem, und es wird später auch in der Blog-Serie beschrieben. Beachten sie bitte zusätzlich auch, dass die Steuerelemente automatisch an die zugrundeliegenden Daten gebunden sind und somit Default-Funktionen sowie Validierung zur Verfügung stellen.
Ein weiteres, interessantes Merkmal, das oft in Formularen benötigt wird, ist, die Sichtbarkeit bestimmter Steuerelemente anhand der aktuell eingegebenen Daten zu kontrollieren. Diese Anforderung wird von JSON Forms ebenfalls unterstützt, und wir werden diese regelbasierte Sichtbarkeit am Tag 4 unserer Blog-Serie adressieren.
Wer nun Interesse daran hat, JSON Forms auszuprobieren, sollte das Getting Started Tutorial lesen. Dort wird erklärt, wie man JSON Forms in ein Projekt integriert und selbst die ersten Schritte damit macht.
Wir sehen uns dann zum nächsten Entwicklungstag wieder!
Hinterlasse einen Kommentar