Skip to content

Generierung von UI und Requests anhand eines JSON Schema

2017 Dezember 3

In diesem Artikel möchte ich veranschaulichen, wie anhand eines JSON Schema eine UI dynamisch generiert werden kann. Diese UI soll dann bei der Zusammenstellung eines Modells dienen, welches wiederum als Basis für die Erstellung eines Request-Objekts herangezogen wird. Damit lässt sich eine dynamische Oberfläche für eine REST-Schnittstelle erstellen, welches mind. JSON unterstützt. Dieser Anwendungsfall ist dann hilfreich, wenn die REST-Schnittstelle eine komplexe Domain-Struktur besitzt und die Mittel von swagger-ui nicht ausreichen.

Einführung

Mittels REST lassen sich sehr schnell und auch komplexe Schnittstellen erstellen. Wenn nicht jedesmal die Schnittstellen-Beschreibung, falls eine aktuelle existiert, konsultiert werden soll, wie die Request-Objekte genau auszusehen haben, ist ein Werkzeug für die Generierung solcher Request-Objekte hilfreich. Swagger unterstützt hier, indem anhand der REST Definition eine einfache UI generiert wird. Dies ist bei komplexen Domain-Strukturen mit mehreren Ebenen, jedoch nicht ausreichend.

Ein hilfreiches Werkzeug wäre, wenn anhand der Schnittstellen-Definition ein Editor generiert werden kann, der bei der Erstellung der Request-Objekte hilfreich ist. Dabei sollte an der Schnittstellen-Definition so wenig wie möglich manuell angepasst werden müssen. Dies reduziert den (manuellen) Aufwand und vereinfacht die Integration in automatischen Prozesse/Pipelines. Die Verwendung eines JSON Schema ist hier sinnvoll, da hier auch Informationen bzgl. Typ und Validierung bereitgestellt werden. Diese kann solch ein Editor beachten um die Eingabe entsprechend einzuschränken.

Für dieses Werkzeug wird folgende Lösungsvariante ausgewählt:

  • Aus den JAXB Klassen der REST-Schnittstellen wird zusätzlich ein JSON Schema generiert
  • dieses JSON Schema wird als Basis verwendet, um eine UI zu generieren
  • Anhand der UI könnnen die Request-Objekte erstellt werden
  • die generierten Request-Objekte werden gegen die REST-Schnittstelle angewendet

Hierfür werden folgende Tools verwendet

  • Jackson: für die Generierung des JSON Schema
  • angular-schema-form und json-editor für die Generierung der UI aus dem JSON Schema
  • Ace für einen schöneren Editor.

Die zwei Editoren haben sich als die stabilsten in den Tests erwiesen und besitzen ein paar unterschiedliche Features auf die später eingegangen wird.

Das resultierende Projekte SchemaUI ist in GitHub zu finden.

Integration

Backend

Als Basis wird ein JSON Schema benötigt. Dieses soll aus den JAXB Klassen generiert werden. Jackson bietet hierfür entsprechende Funktionalitäten an.

JSON Schema erlaubt die Referenzierung von Typen, damit kommen die meisten UI-Generatoren nicht zu recht, bzw. erwarten diese in einem bestimmten Format. Dies kann man umgehen, in dem keine Referenzierung bei der Generierung des Schemas angewendet wird, dafür ist der VisitorContextWithoutSchemaInlining der dafür sorgt, dass kein Typ als schon bekannt  identifiziert wird.

Die zusätzliche (fachliche) Anpassung ist, dass in dem generierten Schema nur das Datums-Format ohne Zeitangaben benötigt wird (DateFormatSerializer). Dadurch wird später in der UI auch nur ein Kalender ohne Zeitangaben angeboten.

Um die Ermittlung des JSON Schema später zu vereinfachen wird, analog SOAP/WSDL, das Schema bei der Anfrage mit ?json zurückgeliefert.

 

Schema

Für das Beispiel wird eine Domain erstellt, welches unterschiedliche Typen und Ebenen besitzt. Das resultierende JSON Schema sieht beispielhaft wie folgt:

 

 

 

angular-schema-form

angular-schema-form bietet ein Werkzeug an, welches anhand eines JSON Schema dynamsich die UI generiert. Dabei kann zu einem JSON Schema noch eine Form-Definition bereitgestellt werden. Damit lässt sich direkt auf die Generierung Einfluss nehmen, um z.B. Typen zu ändern, Beziehung zwischen Elementen zu erstellen (für Details siehe deren Wiki). Die Eingaben in der UI werden dann in einem Modell gehalten.

In dem Code-Beispiel sind die wichtigsten Fragmente aufgeführt.

  • 4-6: Hier wird eine Liste angeboten, damit zwischen unterschiedlichen Schnittstellen gewechselt werden kann. Details später in Zeile 25f und 60ff.
  • 10: Dieses Form wird von angular-schema-form benötigt, mit der Beziehung zu den unterschiedlichen Angular-Modellen für Form, Schema und Model.
  • 13-20: Unterschiedliche Editoren, welche die einzelnen Modelle anzeigen. Eine Änderung im Schema-Editor hat sofortige Auswirkung auf die UI und wird neu generiert.
  • 25-28: Eine Datenstruktur für die unterschiedlichen Schnittstellen, URL zum Schema und URL zum REST-Endpunkt.
  • 60-75: Sobald die Liste der Schnittstellen verändert wird, wird das JSON Schema angefragt und die internen Modelle damit aktualisiert.
  • 115ff: Hier wird der erstellte Request abgeschickt

angular-schema-form benötigt viele externe Bibliotheken, so dass die Lösung nicht mehr leichtgewichtig ist. Die Integration und Handhabung funktioniert jedoch sehr gut, so dass keine manuellen Anpassung an der UI oder Api durchgeführt werden muss.

SchemaUI: angular-schema-form

 

json-editor

json-editor unterstützt den selben Anwendungsfall und erwartet auch ein JSON Schema.

Die grobe Struktur ist Analog geblieben. Nur die json-editor relevanten Anpassungen werden hier aufgeführt:

  • 10: Hier wird json-editor seine UI (Editor genannt) integrieren.
  • 71: Bei einer Aktualisierung des Schema muss json-editor explizit neu initiiert werden.
  • 144-163: Das initiieren des Editors. Dabei muss AngularJS explizit signalisiert werden, das sich das Modell geändert hat, damit die UI-Komponente sich auch aktualisiert.
  • 171ff: Diese Zeilen werden immer benötigt, da hier json-editor konfiguriert und initialisiert wird.

json-editor ist in der Handhabung leichter und kommt mit einem sehr kleinen Footprint. Ein Feature, wovon json-editor sich von angular-schema-form unterscheidet, ist dass Änderungen im Modell auch Auswirkung auf die generierte UI haben. Somit lässt sich der Weg zurück – Request zur UI – realisieren.

Fazit

In dem Artikel wurde aufgezeigt, wie sich eine dynamische UI anhand eines JSON Schema erstellen lässt. Anpassungen an die REST Schnittstelle oder gar an dem Schema direkt wurden nicht durchgeführt. Die erstellten Request-Objekte konnten erfolgreich von den REST Schnittstellen verarbeitet werden.

Mit diesen Werkzeugen lassen sich handliche Oberflächen bauen, die auf neue Anforderungen und Schnittstellen-Änderungen automatisch sich anpassen.

Das Projekt ist bei GitHub zu finden: SchemaUI.

 

 

 

 

 

Share it!
  •  
  •  
  •  
  •  
  •  
  •  
No comments yet

Leave a Reply

Note: You can use basic XHTML in your comments. Your email address will never be published.

Subscribe to this comment feed via RSS