Introdução ao JSONForms
1. Visão geral
Emfirst article desta série, introduzimos o conceito deJSON Schema e como usá-lo para validar o formato e a estrutura de aJSON Object.
Neste artigo, veremos como construir interfaces de usuário da web baseadas em formulários, aproveitando os recursos deJSONeJSON Schema.
Para atingir nosso objetivo, usaremos uma estrutura chamadaJSON Forms. Elimina a necessidade de escrever modelos HTML e Javascript para ligação de dados manualmente, para criar formulários personalizáveis.
Os formulários são renderizados com uma estrutura de interface do usuário, atualmente baseada no AngularJS.
2. Componentes de um formulário JSON
Para criar nosso formulário, precisamos definir dois componentes principais.
O primeiro componente é odata schema define os dados subjacentes a serem mostrados na IU (tipos de objeto e suas propriedades).
Neste caso, podemos usar oJSON Schema que usamos emprevious article para descrever um objeto de dados “Produto”:
{
"$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"]
}Como podemos ver,JSON Object mostra três propriedades chamadasid,nameeprice. Cada um deles será um campo de formulário rotulado por seu nome.
Além disso, cada propriedade possui alguns atributos. O atributotype será traduzido pela estrutura comotype do campo de entrada.
Os atributosminimum,exclusiveMinimum especificamente para a propriedade de preço informam ao framework que, no momento da validação do formulário, o valor desse campo de entrada deve ser maior que 0.
Finalmente, a propriedaderequired,which includes todas as propriedadespreviously defined especifica que todos os campos do formulário devem ser preenchidos.
O segundo componente éUI schema descreve o layout do formulário e quais propriedades dedata schema devem ser renderizadas como controles:
{
"type": "HorizontalLayout",
"elements": [
{
"type": "Control",
"scope": { "$ref": "#/properties/id" }
},
{
"type": "Control",
"scope": { "$ref": "#/properties/name" }
},
{
"type": "Control",
"scope": { "$ref": "#/properties/price" }
},
]
}A propriedadetype define como os campos do formulário serão ordenados no formulário. Neste caso, escolhemos uma moda horizontal.
Além disso, oUI Schema define qual propriedade do esquema de dados será exibida como um campo de formulário. Este éobtained by defining um elementoControl na matrizelements.
Finalmente,Controls faz referência direta adata schema pela propriedadescope, para que a especificação das propriedades dos dados, como seu tipo de dados, não precise ser replicada.
3. Use formulários JSON em AngularJS
Osdata schema eUI schema criados são interpretados durante o tempo de execução, que é quandowhen the web page that contains the form is displayed on the browser, e convertidos em uma IU baseada em AngularJS, que já está totalmente funcional, incluindo vinculação de dados, validação, etc.
Agora, vamos ver como incorporar formulários JSON em um aplicativo da web baseado em AngularJS.
3.1. Configure o projeto
Como pré-requisito para configurar nosso projeto, precisamos denode.js instalado em nossa máquina. Se você não o instalou antes, você pode seguir as instruções emofficial site.
node.js também vem comnpm, que é o gerenciador de pacotes usado para instalar a biblioteca JSON Forms e as outras dependências necessárias.
[#result_box .short_text] #Uma vez instaladonode.js e depois de clonar o exemplo deGitHub, abra um shell e cd na pastawebapp. Esta pasta contém, entre outros, o arquivopackage.json. Ele mostra algumas informações sobre o projeto e principalmente diz anpm quais dependências ele deve baixar. O arquivopackage,json terá a seguinte aparência: #
{
"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] #Agora, podemos digitar o comandonpm install. Isso iniciará o download de todas as bibliotecas necessárias. Após o download, podemos encontrar essas bibliotecas dentro da pastanode_modules. #
Para obter mais detalhes, você pode consultarjsonforms npm’s page.
4. Defina a visão
Now that we have all the needed libraries and dependencies, vamos definir uma página html mostrando o formulário.
Em nossa página, precisamos importar a bibliotecajsonforms.js e incorporar o formulário usando a diretiva dedicada AngularJSjsonforms:
Introduction to JSONForms
Introduction
to JSONForms
Bound data: {{data}}
Como parâmetros desta diretiva, precisamos apontar paradata schema andUI schema defined above, mais umJSON object que conterádata a ser exibido.
5. O Controlador AngularJS
Em um aplicativo AngularJS, os valores necessários da diretiva são normalmente fornecidos por um controlador:
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. O Módulo App
Em seguida, precisamos injetarjsonforms em nosso módulo de aplicativo:
var app = angular.module('jsonforms-intro', ['jsonforms']);7. Mostrando o formulário
Se abrirmos a página html definida acima com o navegador, podemos ver nosso primeiro JSONForm:
8. Conclusão
Neste artigowe have seen, como usar a bibliotecaJSONForms para construir um formulário de interface do usuário. Acoplar umdata schemae umUI schema elimina a necessidade de escrever modelos HTML e Javascript para vinculação de dados manualmente.
O exemplo acima pode ser encontrado emGitHub project.