Suche
Tag 4

JSON Forms: Tutorial – Wir richten Sichtbarkeitsregeln ein

Maximilian Kögel, Jonas Helming

© Shutterstock / Heywide

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 das Formular mit neuen Steuerelementen und Attributen erweitern kann.

JSON Forms: Tutorial – Tag 4

Das Ergebnis der ersten drei Tage sieht momentan wie folgt aus:

jsonforms_blogseries_day3_form

An Tag 4 fügen wir zwei weitere Attribute zur Task Entity hinzu, was uns erlaubt, wiederholte Tasks aufzusetzen. Für diese neuen Attribute, konfigurieren wir deren Sichtbarkeit im Formular, basierend auf dem gegenwärtigen Input. Lasst uns zunächst mit den Attributen anfangen:

  • „Recurrence“ (Enum) – kann die Werte „Never“, „Daily“, „Weekly“ oder „Monthly“ annehmen.
  • „Recurrence Interval“ (Integer) – beschreibt zusammen mit „Recurrence“, wie oft eine Aufgabe wiederholt wird, z.B. alle zwei Tage oder alle drei Wochen.

Wie zuvor fügen wir einfach die beiden neuen Attribute zu unserem Datenschema hinzu und leiten das erweiterte UI-Schema automatisch von dort ab. Das folgende Snippet zeigt das Datenschema:

{
    "type": "object",
    "properties": {
      "name": {
        "type": "string"
      },
      "description": {
        "type": "string"
      },
      "done": {
        "type": "boolean"
      },
      "due_date": {
        "type": "string",
        "format": "date"
      },
      "rating": {
        "type": "integer",
        "maximum": 5
      },
      "recurrence": {
          "type": "string",
          "enum":["Never","Daily","Weekly","Monthly"]
      },
      "recurrence_interval":{
          "type": "integer"
      }
    },
    "required": ["name"]
}

Das wird automatisch die beiden neuen Attribute zu unserer Form hinzufügen:

jsonforms_blogseries_day4_form1
Werfen wir jetzt einen genauen Blick auf die beiden neuen Attributen, dann zeigt sich eine Inkonsistenz. Wenn die „Recurrence“ auf „Never“ gesetzt wird, ergibt es keinen Sinn, ein „Recurrence Interval“ einzufügen. Deswegen werden wir das „Recurrence Interval“ in unserem Fall verstecken. JSON Forms unterstützt diesen Anwendungsfall, indem es die sogenannten „Visibility Rules“ nutzt. Diese Regeln können zu einem beliebigen Element hinzugefügt werden und definieren, wann ein Element sichtbar sein soll und wann nicht.

In unserem besonderen Fall werden wir die Sichtbarkeits-Regel direkt zu dem Steuerelement hinzufügen, welches das „Recurrence Interval“ anzeigt. Wie man anhand des folgenden Snippets ganz am Ende sehen kann, zeigt es direkt auf die „Recurrence“ und definiert, bei welchen „Recurrence“-Wert die Steuerelemente versteckt werden sollen:

{
  "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"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/recurrence"
      }
    },
    {
      "type": "Control",
      "scope": {
        "$ref": "#/properties/recurrence_interval"
      },
      "rule": {
          "effect": "HIDE",
          "condition": {
              "scope": {
                  "$ref": "#/properties/recurrence"
              },
              "expectedValue": "Never"
          }
      }
    }
  ]
}

Ohne dass weitere Programmzeilen notwendig sind, wird JSON Forms das neue Verhalten zu unserer Form hinzufügen. Das bedeutet, dass das „Recurrence Interval“ nicht länger sichtbar ist, wenn man die „Recurrence“ auf „Never“ setzt.

jsonforms_blogseries_day4_form2

Das hier ist der untere Teil, es wurde ein anderer Recurrence-Wert ausgewählt:

jsonforms_blogseries_day4_form3

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.