TOC

Введение в JSONForms

Введение в JSONForms

1. обзор

Вfirst article этой серии мы представили концепциюJSON Schema и то, как ее использовать для проверки формата и структурыJSON Object.

В этой статье мы увидим, как создавать веб-интерфейсы на основе форм, используя возможностиJSON иJSON Schema..

Для достижения нашей цели мы будем использовать фреймворк под названиемJSON Forms. Это устраняет необходимость писать шаблоны HTML и Javascript для привязки данных вручную для создания настраиваемых форм.

Затем формы обрабатываются с помощью инфраструктуры пользовательского интерфейса, в настоящее время основанной на AngularJS.

2. Компоненты формы JSON

Для создания нашей формы нам нужно определить два основных компонента.

Первый компонентdata schema определяет базовые данные, которые будут отображаться в пользовательском интерфейсе (типы объектов и их свойства).

В этом случае мы можем использоватьJSON Schema, которые мы использовали вprevious article для описания объекта данных «Продукт»: 

{
    "$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 Object показывает три свойства с именамиid,name иprice. Каждое из них будет представлять собой поле формы, помеченное своим именем.

Также каждое свойство имеет некоторые атрибуты. Атрибутtype будет переведен платформой какtype поля ввода.

Атрибутыminimum,exclusiveMinimum специально для свойства price сообщают платформе, что во время проверки формы значение этого поля ввода должно быть больше 0.

Наконец, свойствоrequired,which includes все свойстваpreviously defined указывает, что все поля формы должны быть заполнены.

Второй компонент -UI schema описывает макет формы и какие свойстваdata 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 определяет, какое свойство схемы данных будет отображаться в виде поля формы. Этоobtained by defining элементControl в массивеelements.

Наконец,Controls напрямую ссылается наdata schema через свойствоscope,, так что спецификацию свойств данных, таких как их тип данных, не нужно реплицировать.

3. Используйте формы JSON в AngularJS

Созданныеdata schema иUI schema интерпретируются во время выполнения, то есть когдаwhen the web page that contains the form is displayed on the browser,, и транслируются в пользовательский интерфейс на основе AngularJS, который уже полностью функционален, включая привязку данных, проверку и т. Д.

Теперь давайте посмотрим, как встраивать формы JSON в веб-приложение на основе AngularJS.

3.1. Настроить проект

В качестве предварительного условия для установки нашего проекта нам нужно установитьnode.js на нашем компьютере. Если вы еще не установили его, следуйте инструкциям наofficial site.

node.js также поставляется сnpm, который представляет собой диспетчер пакетов, используемый для установки библиотеки JSON Forms и других необходимых зависимостей.

[#result_box .short_text] # После установки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"
     }
}

[#result_box .short_text] # Теперь мы можем ввести командуnpm install. Это запустит загрузку всех необходимых библиотек. После загрузки мы можем найти эти библиотеки в папкеnode_modules. #

Для более подробной информации вы можете обратиться кjsonforms npm’s page.

4. Определить вид

Now that we have all the needed libraries and dependencies, давайте определим html-страницу, отображающую форму.

На нашей странице нам нужно импортировать библиотекуjsonforms.js и встроить форму с помощью специальной директивы AngularJSjsonforms: 




    Introduction to JSONForms
    
    
    
    


    

        

            

                

                    

                        
Introduction
                          to JSONForms

                    

                    

                        Bound data: {{data}}

В качестве параметров этой директивы нам нужно указать наdata schema and,UI schema defined above, плюсJSON object, который будет содержать отображаемыйdata.

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. Заключение

В этой статьеwe have seen рассказывается, как использовать библиотекуJSONForms для создания формы пользовательского интерфейса. Объединениеdata schema иUI schema устраняет необходимость писать шаблоны HTML и Javascript для привязки данных вручную.

Пример выше можно найти вGitHub project.

Related