1. Overview
1.概述
In the first article of this series we introduced the concept of JSON Schema and how to use it for validating the format and structure of a JSON Object.
在本系列的第一篇文章中，我们介绍了JSON Schema的概念以及如何使用它来验证JSON对象的格式和结构。
In this article we’ll see how to build form-based web UIs by leveraging the capabilities of JSON and JSON Schema.
在本文中，我们将看到如何利用JSON和JSON Schema.的功能来构建基于表单的Web UI。
To achieve our goal we’ll use a framework called JSON Forms. It eliminates the need to write HTML templates and Javascript for data binding by hand to create customizable forms.
为了实现我们的目标，我们将使用一个名为JSON表单的框架。它消除了手工编写HTML模板和数据绑定的Javascript的需要，以创建可定制的表单。
Forms are then rendered with a UI framework, currently is based on AngularJS.
然后用一个UI框架渲染表单，目前是基于AngularJS的。
2. Components of a JSON Form
2.JSON表格的组成部分
To create our form we need to define two main components.
为了创建我们的表单，我们需要定义两个主要组件。
The first component is the data schema defines the underlying data to be shown in the UI (object types and their properties).
第一个组件是数据模式，定义了将在用户界面中显示的基础数据（对象类型及其属性）。
In this case we can use the JSON Schema that we used in the previous article to describe a data object “Product”:
在这种情况下，我们可以使用我们在前一篇文章中使用的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"]
}As we can see, the JSON Object shows three properties named id, name and price. Each of them will be a form field labeled by it’s name.
我们可以看到，JSON对象显示了三个属性，名为id、name和price。它们中的每一个都将是一个由它的名字标记的表单字段。
Also each property has some attributes. The type attribute will be translated by the framework as the type of the input field.
另外，每个属性都有一些属性。type属性将被框架翻译为输入域的type。
The attributes minimum, exclusiveMinimum specifically for the price property tells the framework that at validation time of the form the value of that input field must be greater than 0.
价格属性的属性minimum、exclusiveMinimum专门告诉框架，在表单验证时，该输入字段的值必须大于0。
Finally, the required property, which includes all the properties previously defined specifies that all form fields are required to be filled.
最后，required属性，包括所有属性之前定义的指定所有表单域都必须被填写。
The second component is the UI schema describes the layout of the form and which properties of the data schema are to be rendered as controls:
第二个组件是UI模式，它描述了表单的布局以及数据模式的哪些属性将被呈现为控件。
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": { "$ref": "#/properties/id" }
},
{
"type": "Control",
"scope": { "$ref": "#/properties/name" }
},
{
"type": "Control",
"scope": { "$ref": "#/properties/price" }
},
]
}
The type property defines as the form fields will be ordered in the form. In this case we have chosen a horizontal fashion.
type属性定义了表单字段在表单中的排序方式。在这种情况下，我们选择了一种水平方式。
Also, the UI Schema defines which property of the data schema will be displayed as a form field. This is obtained by defining an element Control in the elements array.
另外，UI模式定义了数据模式的哪个属性将被显示为表单字段。这是通过在elements数组中定义一个Control元素而获得。
Finally, Controls directly reference the data schema by the scope property, so that the specification of data properties, such as their data type, does not have to be replicated.
最后，控件通过scope property直接引用数据模式，这样，数据属性的规范，如其数据类型，就不必再重复了。
3. Use JSON Forms in AngularJS
3.在AngularJS中使用JSON表单
The created data schema and UI schema are interpreted during runtime, which is when when the web page that contains the form is displayed on the browser, and translated into an AngularJS based UI, which is already fully functional including data binding, validation, etc.
创建的数据模式和UI模式在运行时被解释，也就是当包含表单的网页在浏览器上显示时，并翻译成基于AngularJS的UI，它已经具备了包括数据绑定、验证等全部功能。
Now, let’s see how to embed JSON Forms inside an AngularJS based web application.
现在，让我们看看如何在一个基于AngularJS的网络应用中嵌入JSON表单。
3.1. Setup the Project
3.1.设置项目
As a prerequisite to setup our project we need node.js installed in our machine. If you haven’t installed it before you can follow the instruction at the official site.
作为设置项目的先决条件，我们需要在机器上安装node.js。如果你之前没有安装它，你可以按照官方网站上的说明进行安装。
node.js also come with npm, which is the package manager used to install the JSON Forms library and the other needed dependencies.
node.js也带有npm，它是用于安装JSON表单库和其他所需依赖项的软件包管理器。
Once installed node.js and after cloning the example from GitHub, open a shell and cd into the webapp folder. This folder contains among other the package.json file. It shows some information about the project and mostly tells to npm which dependencies it must download. The package,json file will look like as the following:
一旦安装了node.js并从GitHub，打开一个 shell 并 CD 进入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"
}
}Now, we can type the npm install command. This will start the download of all the needed libraries. After the download we can find these libraries inside the node_modules folder.
现在，我们可以输入npm install命令。这将开始下载所有需要的库。下载完成后，我们可以在node_modules文件夹中找到这些库。
For more details you can refer the jsonforms npm’s page.
关于更多的细节，你可以参考jsonforms npm的页面。
4. Define the View
4.定义视图
Now that we have all the needed libraries and dependencies, let’s define an html page Showing the Form.
现在我们有了所有需要的库和依赖项，让我们定义一个显示Form的html页面。
In our page we need to import the jsonforms.js library and embed the form by using the dedicated AngularJS directive jsonforms:
在我们的页面中，我们需要导入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></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>
As parameters of this directive, we need to point to the data schema and the UI schema defined above, plus a JSON object that will contain the data to be displayed.
作为这个指令的参数，我们需要指向data schema和上面定义的UI schema，加上一个JSON对象，它将包含要显示的data。
5. The AngularJS Controller
5.AngularJS控制器
In an AngularJS application, the values needed from the directive are typically provided by a controller:
在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. The App Module
6.应用模块
Next we need to inject the jsonforms in our app module:
接下来我们需要在我们的应用模块中注入jsonforms。
var app = angular.module('jsonforms-intro', ['jsonforms']);7. Showing the Form
7.显示表格
If we open the html page defined above with the browser we can see our first JSONForm:
如果我们用浏览器打开上面定义的html页面，就可以看到我们的第一个JSONForm。
8. Conclusion
8.结论
In this article we have seen how to use the JSONForms library to build an UI Form. Coupling a data schema and an UI schema it eliminates the need to write HTML templates and Javascript for data binding by hand.
在这篇文章中，我们已经看到如何使用JSONForms库来构建一个UI表单。将一个数据模式和一个UI模式结合起来，就不需要手工编写HTML模板和Javascript来进行数据绑定。
The example above can be found in the GitHub project.
上面的例子可以在GitHub项目中找到。