Os componentes visuais do Cronapp (exemplo: botões, entradas de texto, tabelas, 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 no 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, entrada de texto e botão
A depender da plataforma (web ou mobile), um mesmo componente pode possuir algumas diferenças visuais ou de configuração, essas diferenças ocorrem devido as características próprias dessas plataformas, como a usabilidade. Também existem alguns componentes exclusivos de cada tipo de projeto.
Figura 1.2 - Exemplo de componentes visuais para projetos web (esquerda) e mobile (direita)
Arrastando componente visual
Para inserir um componente, basta arrastar até à área do formulário e soltar. Ao arrastar um componente seguro sobre outro na tela, este ficará azulado e uma seta indicará onde componente solto será inserido, por exemplo, antes ou depois (Animação 1).
Animação 1 - Arrastando um botão para uma view de um projeto web
Propriedades do componente visual
Cada componente visual possui algumas características em comum, como conteúdo e segurança, quanto características específicas - como definir um valor falso para o componente checkbox (Figura 2).
Figura 2 - Propriedades do componente visual checkbox
Acesso aos subcomponentes
Alguns componentes são formados por outros componentes. Por exemplo, o botão possui uma <div> externamente e possui internamente os elementos <i> para o ícone e o <span> para o seu rótulo (Figura 3.2). Ao clicar no botão bolha com ícone de cadeado (destaque da figura 3.1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes.
Figura 3.1 - Desbloqueando um componente
Após desbloquear o componente botão é possível selecionar o label (elemento <span>) e exibir somente as propriedades deste subcomponente no menu lateral (destaque da Figura 3.2).
Figura 3.2 - Propriedades do subcomponente
Além de filtrar as propriedades, ele também filtra os estilos que estão relacionados ao subcomponente (Figura 3.3).
Figura 3.3 - Acesso ao menu de estilo de um subcomponente
Código fonte do componente
É possível também modificarmos as características dos nossos componentes visuais através do modo high code, editando os trechos HTML e CSS. Com um clique duplo sobre um componente é possível visualizar o código HTML referente ao componente selecionado (Figura 4).
Figura 4 - Janela do código fonte do componente