Os componentes visuais do Cronapp (exemplo: Botões botões, Caixa entradas de texto, Tabela tabelas, Grades 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 no Editor de Views views, mas permite que você crie seus próprios componentes visuais, exportando-os para serem utilizados em outros projetos.

Image Modified

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

A depender da plataforma (web ou mobile), um mesmo componente pode possuir alguma diferença visual algumas diferenças visuais ou de configuração e alguns são exclusivos, 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. 

Image Modified

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

Image Modified

Animação 1 .3 - 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).

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:

Image Modified

Figura 2 .1 - Modificando propriedades 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.

visual checkbox

Acesso aos subcomponentes

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

Image Removed

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

Ao clicar no botão bolha Cadeado (item 1 com ícone de cadeado (destaque da figura 3.1) o componente é desbloqueado, permitindo a seleção de seus subcomponentes. Na figura 3.2, após

Image Added

Figura 3.1 - Desbloqueando um componente

Após desbloquear o componente botão foi é possível selecionar o label (elemento <span>) e exibir somente as propriedades deste subcomponente no menu lateral (destaque da Figura 3.2).

Image Modified

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

Propriedades do subcomponente

Como informado anteriormente, é possível alterar a propriedade de um subcomponente, no exemplo abaixo estamos alterando a cor de fundo do rótulo do botãoAlém de filtrar as propriedades, ele também filtra os estilos que estão relacionados ao subcomponente (Figura 3.3).

Image Modified

Figura 3.4 3 - Acesso ao menu de estilo de um subcomponente

subcomponente

Image Removed

Figura 3.5 - Modificação da cor de fundo do subcomponente rótulo

1. Altere a cor inserindo um valor de cor hexadecimal ou clicando sobre a cor para exibir uma palheta de seleção de cores;
2. Salve as alterações.

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

Image Modified

Figura 4 .1 - Janela com o do código fonte do componente selecionado