JSON Forms: Tutorial – Schritt für Schritt zum Web UI

JSON Forms – Make it Happen!

Mit dem Framework JSON Forms lassen sich Web-UIs auf Basis von Formularen ganz leicht erstellen. Die UIs sind auf die Eingabe, Bearbeitung und Anzeige von Daten spezialisiert und werden in der Regel in andere Anwendungen eingebettet.

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.

MEHR ZUM THEMA

Dynamische Schnittstellenkommunikation mit JSON und REST

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 Artikelserie möchten wir das Framework anhand einer realen Beispiel-Anwendung namens „Make It Happen“ vorstellen. Wir werden Schritt für Schritt neue Funktionen zu dieser Anwendung hinzufügen, um zu demonstrieren, wie JSON Forms den Entwicklungsprozess vereinfacht. Im Sinne der Übersichtlichkeit sind die Entwicklungsschritte in Tage unterteilt; wir nehmen allerdings nicht an, dass es auch nur annähernd jeweils einen ganzen Arbeitstag dauert, die einzelnen Schritte umzusetzen.

Diese Artikelserie soll einen Überblick über alle Features des Frameworks geben und ihre jeweilige Arbeitsweise erklären. Eine praktische Anleitung, die die Implementierung der Features Schritt für Schritt beschreibt, gibt es in der Dokumentation auf der JSON Forms Homepage unter http://jsonforms.io.

Bevor wir nun anfangen, möchten wir an „Tag 0“ erst einmal einen allgemeinen Überblick geben.

Tag 0 – JSON Forms: Die Grundvoraussetzungen

Die Beispielanwendung, die wir implementieren wollen, ist ein einfacher Aufgaben-Tracker namens „Make it Happen“. Wir haben uns für dieses Beispiel entschieden, weil es einfach und leicht zu verstehen ist, gleichzeitig aber auch die Möglichkeit bietet, die Kernfunktionen von JSON Forms zu demonstrieren.

Darum haben wir die Anforderungen an unsere Beispiel-Anwendung hauptsächlich anhand ihrer Anschaulichkeit ausgewählt, weniger anhand realweltlichen Anwendungsfällen. In unserem Beispiel wollen wir genau eine Art von Eintrag erstellen, ansehen und bearbeiten: Aufgaben.

Aufgaben haben Attribute wie Name, Beschreibung, Fälligkeit und so weiter. Das UI, das wir dafür erstellen wollen, umfasst einen Überblick über alle Aufgaben sowie eine Detailansicht, die alle Informationen zu einer Aufgabe anzeigt. Übergreifende Fragestellungen wie die Authentifikation und Autorisierung lassen wir außen vor.

Stellen wir uns also einmal ein einfaches UI vor, das diese Anforderungen erfüllt, eine Liste aller Aufgaben anzeigt und, nachdem eine Aufgabe gewählt wurde, auf der rechten Seite die zugehörigen Details anzeigt, wie das folgende Modell demonstriert:

Das soll hinsichtlich der Anforderungen fürs Erste genügen. Auf die Details gehen wir iterativ ein, während wir die Implementierung des entsprechenden UI-Elements zeigen. Fangen wir also mit Tag 1 an und erstellen ein paar einfache Formulare!

Das JavaScript-Ökosystem: Orientierungshilfen

mit Nils Hartmann (EOS Technology Solutions)

Coole Web-Apps mit Spring Boot, Angular und TypeScript

mit Kai Tödter (Siemens AG)

Die Konferenz für Web APIs, API Design & Management

API Security – Best Practices

Thilo Frotscher (Freiberufler)

Web API Design jenseits von REST & Request/Response

Lars Röwekamp (open knowledge)

Tag 1: Einfache Formulare mit JSON Forms

Wir beginnen mit der Implementierung des beschriebenen UIs von unten nach oben. Als erstes Element nehmen wir uns die Detailansicht vor, die für die Anzeige von Informationen zu einer einzelnen Aufgabe da ist. In diesem Bereich werden Eingabefelder für alle Attribute des Eintrags (der Aufgabe) angezeigt.

Es sollten Eingabeoptionen gewählt werden,  die zum Datentyp passen, beispielsweise Text-Felder für String-Attribute, eine Drop-Down-Box für ein Enum oder eine Datumsauswahl für Daten. In der ersten Iteration fügen wir nur drei einfache Attribute hinzu, wie das folgende Modell zeigt.

Das Formular wird in einer späteren Iteration erweitert. Wir zeigen dann, wie JSON Forms mit einer Weiterentwicklung des Datenschemas zurechtkommt. Die Attribute für die erste Iteration sind:

• „Name“ (String) – obligatorisch
• „Description“ (String)
• „Done“ (Boolean).

Das name-Attribut ist obligatorisch. Also sollte es eine Validierungs-Nachricht geben, wenn der Nutzer hier nichts eingibt.

Selbst für so ein einfaches Formular müssten alle drei Steuerungselemente manuell entwickelt und an die Daten angebunden werden, inklusive zusätzlichen Features wie der Validierung von Eingaben. JSON Forms greift direkt auf ein Datenschema zu, das auf dem JSON Schema Standard beruht. Darum müssen wir nur beschreiben, aus welchen Attributen eine Aufgabe besteht.

Ein Datenschema zu definieren ist allerdings auch dann sehr nützlich, wenn man nicht mit JSON Forms arbeitet, da es beispielsweise zur Validierung von Daten verwendet werden kann.

Das folgende Datenschema (also das JSON Schema) definiert das Aufgaben-Objekt:

{
  "type": "object",
  "properties": {
    "name": {
      "type": "string"
    },
    "description": {
      "type": "string"
    },
    "done": {
      "type": "boolean"
    }
  },
  required: [“name”]
}

Mit dem gezeigten Schema als Input kann JSON Forms bereits ein voll funktionsfähiges UI auf Basis eines Formulars erstellen, inklusive Data Binding und Validierung. Wir müssen nur das folgende HTML-Tag in unsere Website einbinden:

 <jsonforms schema="taskSchema" data="taskData">
</jsonforms>

Die zwei Eigenschaften „schema“ und „data“ verweisen auf JavaScript-Variablen, die im Scope der AngularJS-Direktive definiert werden müssen. Die Variable „schema“ verweist auf das oben genannte Datenschema, die Variable „data“ verweist diesem Datenschema folgend auf ein JSON-Objekt. Das Objekt wird an das UI gebunden und demnach aktualisiert, sobald man mit der Bearbeitung des Formulars beginnt.

Das Ergebnis ist eine Website (wie unten im Screenshot zu sehen), die bereits ein voll funktionales formularbasiertes UI anzeigt.

Daten, die nun in das Formular eingegeben werden, sind bereits an das zugrundeliegende Datenobjekt gebunden. JSON Forms erstellt automatisch die richtigen Eingabeoptionen für jeden Datentyp. Für Aufzählungen würden die erlaubten Werte in einem Drop-Down-Menü angezeigt. Außerdem validiert das Formular automatisch die eingegebenen Daten.

Wir haben beispielsweise im Datenschema angegeben, dass der Name obligatorisch ist. Also wird uns JSON Forms einen Validierungsfehler anzeigen, wenn kein Wert für die Eigenschaft „name“ angegeben wurde.

Lesen Sie auch: „JSON Schema entwickelt sich zum de-facto Standard für die Definition von JSON-basierten Daten im Web“ – Interview mit Maximilian Kögel

Dieses Formular stellt bereits einen guten Ausgangspunkt dar. Es gibt allerdings offensichtlich einige weitere Anforderungen hinsichtlich der Anpassbarkeit. Zum Beispiel könnten wir die Reihenfolge der Eingabefelder, ihre Bezeichnung und das Layout, innerhalb dessen sie angezeigt werden, ändern wollen. Außerdem könnte das Beschreibungsfeld als mehrzeiliges Textfeld angezeigt werden. Das alles ist mit JSON Forms möglich und wird an Tag 2 der Artikelserie erklärt.

JSON Forms ausprobieren

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!