streamalism.org

1. Overzicht

In het eerste artikel van deze serie hebben we het concept van JSON-schema en hoe het te gebruiken voor het valideren van het formaat en de structuur van een JSON-object.

In dit artikel zullen we zien hoe u op formulieren gebaseerde web-UI's kunt bouwen door gebruik te maken van de mogelijkheden van JSON en JSON-schema.

Om ons doel te bereiken, gebruiken we een framework met de naam JSON-formulieren. Het elimineert de noodzaak om HTML-sjablonen en Javascript te schrijven voor handmatige gegevensbinding om aanpasbare formulieren te maken.

Formulieren worden vervolgens weergegeven met een UI-framework, momenteel gebaseerd op AngularJS.

2. Componenten van een JSON-formulier

Om ons formulier te maken, moeten we twee hoofdcomponenten definiëren.

Het eerste onderdeel is het gegevensschema definieert de onderliggende gegevens die in de gebruikersinterface moeten worden weergegeven (objecttypen en hun eigenschappen).

In dit geval kunnen we de JSON-schema die we in het vorige artikel hebben gebruikt om een ​​gegevensobject 'Product' te beschrijven:

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "Een product uit de catalogus", "type": "object" , "properties": {"id": {"description": "De unieke identificatie voor een product", "type": "integer"}, "name": {"description": "Naam van het product", " type ":" string "}," price ": {" type ":" number "," minimum ": 0," exclusiveMinimum ": true}}," required ": [" id "," name "," price "]}

Zoals we kunnen zien, is de JSON-object toont drie eigenschappen met de naam ID kaart, naam en prijs. Elk van hen zal een formulierveld zijn met de naam erop.

Ook heeft elke eigenschap een aantal attributen. De type attribuut wordt door het framework vertaald als het type van het invoerveld.

De attributen minimum, exclusief Minimum specifiek voor de eigenschap price vertelt het raamwerk dat op het moment van validatie van het formulier de waarde van dat invoerveld groter moet zijn dan 0.

eindelijk, de verplicht eigenschap, die alle eerder gedefinieerde eigenschappen bevat, specificeert dat alle formuliervelden moeten worden ingevuld.

De tweede component is de UI-schema beschrijft de lay-out van het formulier en welke eigenschappen van het gegevensschema moeten worden weergegeven als besturingselementen:

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

De type eigenschap definieert als de formuliervelden in het formulier worden geordend. In dit geval hebben we gekozen voor een horizontale mode.

Ook de UI-schema definieert welke eigenschap van het gegevensschema wordt weergegeven als een formulierveld. Dit wordt verkregen door een element te definiëren Controle in de elementen array.

Tenslotte, Besturing rechtstreeks verwijzen naar de gegevensschema Door de reikwijdte eigendom, zodat de specificatie van gegevenseigenschappen, zoals hun gegevenstype, niet gerepliceerd hoeft te worden.

3. Gebruik JSON-formulieren in AngularJS

Het gecreëerde gegevensschema en UI-schema worden geïnterpreteerd tijdens runtime, dat is wanneer de webpagina met het formulier in de browser wordt weergegeven en vertaald naar een op AngularJS gebaseerde gebruikersinterface, die al volledig functioneel is, inclusief gegevensbinding, validatie, enz.

Laten we nu eens kijken hoe we JSON-formulieren kunnen insluiten in een op AngularJS gebaseerde webtoepassing.

3.1. Stel het project op

Als voorwaarde voor het opzetten van ons project hebben we nodig node.js geïnstalleerd in onze machine. Als je het nog niet eerder hebt geïnstalleerd, kun je de instructies op de officiële site volgen.

node.js komen ook met npm, dat is de pakketbeheerder die wordt gebruikt om de JSON Forms-bibliotheek en de andere benodigde afhankelijkheden te installeren.

Eenmaal geïnstalleerd node.js en na het klonen van het voorbeeld van GitHub, open je een shell en cd in het web applicatie map. Deze map bevat onder andere de package.json het dossier. Het toont wat informatie over het project en vertelt meestal aan npm welke afhankelijkheden het moet downloaden. De package, json bestand ziet er als volgt uit:

{"name": "jsonforms-intro", "description": "Inleiding tot JSONForms", "version": "0.0.1", "license": "MIT", "afhankelijkheden": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

Nu kunnen we het npm installeren opdracht. Hiermee start u het downloaden van alle benodigde bibliotheken. Na het downloaden kunnen we deze bibliotheken vinden in het knooppuntmodules map.

Voor meer details kun je de pagina van jsonforms npm raadplegen.

4. Definieer de weergave

Nu we alle benodigde bibliotheken en afhankelijkheden hebben, gaan we een html-pagina definiëren die het formulier weergeeft.

Op onze pagina moeten we het jsonforms.js bibliotheek en sluit het formulier in met behulp van de speciale AngularJS-richtlijn jsonforms:

   Inleiding tot JSONForms 
Inleiding tot JSONForms
 Gebonden gegevens: {{data}} 

Als parameters van deze richtlijn moeten we verwijzen naar de gegevensschema en de UI-schema hierboven gedefinieerd, plus een JSON-object dat de gegevens worden weergegeven.

5. De AngularJS-controller

In een AngularJS-applicatie worden de waarden die nodig zijn uit de richtlijn doorgaans geleverd door een controller:

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

6. De app-module

Vervolgens moeten we de jsonforms in onze app-module:

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

7. Tonen van het formulier

Als we de hierboven gedefinieerde html-pagina openen met de browser, kunnen we ons eerste JSONForm zien:

8. Conclusie

In dit artikel hebben we gezien hoe u de JSONForms bibliotheek om een ​​UI-formulier te bouwen. Koppeling a gegevensschema en een UI-schema het elimineert de noodzaak om HTML-sjablonen en Javascript te schrijven voor handmatige gegevensbinding.

Het bovenstaande voorbeeld is te vinden in het GitHub-project.