Suche
Tag 3

JSON Forms: Tutorial – Erweiterung des UI-Schemas

Jonas Helming, Maximilian Kögel

© 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:

jsonforms_blogseries_day2_form (1)

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:

jsonforms_blogseries_day3_form

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!

Verwandte Themen:

Geschrieben von
Jonas Helming
Jonas Helming
Dr. Jonas Helming ist Geschäftsführer der EclipseSource München GmbH sowie Consultant, Trainer und Software Engineer im Bereich Eclipse-Technologie. Seine Schwerpunkte liegen neben Java auf den Technologien Eclipse RCP, Eclipse-Modellierung und Eclipse 4. Weiterhin verfügt er über mehrjährige Erfahrung in der Etablierung und Anwendung von agilen Prozessen. Jonas ist aktives Mitglied der Eclipse-Community, leitet mit der EMF Client Plattform und dem EMFStore zwei bei der Eclipse Foundation gehostete Open-Source-Projekte und ist in einigen weiteren aktiv beteiligt. Als Berater und Trainer verfügt er über mehrjährige Erfahrung in der Vermittlung von Themen rund um Java und Eclipse sowie agilen Prozessen und hält einen Lehrauftrag der Technischen Universität München. Darüber hinaus ist er als Speaker regelmäßig auf Kernkonferenzen wie der JAX oder der EclipseCon. Kontakt: jhelming@eclipsesource.com
Maximilian Kögel
Maximilian Kögel
Dr. Maximilian Kögel ist Geschäftsführer der EclipseSource München GmbH und arbeitet als Senior Software Architect im Bereich Eclipse- und Web-Technologie. Neben seiner Fokussierung auf das Eclipse Modeling Framework und Eclipse RCP ist er auch mit der Entwicklung von Webapplikationen mit AngularJS, Web Components und JSON Schema vertraut. Ein Kernthema seiner Arbeit ist das Erstellen von Modellierungswerkzeugen basierend sowohl auf einem Eclipse- als auch einem Web Technologiestack. Er ist ein aktives Mitglied der Eclipse-Community, regelmäßiger Sprecher auf EclipseCons, Leiter und Committer bei mehreren Eclipse Projekten, u.a. EMFForms und EMF Core und nicht zuletzt Mitglied im Eclipse Architecture Council. Auch außerhalb des Eclipse Ökosystems ist er in Open-Source-Projekten aktiv und leitet z.B. das JSONForms-Projekt zur Entwicklung von Web-Applikationen. Als Berater und Trainer verfügt er über langjährige Erfahrung in der Anwendung und Vermittlung von Expertenwissen rund um Java, Eclipse und Web-Technologien sowie agilen Prozessen.
Kommentare

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht.