1. 概述

在本系列的第一篇文章中,我们介绍了JSON Schema的概念以及如何使用它来验证JSON对象的格式和结构。

在这篇文章中,我们将探讨如何利用JSON和JSON Schema的能力构建基于表单的Web UI界面。我们将使用名为**JSON Forms**的框架,它消除了手动编写HTML模板和数据绑定JavaScript以创建可定制表单的需要。

然后,我们将使用一个UI框架(目前基于AngularJS)渲染表单。

2. JSON表单的组件

为了创建表单,我们需要定义两个主要组件。

第一个组件是数据schema,它定义了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对象显示了三个属性:idnameprice。每个属性都会被其名称标签的表单字段所表示。

每个属性还具有一些属性。type属性将由框架转换为输入字段的类型。

对于price属性,minimumexclusiveMinimum属性分别告诉框架,在表单验证时,输入字段的值必须大于0。

最后,required属性包含了之前定义的所有属性,表示所有表单字段都必须填写。

第二个组件是UI schema,它描述了表单的布局以及哪些数据schema的属性应作为控件显示:

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

type属性定义了表单字段在表单中的排列方式。在这个例子中,我们选择了水平布局。

此外,UI schema通过在elements数组中定义一个Control元素来确定哪些数据schema的属性应作为表单字段显示。这样,就无需在控制中重复数据属性(如数据类型)的指定。

3. 在AngularJS中使用JSON Forms

在运行时,创建的数据schema和UI schema会被解释,并转化为一个基于AngularJS的UI,它已经具备了完整的功能,包括数据绑定、验证等。

现在,让我们看看如何在基于AngularJS的Web应用中嵌入JSON Forms。

3.1. 设置项目

要在项目中设置JSON Forms,首先需要在机器上安装Node.js。如果没有安装,请参考官方网站的指南。

Node.js附带了npm(Node包管理器),用于安装JSON Forms库和其他所需依赖。

安装完成后,打开终端并进入包含package.json文件的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>

此指令的参数包括上述定义的数据schema和UI schema,以及一个包含要显示数据的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了:

JSONForms

8. 总结

本文介绍了如何使用JSON Forms库构建UI表单。通过结合数据schema和UI schema,它消除了手动编写HTML模板和数据绑定JavaScript的需求。

上面的示例可以在GitHub项目中找到。


« 上一篇: Cucumber Spring集成
» 下一篇: JaCoCo 介绍