Introduction à JSONForms

1. Vue d'ensemble

Dans lesfirst article de cette série, nous avons introduit le concept deJSON Schema et comment l'utiliser pour valider le format et la structure d'unJSON Object.

Dans cet article, nous allons voir comment créer des interfaces utilisateur Web basées sur des formulaires en tirant parti des fonctionnalités deJSON etJSON Schema.

Pour atteindre notre objectif, nous utiliserons un framework appeléJSON Forms. Il élimine le besoin d'écrire à la main des modèles HTML et Javascript pour la liaison de données afin de créer des formulaires personnalisables.

Les formulaires sont ensuite rendus avec un framework d'interface utilisateur, est actuellement basé sur AngularJS.

2. Composants d'un formulaire JSON

Pour créer notre formulaire, nous devons définir deux composants principaux.

Le premier composant est ledata schema définit les données sous-jacentes à afficher dans l'interface utilisateur (types d'objets et leurs propriétés).

Dans ce cas, nous pouvons utiliser lesJSON Schema que nous avons utilisés dans lesprevious article pour décrire un objet de données «Produit»:

{
    "$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"]
}

Comme nous pouvons le voir, leJSON Object montre trois propriétés nomméesid,name etprice. Chacun d'eux sera un champ de formulaire étiqueté par son nom.

De plus, chaque propriété a des attributs. L'attributtype sera traduit par le framework en tant quetype du champ d'entrée.

Les attributsminimum,exclusiveMinimum spécifiquement pour la propriété price indiquent au framework qu'au moment de la validation du formulaire, la valeur de ce champ d'entrée doit être supérieure à 0.

Enfin, la propriétérequired,which includes toutes les propriétéspreviously defined spécifie que tous les champs du formulaire doivent être remplis.

Le deuxième composant est leUI schema décrit la mise en page du formulaire et quelles propriétés desdata schema doivent être rendues en tant que contrôles:

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

La propriététype définit comme les champs du formulaire seront classés dans le formulaire. Dans ce cas, nous avons choisi une mode horizontale.

De plus, leUI Schema définit quelle propriété du schéma de données sera affichée en tant que champ de formulaire. C'estobtained by defining un élémentControl dans le tableauelements.

Enfin,Controls référence directement lesdata schema par la propriétéscope, afin que la spécification des propriétés de données, telles que leur type de données, n'ait pas à être répliquée.

3. Utiliser des formulaires JSON dans AngularJS

Lesdata schema etUI schema créés sont interprétés pendant l'exécution, c'est-à-dire lorsquewhen the web page that contains the form is displayed on the browser, et traduits en une interface utilisateur basée sur AngularJS, qui est déjà entièrement fonctionnelle, y compris la liaison de données, la validation, etc.

Voyons maintenant comment intégrer des formulaires JSON dans une application Web basée sur AngularJS.

3.1. Configurer le projet

Comme condition préalable à la configuration de notre projet, nous avons besoin denode.js installés sur notre machine. Si vous ne l’avez pas déjà installé, vous pouvez suivre les instructions desofficial site.

node.js est également fourni avecnpm, qui est le gestionnaire de packages utilisé pour installer la bibliothèque JSON Forms et les autres dépendances nécessaires.

[#result_box .short_text] #Une fois installénode.js et après avoir cloné l'exemple à partir deGitHub, ouvrez un shell et un cd dans le dossierwebapp. Ce dossier contient entre autres le fichierpackage.json. Il affiche des informations sur le projet et indique principalement ànpm quelles dépendances il doit télécharger. Le fichierpackage,json ressemblera à ceci: #

{
    "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] # Maintenant, nous pouvons taper la commandenpm install. Cela lancera le téléchargement de toutes les bibliothèques nécessaires. Après le téléchargement, nous pouvons trouver ces bibliothèques dans le dossiernode_modules. #

Pour plus de détails, vous pouvez consulter lesjsonforms npm’s page.

4. Définir la vue

Now that we have all the needed libraries and dependencies, définissons une page html affichant le formulaire.

Dans notre page, nous devons importer la bibliothèquejsonforms.js et intégrer le formulaire en utilisant la directive AngularJS dédiéejsonforms:




    Introduction to JSONForms
    
    
    
    


    
        
            
                
                    
                        Introduction
                          to JSONForms
                    
                    
                        Bound data: {{data}}

En tant que paramètres de cette directive, nous devons pointer vers lesdata schema and lesUI schema defined above, plus unJSON object qui contiendra lesdata à afficher.

5. Le contrôleur AngularJS

Dans une application AngularJS, les valeurs requises par la directive sont généralement fournies par un contrôleur:

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. Le module d'application

Ensuite, nous devons injecter lesjsonforms dans notre module d'application:

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

7. Afficher le formulaire

Si nous ouvrons la page html définie ci-dessus avec le navigateur, nous pouvons voir notre premier fichier JSONForm:

8. Conclusion

Dans cet articlewe have seen comment utiliser la bibliothèqueJSONForms pour créer un formulaire d'interface utilisateur. En couplant undata schema et unUI schema, il élimine le besoin d'écrire à la main des modèles HTML et Javascript pour la liaison de données.

L'exemple ci-dessus se trouve dans lesGitHub project.

TOC

Introduction à JSONForms