streamalism.org

1. Oversigt

I den første artikel i denne serie introducerede vi begrebet JSON-skema og hvordan man bruger det til validering af formatet og strukturen på en JSON-objekt.

I denne artikel vil vi se, hvordan man bygger formbaserede web-UI'er ved at udnytte funktionerne i JSON og JSON-skema.

For at nå vores mål bruger vi en ramme kaldet JSON-formularer. Det eliminerer behovet for at skrive HTML-skabeloner og Javascript til databinding i hånden for at skabe tilpasselige formularer.

Formularer gengives derefter med en brugergrænseflade, som i øjeblikket er baseret på AngularJS.

2. Komponenter i en JSON-formular

For at skabe vores form er vi nødt til at definere to hovedkomponenter.

Den første komponent er dataskema definerer de underliggende data, der skal vises i brugergrænsefladen (objekttyper og deres egenskaber).

I dette tilfælde kan vi bruge JSON-skema som vi brugte i den forrige artikel til at beskrive et dataobjekt "Produkt":

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "Et produkt fra kataloget", "type": "object" , "egenskaber": {"id": {"beskrivelse": "Den unikke id for et produkt", "type": "heltal"}, "navn": {"beskrivelse": "Produktets navn", " type ":" string "}," price ": {" type ":" number "," minimum ": 0," exclusiveMinimum ": true}}," required ": [" id "," name "," price "]}

Som vi kan se, er JSON-objekt viser tre navngivne egenskaber id, navn og pris. Hver af dem vil være et formularfelt mærket med dets navn.

Hver ejendom har også nogle attributter. Det type attribut vil blive oversat af rammen som type af indtastningsfeltet.

Attributterne minimum, eksklusivMinimum specifikt til prisegenskaben fortæller rammen, at værdien af ​​dette indtastningsfelt på valideringstidspunktet for formen skal være større end 0.

Endelig blev krævet egenskab, som inkluderer alle de tidligere definerede egenskaber, angiver, at alle formularfelter skal udfyldes.

Den anden komponent er UI-skema beskriver formularens layout og hvilke egenskaber af dataskema skal gengives som kontrolelementer:

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

Det type egenskab defineres som formularfelterne bestilles i formularen. I dette tilfælde har vi valgt en vandret måde.

Også den UI-skema definerer hvilken egenskab ved dataskemaet, der vises som et formularfelt. Dette opnås ved at definere et element Styring i elementer array.

Langt om længe, Kontroller direkte henvise til dataskema ved rækkevidde ejendom, således at specifikationen af ​​dataegenskaber, såsom deres datatype, ikke behøver at replikeres.

3. Brug JSON-formularer i AngularJS

Det skabte dataskema og UI-skema fortolkes under kørsel, hvilket er når websiden, der indeholder formularen, vises i browseren og oversættes til et AngularJS-baseret brugergrænseflade, som allerede er fuldt funktionsdygtigt inklusive databinding, validering osv.

Lad os nu se, hvordan man integrerer JSON-formularer i en AngularJS-baseret webapplikation.

3.1. Opsæt projektet

Som en forudsætning for at opsætte vores projekt har vi brug for node.js installeret i vores maskine. Hvis du ikke har installeret det før, kan du følge instruktionerne på det officielle sted.

node.js også med npm, som er pakkehåndteringen, der bruges til at installere JSON Forms-biblioteket og de andre nødvendige afhængigheder.

Når den er installeret node.js og efter kloning af eksemplet fra GitHub, skal du åbne en shell og cd i webapp folder. Denne mappe indeholder blandt andet pakke.json fil. Det viser nogle oplysninger om projektet og fortæller det mest til npm hvilke afhængigheder den skal downloade. Det pakke, json filen ser ud som følgende:

{"name": "jsonforms-intro", "description": "Introduktion til JSONForms", "version": "0.0.1", "licens": "MIT", "afhængigheder": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

Nu kan vi skrive npm installation kommando. Dette starter download af alle de nødvendige biblioteker. Efter download kan vi finde disse biblioteker inde i node_modules folder.

For flere detaljer kan du se jsonforms npm's side.

4. Definer visningen

Nu hvor vi har alle de nødvendige biblioteker og afhængigheder, lad os definere en html-side, der viser formularen.

På vores side skal vi importere jsonforms.js bibliotek og integrere formularen ved hjælp af det dedikerede AngularJS-direktiv jsonforms:

   Introduktion til JSONForms 
Introduktion til JSONForms
 Bundet data: {{data}} 

Som parametre i dette direktiv er vi nødt til at pege på dataskema og det UI-skema defineret ovenfor, plus en JSON-objekt der vil indeholde data skal vises.

5. AngularJS-controlleren

I en AngularJS-applikation leveres de nødvendige værdier fra direktivet typisk af en controller:

app.controller ('MyController', ['$ scope', 'Schema', 'UISchema', funktion ($ scope, Schema, UISchema) {$ scope.schema = Schema; $ scope.uiSchema = UISchema; $ scope.data = {"id": 1, "name": "Lampeskærm", "pris": 1,85};}]);

6. App-modulet

Dernæst skal vi indsprøjte jsonforms i vores app-modul:

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

7. Viser formularen

Hvis vi åbner html-siden defineret ovenfor med browseren, kan vi se vores første JSONForm:

8. Konklusion

I denne artikel har vi set, hvordan man bruger JSONForms bibliotek til at oprette en brugergrænseflade. Kobling a dataskema og en UI-skema det eliminerer behovet for at skrive HTML-skabeloner og Javascript til databinding i hånden.

Eksemplet ovenfor kan findes i GitHub-projektet.