Suche
"Make it Happen" mit den ersten Schritten

JSON Forms: Tutorial – Das UI-Schema

Jonas Helming, Maximilian Kögel

© Shutterstock / REDPIXE

Mit JSON Forms sind einfach und schnell elegante formularbasierte Web-UIs erstellt. Projektgründer Jonas Helming und Maximilian Kögel stellen im zweiten Teil der Tutorial-Reihe vor, wie man gerenderte Formulare anpassen kann.

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. Formulare werden dann innerhalb eines UI Frameworks gerendert, derzeit basierend auf Angular. Die JSON Forms Homepage ist ein gute Ausgangspunkt für alle, die mehr über JSON Forms wissen wollen.

JSON Forms: Die Tutorial-Serie

In dieser Blog-Serie möchten wir das Framework am Beispiel einer realen Applikation, einem Task-Tracker namens „Make It Happen“ vorstellen. Im Piloten der Blog-Serie haben wir an Tag 0 die Gesamtanforderungen beschrieben. Am ersten Tag haben wir die erste Iteration abgeschlossen, die als Ergebnis ein einfaches Formular der Task-Entity erzeugte. Das Ergebnis von Tag 1 war ein voll funktionsfähiges Formular, das wie folgt aussah:

day1_form

An dem heutigen zweiten Tag werden wir zeigen, wie das gerenderte Formular angepasst werden kann, d. h. wie Steuerelemente und Layout von erstellten Formularen zugänglich gemacht werden können.

Bisher haben wir noch nichts für unser Formular spezifiziert, sondern lediglich das Datenschema genutzt, wodurch JSON Forms daraus ein Formular generieren konnte. Allerdings möchten Sie diese Formulare vermutlich früher oder später anpassen. Als sehr einfaches Beispiel könnten wir die Anordnung der angezeigten Attribute spezifizieren oder die Labels der Steuerelemente ändern. Darüber hinaus würden wir die Description-Property gerne als mehrzeiliges Textfeld anzeigen lassen. Da diese Art von UI-Spezifikationen konzeptionell nicht im zugrunde liegenden Datenschema enthalten sind, definiert JSON Forms ein zweites Schema: das UI-Schema. Das UI-Schema konzentriert sich ausschließlich auf UI-Bereiche: Es beschreibt welche Eigenschaften der Datenschemata als Steuerelemente angezeigt werden, wie sie aussehen und das zugehörige Layout. Wenn Sie ein UI-Schema definieren, wird es von JSON Forms verarbeitet, um eine angepasste Version des ursprünglichen Formulars zu erstellen. Das UI-Schema referenziert dabei das zugrunde liegende Datenschema, um festzustellen welche Eigenschaften im User Interface angezeigt werden sollen. Das folgende Diagramm zeigt ein einfaches UI-Schema, das spezifiziert dass name als Steuerelement des UI angezeigt werden soll:

jsonforms_blogseries_uischema

Das folgende UI-Schema spezifiziert das oben formulierte Formular auf der Grundlage des Datenschemas:

{
  "type": "Control",
  "scope": {
    "$ref": "#/properties/name"
  }
}

Wie wir am ersten Tag gesehen haben, können solche einfachen UI-Schemata automatisch aus dem Datenschema abgeleitet werden, ohne dass ein bestimmtes UI-Schema dafür angegeben werden müsste. Aber jetzt wollen wir das default-generierte Formular ändern. Zuerst soll sich dabei die Reihenfolge der Attribute ändern:

  1. Name
  2. Done
  3. Description

Danach wollen wir das Label von done ausblenden, da die Checkbox selbsterklärend ist, und schlussendlich Description als mehrzeiliges Textfeld anzeigen. All diese Dinge können einfach im UI-Schema durchgeführt werden. Im Folgenden findet sich das UI-Schema und das resultierende Formular mit allen zuvor genannten UI-Anpassungen.

{
  "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
      }
    }
  ]
}

jsonforms_blogseries_day2_form

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. Wer diese Artikelserie verfolgen möchte, kann uns auf Twitter folgen. Dort informieren wir über alle neuen Artikel zu JSON Forms.

Wir sehen uns dann zum nächsten Entwicklungstag wieder!

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.