Suche
Tag 5

JSON Forms: Tutorial – Wir gestalten das Layout

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 Tutorial-Reihe – Schitt für Schritt zum Nachbauen!

In dieser Artikelserie möchten wir das Framework JSON Forms anhand einer realen Beispiel-Anwendung namens „Make It Happen“ vorstellen. An Tag 1 und Tag 2 haben wir die allgemeinen Anforderungen beschrieben und bereits ein komplett funktionsfähiges Formular für die Task Entity erstellt. Am 3. Tag haben wir gezeigt, wie man die Formulare mit neuen Attributen und Steuerelementen erweitert. Am 4. Tag wurden Sichtbarkeitsregeln für Steuerelemente eingeführt, basierend auf den Daten, die User eingegeben haben.

Das Ergebnis der ersten vier Tage sieht wie folgt aus:

Während das Formular inklusive Data Binding, Validierung und sogar regelbasierter Validierung bereits voll funktionsfähig ist, ist das Layout definitiv noch in einem suboptimalen Zustand. Eigentlich sehen wir nur eine vertikal angeordnete Liste aller Steuerelemente. Deswegen möchten wir in diesem Artikel das Layout verfeinern und werden dafür die von JSON Forms bereitgestellten Layout-Elemente nutzen.

Bisher haben wir alle Bedienelemente in ein Root-Element des Typs VerticalLayout eingebettet. Dieser Typ von Layout arrangiert seine Children immer vertikal. Allerdings unterstützt JSON Forms auch andere Layout-Typen, beispielsweise HorizontalLayout. Natürlich können diese Layouts kombiniert werden, indem ein Layout-Element in ein anderes eingebettet wird. Um zum Beispiel ein Layout mit zwei Säulen zu erhalten, kann man das HorizontalLayout-Element nutzen, das zwei VerticalLayout-Elemente enthält.

In unseren gegenwärtigen Formularen können wir ein bisschen Platz in der Vertikalen sparen, indem wir das dueDate-Attribut in einen geteilten HorizontalLayout mit der rating-Property packen. Dasselbe gilt für recurrence und recurrence_interval.

Das daraus resultierende UI-Schema sieht wie folgt aus:

 

 
{
  "type": "VerticalLayout",
  "elements": [
    {
      "type": "Control",
      "label": false,
      "scope": {
        "$ref": "#/properties/done"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/name"
      }
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": {
            "$ref": "#/properties/due_date"
          }
        },
        {
          "type": "Control",
          "scope": {
            "$ref": "#/properties/rating"
          }
        }
      ]
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/description"
      },
      "options": {
          "multi":true
      }
    },
    {
      "type": "HorizontalLayout",
      "elements": [
        {
          "type": "Control",
          "scope": {
            "$ref": "#/properties/recurrence"
          }
        },
        {
          "type": "Control",
          "scope": {
            "$ref": "#/properties/recurrence_interval"
          },
          "rule": {
              "effect": "HIDE",
              "condition": {
                  "scope": {
                      "$ref": "#/properties/recurrence"
                  },
                  "expectedValue": "Never"
              }
          }
        }
      ]
    }
  ]
}

Wir können folgendes Layout erzeugen, indem einfach die Dinge im UI-Schema ein wenig verschoben werden:

Wie man sich vorstellen kann, ist es einfach, fortgeschrittenere Layouts zu erzeugen, indem Layout-Elemente miteinander kombiniert werden.

Man muss dabei beachten, dass EMF Forms mehr Layout-Typen als nur horizontal und vertikal unterstützt. Beispielsweise könnte man das Element Categorization nutzen, um Steuerelemente in verschiedene Unterkategorien zu unterteilen. Folgende Abbildung zeigt ein gerendertes Categorization-Element, bei dem das Attribut einer Task in zwei Tabs gesplittet wird. Dabei muss beachtet werden, dass das horizontale Layout, welches weiter oben beschrieben wurde, jetzt in eine Categorization genestet wird.

 

 

Das UI-Schema für dieses Layout sieht wie folgt aus:

{
  "type": "Categorization",
  "elements": [
    {
      "type": "Category",
      "label": "Main",
      "elements": [
        {
          "type": "Control",
          "label": false,
          "scope": {
            "$ref": "#/properties/done"
          }
        },
        {
          "type": "Control",
          "scope": {
            "$ref": "#/properties/name"
          }
        },
        {
          "type": "Control",
          "scope": {
            "$ref": "#/properties/description"
          },
          "options": {
              "multi":true
          }
        }
      ]
    },
    {
      "type": "Category",
      "label": "Additional",
      "elements": [
        {
          "type": "HorizontalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": {
                "$ref": "#/properties/due_date"
              }
            },
            {
              "type": "Control",
              "scope": {
                "$ref": "#/properties/rating"
              }
            }
          ]
        },
        {
          "type": "HorizontalLayout",
          "elements": [
            {
              "type": "Control",
              "scope": {
                "$ref": "#/properties/recurrence"
              }
            },
            {
              "type": "Control",
              "scope": {
                "$ref": "#/properties/recurrence_interval"
              },
              "rule": {
                  "effect": "HIDE",
                  "condition": {
                      "scope": {
                          "$ref": "#/properties/recurrence"
                      },
                      "expectedValue": "Never"
                  }
              }
            }
          ]
        }
      ]
    }
  ]
}

Auf dieser Seite kann man einen Überblick für die verfügbaren Layout-Elemente in JSON Forms erhalten.

Wie einem vielleicht aufgefallen ist, sind die Layout-Typen von JSON Forms ein wenig anders als das, was man von nativem HTML oder einem Widget-Toolkit her kennt. Beispielsweise gibt es kein Element, das tabbed layout heißt, stattdessen heißt es Categorization. Der Grund dafür ist, dass das UI-Schema von JSON Forms darauf fokussiert ist, anstatt des aktuellen Renderings die Struktur des Layouts zu beschreiben. Die konkrete Visualisierung ist in der Verantwortung der Render-Komponente. Das ist analog zu der Kombination von HTML und CSS und ermöglicht Flexibilität beim Rendern. Beispielsweise spezifiziert das Categorization-Element, das wir weiter oben beschrieben haben, lediglich, dass eine Form in verschiedene Kategorien gesplittet wird. Der vorinstallierte Renderer wird diese Informationen in Tabs übersetzen. Man kann allerdings auch einen alternativen Renderer implementieren, welcher verschiedene Kategorien jeweils unterschiedlich anzeigt, beispielsweise wie folgt:

 

 

Wenn wir uns schon über alternative Renderer unterhalten: Das ist ein zentrales Feature von JSON Forms! Bisher haben wir nur die bereitgestellten Renderer für Steuerelemente wie auch für Layouts benutzt. Im nächsten Post dieser Serie werden wir erklären, wie man benutzerdefinierte Renderer implementiert und zum Laufen bringt, um die Art und Weise anzupassen, wie ein Formular gerendert wird.

Also bleibt am Ball!

 

JSON Forms
Mit dem Framework JSON Forms lassen sich ganz leicht 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. 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 genutzt 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. Wer Interesse daran hat, JSON Forms auszuprobieren, sollte sich das Getting Started Tutorial anschauen. Dort wird erklärt, wie man JSON Forms in ein Projekt integriert und selbst die ersten Schritte damit machen kann.
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.