O components.json é um arquivo que possui uma estrutura do tipo JSON, é usado pelo editor HTML (Figura 1) para exibir informações e configurações de suas propriedades, eventos e responsividades de cada controle (Figura 2). É através dele que conseguimos adicionar mais recursos a um controle, permitindo sua customização sem a necessidade de configurá-lo via código.

Dentre alguns exemplos da necessidade do components.json no CronApp, estão: Alteração do nome e ícone exibido do controle no Editor HTML, personalização de elementos e atributos no template de forma visual, internacionalização do controle, inclusão de eventos a elementos do controle e outros.

Próximas atualizações dessa página

Atributos obrigatórios com abertura automática de configuração de componentes

Figura 1 - Editor HTML no CronApp

Figura 2 - Abas propriedades, eventos e responsividade também são influenciadas pelo components.json

Estrutura

A estrutura do components.json é baseada em JSON (JavaScript Object Notation - Notação de Objetos JavaScript) que possui uma formatação simples e de fácil leitura e escrita, tanto para computadores quando para humanos. Foi criado para facilitar a comunicação entre sistemas, independente da linguagem usada.

Os controles padrões do CronApp utilizam o mesmo arquivo "components.json", que fica em diretórios diferentes dependendo do tipo do projeto:

Projetos web: Código Fonte → Principal → Códigos Fonte Cliente → plugins → cronapp-framework-js → components
Projetos mobile: Código Fonte → Principal → mobileapp → www → plugins → cronapp-framework-mobile-js → components

O CronApp ainda nos permite criar novos controles personalizados e para cada novo controle, além do arquivo *.template.html também é criado o arquivo *.components.json que é exclusivo. Ambos arquivos devem ficar no mesmo diretório (Figura 3).

Figura 3 - Arquivos do novo controle criado pelo usuário

Em sua estrutura, o components.json possui um lista chamada "components" que possui vários objetos representando cada um dos controle padrões do editor HTML, diferente do arquivo gerado na criação do componente customizado (*.components.json) que só possui apenas um elemento nesta lista. Além disso, os documentos possuem o elemento "name" em sua estrutura principal que varia da seguinte forma (Figuras 4 e 5):

Projeto web: crono-components;
Projeto mobile: cronos-components-mobile-phonegap e
Projeto web ou mobile criado pelo usuário: custom-cronos-components

Figura 4 e 5 - Diferença entre a estrutura do components.json gerada na criação do novo componente (esquerda) e o padrão para um projeto web (direita)

Âncora

	ValorObjetoLista
	ValorObjetoLista

Uma JSON normalmente é constituído de três estruturas:

Valor: elemento mais simples, considerado a folha da árvore. Possui apenas uma chave e um valor. Ex: "name: Nome da propriedade", onde "nome" é a chave e "Nome da propriedade" é o seu valor.
Objeto: Um objeto pode possuir valores e também outros objetos em seu interior.
Lista: Possui uma lista de objetos em seu interior.

Em uma lista existem 1 ou mais objetos que possuem a mesma estrutura, enquanto que um objeto pode possuir valores e outros objetos e essa estrutura não se repete.

Elementos do components.json

Item	Tipo	Objetivo	Possíveis valores / exemplo
name	valor	Define se é um arquivo responsável pelo controles padrões do CronApp ou um controle customizado pelo usuário.	cronos-components: Nome do arquivo responsável por todos os controles do CronApp web. cronos-components-mobile-phonegap: Nome do arquivo responsável por todos os controles do CronApp mobile. custom-cronos-components: Nome do arquivo responsável pelo novo controle criado pelo usuário no CronApp.
version	valor	Valor com a versão do arquivo.	Ex.: 1.0.0
components	lista	Lista dos objetos responsável por definir os controles e suas propriedades.	-

Item	Tipo	Objetivo	Possíveis valores / exemplo
attributesForPreview	lista	Lista de propriedades customizadas nos atributos CSS dos componentes	-
autoWrapper	valor	Adiciona uma tag <div> em torno do template do componente, facilitando a modificação da diagramação.	true: Permite tratamento diferenciado entre o componente e a <div>. false: Não permite tratamento diferenciado entre o componente e a <div>. Valor default quando não informada essa propriedade.
childrenProperties	lista	Lista as diretivas Angular, elementos HTML ou exclusivas do CronApp para permitir sua edição nas propriedades dos subcomponentes (filhos) do controle do Editor HTML.	Ex.: O controle "Caixa de checagem" possuem 2 subcomponentes: rótulo e caixa. O childrenProperties é responsável por possibilitar a criação de propriedades distintas para cada um desses subcomponentes.
class	valor	Define o ícone do controle que aparecerá no editor HTML. Obs.: Diferente da aplicação que permite o uso dos ícones Glyphicons, font awesome icon e Material Design Icons; os botões dos componentes no editor HTML permite apenas o Material Design Icons.	Ex.: "adjust-icon mdi mdi-star"
classForPreview	objeto	Adiciona uma classe para ser visualizada somente no editor HTML, no modo de edição. Não irá aparecer na execução do projeto.	-
dependences	objeto	Possui uma lista (editor) com os endereços de arquivos CSS específica para esse controle.	-
forcedGroup	valor	Força o agrupamento dos componentes HTML no template, permitindo a seleção de todos os subcomponente de uma só vez.	true: Agrupa todos os subcomponentes, necessário realizar o desbloqueio para poder selecionar cada subcomponente. false: Permite a seleção de cada subcomponente sem a necessidade do desbloqueio. Valor default quando não informada essa propriedade.
groupedChildren	lista	Lista os elementos HTML que compõem o template, possibilitando selecioná-los e personaliza-los no editor HTML. Essa seleção pode ser feita utilizando as subabas dentro das abas “Propriedades” e “Eventos” no Editor HTML ou selecionando o componente na tela, abrindo o ícone do cadeado e selecionando novamente os elementos internos do componente.	Para cada elemento do array, temos: text_pt_BR: Internacionalização em português do Brasil para o rótulo da subaba que aparecerá em “Propriedades” e “Eventos” no Editor HTML referente ao elemento HTML selecionado. text_en_US: Internacionalização em inglês do EUA para o rótulo da subaba que aparecerá em “Propriedades” e “Eventos” no Editor HTML referente ao elemento HTML selecionado. selector: Informa qual elemento HTML será selecionado. Se o template possuir dois elementos HTML iguais, é possível utilizar o “selector” do CSS para referenciá-lo. Por exemplo, para selecionar o segundo elemento span do template: “span:nth-child(2)”.
handleRules	objeto	Define características para algumas propriedades e regras para elementos do componente.	-
mask-placeholder	objeto	Informa qual componente HTML receberá o texto do campo Sugestão no editor HTML.	Possui em seu interior o valor "selector" onde será informado o componente HTML. Ex.: { "selector": "input" }
name	valor	Atributo id do componente HTML.	-
onDrop	valor	Abre a janela de configuração especificada quando o componente é arrastado para a área de edição da view.	Ex.: "onDrop": "openEditor"; "onDrop": "NomeAtributo"
onDoubleClick	valor	Abre a janela de configuração especificada quando o componente recebe um duplo click na área de edição da view.	Ex.: "onDoubleClick":"openEditor"; "onDoubleClick": "NomeAtributo"
pallete	valor	Oculta ou exibe o controle no editor HTML.	true: exibe o controle no editor HTML. Valor default quando não informada essa propriedade. false: oculta o controle no editor HTML.
properties	objeto	Lista as diretivas Angular, elementos HTML ou exclusivas do CronApp para permitir sua edição nas propriedades do componente no Editor HTML.	Ex.: O controle "Caixa de checagem" possuem 2 subcomponentes: rótulo e caixa. O Properties é responsável por criar propriedades que afetam todo o controle, diferentemente do childrenProperties.
rows	valor	Define o tamanho do campo em número de linhas.	Ex.: 5
template	valor	Template HTML do componente. Por este ser um arquivo json, será necessário utilizar caracteres de escape para utilizar alguns caracteres. Exemplo: “\n”e “\””	Ex.: "<i class=\"fa fa-star\"/>"
templateURL	valor	Endereço do template do componente.	-
text	valor	Nome do componente que aparecerá no editor HTML quando não houver internacionalização (propriedades: text_en_US e text_pt_BR).	Ex.: "Button"
text_en_US	valor	Internacionalização (inglês EUA) do nome do componente que aparecerá no editor HTML.	Ex.: "Button"
text_pt_BR	valor	Internacionalização (português Brasil) do nome do componente que aparecerá no editor HTML.	Ex.: "Botão"
wrapper	valor	Adiciona uma tag <div> em torno do template do componente.	true: Adiciona uma tag <div>. Valor default quando não informada essa propriedade. false: Não adiciona uma tag <div>.

Item	Tipo	Objetivo	Possíveis valores / exemplo
name	valor	Nome da propriedade que terá suas características alteradas neste objeto do attributesForPreview.	Ex.: "xattr-size"
type	valor	Define a forma que será exibida as opções da propriedade. Normalmente são utilizados o grupo de botões ou seletor de itens.	btngroup: Para exibir as propriedades em um grupo de botões alinhados. Permite a utilização de ícones nos botões. options: Para exibir as propriedades em um seletor de itens (dropdown). Permite a utilização de ícones, cores ou ambos.
target	valor	Informa o atributo ou elemento que será customizado. Normalmente utilizado para adicionar “class” ou “style”.	Ex.: "class"
values	lista	Lista das opções da propriedade.	-

Item	Tipo	Objetivo	Possíveis valores / exemplo
key	valor	Classe CSS que será adicionado no template após o usuário escolher o value.	Ex.: "display:block;"
value	valor	Nome da opção que será exibida para o usuário.	Ex.: "Block"
icon	valor	Exibe um ícone ao lado do nome da opção.	Ex.: "mdi mdi-ray-start"
color	valor	Exibe um quadrado com a cor especificada ao lado do nome da opção. Só é possível utilizar com o type “options”.	Ex.: "#fff"

Item	Tipo	Objetivo	Possíveis valores / exemplo
displayName_en_US	valor	Internacionalização (inglês EUA) do nome do campo que aparecerá no editor HTML.	Ex.: "Field"
displayName_pt_BR	valor	Internacionalização (português Brasil) do nome do campo que aparecerá no editor HTML.	Ex.: "Campo"
editExpression	valor	Exibe o ícone "Editar expressão" ao lado do nome do campo. Ao clicar é aberta uma caixa de texto para a edição da expressão ou inserção de Fonte de dados.	true: Ativa a opção. false: Desativa a opção. Valor default quando não informada essa propriedade.
mandatory	valor	Define uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.	true: Define como obrigatória. false: Propriedade não obrigatória.
name	valor	Informa o atributo do elemento HTML que será manipulado em um campo do editor HTML.	Ex.: "ng-model"
onDisplay	valor	Executa comando em JavaScript para atualizar o componente na tela sempre que uma alteração for feita.	Ex.: "javascript:function() { /* função JavaScript */ }"
onSave	valor	Executa comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.	Ex.: "javascript:function() { /* função JavaScript */ }"
selector	valor	Informa qual atributo do elemento HTML será selecionado para manipulação.	Ex.: "ui-select"
type	valor	Define a forma de como o subcomponente irá se comportar. Como permitir apenas texto, seletor ou importação de fonte de dados.	Ex.: "datasourceFieldList"

Item	Tipo	Objetivo	Possíveis valores / exemplo
canActivate	valor	Ativa ou desativa as regras.	true: Ativa o handleRules do componente. false: Desativa o handleRules do componente.
canIncrement	valor	Exibe o ícone "Adicionar" ao lado do nome do campo. Ao clicar é inserido outro item na lista. Exemplo: outra coluna em uma tabela ou outro item em uma lista de opções.	true: Insere o ícone "Adicionar". false: Oculta o ícone "Adicionar". Valor default quando não informada essa propriedade.
canOrder	valor	Define a possibilidade de ordenação dos itens.	true: Possibilita ordenação dos itens. Valor default quando não informada essa propriedade. false: Impede ordenação dos itens.
canToggle	valor	Mostra o ícone "Exibir" ao lado do nome do campo. Esse ícone recolhe ou expande os itens ou submenus desse controle no editor HTML, permitindo visualizar e selecionar seu conteúdo para personalização. Exemplo caixa de seleção ou menu.	true: Insere o ícone "Exibir". false: Oculta o ícone "Exibir". Valor default quando não informada essa propriedade.
rules	lista	Define algumas regras para alteração do template do componente a partir de determinadas ações.	-

Item	Tipo	Objetivo	Possíveis valores / exemplo
accordionTabClicked	valor	Específico do controle Acordeão, usado para acionar a ação de expandir ou recolher seus itens no editor HTML.	-
activeClass	valor	Ativa classe específica especificada.	Ex.: "in"
activeSelector	valor	Seleciona o atributo que sofrerá a alteração.	Ex.: "ul.nav-tabs li.active"
sourceHTML	valor	Define trecho do HTML que será acrecido ou retirado do template, caso a regra seja atendida.	Ex.: "<li></li>"
targetSelector	valor	Seleciona um elemento HTML ou classe CSS para sofrer a alteração,	Ex.: "div.panel-collapse.content"
toggleClass	valor	Adicionar ou retirar uma classe CSS.	Ex.: "invisible"
toggleSelector	valor	Adicionar ou retirar um elemento seletor.	Ex.: "ui-select-choices"

Item	Tipo	Objetivo	Campo
crn-datasource	objeto	Define a fonte de dados do componente.	Fonte de dados
cronapp-filter-autopost	objeto	Realiza consulta ou ação a cada letra digitada no campo.	Postagem Automática
cronapp-filter-caseinsensitive	objeto	Define se o campo diferenciará letras minúsculas e maiúsculas.	Case Insensitive
cronapp-filter-operator	objeto	Define operadores relacionais e de igualdade. (=, <, >, <= e >=)	Operador
dependent-by	objeto	Cria uma dependência do componente para a exibição de conteúdo. Exemplo: As informações sobre um usuário só irá aparecer na tela quando um dos usuários forem selecionados.	Depende de
dependent-lazy-post	objeto	Cria uma dependência do componente com a fonte de dados informada para a inserção de conteúdo. Nesse campo deve ser informado o objeto independente em relação ao campo "Dependente de postagem de campo sob demanda". Exemplo: As regras para um usuário só será submetida se existir um usuário.	Dependente de postagem sob demanda
dependent-lazy-post-field	objeto	Cria uma dependência do componente com a fonte de dados informada para a inserção de conteúdo. Nesse campo deve ser informado o objeto ou id que ficará dependente. Exemplo: As regras para um usuário só será submetida se existir um usuário.	Dependente de postagem de campo sob demanda
entity	objeto	Define qual a fonte de dados que irá alimentar o componente.	Origem de dados
href	objeto	Define uma URL para gerar um link.	Referência
keys	objeto	Define quais parâmetros serão usados como chave na fonte de dados.	Chaves
mandatory	valor	Define uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.	true: Define como obrigatória. false: Propriedade não obrigatória.
mask	objeto	Lista pré definida de mascarás. Exemplo: CEP, CPF, data, telefone entre outros.	Máscara
mask-placeholder	objeto	Possibilita adição de novas mascarás customizadas.	Sugestão de Máscara
ng-click	objeto	Executa evento ao clicar (AngularJS).	Ao clicar
on-after-create	objeto	Executa um evento após a criação algo.	Após criar
on-after-delete	objeto	Executa evento após ação de deletar algo.	on-after-delete
on-after-fill	objeto	Executa evento após preenchimento de um campo.	Após preencher
on-after-update	objeto	Executa evento após atualização de algo.	Após atualizar
on-before-create	objeto	Executa evento antes de criar algo.	Antes de criar
on-before-delete	objeto	Executa evento antes de deletar algo.	Antes de deletar
on-before-update	objeto	Executa evento antes de atualizar algo.	Antes de atualizar
onclick	objeto	Executa evento ao clicar no componente (JavaScript).	Ao clicar
on-error	objeto	Executa um evento quando ocorrer um erro no carregamento de algum arquivo ou mídia.	Ao errar
onmouseover	objeto	Executa evento no precionar do clique do botão (JavaScript).	Ao clicar
qr	objeto	Exclusivo para o controle QR Code.	QR Code
src	objeto	Define campo para carregamento de imagem.	Origem
target	objeto	Seleciona em qual janela será aberta o link.	Alvo
xattr-fullsize	objeto	Determina se o componente ocupará a linha inteira ou não. Suas opções padrões são "inline" ou "block"; definidas no attributesForPreview.	Largura
xattr-position	objeto	Determina em qual posição o componente ficará alinhado. Suas opções padrões são à esquerda (Standard), centro (Middle) ou direita (Right); definidas no attributesForPreview.	Posição
xattr-size	objeto	Determina o tamanho do componente na tela. Suas opções padrões são Standard, Larger (btn-lg) e Small (btn-sm); definidas no attributesForPreview.	Tamanho
xattr-theme	objeto	Determina o tema do componente. Suas opções padrões são Default, Primary, Success, Info, Warning, Danger e Link; definidas no attributesForPreview.	Tema
xattr-type	objeto	Determina o o estilo do botão. Suas opções padrões são Default, Clear (button-clear) e Outline (button-outline); definidas no attributesForPreview.	Style Type

Âncora

	TopicPropiedadesProperties
	TopicPropiedadesProperties

Elemento: características do properties

Tipo: Objeto
Descrição: Define as características das propriedades e evento do controle.

Obs: O último nível "propriedades" está entre aspas pois representa qualquer uma das properties citadas acima.

Item	Tipo	Objetivo	Possíveis valores / exemplo
displayName_en_US	valor	Internacionalização em inglês do EUA para o rótulo do campo no Editor HTML.	Ex.: "Datasource"
displayName_pt_BR	valor	Internacionalização em português do Brasil para o rótulo do campo no Editor HTML.	Ex.: "Fonte de dados"
onDisplay	valor	Executa comando em JavaScript para atualizar o componente na tela sempre que essa propriedade for alterada.	Ex.: "javascript:function() { /* função JavaScript */ }"
onSave	valor	Executa comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.	Ex.: "javascript:function() { /* função JavaScript */ }"
options	lista	Define quais chaves/valores serão exibidas quando a propriedade for do tipo lista.	-
options: key	valor	Chave da opção para propriedades do tipo lista.	Ex.: "true"
options: value	valor	Valor da opção para propriedades do tipo lista.	Ex.: "Sim"
removable	valor	Exibe o ícone "Remover propriedade" ao lado do nome do campo. Ao clicar, o campo será removido dentre as propriedades ou eventos. É possível chamar novamente a propriedade através do campo "Nova propriedade".	true: Insere o ícone. false: Oculta o ícone. Valor default quando não informada essa propriedade.
resourceType	valor	Define o tipo do recurso usado na propriedade. Exemplo: "image/jpeg,image/gif,image/png" (permite imagens do tipo jpeg, gif ou png)	Ex.: "image/jpeg, image/gif, image/png"
type	valor	Define em qual aba o campo aparecerá (Propriedades ou Eventos), além da forma de como o campo irá se comportar: permitir apenas texto, seletor, abrirá uma janela para segurança, importação de fonte de dados ou eventos.	Ex.: "event"

Árvore de páginas

Versões comparadas

Versão antiga 6

Nova versão 7

Chave

Estrutura

Elementos do components.json

Elemento: (raiz)

Elemento: components

Elemento: attributesForPreview

Elemento: values do attributesForPreview

Elemento: childrenProperties

Elemento: handleRules

Elemento: rules do handleRules

Elemento: properties

Elemento: características do properties

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 6

Nova versão 7

Chave

Estrutura

Elementos do components.json

Elemento: (raiz)

Elemento: components

Elemento: attributesForPreview

Elemento: values do attributesForPreview

Elemento: childrenProperties

Elemento: handleRules

Elemento: rules do handleRules

Elemento: properties

Elemento: características do properties