streamalism.org

1. Prehľad

V prvom článku tejto série sme predstavili koncept Schéma JSON a ako ho použiť na overenie formátu a štruktúry súboru a Objekt JSON.

V tomto článku sa dozvieme, ako vytvoriť webové používateľské rozhrania založené na formulároch využitím schopností JSON a Schéma JSON.

Na dosiahnutie nášho cieľa použijeme rámec tzv Formuláre JSON. To eliminuje potrebu písať HTML šablóny a Javascript na viazanie údajov ručne, aby sa vytvorili prispôsobiteľné formuláre.

Formuláre sa potom vykresľujú pomocou rámca používateľského rozhrania, ktoré je v súčasnosti založené na AngularJS.

2. Komponenty formulára JSON

Aby sme vytvorili náš formulár, musíme definovať dve hlavné zložky.

Prvou zložkou je dátová schéma definuje základné údaje, ktoré sa majú zobraziť v používateľskom rozhraní (typy objektov a ich vlastnosti).

V tomto prípade môžeme použiť Schéma JSON ktoré sme použili v predchádzajúcom článku na popísanie dátového objektu „Produkt“:

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "Produkt z katalógu", "type": "objekt" , "properties": {"id": {"description": "Jedinečný identifikátor produktu", "type": "integer"}, "name": {"description": "Názov produktu", " type ":" string "}," price ": {" type ":" number "," minimum ": 0," exclusiveMinimum ": true}}," required ": [" id "," name "," price " "]}

Ako vidíme, Objekt JSON zobrazuje tri pomenované vlastnosti id, názov a cena. Každý z nich bude pole formulára označené jeho menom.

Každá vlastnosť má tiež nejaké atribúty. The typu atribút bude preložený rámcom ako typu vstupného poľa.

Atribúty minimum, exkluzívneMinimum konkrétne pre cenovú vlastnosť hovorí rámcu, že v čase validácie formulára musí byť hodnota tohto vstupného poľa väčšia ako 0.

Nakoniec požadovaný Vlastnosť, ktorá obsahuje všetky predtým definované vlastnosti, určuje, že je potrebné vyplniť všetky polia formulára.

Druhou zložkou je Schéma používateľského rozhrania popisuje rozloženie formulára a vlastnosti súboru dátová schéma sa majú vykresliť ako ovládacie prvky:

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

The typu vlastnosť definuje ako pole formulára budú zoradené vo formulári. V tomto prípade sme zvolili horizontálny spôsob.

Tiež Schéma používateľského rozhrania definuje, ktorá vlastnosť údajovej schémy sa zobrazí ako pole formulára. To sa získa definovaním prvku Ovládanie v prvkov pole.

Nakoniec Ovládacie prvky priamo odkazovať na dátová schéma podľa rozsah nehnuteľnosť, aby sa nemusela replikovať špecifikácia dátových vlastností, napríklad ich údajového typu.

3. Použite JSON formuláre v AngularJS

Vytvorené dátová schéma a Schéma používateľského rozhrania sa interpretujú za behu programu, čo je vtedy, keď sa webová stránka obsahujúca formulár zobrazí v prehliadači, a preloží sa do používateľského rozhrania založeného na AngularJS, ktoré je už plne funkčné, vrátane dátovej väzby, overovania atď.

Teraz sa pozrime, ako vložiť formuláre JSON do webovej aplikácie založenej na AngularJS.

3.1. Nastaviť projekt

Ako nevyhnutný predpoklad pre nastavenie nášho projektu potrebujeme node.js nainštalované v našom stroji. Ak ste si ho predtým nenainštalovali, môžete postupovať podľa pokynov na oficiálnych stránkach.

node.js tiež prísť s npm, čo je správca balíkov používaný na inštaláciu knižnice JSON Forms a ďalších potrebných závislostí.

Po nainštalovaní node.js a po klonovaní príkladu z GitHubu otvorte shell a cd do webapp priečinok. Tento priečinok obsahuje okrem iného balíček.json spis. Ukazuje niektoré informácie o projekte a väčšinou povie npm ktoré závislosti si musí stiahnuť. The balík, json súbor bude vyzerať takto:

{"name": "jsonforms-intro", "description": "Úvod do JSONForms", "verzia": "0.0.1", "licencia": "MIT", "dependencies": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

Teraz môžeme napísať npm nainštalovať príkaz. Týmto sa spustí sťahovanie všetkých potrebných knižníc. Po stiahnutí nájdeme tieto knižnice vo vnútri node_modules priečinok.

Viac podrobností nájdete na stránke jsonforms npm.

4. Definujte Pohľad

Teraz, keď máme všetky potrebné knižnice a závislosti, definujme html stránku zobrazujúcu formulár.

Na našej stránke musíme importovať jsonforms.js knižnicu a formulár vložiť pomocou vyhradenej smernice AngularJS jsonformy:

   Úvod do JSONForms 
Úvod do JSONForms
 Viazané údaje: {{data}} 

Ako parametre tejto smernice musíme poukázať na dátová schéma a the Schéma používateľského rozhrania definovaná vyššie, plus a Objekt JSON ktorý bude obsahovať údaje ktoré sa majú zobraziť.

5. Ovládač AngularJS

V aplikácii AngularJS sú hodnoty potrebné zo smernice zvyčajne poskytované radičom:

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

6. Modul aplikácie

Ďalej musíme vpichnúť jsonformy v našom module aplikácie:

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

7. Zobrazenie formulára

Ak otvoríme html stránku definovanú vyššie pomocou prehliadača, môžeme vidieť náš prvý JSONForm:

8. Záver

V tomto článku sme videli, ako používať JSONForms knižnica na vytvorenie formulára UI. Spojka a dátová schéma a an Schéma používateľského rozhrania eliminuje potrebu ručného písania šablón HTML a Javascript na viazanie údajov.

Vyššie uvedený príklad nájdete v projekte GitHub.