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

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

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

Botões bolha

Ao selecionar um componente, alguns botões bolha serão exibidos, abaixo, na figura 3.1, segue a explicação da funcionalidade de cada um.

Figura 3.1 - Botões bolha

1. Desagrupar: trava ou destrava a seleção de cada elemento do componente, permitindo a edição de seus sub componentes.
2. Redimensionar: permite o redimensionamento do componente com o mouse.
3. Adicionar Elemento: insere um novo componente em um dos lados do componente selecionado, acesse a o tópico Adicionar Elemento da documentação Editor de Views para mais detalhes.
4. Duplicar: faz uma cópia do elemento selecionado junto com suas configurações.
5. Encaixar: redimensiona os componentes da mesma linha na tela.
6. Remover: apaga o elemento selecionado.

Acesso aos subcomponentes

Alguns componentes são formados por outros componentes. Por exemplo, o componente Entrada de texto é formado por um label e um input agrupados. Ao clicar no botão bolha com ícone de cadeado (destaque da Figura 4.1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes.

Figura 4.1 - Desbloqueando um componente

Após desbloquear o componente Entrada de texto é possível selecionar cada subcomponente e acessar as propriedades, eventos e estilos relativos somente à ele no menu lateral. Assim como na Figura 4.2, na aba Propriedades é possível adicionar propriedades que ficam restritas somente ao componente. 

Figura 4.2 - Propriedades do subcomponente

1. No campo Nova Propriedade, a propriedade ng-readonly foi adicionada como true (verdadeira) no subcomponente input - após finalizar clicando no ícone de check verde. Essa mesma propriedade pode ser encontrada com o nome de Apenas Leitura ao clicar em Exibir mais, o que significa que o input poderá ser lido ou copiado, mas não modificado.
2. O link Exibir mais mostra todas as propriedades disponíveis. Após exibir todos os campos clique em Exibir menos (também no final da aba) para restringir a exibição dos campos. 

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 5).

Figura 5 - Janela do código fonte do componente