Einführung in JSONForms

1. Übersicht

Im ersten Artikel dieser Reihe haben wir das Konzept des JSON-Schemas und dessen Verwendung zur Validierung des Formats und der Struktur eines JSON-Objekts vorgestellt .

In diesem Artikel erfahren Sie, wie Sie formularbasierte Web-Benutzeroberflächen erstellen, indem Sie die Funktionen von JSON und JSON Schema nutzen.

Um unser Ziel zu erreichen, verwenden wir ein Framework namens JSON Forms . Es ist nicht mehr erforderlich, HTML-Vorlagen und Javascript für die Datenbindung von Hand zu schreiben, um anpassbare Formulare zu erstellen.

Formulare werden dann mit einem UI-Framework gerendert, das derzeit auf AngularJS basiert.

2. Komponenten eines JSON-Formulars

Um unser Formular zu erstellen, müssen wir zwei Hauptkomponenten definieren.

Die erste Komponente ist das Datenschema, das die zugrunde liegenden Daten definiert, die in der Benutzeroberfläche angezeigt werden sollen (Objekttypen und ihre Eigenschaften).

In diesem Fall können wir das JSON-Schema verwenden , das wir im vorherigen Artikel verwendet haben, um ein Datenobjekt "Produkt" zu beschreiben:

{ "$schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "A product from the catalog", "type": "object", "properties": { "id": { "description": "The unique identifier for a product", "type": "integer" }, "name": { "description": "Name of the product", "type": "string" }, "price": { "type": "number", "minimum": 0, "exclusiveMinimum": true } }, "required": ["id", "name", "price"] }

Wie wir sehen können, zeigt das JSON-Objekt drei Eigenschaften mit den Namen id , name und price . Jedes von ihnen ist ein Formularfeld, das mit seinem Namen gekennzeichnet ist.

Außerdem hat jede Eigenschaft einige Attribute. Das type- Attribut wird vom Framework als Typ des Eingabefelds übersetzt.

Die Attribute Minimum , ExclusiveMinimum speziell für die Price-Eigenschaft teilen dem Framework mit, dass zum Validierungszeitpunkt des Formulars der Wert dieses Eingabefelds größer als 0 sein muss.

Schließlich gibt die erforderliche Eigenschaft, die alle zuvor definierten Eigenschaften enthält, an, dass alle Formularfelder ausgefüllt werden müssen.

Die zweite Komponente ist das UI-Schema, das das Layout des Formulars beschreibt und beschreibt, welche Eigenschaften des Datenschemas als Steuerelemente gerendert werden sollen:

{ "type": "HorizontalLayout", "elements": [ { "type": "Control", "scope": { "$ref": "#/properties/id" } }, { "type": "Control", "scope": { "$ref": "#/properties/name" } }, { "type": "Control", "scope": { "$ref": "#/properties/price" } }, ] } 

Die Eigenschaft type definiert, wie die Formularfelder im Formular sortiert werden. In diesem Fall haben wir eine horizontale Mode gewählt.

Außerdem definiert das UI-Schema, welche Eigenschaft des Datenschemas als Formularfeld angezeigt wird. Dies wird durch Definieren eines Elements erhalten Steuerung in der Elemente - Array.

Schließlich verweisen Steuerelemente direkt auf das Datenschema über die Eigenschaft scope , sodass die Angabe von Dateneigenschaften, z. B. deren Datentyp, nicht repliziert werden muss.

3. Verwenden Sie JSON-Formulare in AngularJS

Das erstellte Datenschema und das UI-Schema werden zur Laufzeit interpretiert. In diesem Fall wird die Webseite, die das Formular enthält, im Browser angezeigt und in eine AngularJS-basierte Benutzeroberfläche übersetzt, die bereits voll funktionsfähig ist, einschließlich Datenbindung, Validierung usw.

Lassen Sie uns nun sehen, wie Sie JSON-Formulare in eine AngularJS-basierte Webanwendung einbetten.

3.1. Richten Sie das Projekt ein

Als Voraussetzung für die Einrichtung unseres Projekts müssen node.js auf unserem Computer installiert sein. Wenn Sie es noch nicht installiert haben, können Sie den Anweisungen auf der offiziellen Website folgen.

node.js wird auch mit npm geliefert , dem Paketmanager, mit dem die JSON Forms-Bibliothek und die anderen erforderlichen Abhängigkeiten installiert werden.

Öffnen Sie nach der Installation von node.js und nach dem Klonen des Beispiels von GitHub eine Shell und eine CD in den Ordner webapp . Dieser Ordner enthält unter anderem die Datei package.json . Es zeigt einige Informationen über das Projekt und teilt npm meistens mit, welche Abhängigkeiten es herunterladen muss. Die json- Datei des Pakets sieht folgendermaßen aus:

{ "name": "jsonforms-intro", "description": "Introduction to JSONForms", "version": "0.0.1", "license": "MIT", "dependencies": { "typings": "0.6.5", "jsonforms": "0.0.19", "bootstrap": "3.3.6" } }

Jetzt können wir den Befehl npm install eingeben. Dadurch wird der Download aller benötigten Bibliotheken gestartet. Nach dem Download finden wir diese Bibliotheken im Ordner node_modules .

Weitere Informationen finden Sie auf der Seite von jsonforms npm.

4. Definieren Sie die Ansicht

Nachdem wir alle erforderlichen Bibliotheken und Abhängigkeiten haben, definieren wir eine HTML-Seite mit dem Formular.

Auf unserer Seite müssen wir die Bibliothek jsonforms.js importieren und das Formular mithilfe der dedizierten AngularJS-Direktive jsonforms einbetten :

   Introduction to JSONForms 

Introduction to JSONForms

Bound data: {{data}}

Als Parameter dieser Anweisung müssen wir auf das oben definierte Datenschema und das oben definierte UI-Schema sowie auf ein JSON-Objekt verweisen, das die anzuzeigenden Daten enthält .

5. Der AngularJS-Controller

In einer AngularJS-Anwendung werden die von der Direktive benötigten Werte normalerweise von einem Controller bereitgestellt:

app.controller('MyController', ['$scope', 'Schema', 'UISchema', function($scope, Schema, UISchema) { $scope.schema = Schema; $scope.uiSchema = UISchema; $scope.data = { "id": 1, "name": "Lampshade", "price": 1.85 }; }]);

6. Das App-Modul

Als nächstes müssen wir die jsonforms in unser App-Modul einfügen :

var app = angular.module('jsonforms-intro', ['jsonforms']);

7. Das Formular anzeigen

Wenn wir die oben definierte HTML-Seite mit dem Browser öffnen, sehen wir unsere erste JSONForm:

8. Fazit

In diesem Artikel haben wir gesehen, wie die JSONForms- Bibliothek zum Erstellen eines UI-Formulars verwendet wird. Durch die Kopplung eines Datenschemas und eines UI-Schemas müssen keine HTML-Vorlagen und kein Javascript für die Datenbindung von Hand geschrieben werden.

Das obige Beispiel finden Sie im GitHub-Projekt.