Atributo id do componente HTML.

Ex.: "name": "crn-button",

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

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

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

Endereço do template do componente na IDE.

Ex.: "templateURL": "src/main/webapp/node_modules/cronapp-framework-js/dist/components/templates/button.template.html",

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.

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

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

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:

1. INPUTS: Controles de entrada de dados,

   • en_US: Inputs;

   • pt_BR: Entradas

2. BUTTONS: Controles com botões,

   • en_US: Buttons;

   • pt_BR: Botões

3. PLUGINS: Controles proveniente de plugins,

   • en_US: Plugins

   • pt_BR: Plugins

4. LAYOUTS: Controles que constam layout.

   • en_US: Layouts

   • pt_BR: Layouts

5. FORMS: Controles que formam formulários.

   • en_US: Forms

   • pt_BR: Formulários

6. GRIDS: Grades, listas e Tabelas.

   • en_US: Grids and Tables

   • pt_BR: Grades e Tabelas

7. LISTS: Controles com listas.

   • en_US: Lists

   • pt_BR: Listas

8. COMBOS: Comboxes fixos e dinâmicos.

   • en_US: Combos

   • pt_BR: Combos

9. 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" ],

Lista de propriedades customizadas nos atributos CSS dos componentes.

Consulte o tópico attributesForPreview.

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,

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.

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

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

Sinaliza qual diretiva ele irá usar.

Ex.: "designTimeSelector": "cron-scheduler",

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,

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

Consulte o tópico handleRules.

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"

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

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

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,

Define o tamanho do campo em número de linhas.

Ex.: "rows": { "displayName": "rows" },

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\"/>

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

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,

Nome da propriedade que terá suas características alteradas.

Ex.: "name": "xattr-theme",

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

Informa o atributo ou elemento que será customizado. Normalmente utilizado para adicionar class ou style.

Ex.: "target": "class",

Lista das opções da propriedade.

Consulte o tópico values.

Classe CSS que será adicionado no template após o usuário escolher o value.

Ex.: "key": "text-left",

Nome da opção que será exibida para o usuário.

Ex.: "value": "Standard",

Define o ícone que será exibido ao lado do nome da opção.

Ex.: "icon": "mdi mdi-ray-start"

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"

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

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

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,

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,

Informa o atributo do elemento HTML que será manipulado em um campo do editor de views.

Ex.: "name": "ng-model",

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.',''); }"

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

Informa qual atributo do elemento HTML será selecionado para manipulação.

Ex.: "selector": "ui-select",

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