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)

Os componentes visuais são agrupados por categoria para melhorar a visualização, como mostrado na figura 1.3. Dependendo do perfil do componente, ele pode está vinculado a mais categorias. 

Figura 1.3 - Agrupamento dos componentes

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

Os componentes visuais possuem algumas características que são comuns a todos, como Identificador e Estilo, e também características específicas, como "Valor para falso" que é exclusiva para o componente Caixa de checagem (Figura 2).

Figura 2 - Propriedades do componente visual Caixa de Checagem

Barra de opções

Ao selecionar um componente, uma barra com botões para a configuração do componente será exibida. A quantidade dessas opções pode variar dependendo do componente visual selecionado. Abaixo, na figura 3.1, segue a explicação da funcionalidade de cada uma.

Figura 3.1 - Botões da barra de opções

1. Nome do componente selecionado.
2. Desagrupar: permite bloquear ou desbloquear o acesso aos subcomponentes do componente visual selecionado.
3. Redimensionar: Permite o redimensionamento do componente com o mouse.
4. 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.
5. Duplicar: Faz uma cópia do elemento selecionado junto com suas configurações.
6. Encaixar: Redimensiona os componentes da mesma linha na tela.
7. Fonte de dados: Destaca a fonte de dados vinculada ao componente.
8. Configuração: Abre a janela de configuração do componente.
9. Remover: Apaga o elemento selecionado.

Menu de contexto

Ao clicar com o botão de contexto (direito) do mouse em um componente, um Menu de contexto será exibido (Figura 3.2).

Figura 3.2 - Menu de contexto

• Desagrupar componente: permite bloquear ou desbloquear o acesso aos subcomponentes do componente visual selecionado.
• Redimensionar elemento: Permite o redimensionamento do componente com o mouse.
• 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.
• Duplicar elemento: faz uma cópia do elemento selecionado junto com suas configurações.
• Encaixar elemento na linha acima: redimensiona os componentes da mesma linha na tela.
• Remover elemento: apaga o elemento selecionado.
• Fonte de dados: destaca a fonte de dados vinculada ao componente.
• Copiar Seleção: copia o componente selecionado.
• Colar Seleção: define onde colar o componente selecionado:
  • Antes: cola antes do componente selecionado;
  • No Meio: cola acima, mas dentro da div do componente selecionado, adicionando um subcomponente;
  • Depois: cola depois do componente selecionado.
• Copiar Estilo: copia o estilo CSS do componente.
• Colar Estilo: cola o estilo CSS em outro componente.
• Eventos da página: mostra a aba de eventos do componente.
• Propriedades da página: mostra a aba de configuração do componente.

Acesso aos subcomponentes

Alguns componentes são formados por outros componentes. Por exemplo, o componente Entrada de texto é formado por um label (rótulo) e um input (campo de entrada) agrupados. Ao clicar no botão da barra de opções 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 ao subcomponente. 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 (destaque 1 da figura 4.2), a propriedade ng-readonly foi adicionada com o valor true (verdadeiro) no subcomponente input, em seguida foi confirmado clicando no ícone de check verde. Essa mesma propriedade pode ser encontrada com o nome de Apenas Leitura ao clicar em + Exibir mais (2), 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

É possível modificarmos as características dos nossos componentes visuais em modo high-code, editando os trechos HTML e CSS. Um clique duplo sobre um componente visual pode abrir sua janela de configurações, quando o componente possuir, ou abrir a janela de edição do código HTML referente ao componente selecionado (Figura 5).

Figura 5 - Janela do código fonte do componente