Pengenalan kepada JSONForms

1. Gambaran keseluruhan

Dalam artikel pertama siri ini kami memperkenalkan konsep JSON Schema dan cara menggunakannya untuk mengesahkan format dan struktur Objek JSON .

Dalam artikel ini kita akan melihat bagaimana membina UI web berasaskan bentuk dengan memanfaatkan keupayaan JSON dan JSON Schema.

Untuk mencapai matlamat kami, kami akan menggunakan kerangka yang dipanggil JSON Forms . Ini menghilangkan keperluan untuk menulis templat HTML dan Javascript untuk mengikat data dengan tangan untuk membuat bentuk yang dapat disesuaikan.

Borang kemudian diberikan dengan kerangka UI, saat ini berdasarkan AngularJS.

2. Komponen Borang JSON

Untuk membuat borang kita perlu menentukan dua komponen utama.

Komponen pertama adalah skema data yang menentukan data asas yang akan ditunjukkan dalam UI (jenis objek dan sifatnya).

Dalam hal ini kita dapat menggunakan Skema JSON yang kita gunakan dalam artikel sebelumnya untuk menggambarkan objek data "Produk":

{ "$schema": "//json-schema.org/draft-04/schema#", "title": "Product", "description": "A product from the catalog", "type": "object", "properties": { "id": { "description": "The unique identifier for a product", "type": "integer" }, "name": { "description": "Name of the product", "type": "string" }, "price": { "type": "number", "minimum": 0, "exclusiveMinimum": true } }, "required": ["id", "name", "price"] }

Seperti yang kita lihat, Objek JSON menunjukkan tiga sifat bernama id , nama dan harga . Masing-masing dari mereka akan menjadi medan bentuk yang diberi label namanya.

Juga setiap harta mempunyai beberapa sifat. Yang jenis atribut akan diterjemahkan oleh rangka kerja sebagai jenis medan input.

Atribut minimum , eksklusifMinimum khusus untuk harta tanah memberitahu kerangka bahawa pada masa pengesahan bentuk nilai medan input itu harus lebih besar dari 0.

Akhirnya, harta benda yang diperlukan , yang merangkumi semua sifat yang ditentukan sebelumnya menentukan bahawa semua bidang borang mesti diisi.

Komponen kedua adalah skema UI yang menggambarkan tata letak bentuk dan sifat skema data yang akan diberikan sebagai kawalan:

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

Yang jenis mentakrifkan harta sebagai medan borang akan diperintahkan dalam bentuk. Dalam kes ini, kami telah memilih fesyen mendatar.

Juga, Skema UI menentukan sifat skema data yang akan ditampilkan sebagai medan borang. Ini diperoleh dengan menentukan elemen Control dalam array elemen .

Akhir sekali, Kawalan langsung rujukan skema data oleh skop harta , supaya spesifikasi hartanah data, seperti jenis data mereka, tidak perlu ditiru.

3. Gunakan Borang JSON di AngularJS

Skema data yang dibuat dan skema UI ditafsirkan semasa runtime, iaitu ketika halaman web yang berisi formulir ditampilkan pada penyemak imbas, dan diterjemahkan ke dalam UI berdasarkan AngularJS, yang sudah berfungsi sepenuhnya termasuk pengikatan data, pengesahan, dll.

Sekarang, mari kita lihat cara memasukkan Borang JSON di dalam aplikasi web berasaskan AngularJS.

3.1. Siapkan Projek

Sebagai prasyarat untuk menyiapkan projek kami, kami memerlukan node.js dipasang di mesin kami. Sekiranya anda belum memasangnya sebelum ini, anda boleh mengikuti arahan di laman web rasmi.

node.js juga dilengkapi dengan npm , yang merupakan pengurus pakej yang digunakan untuk memasang perpustakaan Borang JSON dan pergantungan lain yang diperlukan.

Setelah memasang node.js dan setelah mengklon contoh dari GitHub, buka shell dan cd ke dalam folder webapp . Folder ini mengandungi antara lain file package.json . Ini menunjukkan beberapa maklumat mengenai projek dan kebanyakan memberitahu kepada npm kebergantungan yang mesti dimuat turunnya. The pakej, json fail akan kelihatan seperti sebagai berikut:

{ "name": "jsonforms-intro", "description": "Introduction to JSONForms", "version": "0.0.1", "license": "MIT", "dependencies": { "typings": "0.6.5", "jsonforms": "0.0.19", "bootstrap": "3.3.6" } }

Sekarang, kita boleh menaip perintah pemasangan npm . Ini akan memulakan muat turun semua perpustakaan yang diperlukan. Selepas muat turun, kita dapat menemui perpustakaan ini di dalam folder node_modules .

Untuk lebih jelasnya, anda boleh merujuk halaman npm jsonforms.

4. Tentukan Pandangan

Sekarang kita mempunyai semua perpustakaan dan pergantungan yang diperlukan, mari tentukan halaman html yang Menunjukkan Borang.

Di halaman kami, kami perlu mengimport perpustakaan jsonforms.js dan memasukkan borang dengan menggunakan jsonforms arahan AngularJS khusus :

   Introduction to JSONForms 

Introduction to JSONForms

Bound data: {{data}}

Sebagai parameter arahan ini, kita perlu tuding pada skema data dan yang skema UI yang ditakrifkan di atas , ditambah dengan objek JSON yang akan mengandungi data untuk dipaparkan.

5. Pengawal AngularJS

Dalam aplikasi AngularJS, nilai yang diperlukan dari arahan biasanya diberikan oleh pengawal:

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

6. Modul Aplikasi

Seterusnya kita perlu memasukkan borang json dalam modul aplikasi kita:

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

7. Menunjukkan Borang

Sekiranya kita membuka halaman html yang dinyatakan di atas dengan penyemak imbas, kita dapat melihat JSONForm pertama kita:

8. Kesimpulannya

Dalam artikel ini kita telah melihat bagaimana menggunakan perpustakaan JSONForms untuk membina Borang UI. Menggabungkan skema data dan skema UI, ia menghilangkan keperluan untuk menulis templat HTML dan Javascript untuk mengikat data dengan tangan.

Contoh di atas boleh didapati dalam projek GitHub.