streamalism.org

1. Oversikt

I den første artikkelen i denne serien introduserte vi begrepet JSON-skjema og hvordan du bruker den til å validere formatet og strukturen til en JSON Objekt.

I denne artikkelen vil vi se hvordan du bygger formbaserte web-brukergrensesnitt ved å utnytte funksjonene til JSON og JSON-skjema.

For å nå vårt mål bruker vi et rammeverk som heter JSON Forms. Det eliminerer behovet for å skrive HTML-maler og Javascript for databinding for hånd for å lage tilpassbare skjemaer.

Skjemaer blir deretter gjengitt med et UI-rammeverk, som for tiden er basert på AngularJS.

2. Komponenter i et JSON-skjema

For å lage vårt skjema må vi definere to hovedkomponenter.

Den første komponenten er dataskjema definerer de underliggende dataene som skal vises i brukergrensesnittet (objekttyper og deres egenskaper).

I dette tilfellet kan vi bruke JSON-skjema som vi brukte i forrige artikkel for å beskrive et dataobjekt "Produkt":

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "Et produkt fra katalogen", "type": "object" , "egenskaper": {"id": {"beskrivelse": "Den unike identifikatoren for et produkt", "type": "heltall"}, "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 egenskaper navngitt id, Navn og pris. Hver av dem vil være et skjemafelt merket med navnet.

Hver eiendom har også noen attributter. De type attributt vil bli oversatt av rammeverket som type av inntastingsfeltet.

Attributtene minimum, eksklusivMinimum spesifikt for prisegenskapen forteller rammeverket at verdien på dette inndatafeltet ved valideringstidspunktet for skjemaet må være større enn 0.

Til slutt, kreves eiendom, som inkluderer alle egenskapene som er definert tidligere, angir at alle skjemafelt må fylles ut.

Den andre komponenten er UI-skjema beskriver utformingen av skjemaet og hvilke egenskaper til dataskjema skal gjengis som kontroller:

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

De type eiendom definerer som skjemafeltene vil bli bestilt i skjemaet. I dette tilfellet har vi valgt en horisontal måte.

Også, den UI-skjema definerer hvilken egenskap til dataskjemaet som skal vises som et skjemafelt. Dette oppnås ved å definere et element Kontroll i elementer array.

Endelig, Kontroller direkte referanse til dataskjema ved omfang eiendom, slik at spesifikasjonen av dataegenskaper, for eksempel datatypen, ikke trenger å replikeres.

3. Bruk JSON-skjemaer i AngularJS

Det skapte dataskjema og UI-skjema tolkes i løpet av kjøretiden, som er når nettsiden som inneholder skjemaet vises i nettleseren, og oversettes til et AngularJS-basert brukergrensesnitt, som allerede er fullt funksjonelt inkludert databinding, validering, etc.

La oss nå se hvordan du legger inn JSON-skjemaer i et AngularJS-basert webapplikasjon.

3.1. Sett opp prosjektet

Som en forutsetning for å sette opp prosjektet vårt trenger vi node.js installert i maskinen vår. Hvis du ikke har installert det før, kan du følge instruksjonene på det offisielle nettstedet.

node.js også komme med npm, som er pakkebehandling som brukes til å installere JSON Forms-biblioteket og de andre nødvendige avhengighetene.

Når den er installert node.js og etter kloning av eksemplet fra GitHub, åpne et skall og cd i webapp mappe. Denne mappen inneholder blant annet pakke.json fil. Det viser litt informasjon om prosjektet og forteller det meste npm hvilke avhengigheter den må laste ned. De pakke, json filen vil se ut som følgende:

{"name": "jsonforms-intro", "description": "Introduksjon til JSONForms", "version": "0.0.1", "lisens": "MIT", "avhengigheter": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

Nå kan vi skrive inn npm installere kommando. Dette starter nedlastingen av alle nødvendige biblioteker. Etter nedlastingen kan vi finne disse bibliotekene i node_modules mappe.

For mer informasjon kan du se jsonforms npm's side.

4. Definer visningen

Nå som vi har alle nødvendige biblioteker og avhengigheter, la oss definere en html-side som viser skjemaet.

På siden vår må vi importere jsonforms.js biblioteket og legge inn skjemaet ved å bruke det dedikerte AngularJS-direktivet jsonforms:

   Introduksjon til JSONForms 
Introduksjon til JSONForms
 Bundet data: {{data}} 

Som parametere i dette direktivet, må vi peke på dataskjema og de UI-skjema definert ovenfor, pluss a JSON-objekt som vil inneholde data som skal vises.

5. AngularJS-kontrolleren

I et AngularJS-program leveres verdiene som trengs fra direktivet vanligvis av en kontroller:

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

6. App-modulen

Neste må vi injisere jsonforms i vår app-modul:

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

7. Viser skjemaet

Hvis vi åpner html-siden definert ovenfor med nettleseren, kan vi se vår første JSONForm:

8. Konklusjon

I denne artikkelen har vi sett hvordan du bruker JSONForms bibliotek for å bygge et UI-skjema. Kobling a dataskjema og en UI-skjema det eliminerer behovet for å skrive HTML-maler og Javascript for databinding for hånd.

Eksemplet ovenfor finner du i GitHub-prosjektet.