JSONForms 簡介

1. 概述

在本文檔系列的第一篇文章中，我們介紹了 JSON Schema 的概念及其如何用於驗證 JSON 對象 的格式和結構。

在本篇文章中，我們將學習如何通過利用 JSON 和 JSON Schema 的能力來構建基於表單的 Web UIs。

為了實現我們的目標，我們將使用一個名為 JSON Forms 的框架。它通過手動編寫 HTML 模板和 JavaScript 進行數據綁定，從而消除了創建可定製表單的需求。

表單隨後使用基於 AngularJS 的 UI 框架進行渲染。

2. JSON 表單的組成部分

為了創建我們的表單，我們需要定義兩個主要組件。

第一個組件是 數據模式

它定義了在 UI 中顯示的底層數據（對象類型及其屬性）。

在本例中，我們可以使用我們在上一篇文章中使用的 JSON Schema 來描述一個數據對象“Product”：

{
    "$schema": "http://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"]
}

如我們所見，JSON 對象 顯示了三個名為 id、name 和 price 的屬性。它們各自將被標記為對應名稱的表單字段。

此外，每個屬性都具有一些屬性。 type 屬性將由框架翻譯為輸入字段的 type。

屬性 minimum、exclusiveMinimum 專門用於 price 屬性，告訴框架在表單驗證時，該輸入字段的值必須大於 0。

最後，required 屬性，包括所有之前定義的屬性，指定所有表單字段都必須填寫。

第二個組件是 UI 模式，描述了表單的佈局以及 數據模式 的哪些屬性將被渲染為控件：

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

類型屬性定義了表單中表單字段的排列方式。在本例中，我們選擇了水平排列。

此外，UI 模式定義了數據模式的哪個屬性將顯示為表單字段。這通過在元素數組中定義控件來實現。

最後，控件直接引用數據模式，通過作用域屬性，從而避免了對數據屬性（如數據類型）的重複指定。

3. 在 AngularJS 中使用 JSON 表單

創建的 數據模式 和 UI 模式 在運行時進行解釋，這發生在網頁包含表單時，該網頁在瀏覽器上顯示，並被翻譯成基於 AngularJS 的 UI，該 UI 已經完全功能，包括數據綁定、驗證等。

現在，讓我們看看如何在 AngularJS 應用程序中嵌入 JSON 表單。

3.1. 設置項目

為了設置我們的項目，我們需要在我們的機器上安裝 node.js。如果您之前沒有安裝它，請按照官方網站的説明進行操作。

node.js 附帶了 npm，這是一個用於安裝 JSON Forms 庫和其他所需依賴項的包管理器。

安裝了 node.js 之後，請從 GitHub 克隆示例，然後打開終端並進入 webapp 文件夾。此文件夾包含，其中包括 package.json 文件。它顯示了關於項目的某些信息，並且主要告訴 npm 必須下載哪些依賴項。 package.json 文件將如下所示：

{
    "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"
     }
}

現在，我們可以輸入 npm install 命令。這將啓動所需所有庫的下載。下載完成後，我們可以在 node_modules 文件夾中找到這些庫。

欲瞭解更多詳情，請參閲 jsonforms npm 頁面。

4. 定義視圖

現在我們已經獲取了所有需要的庫和依賴項，

讓我們定義一個顯示錶單的 HTML 頁面。

在我們的頁面中，我們需要導入 jsonforms.js 庫，並使用專門的 AngularJS 指令 jsonforms 嵌入表單。

<!DOCTYPE html>
<html ng-app="jsonforms-intro">
<head>
    <title>Introduction to JSONForms</title>
    <script src="node_modules/jsonforms/dist/jsonforms.js" 
      type="text/javascript"></script>
    <script src="js/app.js" type="text/javascript"></script>
    <script src="js/schema.js" type="text/javascript"></script>
    <script src="js/ui-schema.js" type="text/javascript"></script>
</head>
<body>
    <div class="container" ng-controller="MyController">
        <div class="row" id="demo">
            <div class="col-sm-12">
                <div class="panel-primary panel-default">
                    <div class="panel-heading">
                        <h3 class="panel-title"><strong>Introduction 
                          to JSONForms</strong></h3>
                    </div>
                    <div class="panel-body jsf">
                        Bound data: {{data}}
                        <jsonforms schema="schema" 
                          ui-schema="uiSchema" data="data"/>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

作為本指令的參數，我們需要指定 數據模式和 上文定義的 UI 模式，以及一個 JSON 對象，該對象將包含要顯示的數據。

5. AngularJS 控制器

在 AngularJS 應用中，指令所需的值通常由控制器提供：

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. 應用模塊

接下來，我們需要將 jsonforms 注入到我們的應用模塊中：

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

7. 顯示錶單

如果我們在瀏覽器中打開上述定義的 HTML 頁面，我們可以看到我們的第一個 JSONForm。

8. 結論

在本文中，我們看到了如何使用 JSONForms 庫構建 UI 表單。通過將 數據模式 和 UI 模式 耦合起來，消除了手動編寫 HTML 模板和 JavaScript 進行數據綁定所需要的麻煩。

知識庫 / JSON RSS 訂閱