Introduction à JSONForms

1. Vue d'ensemble

Dans le premier article de cette série, nous avons présenté le concept de schéma JSON et comment l'utiliser pour valider le format et la structure d'un objet JSON .

Dans cet article, nous verrons comment créer des interfaces utilisateur Web basées sur des formulaires en tirant parti des capacités de JSON et de JSON Schema.

Pour atteindre notre objectif, nous utiliserons un framework appelé JSON Forms . Il élimine le besoin d'écrire manuellement 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, 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 le schéma de données qui 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 le schéma JSON que nous avons utilisé dans l'article précédent pour décrire un objet de données «Produit»:

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

Comme nous pouvons le voir, l' objet JSON montre trois propriétés nommées id , nom et prix . Chacun d'eux sera un champ de formulaire étiqueté par son nom.

De plus, chaque propriété a des attributs. L' attribut type sera traduit par le framework comme le type du champ d'entrée.

Les attributs minimum , 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é requise , qui comprend toutes les propriétés précédemment définies, spécifie que tous les champs du formulaire doivent être remplis.

Le deuxième composant est le schéma d'interface utilisateur qui décrit la disposition du formulaire et quelles propriétés du schéma de données 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.

En outre, le schéma d'interface utilisateur définit quelle propriété du schéma de données sera affichée en tant que champ de formulaire. Ceci est obtenu en définissant un élément Control dans le tableau des éléments .

Enfin, les contrôles référencent directement le schéma de données par la propriété scope , de sorte que la spécification des propriétés de données, telles que leur type de données, n'a pas à être répliquée.

3. Utilisez les formulaires JSON dans AngularJS

Le schéma de données et le schéma d' interface utilisateur créés sont interprétés pendant l'exécution, c'est-à-dire lorsque la page Web qui contient le formulaire est affichée sur le navigateur et traduite 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

Pour configurer notre projet, nous avons besoin de node.js installé sur notre machine. Si vous ne l'avez pas déjà installé, vous pouvez suivre les instructions sur le site officiel.

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

Une fois node.js installé et après avoir cloné l'exemple depuis GitHub, ouvrez un shell et un cd dans le dossier webapp . Ce dossier contient entre autres le fichier package.json . Il affiche des informations sur le projet et indique principalement à npm quelles dépendances il doit télécharger. Le fichier package, json ressemblera à ce qui suit:

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

Maintenant, nous pouvons taper la commande npm 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 dossier node_modules .

Pour plus de détails, vous pouvez consulter la page de jsonforms npm.

4. Définissez la vue

Maintenant que nous avons toutes les bibliothèques et dépendances nécessaires, définissons une page html affichant le formulaire.

Dans notre page, nous devons importer la bibliothèque jsonforms.js et incorporer le formulaire en utilisant la directive AngularJS dédiée jsonforms :

   Introduction to JSONForms 

Introduction to JSONForms

Bound data: {{data}}

En tant que paramètres de cette directive, nous devons pointer vers le schéma de données et le schéma d'interface utilisateur définis ci - dessus , plus un objet JSON qui contiendra les données à afficher.

5. Le contrôleur AngularJS

Dans une application AngularJS, les valeurs nécessaires à partir de 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 les jsonforms dans notre module d'application:

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

7. Affichage du formulaire

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

8. Conclusion

Dans cet article, nous avons vu comment utiliser la bibliothèque JSONForms pour créer un formulaire d'interface utilisateur. En associant un schéma de données et un schéma d'interface utilisateur, 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 le projet GitHub.