Einführung in JSONForms

1. Überblick

Infirst article dieser Reihe haben wir das Konzept vonJSON Schema eingeführt und erläutert, wie es zur Validierung des Formats und der Struktur vonJSON Object verwendet wird.

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

Um unser Ziel zu erreichen, verwenden wir ein Framework namensJSON Forms. Sie müssen keine HTML-Vorlagen und kein Javascript für die manuelle Datenbindung 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 istdata schema. S definiert die zugrunde liegenden Daten, die in der Benutzeroberfläche angezeigt werden sollen (Objekttypen und ihre Eigenschaften).

In diesem Fall können wir dieJSON Schema verwenden, die wir in denprevious article verwendet haben, um ein Datenobjekt „Produkt“ zu beschreiben:

{
    "$schema": "http://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, zeigtJSON Object drei Eigenschaften mit den Namenid,name undprice. Jedes von ihnen ist ein Formularfeld, das mit seinem Namen gekennzeichnet ist.

Auch hat jede Eigenschaft einige Attribute. Das Attributtype wird vom Framework alstype des Eingabefelds übersetzt.

Die Attributeminimum,exclusiveMinimum speziell für die Preiseigenschaft geben dem Framework an, dass zum Validierungszeitpunkt des Formulars der Wert dieses Eingabefelds größer als 0 sein muss.

Schließlich gibt die Eigenschaftrequired,which includes alle Eigenschaftenpreviously defined an, dass alle Formularfelder ausgefüllt werden müssen.

Die zweite Komponente istUI schema beschreibt das Layout des Formulars und welche Eigenschaften vondata schema 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 Eigenschafttypedefiniert, wie die Formularfelder im Formular sortiert werden. In diesem Fall haben wir eine horizontale Mode gewählt.

Außerdem definiertUI Schema, welche Eigenschaft des Datenschemas als Formularfeld angezeigt wird. Dies istobtained by defining ein ElementControl im Arrayelements.

Schließlich verweisenControls direkt aufdata schema durch diescope-Eigenschaft,, so dass die Angabe von Dateneigenschaften, wie z. B. deren Datentyp, nicht repliziert werden muss.

3. Verwenden Sie JSON-Formulare in AngularJS

Die erstelltendata schema undUI schema werden zur Laufzeit interpretiert, dh wennwhen the web page that contains the form is displayed on the browser, und in eine AngularJS-basierte Benutzeroberfläche übersetzt werden, 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üssennode.js auf unserer Maschine installiert sein. Wenn Sie es noch nicht installiert haben, können Sie den Anweisungen unterofficial site folgen.

node.js werden auch mitnpm geliefert. Dies ist der Paketmanager, mit dem die JSON Forms-Bibliothek und die anderen erforderlichen Abhängigkeiten installiert werden.

[#result_box .short_text] #Nachdemnode.js installiert ist, öffnen Sie nach dem Klonen des Beispiels vonGitHub eine Shell und eine CD in den Ordnerwebapp. Dieser Ordner enthält unter anderem die Dateipackage.json. Es zeigt einige Informationen über das Projekt und teiltnpm meistens mit, welche Abhängigkeiten es herunterladen muss. Die Dateipackage,jsonieht 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"
     }
}

[#result_box .short_text] # Jetzt können wir den Befehlnpm install eingeben. Dadurch wird der Download aller benötigten Bibliotheken gestartet. Nach dem Download finden wir diese Bibliotheken im Ordnernode_modules. #

Für weitere Details können Sie diejsonforms npm’s page beziehen.

4. Definieren Sie die Ansicht

Now that we have all the needed libraries and dependencies, definieren wir eine HTML-Seite, auf der das Formular angezeigt wird.

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




    Introduction to JSONForms
    
    
    
    


    
        
            
                
                    
                        Introduction
                          to JSONForms
                    
                    
                        Bound data: {{data}}

Als Parameter dieser Direktive müssen wir aufdata schema and,UI schema defined above undJSON object verweisen, die die anzuzeigendendata enthalten.

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 diejsonforms in unser App-Modul einfügen:

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

7. Formular anzeigen

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

8. Fazit

In diesem Artikel wirdwe have seenbeschrieben, wie die BibliothekJSONFormszum Erstellen eines UI-Formulars verwendet wird. Durch die Kopplung vondata schema undUI schema entfällt die Notwendigkeit, HTML-Vorlagen und Javascript für die Datenbindung von Hand zu schreiben.

Das obige Beispiel finden Sie inGitHub project.

TOC

Einführung in JSONForms