uma estrutura , é HTML (Figura 1) controle 2 conseguimos controle CronApp do controle no Editor HTML, personalização , internacionalização , inclusão

Image Removed

HTML no CronApp

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

Estrutura

A quando 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

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).

Nota
Os arquivos `components.json` só serão mostrados quando o modo avançado estiver habilitado.

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

Image Added

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

3

Image Removed 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

Image Removed

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

ÂncoraValorObjetoListaValorObjetoListaUma 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.

2.2 - Arquivos gerados ao criar componente visual

Propriedades do arquivo

As propriedades nesses arquivos mudam conforme o componente.

Image Added

Figura 3 - Arquivo do componente visual Botão

Principais propriedades

São aquelas encontradas na maioria dos componentes.

Propriedade	Objetivo	Possíveis valores
`name`	Atributo id do componente HTML.	`Ex.: "name": "crn-button",`
`text_pt_BR`	Nome do componente que aparecerá na aba controle do editor de views quando a IDE estiver no idioma português (Brasil).	`Ex.:` `"text_pt_BR": "Botão",`
`text_en_US`	Nome do componente que aparecerá na aba controle do editor de views quando a IDE estiver no idioma inglês (EUA).	`Ex.: "text_en_US": "Button",`
`class`	Define o ícone do controle que aparecerá no editor de views. 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 de views permite apenas o Material Design Icons.	`Ex.: "class": "adjust-icon mdi mdi-stop",`
`templateURL`	Endereço do template do componente na IDE.	`Ex.: "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/button.template.html",`
`properties`	Lista as diretivas Angular, elementos HTML ou propriedades do Cronapp para permitir sua edição nas propriedades do componente no editor de views.	Consulte o tópico `properties`.
`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; `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. `Ex.: "styles": [{ "selector": "div#{id} button", "text_pt_BR": "Plano de fundo do botão", "text_en_US": "Button background" }],`
`description` `description_pt_BR` `description_en_US`	Define o tooltip que será exibido quando o cursor do mouse estiver posicionado sobre o botão do componente visual na paleta de controles do Editor de views. É possível definir um texto para cada uma das línguas disponíveis (português ou inglês) ou usar um valor genérico que será exibido independente da língua.	É possível utilizar uma opção ou todas. `description`: valor padrão, será utilizado para definir o valor para o idioma português (pt_BR) e inglês (en_US), caso não possua; `description_en_US`: valor usado quando a IDE estiver com o idioma em inglês; `description_pt_BR`: valor usado quando a IDE estiver com o idioma em português. Essa opção é desnecessária ao utilizar a opção `description`. `Ex.:`"description": "Exibição de gráfico com valores da fonte de dados", "description_en_US": "Graph display with data source values",
`category` `category_pt_BR` `category_en_US`	Define quais categorias da paleta de controle serão exibidos o botão do componente visual. Não é obrigado que um componente esteja associado a uma categoria, mas caso isso ocorra, ele será listado apenas na categoria "Todos". Existem algumas categorias padronizadas do Cronapp (lista abaixo), porém é possível criar uma nova categoria apenas informando o novo nome na lista. Valores padrão: INPUTS: Controles de entrada de dados, en_US: Inputs; pt_BR: Entradas BUTTONS: Controles com botões, en_US: Buttons; pt_BR: Botões PLUGINS: Controles proveniente de plugins, en_US: Plugins pt_BR: Plugins LAYOUTS: Controles que constam layout. en_US: Layouts pt_BR: Layouts FORMS: Controles que formam formulários. en_US: Forms pt_BR: Formulários GRIDS: Grades, listas e Tabelas. en_US: Grids and Tables pt_BR: Grades e Tabelas LISTS: Controles com listas. en_US: Lists pt_BR: Listas COMBOS: Comboxes fixos e dinâmicos. en_US: Combos pt_BR: Combos TEXTS: Textos. en_US: Texts pt_BR: Textos	É possível utilizar uma opção ou todas. `category`: lista padrão, será utilizado para informar a categoria nos idiomas português (pt_BR) e inglês (en_US), caso não possua; `category_en_US`: lista usada quando a IDE estiver com o idioma em inglês; `category_pt_BR`: lista usada quando a IDE estiver com o idioma em português. Essa opção é desnecessária ao utilizar a opção `description`. `Ex.: "category": [ "BUTTONS", "FORMS", "Minha nova categoria" ],` `"category_en_US": [ "BUTTONS", "FORMS", "My new category" ],`

Outras propriedades

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

Propriedade	Objetivo	Possíveis valores
`attributesForPreview`	Lista de propriedades customizadas nos atributos CSS dos componentes.	Consulte o tópico `attributesForPreview`.
`autoWrapper`	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> e é o valor default quando a propriedade não é informada. `Ex.: "autoWrapper": false,`
`childrenProperties`	Lista 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.	Consulte o tópico `childrenProperties`.
`dependences`	Possui uma lista (editor) com os endereços de arquivos CSS específica para esse controle.	`Ex.: "dependences": { "editor": [ "node_modules/cronapp-framework-js/components/css/multiselect-editor.css" ]},`
`designTimeHTMLURL`	Sinaliza qual o caminho do html que será exibido no designtime.	`Ex.: "designTimeHTMLURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/cron-scheduler.designtime.html",`
`designTimeSelector`	Sinaliza qual diretiva ele irá usar.	`Ex.: "designTimeSelector": "cron-scheduler",`
`forcedGroup`	Força o agrupamento dos componentes HTML no template, permitindo a seleção de todos os subcomponentes 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. `Ex.:` `"forcedGroup": true,`
`handleRules`	Define características para algumas propriedades e regras para elementos do componente.	Consulte o tópico `handleRules`.
`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.: "name": "mask-placeholder"`
`onDrop`	Abre a janela de configuração especificada quando o componente é arrastado para a área de edição da view.	Nome do atributo. `Ex.: "onDrop": "openEditor",`
`onDoubleClick`	Abre a janela de configuração especificada quando o componente recebe um duplo click na área de edição da view.	Nome do atributo. `Ex.: "onDoubleClick": "openEditor",`
`pallete`	Oculta ou exibe o controle no editor de views.	`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. `Ex.: "pallete": false,`
`rows`	Define o tamanho do campo em número de linhas.	`Ex.: "rows": { "displayName": "rows" },`
`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 “\””	`Ex.:` `<i class=\"fa fa-star\"/>`
`text`	Nome do componente que aparecerá no editor de views quando não houver internacionalização (propriedades: text_en_US e text_pt_BR).	`Ex.:"text": "File Upload Button",`
`wrapper`	Adiciona 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>. `Ex.: "wrapper": false,`

Âncora

	attributesForPreview
	attributesForPreview

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.

Bloco de código

title	crn-text.components.json

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

Propriedade	Objetivo	Possíveis valores
`name`	Nome da propriedade que terá suas características alteradas.	`Ex.: "name": "xattr-theme",`
`type`	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. `Ex.: "type": "btngroup",`
`target`	Informa o atributo ou elemento que será customizado. Normalmente utilizado para adicionar class ou style.	`Ex.: "target": "class",`
`values`	Lista das opções da propriedade.	Consulte o tópico `values`.

Âncora

	attributesForPreview-values
	attributesForPreview-values

values

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

Propriedade	Objetivo	Possíveis valores (exemplos)
`key`	Classe CSS que será adicionado no template após o usuário escolher o value.	`Ex.: "key": "text-left",`
`value`	Nome da opção que será exibida para o usuário.	`Ex.: "value": "Standard",`
`icon`	Define o ícone que será exibido ao lado do nome da opção.	`Ex.: "icon": "mdi mdi-ray-start"`
`color`	Exibe um quadrado com a cor especificada ao lado do nome da opção. Observação: Utilizar apenas quando `type` é definido como `options`.	`Ex.: "color": "#fff"`

Âncora

	childrenProperties
	childrenProperties

childrenProperties

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.

Bloco de código

title	Trecho de código do arquivo crn-dynamic-menu.components.json

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

Propriedade	Objetivo	Possíveis valores
`displayName_en_US`	Nome do campo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma inglês (EUA).	`Ex.:"displayName_en_US": "Title",`
`displayName_pt_BR`	Nome do campo que aparecerá na aba propriedades do editor de views quando a IDE estiver no idioma português (BR).	`Ex.: "displayName_pt_BR": "Título",`
`editExpression`	Exibe 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. `Ex.: "editExpression": false,`
`mandatory`	Define uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia.	`true`: define como obrigatória. `false`: define como não obrigatória. `Ex.: "mandatory": true,`
`name`	Informa o atributo do elemento HTML que será manipulado em um campo do editor de views.	`Ex.: "name": "ng-model",`
`onDisplay`	Executa comando em JavaScript para atualizar o componente na tela sempre que uma alteração for feita.	Com o comando javascript:function() { /* função JavaScript */ } `Ex.: "onDisplay":` `"javascript:function() { return arguments[0].replace('vars.',''); }"`
`onSave`	Executa comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componente.	Com o comando javascript:function() { /* função JavaScript */ } `Ex.: "onSave":` `"javascript:function() { var result = arguments[0]; if (result.indexOf('.') == -1 && result.trim().length > 0 ) { result = 'vars.'+result; } return result; }"`
`selector`	Informa qual atributo do elemento HTML será selecionado para manipulação.	`Ex.: "selector": "ui-select",`
`type`	Define a forma de como o subcomponente irá se comportar como permitir apenas texto, seletor ou importação de fonte de dados.	`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. `Ex.: "type": "event",`

Âncora

	handleRules
	handleRules

handleRules

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

Bloco de código

title	Trecho de código do arquivo crn-grid.components.json

"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"
      }
    ]
  }

Propriedade	Objetivo	Possíveis valores / exemplos
`canActivate`	Ativa ou desativa as regras.	`true`: ativa o handleRules do componente. `false`: desativa o handleRules do componente. `Ex.: "canActivate": true,`
`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. `Ex.: "canIncrement": true,`
`canOrder`	Define 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. `Ex.: "canOrder": true,`
`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. `Ex.: "canToggle": true,`
`rules`	Define algumas regras para alteração do template do componente a partir de determinadas ações.	Consulte o tópico `rules`.

Âncora

	handleRules-rules
	handleRules-rules

rules

Lista de as regras de controle do handleRules.

Propriedade	Objetivo	Possíveis valores / exemplos
`accordionTabClicked`	Específico do componente acordeão, usado para acionar a ação de expandir ou recolher seus itens.	`Ex.: "accordionTabClicked": "panel-collapse.collapse",`
`activeClass`	Ativa uma classe específica apontada anteriormente.	`Ex.: "activeClass": "in",`
`activeSelector`	Seleciona o atributo que sofrerá a alteração.	`Ex.: "activeSelector": "div.panel-collapse.collapse.in",`
`sourceHTML`	Define trecho do HTML que será acrescido ou retirado do template, caso a regra seja atendida.	`Ex.: "sourceHTML": "<li></li>",`
`targetSelector`	Seleciona um elemento HTML ou classe CSS para sofrer a alteração,	`Ex.: "targetSelector": "div.panel-group",`
`toggleClass`	Adicionar ou retirar uma classe CSS.	Ex.: "toggleClass": "open",
`toggleSelector`	Adicionar ou retirar um elemento seletor.	`Ex.: "toggleSelector": ".dropdown",`

Âncora

	properties
	properties

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.

Bloco de código

title	Trecho de código do arquivo crn-title.components.json

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

Propriedade	Campo no editor de views	Objetivo
`auto-refresh`	Atualizar Automaticamente (ms)	Define o tempo, em milissegundos, que o datasource atualizará automaticamente.
`class`	Classes CSS	Adiciona classes CSS já criadas.
`checkrequired`	Validar Campos Requeridos	Insere ou atualiza os dados somente se todos os campos marcados como requeridos estiverem preenchidos.
`crn-datasource`	Fonte de dados	Define a fonte de dados do componente.
`cronapp-filter-autopost`	Postagem Automática

Elementos do components.json

Image Removed

ÂncoraTopicJsonTopicJson

Elemento: (raiz)

Tipo: objeto
Descrição: Objeto que engloba todo o documento 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.	-

Image Removed

ÂncoratopicJSONtopicJSON

Elemento: components

Tipo: lista
Descrição: Lista dos objetos responsável por definir as cada componente 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.	-
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>.

Image Removed

ÂncoraTopicAttributesForPreviewTopicAttributesForPreview

Elemento: attributesForPreview

Tipo: lista
Descrição: Lista de propriedades customizadas para os atributos CSS dos componentes.

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

Image Removed

ÂncoraTopicValueAttributesForPreviewTopicValueAttributesForPreview

Elemento: values do attributesForPreview

Tipo: lista
Descrição: Lista das opções da propriedade attributesForPreview

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"

Image Removed

ÂncoraTopicChildrenPropertiesTopicChildrenProperties

Elemento: childrenProperties

Tipo: lista
Descrição:

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

Image Removed

ÂncorahandleRuleshandleRules

Elemento: handleRules

Tipo: Objeto
Descrição: Define características para algumas propriedades e regras para elementos do componente.

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 desse controle no editor HTML, exemplo caixa de seleção.	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.	-

Image Removed

ÂncoraTopicRulesHandleRulesTopicRulesHandleRules

Elemento: rules do handleRules

Tipo: lista
Descrição: Lista de regras do controle.

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"

Image Removed

ÂncoraTopicPropertiesTopicProperties

Elemento: properties

Tipo: Objeto
Descrição: Define as propriedades e evento do controle.

ItemTipoObjetivoCampocrn-datasourceobjetoDefine a fonte de dados do componente.Fonte de dadoscronapp-filter-autopostobjetoPostagem AutomáticaobjetoCase InsensitiveobjetoOperadordependent-byobjeto exibição . Exemplo: As informações sobre um usuário só irá aparecer na tela quando um dos usuários forem selecionados.Depende deobjeto independente em relação ao campo "Dependente de postagem de campo sob demanda". Exemplo será submetida se existir um usuário.Dependente de postagem sob demanda

serão submetidas se existir um usuário.
`entity`	Origem de dados	Define qual a fonte de dados que irá alimentar o componente.
`href`	Referência	Define uma URL para gerar um link.
`id`	Identificador	Atributo que especifica um ID exclusivo para o componente. Por padrão um id é gerado automaticamente e atribuído ao componente.
`keys`	Chaves	Define quais parâmetros serão usados como chave na fonte de dados.
`lazy`	Postergar Carga	Alimenta a fonte de dados somente após uma ação do usuário.
`load-data-strategy`	Estratégia para Carregar Dados	Define as condições de carregamento dos dados
`mask`	Máscara	Lista pré-definida de máscaras. Ex.: CEP, CPF, data, telefone etc.
`mask-placeholder`	Sugestão de máscara	Possibilita adição de novas máscaras customizadas.
`ng-click`	Ao clicar	Executa evento ao clicar (AngularJS).
`ng-dblclick`	Ao duplo clicar	Executa evento ao duplo clicar (AngularJS).
`ng-init`	Ao inciar	Executa evento ao iniciar (AngularJS).
`ng-model`	Valor	Propriedade AngularJS que pode ser usada para obter e alimentar o conteúdo pelo bloco de programação.
`ng-mouseenter`	Ao entrar com o mouse	Executa evento ao entrar com o mouse (AngularJS).
`ng-mouseleave`	Ao sair com o mouse	Executa evento ao sair com o mouse (AngularJS).
`ng-mousemove`	Ao mover mouse	Executa evento ao mover mouse (AngularJS).

dependent-lazy-post-fieldobjetoCria 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 demandaentityobjetoDefine qual a fonte de dados que irá alimentar o componente.Origem de dadoshrefobjetoDefine uma URL para gerar um link.ReferênciakeysobjetoDefine quais parâmetros serão usados como chave na fonte de dados.ChavesmaskobjetoLista pré definida de mascarás. Exemplo: CEP, CPF, data, telefone entre outros.Máscaramask-placeholderobjetoPossibilita adição de novas mascarás customizadas.Sugestão de Máscarang-clickobjetoExecuta evento ao clicar (AngularJS).Ao clicarobjetoApós criarobjetoon-after-deleteobjetoApós preencherobjetoApós atualizarobjetoAntes de criarobjetoAntes de deletarobjetoAntes de atualizarobjetoAo clicarobjetoAo erraronmouseoverobjeto

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

Ao clicarqrobjetoQR CodeobjetoOrigemobjetoAlvoobjeto "" ""; LarguraobjetoDetermina em StandardMiddleRight); definidas no PosiçãoobjetoDetermina o Standard Larger Small ; no TamanhoobjetoDetermina o Default Primary Success Info Warning Danger Link; no Temaobjetoo Default Clear Outline ; no Style Type ÂncoraTopicPropiedadesPropertiesTopicPropiedadesProperties

Elemento: características do properties

Tipo: Objeto
Descrição:

Image Removed

ItemTipoObjetivoPossíveis valores / exemplodisplayName_en_USvalorInternacionalização em inglês do EUA para o rótulo do campo no Editor HTML.Ex.: "Datasource"ptBRvalorInternacionalização em português do Brasil para o rótulo do campo no Editor HTMLFonte de dadosonDisplayvalorExecuta comando em JavaScript para atualizar o componente na tela sempre que essa propriedade for alteradajavascript:function() { /* função JavaScript */ }"onSavevalorExecuta comando em JavaScript para salvar sempre que uma opção for selecionada ou ação tomada no componentejavascript:function() { /* função JavaScript */ }"lista quais /valores propriedade for do tipo lista.-options: keyvalorChave da opção para propriedades "true"options: valuevalorValor da opção para propriedades do tipo lista.Ex.: "Sim"removablevalorExibe o ícone "Remover propriedade" . Ao "Nova " Insere . Oculta . Valor default quando não informada essa propriedade.valorDefine o tipo do recurso usado na propriedade. Exemplo: "image/jpeg,image/gif,image/png" (permite ).typevalorDefine 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"


`onmouseover`	Ao clicar	Executa evento no precionar do clique do botão (JavaScript).
`parameters`	Mestre Detalhe	Vincula um ou mais atributos de uma fonte de dados com outra fonte de dados.
`parameters-null-strategy`	Estratégia de Cláusula Nula	Define as condições de carregamento dos dados.
`qr`	QR Code

Árvore de páginas

Versões comparadas

Versão antiga 1

Nova versão Atual

Chave

Estrutura

Estrutura do arquivo

Propriedades do arquivo

Principais propriedades

Outras propriedades

attributesForPreview

values

childrenProperties

handleRules

rules

properties

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

Características

Árvore de páginas

Histórico da Página

Versões comparadas

Versão antiga 1

Nova versão Atual

Chave

Estrutura

Estrutura do arquivo

Propriedades do arquivo

Principais propriedades

Outras propriedades

attributesForPreview

values

childrenProperties

handleRules

rules

properties

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

Características