Figura 1 - Editor
Figura 2 - Abas propriedades, eventos e responsividade também são influenciadas pelo components.json
Estrutura
A estrutura do components.json quando controles padrões do CronApp utilizam o mesmo arquivo "components.json", que fica em diretórios diferentes dependendo do tipo do projeto:/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
2.2).
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)
- 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.
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. |
|
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). |
|
| 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. |
|
| Endereço do template do componente na IDE. |
|
| 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 | |
| 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:
|
| 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.
|
| 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:
| É possível utilizar uma opção ou todas.
|
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 |
autoWrapper | Adiciona uma tag <div> em torno do template do componente, facilitando a modificação da diagramação. |
|
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 |
dependences | Possui uma lista (editor) com os endereços de arquivos CSS específica para esse controle. |
|
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. |
|
handleRules | Define características para algumas propriedades e regras para elementos do componente. | Consulte o tópico |
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.
|
onDrop | Abre a janela de configuração especificada quando o componente é arrastado para a área de edição da view. | Nome do atributo.
|
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.
|
pallete | Oculta ou exibe o controle no editor de views. |
|
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. |
|
| Âncora | ||||
|---|---|---|---|---|
|
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 | ||
|---|---|---|
| ||
"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. |
|
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 |
Â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 | Ex.: "color": "#fff" |
| Âncora | ||||
|---|---|---|---|---|
|
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 | ||
|---|---|---|
| ||
"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. |
|
mandatory | Define uma propriedade como preenchimento obrigatório, adicionando contorno vermelho à propriedade quando vazia. |
|
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 */ }
|
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 */ }
|
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. |
|
| Âncora | ||||
|---|---|---|---|---|
|
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 | ||
|---|---|---|
| ||
"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. |
|
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. |
|
canOrder | Define a possibilidade de 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. |
|
rules | Define algumas regras para alteração do template do componente a partir de determinadas ações. | Consulte o tópico |
| Âncora | ||||
|---|---|---|---|---|
|
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. |
|
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
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 | ||
|---|---|---|
| ||
"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
Elemento: (raiz)
Tipo: objeto
Descrição: Objeto que engloba todo o documento components.json.
- 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.
Elemento: components
Tipo: lista
Descrição: Lista dos objetos responsável por definir as cada componente e suas propriedades.
- 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.
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.
- 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.
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)”.
-
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" }
Ex.: "onDrop": "openEditor";
"onDrop": "NomeAtributo"
Ex.: "onDoubleClick":"openEditor";
"onDoubleClick": "NomeAtributo"
- true: exibe o controle no editor HTML. Valor default quando não informada essa propriedade.
- false: oculta o controle no editor HTML.
- true: Adiciona uma tag <div>. Valor default quando não informada essa propriedade.
- false: Não adiciona uma tag <div>.
Elemento: attributesForPreview
Tipo: lista
Descrição: Lista de propriedades customizadas para os atributos CSS dos componentes.
- 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.
Elemento: values do attributesForPreview
Tipo: lista
Descrição: Lista das opções da propriedade attributesForPreview
Elemento: childrenProperties
Tipo: lista
Descrição:
Internacionalização (português Brasil) do nome do campo que aparecerá no editor HTML.
- true: Ativa a opção.
- false: Desativa a opção. Valor default quando não informada essa propriedade.
- true: Define como obrigatória.
- false: Propriedade não obrigatória.
Informa o atributo do elemento HTML que será manipulado em um campo do editor HTML.
Elemento: handleRules
Tipo: Objeto
Descrição: Define características para algumas propriedades e regras para elementos do componente.
- true: Ativa o handleRules do componente.
- false: Desativa o handleRules do componente.
- true: Insere o ícone "Adicionar".
- false: Oculta o ícone "Adicionar". Valor default quando não informada essa propriedade.
- true: Possibilita ordenação dos itens. Valor default quando não informada essa propriedade.
- false: Impede ordenação dos itens.
- true: Insere o ícone "Exibir".
- false: Oculta o ícone "Exibir". Valor default quando não informada essa propriedade.
Elemento: rules do handleRules
Tipo: lista
Descrição: Lista de regras do controle.
Seleciona um elemento HTML ou classe CSS para sofrer a alteração,
Elemento: properties
Tipo: Objeto
Descrição: Define as propriedades e evento do controle.
- true: Define como obrigatória.
- false: Propriedade não obrigatória.
Elemento: características do properties
Tipo: ObjetoDescrição: .Obs: O último nível "propriedades" está entre aspas pois representa citadas acima