Os componentes visuais do Cronapp (exemplo: botões, caixa de texto, tabela, grades...) 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)
Figura 1.3 - Arrastando um botão para uma view de um projeto web
Ao adicionar um novo componente visual a uma view podemos alterar suas características, manipulando a aba de propriedades, responsividade e estilos do Menu Lateral.
Alterando Características do Componente Visual
Podemos alterar todas as características dos nossos componentes visuais, como por exemplo o conteúdo e ícone do botão, apenas acessando a aba de propriedades do elemento.
Figura 2.1 - Modificando propriedades do componente visual
- Selecione o componente visual que você deseja editar, nesse caso o botão;
- Selecione a propriedade a ser alterada, o ícone do botão;
- Selecione um novo ícone que atenda ao propósito do botão;
- E por fim altere o conteúdo do botão.
Nesse exemplo, vimos que foi possível alterar algumas das principais propriedades do nosso componente, o nome e o ícone. Além dessas alterações, podemos utilizar o campo Theme para modificar, como na figura 2.2, a cor do botão.
Figura 2.2 - Modificando o tema do botão
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 na Figura 2.3, alterar a cor do texto, botão, ícone e dentre outras propriedades do seu elemento.
Nessa página
Figura 2.3 - Modificando o estilo da subcamada de um elemento
- Desagrupar componente;
- Acessar aba Estilos;
- Adicionar regrar CSS;
- Alterar cor do elemento;
- Salvar nova regra CSS;
- 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