Suche
Tag 1: "Make it Happen" mit den ersten Schritten

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

Maximilian Kögel, Jonas Helming

© Shutterstock.com / ScandinavianStock

Mit dem Projekt JSON Forms lassen sich im Handumdrehen elegante formularbasierte Web-UIs erstellen. Wie das geht, erklären die Projektgründer Jonas Helming und Maximilian Kögel in dieser neuen Tutorial-Reihe – Schitt für Schritt zum selber Nachbauen!

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.

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:

JSON Forms

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!

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.

JSON Forms

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.

 

JSON Forms: Beispiel UI

 

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!

Verwandte Themen:

Geschrieben von
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.
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
Kommentare

Schreibe einen Kommentar

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