«1. Обзор
В первой статье этой серии мы представили концепцию схемы JSON и то, как ее использовать для проверки формата и структуры объекта JSON.
В этой статье мы увидим, как создавать веб-интерфейсы на основе форм, используя возможности JSON и схемы JSON.
Для достижения нашей цели мы будем использовать фреймворк под названием JSON Forms. Это устраняет необходимость писать шаблоны HTML и Javascript для привязки данных вручную для создания настраиваемых форм.
Затем формы рендерятся с помощью фреймворка пользовательского интерфейса, в настоящее время основанного на AngularJS.
2. Компоненты формы JSON
Чтобы создать нашу форму, нам нужно определить два основных компонента.
Первый компонент — это схема данных, определяющая базовые данные, отображаемые в пользовательском интерфейсе (типы объектов и их свойства).
В этом случае мы можем использовать схему JSON, которую мы использовали в предыдущей статье для описания объекта данных «Продукт»:
{
"$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 и цена. Каждое из них будет полем формы, помеченным своим именем.
Также каждое свойство имеет несколько атрибутов. Атрибут type будет преобразован фреймворком как тип поля ввода.
Минимум атрибутов, exclusiveMinimum специально для свойства цены сообщает платформе, что во время проверки формы значение этого поля ввода должно быть больше 0.
Наконец, обязательное свойство, которое включает в себя все свойства ранее Определено указывает, что все поля формы должны быть заполнены.
Второй компонент — это схема пользовательского интерфейса, описывающая макет формы и свойства схемы данных, которые должны отображаться как элементы управления:
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": { "$ref": "#/properties/id" }
},
{
"type": "Control",
"scope": { "$ref": "#/properties/name" }
},
{
"type": "Control",
"scope": { "$ref": "#/properties/price" }
},
]
}
Свойство type определяет, как поля формы будут упорядочены в форме . В данном случае мы выбрали горизонтальную моду.
Кроме того, схема пользовательского интерфейса определяет, какое свойство схемы данных будет отображаться в виде поля формы. Это достигается определением элемента Control в массиве elements.
Наконец, элементы управления напрямую ссылаются на схему данных с помощью свойства области видимости, так что спецификацию свойств данных, например их тип данных, не нужно реплицировать.
3. Используйте формы JSON в AngularJS
Созданная схема данных и схема пользовательского интерфейса интерпретируются во время выполнения, когда веб-страница, содержащая форму, отображается в браузере и преобразуется в пользовательский интерфейс на основе AngularJS. который уже полностью функционален, включая привязку данных, проверку и т. д.
Теперь давайте посмотрим, как встроить формы JSON в веб-приложение на основе AngularJS.
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>
В качестве параметров этой директивы нам нужно указать схему данных и пользовательский интерфейс схему, определенную выше, а также объект 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 для создания Форма пользовательского интерфейса. Связывание схемы данных и схемы пользовательского интерфейса устраняет необходимость писать HTML-шаблоны и Javascript для привязки данных вручную.
Пример выше можно найти в проекте GitHub.