Os componentes visuais do Cronapp (exemplo: Botões, Caixa de texto, Tabela, Grades etc) são estruturas funcionais de interação entre o usuário e o sistema. Criados em HTML, CSS e JavaScript, são utilizados no designer de páginas web ou telas de aplicações mobile e caracterizam-se por serem altamente customizáveis em modo low-code.

O Cronapp oferece dezenas de componentes na funcionalidade Editor de Views, mas permite que você crie seus próprios componentes visuais, exportando-os para serem utilizados em outros projetos.

Figura 1.1 - Tela de login (mobile) que utiliza três componentes visuais: Imagem, Caixa de texto e Botão

A maioria dos componentes possuem alguma diferença visual e de configuração dependendo da plataforma (web ou mobile) e outros são exclusivos, isso se deve por conta de características próprias dessas plataformas, como a usabilidade. 

Figura 1.2 - Exemplo de componentes visuais para projetos web (esquerda) e mobile (direita)

Arrastando componente visual

Para inserir um componente, basta arrastá-lo até à área do formulário e soltá-lo. Ao arrastar o mouse com um componente seguro sobre outro componente na tela, este ficará azulado e uma seta indicará se o componente solto será inserido antes ou depois do componente na tela. (Animação 1.3)

Animação 1.3 - Arrastando um botão para uma view de um projeto web

Animação 1.3 - Arrastando um botão para uma view de um projeto web

Propriedades do Componente Visual

Podemos alterar diversas características dos nossos componentes visuais, como por exemplo o rótulo ou ícone do botão, para isso, siga os passos abaixo:

Figura 2.1 - Modificando propriedades do componente visual

Figura 2.1 - Modificando propriedades do componente visual

1. Selecione o componente visual que você deseja editar, nesse caso o botão;
2. Clique na propriedade a ser alterada, nesse exemplo usamos o ícone;
3. Escolha o novo ícone.

Acesso aos subcomponentes

Alguns componentes são formados por outros componentes, por exemplo o botão, que possui uma <div> externamente e possui internamente as tags <i> para o ícone e o <span> para seu rótulo (Figura 2.4). Ao selecionar o componente, as propriedades de todos os subcomponentes são exibidas na subaba Propriedades. Na figura 3.1, ao selecionar o botão, tanto a propriedade Ícone (referente ao subcomponente ícone) quanto a propriedade Conteúdo (referente ao subcompoente label) são exibidas.

Figura 3.1 - Ao selecionar um componentes, as propriedades de seus subcomponentes são exibidas no menu lateral

Ao clicar no botão bolha Cadeado (item 1 da figura 3.1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Na figura 3.2, após desbloquear o componente botão foi possível selecionar o label (tag <span>) e exibir somente as propriedades do subcomponente no menu lateral.

Figura 3.2 - Ao desbloquear um componente é possível selecionar seus subcomponentes

No rodapé da janela é exibido o elemento da árvore DOM selecionado. Na figura 3.1, onde o componente botão está selecionado, é exibido o elemento mais externo do botão a tag <div> e o identificador do componente, já na figura 3.2 o rodapé exibe todo o caminho, do elemento mais externo do componente até o elemento do subcomponente selecionado.

Ao clicarmos no símbolo do cadeado (Desagrupar/Agrupar Componente), podemos destrinchar as características do nosso componente acessando suas subcamadas, podendo assim, como por exemplo n742pxa Figura 2.3, alterar a cor do texto, botão, ícone e dentre outras propriedades do seu elemento.

Figura 2.3.1 - Modificando o estilo da subcamada de um elemento

Figura 2.3.2 - Modificando o estilo da subcamada de um elemento

1. Desagrupar componente;
2. Acessar aba Estilos;
3. Adicionar regrar CSS;
4. Alterar cor do elemento;
5. Salvar nova regra CSS;
6. Cor de fundo do label de texto alterada.

É possível também modificarmos as características dos nossos componentes visuais através de high code, editando os trechos HTML e CSS.

Figura 2.4 - Janela de código HTML do componente visual criado