Skip to end of metadata
Go to start of metadata

Nesse passo vamos entender como funciona o editor visual de telas do Cronapp e como é rápido o desenvolvimento de páginas web e mobile.

Visão Geral

A view é a camada na qual o usuário interage com o sistema, podendo ser páginas HTML em projetos web ou telas em aplicativos mobile. Com o editor de páginas do Cronapp é possível desenvolver páginas complexas sem mexer diretamente nas marcações HTML, trabalhando somente de forma visual, arrastando os componentes enquanto organiza o layout e adiciona funcionalidades.

Os componentes do Cronapp são conjuntos de elementos HTML preparados para gerar um conteúdo funcional. É possível arrastar desde componentes simples, como a Entrada de texto que possui apenas uma label e um campo de texto, até componentes mais complexos: Editor de texto rico, Grade ou Fonte de dados.

Todos esses componentes são extremamente customizáveis, sendo possível alterar suas propriedades, adicionar eventos, definir responsividade e adicionar estilos. Caso queira, você ainda pode criar novos componentes visuais e utilizar em seus projetos ou distribuir para terceiros através de plugins Cronapp.

Vários componentes da view web são diferentes da view mobile, isso é necessário para adequar melhor a usabilidade para cada dispositivo.

Na figura 1.1 vemos a view da tela de login.

Figura 1.1 - Visão geral da tela de edição da view

 

  1. Redimensionamento: redimensiona a tela para verificar a responsividade em diferentes equipamentos;
  2. Modal: Adiciona ou seleciona os modais criados;
  3. Exibe elementos ocultos;
  4. Oculta fonte de dados: oculta componentes que não são exibidos para o usuário, como os ícones da fonte de dados;
  5. Aba componente: exibe uma lista de componestes arrastáveis;
  6. Aba propriedades: customização do componente selecionado na área de edição, incluindo suas propriedades, eventos e estilos;
  7. Aba responsividade: configuração da responsividade de um elemento para os diversos tipos de display;
  8. Aba estilo: adiciona estilo a todo o componente;
  9. Abas Visualização e código: exibe o conteúdo de forma visual ou o código HTML.

Localização das views

Os formulários ficam dentro do diretório views ou Formulários, porém seu endereço varia dependendo do tipo de projeto: mobile ou web. Veja o caminho na árvore de arquivos na visualização por pastas ou categorias:

  1. web:  
    • Visualização de categoria: {Nome do projeto} / Código Fonte / Principal / Código Fonte Web / Formulários /
    • Visualização de pasta: {Nome do projeto} / src / main / webapp / views /
  2. mobile:
    • Visualização de categoria: {Nome do projeto} / Código Fonte / Principal / Código Fonte Mobile / www / views /
    • Visualização de pasta: {Nome do projeto} / src / main / mobileapp / www / views /

Figura 1.2 - Caminho para a pasta views (2) do projeto mobile, com visualização por categoria (1)


Para abrir a tela de configuração da view, basta dar um clique duplo sobre o arquivo *.view.html.

Edição do componente

Ao selecionar um componente na tela, serão exibidos balões de edição logo acima do componente. Além disso, os campos de configurações das abas Propriedades e Eventos irão variar a depender do elemento selecionado. Por fim, ao dar um clique duplo sobre o elemento na área de edição, uma janela abre exibindo o código-fonte HTML daquele componente.

 

Figura 1.3 - botões de atalhos são exibidos ao selecionar um componente

 

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

Desagrupar elementos

Ao selecionar um componente, suas principais propriedades e dos seus elementos já estarão disponíveis nas subabas propriedades, eventos e estilos. Ou seja, selecionando um botão, as propriedades de alterar seu ícone e rótulo já estarão disponíveis, porém é possível selecionar um subelemento do componente para filtrar as propriedades exibidas. Para isso: selecione o componente, clique no botão bola cadeado e clique em um elemento interno. Na Figura 1.4 vemos a seleção do rótulo de um botão.

Figura 1.4 - Selecionando o rótulo do botão através do desagrupamento

Internacionalização

Elementos como Rótulo ou Texto possuem a propriedade Internacionalizar, nela podemos inserir uma chave (identificador único dessa tradução), selecionar várias línguas e usar o tradutor do Google para realizar a tradução do conteúdo para os idiomas selecionadas, caso não goste da tradução automática, é possível alterá-las manualmente.

Na Figura 1.5 selecionamos o idioma Inglês (Estados Unidos) na caixa de seleção de idiomas pois inserimos a palavra de língua inglesa Button no campo Valor, ao clicarmos no botão de internacionalização (1) os campos dos idiomas selecionados serão preenchidos automaticamente.

 

Figura 1.5 - Internacionalização do rótulo do componente Botão


Quando o usuário acessar sua aplicação, o sistema verificará o idioma configurado no navegador, sistema Android ou IOS do usuário para definir qual será o idioma exibido. 

Barra de navegação

A barra de navegação é um componente que encontramos na tela home.view.html e será visível por todas as outras páginas, facilitando a navegação entre as páginas do sistema web. A barra de navegação possui menus que por sua vez possuem itens que podem possuir links para outras páginas ou ações diversas dentro do sistema.

Para configurar a barra de navegação basta selecionar o componente e clicar no botão "..." da propriedade Configurações (Figura 1.6). 

Figura 1.6 - Configuração da barra de navegação do sistema

  1. Componente barra de navegação selecionado;
  2. Propriedade Configuração da barra de navegação;
  3. Novo item: adicionar novo subitem abaixo do item selecionado. Não é possível adicionar item no terceiro nível de hierarquia, ou seja, no exemplo da figura 1.6
    O item Principal contém Admin que contém Users, não é possível adicionar um item interno ao Users.
  4. Excluir item: excluir o item selecionado;

Árvore hierárquica com os itens da barra de navegação;

Campos:

  1. Nome: nome do item da barra de navegação, só visível nas configurações; 
  2. Título: nome do item exibido na página, é possível internacionalizar o título;
  3. Ícone: ícone exibido ao lado do título;
  4. Oculto: define regras para ocultar o item;
  5. Ação: define o evento ao clicar no item: abrir formulário, relatório, bloco de programação e demais funcionalidades;
  6. Segurança: define os grupos de acesso que poderão visualizar e acessar esse item.

 


Passos

Como o nosso projeto possui uma versão web e outra mobile, será necessário tratar as views dos dois lados, então nos próximos passos iremos configurar as páginas do lado web e depois do mobile.

 

  • No labels