streamalism.org

1. Pregled

U prvom članku ove serije predstavili smo koncept JSON shema i kako ga koristiti za provjeru formata i strukture a JSON objekt.

U ovom ćemo članku vidjeti kako izraditi web korisničko sučelje temeljeno na obrascu iskorištavanjem mogućnosti JSON i JSON shema.

Da bismo postigli svoj cilj koristit ćemo okvir tzv JSON obrasci. Eliminira potrebu za ručnim pisanjem HTML predložaka i Javascripta za ručno povezivanje podataka za stvaranje prilagodljivih obrazaca.

Obrasci se zatim generiraju s UI okvirom, koji se trenutno temelji na AngularJS.

2. Komponente JSON obrasca

Da bismo stvorili obrazac, moramo definirati dvije glavne komponente.

Prva komponenta je shema podataka definira osnovne podatke koji se prikazuju u korisničkom sučelju (tipovi objekata i njihova svojstva).

U ovom slučaju možemo koristiti JSON shema koje smo koristili u prethodnom članku za opisivanje podatkovnog objekta "Proizvod":

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "Proizvod iz kataloga", "type": "object" , "svojstva": {"id": {"description": "Jedinstveni identifikator proizvoda", "type": "integer"}, "name": {"description": "Naziv proizvoda", " type ":" string "}," price ": {" type ":" number "," minimum ": 0," exclusiveMinimum ": true}}," required ": [" id "," name "," price "]}

Kao što vidimo, JSON objekt prikazuje tri imenovana svojstva iskaznica, Ime i cijena. Svaki od njih bit će polje obrasca označeno svojim imenom.

Također svako svojstvo ima neke atribute. The tip atribut će se u okviru prevesti kao tip polja za unos.

Atributi minimum, ekskluzivniMinimum posebno za svojstvo price govori okviru da u vrijeme provjere valjanosti vrijednost tog polja za unos mora biti veća od 0.

Napokon, potreban svojstvo, koje uključuje sva prethodno definirana svojstva, navodi da se moraju popuniti sva polja obrasca.

Druga komponenta je Shema korisničkog sučelja opisuje izgled obrasca i koja svojstva shema podataka treba prikazati kao kontrole:

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

The tip svojstvo definira kao što će se polja obrasca poredati u obrascu. U ovom smo slučaju odabrali horizontalni način.

Također, Shema korisničkog sučelja definira koje će svojstvo sheme podataka biti prikazano kao polje obrasca. To se dobiva definiranjem elementa Kontrolirati u elementi niz.

Konačno, Kontrole izravno upućuju na shema podataka od strane opseg imovine, tako da specifikacija svojstava podataka, kao što je njihov tip podataka, ne mora biti replicirana.

3. Koristite JSON obrasce u AngularJS

Stvoreno shema podataka i Shema korisničkog sučelja tumače se tijekom izvođenja, a to je kada se web stranica koja sadrži obrazac prikazuje u pregledniku i prevodi u korisničko sučelje temeljeno na AngularJS, koje je već u potpunosti funkcionalno, uključujući vezivanje podataka, provjeru valjanosti itd.

Sada, pogledajmo kako ugraditi JSON obrasce u web aplikaciju koja se temelji na AngularJS.

3.1. Postavite projekt

Kao preduvjet za postavljanje našeg projekta trebamo node.js instaliran u našem stroju. Ako ga prije niste instalirali, možete slijediti upute na službenim stranicama.

node.js također dođite s npm, koji je upravitelj paketa koji se koristi za instalaciju JSON Forms knjižnice i ostalih potrebnih ovisnosti.

Jednom instaliran node.js i nakon kloniranja primjera iz GitHub-a, otvorite ljusku i cd u webapp mapu. Ova mapa sadrži između ostalog i paket.json datoteka. Prikazuje neke informacije o projektu i uglavnom govori o tome npm koje ovisnosti mora preuzeti. The paket, json datoteka će izgledati ovako:

{"name": "jsonforms-intro", "description": "Uvod u JSONForms", "version": "0.0.1", "licence": "MIT", "dependencies": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

Sada možemo upisati npm instalirati naredba. Ovo će započeti preuzimanje svih potrebnih knjižnica. Nakon preuzimanja ove knjižnice možemo pronaći u čvorovi_moduli mapu.

Za više detalja možete pogledati stranicu jsonforms npm.

4. Definirajte pogled

Sad kad imamo sve potrebne knjižnice i ovisnosti, definirajmo html stranicu koja prikazuje obrazac.

Na našu stranicu moramo uvesti jsonforms.js knjižnicu i ugradite obrazac pomoću posebne AngularJS direktive jsonforme:

   Uvod u JSONForms 
Uvod u JSONForms
 Vezani podaci: {{podaci}} 

Kao parametre ove direktive, moramo ukazati na shema podataka i the Shema korisničkog sučelja definirana gore, plus a JSON objekt koji će sadržavati podaci za prikaz.

5. Upravljač AngularJS

U aplikaciji AngularJS, vrijednosti potrebne iz direktive obično pruža kontroler:

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

6. Modul aplikacije

Dalje moramo ubrizgati jsonforme u našem modulu aplikacije:

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

7. Prikazivanje obrasca

Ako otvorimo html stranicu definiranu gore preglednikom, možemo vidjeti svoj prvi JSONForm:

8. Zaključak

U ovom smo članku vidjeli kako se koristi JSONForms knjižnica za izradu UI obrasca. Spajanje a shema podataka i an Shema korisničkog sučelja eliminira potrebu za ručnim pisanjem HTML predloga i Javascripta za povezivanje podataka.

Gornji primjer može se naći u projektu GitHub.