O components.json é um arquivo que possui uma estrutura 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

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 o tipo é web ou mobile (Figura 2.1).

• Componente mobile: src/main/mobileapp/www/node_modules/cronapp-framework-mobile-js/components/
• Componente web: src/main/webapp/node_modules/cronapp-framework-js/components/

Figura 2.1 - Arquivos JSON de cada componente padrão do Cronapp, sendo web à direita e mobile à esquerda

O Cronapp permite criar componentes visuais e e para cada novo componente, são criados os arquivos *.template.html 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 a todos.

Figura 2. 3 - Arquivo do componente visual Botão

Principais propriedades

São aquelas encontradas na maioria dos componentes.

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

Outras propriedades

A utilização dessas propriedades varia de acordo com o componente.

attributesForPreview

Lista de propriedades customizadas para os atributos CSS dos componentes. Veja a tabela de opções dessa propriedade após o código de exemplo.

  "attributesForPreview": [
    {
      "name": "xattr-position",
      "type": "btngroup",
      "target": "class",
      "values": [
        {
          "key": "text-left",
          "value": "Standard",
          "icon": "mdi mdi-ray-start"
        }
      ]
    }
  ]

attributesForPreview

Lista de propriedades customizadas para os atributos CSS dos componentes.

values

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

childrenProperties

Lista das opções da propriedade childrenProperties.

• true: ativa a opção;
• false: desativa a opção e é o valor default quando a propriedade não é informada.

• true: define como obrigatória.
• false: define como não obrigatória.

javascript:function() { /* função JavaScript */ }

Ex.: "javascript:function() { return arguments[0].replace('vars.',''); }"

javascript:function() { /* função JavaScript */ }

Ex.: "javascript:function() { var result = arguments[0]; if (result.indexOf('.') == -1 && result.trim().length > 0 ) { result = 'vars.'+result; } return result; }"

• type: campo seletor input (ex: text, number, date, email, money, telephone, time, url, etc).

• text: texto normal.

• event: direciona para a aba de "eventos".

• logic: booleano (sim ou não).

• content: direciona para a aba de "conteúdo".

• icon: abre o modal de adicionar ícone.

• pageDatasource: campo seletor de fonte de dados (para funcionar é necessário inserir uma fonte de dados).

• allDatasourceFields: captura as variáveis da fonte de dados (para funcionar é necessário inserir uma fonte de dados).

• projectResource: abre um modal que busca os arquivos da extensão sinalizado no "resourceType", como imagem.

Define qual a extensão de arquivo será utilizada.

handleRules

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

• true: ativa o handleRules do componente.
• false: desativa o handleRules do componente.

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.

• true: possibilita ordenação dos itens e é o valor default a propriedade não é informada;
• false: impede a ordenação dos itens.

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.

Ex.: [{"activeSelector": ".table-header th.active", "activeClass": "active", "sourceHTML": "<th class=\"k-header\" data-container=\"true\" rowspan=\"\" colspan=\"\"><div data-container=\"true\" data-replace=\"true\">New Title</div></th>", "targetSelector": ".table-header"}]

Responsável por criar propriedades distintas entre subcomponentes dentro de um componente. Veja a tabela de opções dessa propriedade após o código de exemplo.

  "childrenProperties": [
    {
      "name": "options",
      "selector": "cron-dynamic-menu",
      "displayName_pt_BR": "Configuração",
      "displayName_en_US": "Configuration",
      "type": "text",
      "order": 1,
      "mandatory": true
    }
  ]

handleRules

Define características para algumas propriedades e regras para elementos do componente. Veja abaixo a tabela de opções dessa propriedade.

"handleRules": {
    "canOrder": true,
    "canActivate": true,
    "canIncrement": true,
    "rules": [
      {
        "activeSelector": ".table-header th.active",
        "activeClass": "active",
        "sourceHTML": "<th class=\"k-header\" data-container=\"true\" rowspan=\"\" colspan=\"\"><div data-container=\"true\" data-replace=\"true\">New Title</div></th>",
        "targetSelector": ".table-header"
      }
    ]
  }

rules

Lista de as regras de controle do handleRules.

properties

Responsável por criar propriedades e eventos que afetam todo o componente (incluindo os subcomponentes). Veja abaixo a tabela de opções dessa propriedade.

    "properties": {
        "xattr-fullsize": {
            "displayName_en_US": "Width",
            "displayName_pt_BR": "Largura"
        },
        "xattr-theme": {
            "displayName_en_US": "Theme",
            "displayName_pt_BR": "Tema"
        },
        "xattr-disabled": {
            "displayName_en_US": "Disabled",
            "displayName_pt_BR": "Desabilitado"
        },
        "class": {
            "order": 9999
        },
        "id": {
            "order": 5
        }
    },

rules

Lista de as regras de controle do handleRules.

Ex.: "panel-collapse.collapse"

properties

Define as propriedades e evento do controle.

Acesse a documentação Eventos dos componentes visuais para mais detalhes sobre cada evento.

Características

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