streamalism.org

1. Áttekintés

A sorozat első cikkében bemutattuk a fogalmát JSON Schema és hogyan lehet felhasználni az a JSON Object.

Ebben a cikkben megtudhatjuk, hogyan lehet űrlapalapú webes felhasználói felületeket készíteni a JSON és JSON Schema.

Célunk elérése érdekében egy ún JSON Forms. Ez kiküszöböli annak szükségességét, hogy HTML-sablonokat és Javascriptet írjon kézzel az adatkötéshez testreszabható űrlapok létrehozásához.

Az űrlapokat ezután egy felhasználói felület keretrendszerrel renderelik, amely jelenleg az AngularJS-en alapul.

2. A JSON űrlap összetevői

Az űrlap létrehozásához két fő összetevőt kell meghatároznunk.

Az első komponens a adat séma meghatározza a felhasználói felületen megjelenítendő mögöttes adatokat (objektumtípusok és tulajdonságaik).

Ebben az esetben használhatjuk a JSON Schema amelyet az előző cikkben a „Termék” adatobjektum leírásához használtunk:

{"$ schema": "//json-schema.org/draft-04/schema#", "title": "Termék", "description": "Termék a katalógusból", "type": "object" , "tulajdonságok": {"id": {"description": "A termék egyedi azonosítója", "type": "integer"}, "name": {"description": "A termék neve", " type ":" string "}," price ": {" type ":" number "," minimum ": 0," exclusiveMinimum ": true}}," required ": [" id "," name "," price "]}

Mint láthatjuk, a JSON Object három megnevezett tulajdonságot mutat id, név és ár. Mindegyik egy névmezővel ellátott űrlapmező lesz.

Minden tulajdonságnak van néhány attribútuma is. A típus attribútumot a keretrendszer a típus a beviteli mező.

Az attribútumok minimális, exclusiveMinimum kifejezetten az ár esetében a tulajdonság azt mondja a keretrendszernek, hogy az űrlap érvényesítési időpontjában az adott bemeneti mező értékének nagyobbnak kell lennie, mint 0.

Végül a kívánt tulajdonság, amely magában foglalja az összes korábban meghatározott tulajdonságot, megadja, hogy az összes űrlapmező kitöltése kötelező.

A második komponens a UI séma leírja az űrlap elrendezését és a adat séma ellenőrzésként kell megjeleníteni:

{"type": "HorizontalLayout", "elements": [{{"type": "Control", "hatókör": {"$ ref": "# / properties / id"}}, {"type": "Control" "," hatókör ": {" $ ref ":" # / properties / name "}}, {" type ":" Control "," hatókör ": {" $ ref ":" # / properties / price "}} ,]} 

A típus tulajdonság azt határozza meg, hogy az űrlapmezők az űrlapon lesznek rendezve. Ebben az esetben vízszintes módot választottunk.

Továbbá a UI séma meghatározza, hogy az adatséma mely tulajdonsága jelenik meg űrlapmezőként. Ezt egy elem definiálásával kapjuk meg Ellenőrzés ban,-ben elemek sor.

Végül, Vezérlők közvetlenül hivatkozni a adat séma valami által hatálya ingatlan, hogy az adattulajdonságok specifikációját, például az adattípusukat, ne kelljen megismételni.

3. Használja a JSON űrlapokat az AngularJS alkalmazásban

A létrehozott adat séma és UI séma futás közben értelmezik, amikor az űrlapot tartalmazó weblap megjelenik a böngészőben, és AngularJS alapú felhasználói felületre fordítják, amely már teljesen működőképes, ideértve az adatok kötését, érvényesítését stb.

Most nézzük meg, hogyan lehet beágyazni a JSON űrlapokat egy AngularJS alapú webalkalmazásba.

3.1. Állítsa be a projektet

A szükséges projektünk beállításának előfeltételeként node.js gépünkbe telepítve. Ha még nem telepítette, akkor kövesse az utasításokat a hivatalos webhelyen.

node.js is jönnek npm, amely a JSON Forms könyvtár és a többi szükséges függőség telepítéséhez használt csomagkezelő.

Miután telepítette node.js és miután a GitHub-ból klónoztuk a példát, nyissunk meg egy héjat és cd-t a webapp mappába. Ez a mappa tartalmazza többek között a csomag.json fájl. Néhány információt mutat a projektről, és többnyire elmondja npm mely függőségeket kell letöltenie. A csomag, json fájl a következőképpen fog kinézni:

{"name": "jsonforms-intro", "description": "Bevezetés a JSONForms-ba", "verzió": "0.0.1", "licenc": "MIT", "függőségek": {"typings": "0.6 .5 "," jsonforms ":" 0.0.19 "," bootstrap ":" 3.3.6 "}}

Most beírhatjuk a npm telepítés parancs. Ez megkezdi az összes szükséges könyvtár letöltését. A letöltés után megtalálhatjuk ezeket a könyvtárakat a csomópont_modulok mappába.

További részletek a jsonforms npm oldalán találhatók.

4. Adja meg a nézetet

Most, hogy megvan az összes szükséges könyvtár és függőség, definiáljunk egy HTML oldalt, amely megmutatja az űrlapot.

Az oldalunkon importálnunk kell a jsonforms.js könyvtárat és beágyazhatja az űrlapot a dedikált AngularJS irányelv használatával jsonforms:

   Bevezetés a JSONForms-ba 
Bevezetés a JSONForms-ba
 Kötött adatok: {{data}} 

Ezen irányelv paramétereként rámutatnunk kell a adat séma és a A kezelőfelület fent definiált sémája, plusz a JSON objektum amely tartalmazza a adat hogy megjelenjen.

5. Az AngularJS vezérlő

Az AngularJS alkalmazásban az irányelvhez szükséges értékeket általában egy vezérlő adja meg:

app.controller ('MyController', ['$ hatókör', 'Séma', 'UISchema', függvény ($ hatókör, Séma, UISchema) {$ hatókör.schema = Séma; $ hatókör.uiSchema = UISzéma; $ hatókör.data = {"id": 1, "name": "Lámpaernyő", "price": 1.85};}]);

6. Az alkalmazás modul

Ezután be kell adnunk a jsonforms az alkalmazás modulunkban:

var app = szögletes.modul ('jsonforms-intro', ['jsonforms']);

7. Az űrlap megjelenítése

Ha megnyitjuk a fent meghatározott html oldalt a böngészővel, láthatjuk az első JSONForm-ot:

8. Következtetés

Ebben a cikkben láttuk, hogyan kell használni a JSONForms könyvtárat egy felhasználói felület űrlap létrehozásához. Csatolás a adat séma és egy UI séma feleslegessé teszi HTML sablonok és Javascript írását az adatok kézi kötéséhez.

A fenti példa a GitHub projektben található.