Você está vendo a versão antiga da página. Ver a versão atual.

Comparar com o atual Ver Histórico da Página

« Anterior Versão 12 Próxima »

O components.json é um arquivo que possui uma estrutura do tipo JSON e usado pelo editor de views para exibir informações e configurações de suas propriedades, eventos e responsividades de cada componente (Figura 1). É através dele que se consegue adicionar mais recursos a um componente, 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 no componente usando o editor de views;
  • 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.


Figura 1 - Editor de views mostrando as propriedades do componente selecionado


Nesta página

Estrutura do arquivo

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 quanto para humanos. Foi criado para facilitar a comunicação entre sistemas, independente da linguagem usada.

Os componentes padrões do Cronapp possuem seus próprios arquivos que terminam com a extensão components.json e seus diretórios mudam conforme o tipo de componente - ou seja, se ele é web ou mobile (Figura 2.1).

Os arquivos components.json só serão mostrados quando o Modo Avançado estiver habilitado.

  • Componente mobilesrc/main/webapp/node_modules/cronapp-framework-js/components/
  • Componente websrc/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/components/


Figura 2.1 - Arquivos JSON de cada componente padrão do Cronapp web (direita) e mobile (esquerda)


O Cronapp permite criar componentes visuais e para cada novo componente, são criados os arquivos .template.html e .components.json. Ambos arquivos devem ficar no mesmo diretório (destaque na Figura 2.2).


Figura 2.2 - Arquivos gerados ao criar componente visual

Propriedades do arquivo

As propriedades nesses arquivos mudam conforme o componente, mas existem algumas que são comuns em todos os componentes.


Figura 2.3 - Arquivo do componente visual Botão



PropriedadeObjetivoPossíveis valores / exemplos
nameAtributo id do componente HTML.-
text_en_USNome do componente que aparecerá na aba controle do editor de views quando a IDE estiver no idioma inglês (EUA).Button
text_pt_BRNome do componente que aparecerá na aba controle do editor de views quando a IDE estiver no idioma português (Brasil).Botão

class

Define o ícone do controle que aparecerá no editor de views.

OBS.: Diferente da aplicação que permite o uso dos ícones Glyphiconsfont awesome icon e Material Design Icons; os botões dos componentes no editor de views permite apenas o Material Design Icons.

adjust-icon mdi mdi-stop

templateURL

Endereço do template do componente na IDE.

src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/button.template.html

properties

Lista as diretivas Angular, elementos HTML ou exclusivas do Cronapp para permitir sua edição nas propriedades do componente no editor de views.

O controle checkbox possuem 2 subcomponentes, rótulo e caixa, e o properties é responsável por criar propriedades que afetam todo o controle

styles

Lista os elementos HTML que compõem o template, possibilitando selecioná-los e personaliza-los no editor  de views. Essa seleção pode ser feita utilizando as subabas dentro das abas Propriedades no editor de views ou selecionando o componente na tela, abrindo o ícone do cadeado e selecionando novamente os elementos internos do componente.

Para cada elemento informado na lista:

  • 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 (ex.: “span:nth-child(2)”).
  • text_pt_BR: Internacionalização em português do Brasil para o rótulo da subaba que apareceráem propriedades e eventos no editor de views 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 de views referente ao elemento HTML selecionado.

Outras propriedades que podem ser encontradas nesses arquivos, mas que podem variar de componente para componente:

PropriedadeObjetivoPossíveis valores / exemplos
attributesForPreviewLista de propriedades customizadas nos atributos CSS dos componentes -
autoWrapperAdiciona 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> e é o valor default quando a propriedade não é informada.
childrenPropertiesLista as diretivas Angular, elementos HTML ou exclusivas do Cronapp para permitir sua edição nas propriedades dos subcomponentes (filhos) do componente no editor de views.O componente checkbox possuem 2 subcomponentes, rótulo e caixa, e o childrenProperties é responsável por possibilitar a criação de propriedades distintas para cada um desses subcomponentes.
classForPreviewAdiciona uma classe para ser visualizada somente no editor de views, no modo de edição. Não irá aparecer na execução do projeto.-
dependencesPossui uma lista (editor) com os endereços de arquivos CSS específica para esse controle.-
forcedGroupForç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 e é o valor default quando a propriedade não é informada.
handleRulesDefine características para algumas propriedades e regras para elementos do componente.

-

mask-placeholder

Informa qual componente HTML receberá o texto do campo Sugestão no editor de views.

Possui em seu interior o valor "selector" onde será informado o componente HTML.

Ex.: { "selector": "input" }

onDropAbre a janela de configuração especificada quando o componente é arrastado para a área de edição da view.

Ex.: "onDrop": "openEditor";

"onDrop": "NomeAtributo"

onDoubleClickAbre 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"

palleteOculta ou exibe o controle no editor de .
  • true: exibe o controle no editor de views e é o valor default quando a propriedade não é informada.
  • false: oculta o controle no editor de views.
rowsDefine o tamanho do campo em número de linhas.5
template

Template HTML do componente. Por este ser um arquivo json, será necessário utilizar caracteres de escape para utilizar alguns caracteres.

Exemplo: “\n”e “\””

<i class=\"fa fa-star\"/>
templateURLEndereço do template do componente.-
textNome do componente que aparecerá no editor de views quando não houver internacionalização (propriedades: text_en_US e text_pt_BR).Button
wrapperAdiciona uma tag <div> em torno do template do componente.
  • true: adiciona uma tag <div> e é o valor default quando a propriedade não é informada.
  • false: não adiciona uma tag <div>.

attributesForPreview

Lista de propriedades customizadas para os atributos CSS dos componentes.


PropriedadeObjetivoPossíveis valores / exemplos
nameNome da propriedade que terá suas características alteradas neste objeto do attributesForPreview.xattr-size
typeDefine 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.
targetInforma o atributo ou elemento que será customizado. Normalmente utilizado para adicionar class ou style.class
valuesLista das opções da propriedade.

values

Lista das opções da propriedade values do attributesForPreview.


PropriedadeObjetivoPossíveis valores / exemplos
keyClasse CSS que será adicionado no template após o usuário escolher o value.display:block;
valueNome da opção que será exibida para o usuário.block
iconDefine o ícone que será exibido ao lado do nome da opção.mdi mdi-ray-start
color

Exibe um quadrado com a cor especificada ao lado do nome da opção.

OBS.: Só é possível utilizar com o type options.

#fff

childrenProperties

Lista das opções da propriedade childrenProperties.


PropriedadeObjetivoPossíveis valores / exemplos
displayName_en_USNome do campo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma inglês (EUA).Field
displayName_pt_BRNome do campo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma português (BR).Campo
editExpressionExibe o ícone Editar expressão ao lado do nome do campo e 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 e é o valor default quando a propriedade não é informada.
mandatoryDefine uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.
  • true: define como obrigatória.
  • false: define como não obrigatória.
nameInforma o atributo do elemento HTML que será manipulado em um campo do editor de views.ng-model
onDisplayExecuta comando em JavaScript para atualizar o componente na tela sempre que uma alteração for feita.javascript:function() { /* função JavaScript */ }
onSaveExecuta comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.javascript:function() { /* função JavaScript */ }
selectorInforma qual atributo do elemento HTML será selecionado para manipulação.ui-select
typeDefine a forma de como o subcomponente irá se comportar como permitir apenas texto, seletor ou importação de fonte de dados.datasourceFieldList

handleRules

Define características para algumas propriedades e regras para elementos do componente.


PropriedadeObjetivoPossíveis valores / exemplos
canActivateAtiva ou desativa as regras.
  • true: ativa o handleRules do componente.
  • false: desativa o handleRules do componente.
canIncrement

Exibe o ícone adicionar ao lado do nome do campo e 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 e é o valor default quando a propriedade não é informada.
canOrderDefine a possibilidade de ordenação dos itens.
  • true: possibilita ordenação dos itens e é o valor default a propriedade não é informada;
  • false: impede a ordenação dos itens.
canToggle

Mostra o ícone exibir ao lado do nome do campo e esse ícone recolhe ou expande os itens ou submenus desse controle no editor de views, 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 e é o valor default a propriedade não é informada.
rulesDefine algumas regras para alteração do template do componente a partir de determinadas ações.-

rules

Lista de as regras de controle do handleRules.


PropriedadeObjetivoPossíveis valores / exemplos
accordionTabClickedEspecífico do componente acordeão, usado para acionar a ação de expandir ou recolher seus itens.-
activeClassAtiva uma classe específica apontada anteriormente.in
activeSelectorSeleciona o atributo que sofrerá a alteração.ul.nav-tabs li.active
sourceHTMLDefine trecho do HTML que será acréscido ou retirado do template, caso a regra seja atendida.<li></li>
targetSelectorSeleciona um elemento HTML ou classe CSS para sofrer a alteração,div.panel-collapse.content
toggleClassAdicionar ou retirar uma classe CSS.invisible
toggleSelectorAdicionar ou retirar um elemento seletor.ui-select-choices

properties

Define as propriedades e evento do controle.


PropriedadeObjetivoCampo no editor de views
crn-datasourceDefine a fonte de dados do componente.Fonte de dados
cronapp-filter-autopostRealiza consulta ou ação a cada letra digitada no campo.Postagem Automática
cronapp-filter-caseinsensitiveDefine se o campo diferenciará letras minúsculas e maiúsculas.Case Insensitive
cronapp-filter-operatorDefine operadores relacionais e de igualdade. (=, <, >, <= e >=)Operador
dependent-by

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 for selecionado.

Depende de
dependent-lazy-post

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

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
entityDefine qual a fonte de dados que irá alimentar o componente.Origem de dados
hrefDefine uma URL para gerar um link.Referência
keysDefine quais parâmetros serão usados como chave na fonte de dados.Chaves
mandatoryDefine uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.
  • true: define como obrigatória.
  • false: define como não obrigatória.
mask

Lista pré-definida de mascarás.

Exemplo: CEP, CPF, data, telefone etc.

Máscara
mask-placeholderPossibilita adição de novas máscaras customizadas.Sugestão de máscara
ng-clickExecuta evento ao clicar (AngularJS).Ao clicar
on-after-createExecuta um evento após a criação algo.Após criar
on-after-deleteExecuta evento após ação de deletar algo.on-after-delete
on-after-fillExecuta evento após preenchimento de um campo.Após preencher
on-after-updateExecuta evento após atualização de algo.Após atualizar
on-before-createExecuta evento antes de criar algo.Antes de criar
on-before-deleteExecuta evento antes de deletar algo.Antes de deletar
on-before-update

Executa evento antes de atualizar algo.

Antes de atualizar
onclickExecuta evento ao clicar no componente (JavaScript).Ao clicar
on-errorExecuta um evento quando ocorrer um erro no carregamento de algum arquivo ou mídia.Ao errar
onmouseover

Executa evento no precionar do clique do botão (JavaScript).

Ao clicar
qrExclusivo para o controle QR Code.QR Code
srcDefine campo para carregamento de imagem.Origem
targetSeleciona em qual janela será aberta o link.Alvo
xattr-fullsizeDetermina se o componente ocupará a linha inteira ou não. Suas opções padrões são inline ou block e definidas no attributesForPreview.Largura
xattr-positionDetermina em qual posição o componente ficará alinhado. Suas opções padrões são à esquerda (standard), centro (middle) ou direita (right) e definidas no attributesForPreview.Posição
xattr-sizeDetermina o tamanho do componente na tela. Suas opções padrões são standard, larger (btn-lg) e small (btn-sm) e definidas no attributesForPreview.Tamanho
xattr-themeDetermina o tema do componente. Suas opções padrões são default, primary, success, info, warning, danger e link e definidas no attributesForPreview.Tema
xattr-typeDetermina o o estilo do botão. Suas opções padrões são default, clear (button-clear) e outline (button-outline) e definidas no attributesForPreview.Style Type

Características

Define as características das propriedades e evento do controle e representa qualquer uma das propriedades informadas na tabela de properties.


PropriedadeObjetivoPossíveis valores / exemplos
displayName_en_USNome do rótulo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma inglês (EUA).Datasource
displayName_pt_BRNome do rótulo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma português (BR).Fonte de dados
onDisplayExecuta comando em JavaScript para atualizar o componente na tela sempre que essa propriedade for alterada.javascript:function() { /* função JavaScript */ }
onSaveExecuta comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.javascript:function() { /* função JavaScript */ }
optionsDefine quais chaves/valores serão exibidas quando a propriedade for do tipo lista.-
options: keyChave da opção para propriedades do tipo lista.true
options: valueValor da opção para propriedades do tipo lista.Sim
removable

Exibe o ícone remover propriedade ao lado do nome do campo e ao clicar, o campo será removido dentre as propriedades ou eventos.

OBS.: É possível chamar novamente a propriedade através do campo nova propriedade.

  • true: insere o ícone;
  • false: oculta o ícone e é o valor default a propriedade não é informada.
resourceType

Define o tipo do recurso usado na propriedade.

Exemplo: "image/jpeg,image/gif,image/png" (permite imagens do tipo jpeg, gif ou png)

image/jpeg, image/gif, image/png
typeDefine 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.event
  • Sem rótulos