Page tree
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.

Essa página é parte de um tutorial, veja mais detalhes sobre o conteúdo abordado aqui em Editor de views.

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 views 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 visuais 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 um rótulo e um campo de texto, até componentes complexos, exemplo 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 dos plugins Cronapp.

Vários componentes da view web são diferentes da view mobile, isso é necessário para adequar melhor a usabilidade em cada dispositivo. Na figura 1.1 vemos a view da tela de login web.


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

 

  1. Recarregar: atualiza a área de edição.
  2. Redimensionamento: redimensiona a tela para verificar a responsividade em diferentes equipamentos.
  3. Modal: adiciona ou seleciona os modais criados.
  4. Exibe elementos ocultos: exibe todos elementos que serão renderizados em algum momento após uma ação feita pelo usuário.
  5. Oculta fonte de dados: oculta componentes que não serão exibidos para o usuário, como os ícones da fonte de dados.
  6. Aba componente: exibe a lista de componentes visuais.
  7. Aba propriedades: customização do componente selecionado na área de edição, incluindo suas propriedades, eventos e estilos.
  8. Aba responsividade: configuração da responsividade de um elemento para os diversos tipos de display.
  9. Aba estilo: adiciona estilo a página inteira.
  10. Conteúdo das abas: local onde é exibido o conteúdo da aba selecionada (destaques 6, 7, 8 e 9 da Figura 1.1).
  11. Área de design: área de confecção das páginas web ou telas mobile.
  12. Árvore DOM: exibe a árvore DOM (Document Object Model) do componente selecionado na área de edição.
  13. Abas Visualização e códigoao abrir o editor de views com a opção Modo Avançado habilitada, é possível alterar para a subaba Código e visualizar o conteúdo HTML da página.

Localização das views

Os diretórios Mobile (localização: Formulário/Mobile ) e Web (localização: Formulário/Web ) contém as telas ou páginas de seus respectivos projetos. Dentro desses diretórios encontramos subdiretórios que possuem páginas específicas ou páginas com permissões específicas:

  • Erros: caso ocorra algum problema durante a navegação do usuário, ele será direcionado para alguma dessas telas desse diretório.
  • Administrativo: páginas acessíveis apenas por usuários associados ao permissionável Administrators.
  • Autenticado: páginas acessíveis apenas por usuários associados ao permissionável Authenticated.
  • Público: páginas acessíveis por qualquer usuário.



Figura 1.2 - Caminho para a pasta Autenticado nos projetos mobile e web


Para os próximos passos vamos alterar apenas as páginas dentro dos diretórios Autenticado nos projetos Mobile (destaque 1 da Figura 1.2) e Web (destaque 2 da Figura 1.2). 

Edição do componente

Selecione algum componente na área de edição para exibir balões de opções logo acima do componente (destaques 1 a 6 na figura 1.3). Além disso, as propriedades do elemento selecionado estarão disponíveis na área lateral. Por fim, ao dar um clique duplo sobre o componente na área de edição, uma janela será aberta exibindo o código-fonte HTML do componente selecionado ou as configurações do 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.
  6. Remover: apaga o elemento selecionado.
  7. Propriedades e eventos: área de configuração das propriedades, eventos e estilo do componente selecionado.

Desagrupar elementos

Normalmente os componentes visuais possuem outros componentes internamente. Como exemplo, podemos citar o botão, que é composto por um container que contém um ícone e um rótulo. Ao selecionar o botão, a maioria das propriedades exibidas no menu lateral afetam a todo o conteúdo do container, porém, também são exibidas as propriedades mais importantes dos subcomponentes.

Assim, após selecionar o botão, será possível acessar a propriedade Theme, responsável por alterar o padrão de cor de todo o botão, e também as propriedades específicas para os subcomponentes: Ícone e Conteúdo. (Figura 1.4)


Figura 1.4 - Propriedades exibidas ao selecionar um componente


Também é possível selecionar um subcomponente e alterar somente as propriedades desse subcomponente. Para isso, clique e destrave o botão bola Cadeado (destaque 1 da figura 1.5), em seguida, clique em um dos subcomponentes (2). 


Figura 1.5 - As propriedades exibidas afetam apenas o subcomponente rótulo do botão

Ícone de ajuda

Todos os componentes do Cronapp possuem um ícone de ajuda (destaque da Figura 1.6). Ao clicar, a página de documentação do componente será aberta em uma nova guia do seu navegador.


Figura 1.6 - Ícone de ajuda para a documentação oficial do componente

Janela de ícones

Alguns componentes possuem a propriedade ícones, e eles permitem que ícones sejam vinculados à eles. A janela de ícones (Figura 1.7) apresenta todos os ícones que vem por padrão ao criar um projeto Cronapp.


Figura 1.7 - Janela de ícones

Internacionalização

Elementos como Rótulo ou Texto possuem a propriedade Internacionalizar, nela podemos inserir uma chave (identificador único dessa tradução) e a tradução nos idiomas selecionados. Inglês e português são padrões ao criar um projeto, porém é possível adicionar qualquer outra língua nas configurações da internacionalização. O botão 6, destacado na figura 1.8, realiza traduções automáticas, porém é possível inserir manualmente as traduções.


 

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


Para realizar traduções:

  1. Selecione um componente com texto na área de edição;
  2. Clique no ícone Traduzir da propriedade Conteúdo;
  3. Insira a Chave para a tradução;
  4. Selecione o idioma do texto original;
  5. Informe o texto a ser traduzido no campo do idioma selecionado;
  6. Clique no botão Traduzir para internacionalizar o conteúdo nas demais línguas selecionadas.


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 a ser exibido.

Segurança

Os componentes apresentam a propriedade Segurança, que é vinculada as permissões de segurança do Cronapp. Com essa propriedade é possível definir a visibilidade ou habilitar o uso do componente para um ou vários permissionáveis do sistema.


Figura 1.9 - Propriedade de segurança de um componente



Passos

Usaremos esse passo para configurar o componente barra de navegação, tanto o web quanto o mobile.

Barra de navegação web

Os administradores do sistema poderão cadastrar livros e reservas para qualquer usuário, já os usuários alunos só poderão realizar suas próprias reservas. O acesso a essas páginas será feito através da Barra de navegação que iremos modificar (Figura 2.1).

Abra a página home (Localização: Formulário/Autenticado ).

Menu Biblioteca

Seleciona a barra de navegação (destaque 1 da Figura 2.1) e acesse a propriedade Configuração (2 da Figura 2.1) para abrir a janela Opções de Menu. Selecione o item Principal (3 da Figura 2.1) na árvore de itens e clique em "+" (seta da Figura 2.1) para adicionar o novo item, informe o nome "Biblioteca" na janela que solicita o nome do item.


Figura 2.1 - Criando menu na Barra de navegação


Edite o novo item do menu como na figura abaixo.


Figura 2.2 - Configurando menu Biblioteca


  1. Selecione item Biblioteca que acabamos de criar;
  2. Clique no ícone Internacionalizar do campo Título e efetue a internacionalização para o termo "Biblioteca" (pt: Biblioteca / en: Library);
  3. Clique no botão do cadeado do campo Segurança para abrir a janela de configuração;
  4. Clique nos botões "..." dos campos Visível para Habilitado para, abrindo a janela de seleção dos permissionáveis;
  5. Selecione somente a opção Alunos para os 2 campos. 


Em seguida, salve as duas janelas clicando em OK.

Submenu Minhas reservas

Deixe o item Biblioteca selecionado na árvore de item e adicione um novo item clicando no botão "+". Informe o nome Minhas reservas na janela que abrir e configure os campos como na figura 2.3.


Figura 2.3 - Edição do item de menu Minhas Reservas


  1. Selecione o item Minhas Reservas.
  2. Campo Título: clique no ícone de internacionalização desse campo e internacionalize o termo "MinhasReservas" (en: My Booking / pt: Minhas Reservas).

  3. Campo Ícone: clique no botão "...", pesquise pelo ícone List e selecione-o.

  4. Campo Segurança: clique no ícone cadeado ao lado do campo Segurança e na janela que abrir, selecione o permissionável Alunos para os campos Visível para e Habilitado para.


Ainda na janela de itens do menu, siga os passos abaixo para definirmos a página que será aberta quando o usuário clicar no item.


Figura 2.4 - Configurando o campo Ação de menu Minhas reservas


  1. Selecione novamente o item Minhas Reservas.
  2. Clique no botão "..." do campo Ação para abrir a janela de seleção do evento.
  3. Selecione a aba Formulário.
  4. No campo Formulário, clique no ícone "..." para abrir a janela de seleção de páginas e escolha a opção minhas-reservas.

Salve as duas janelas em seguida.

Submenu Livros e Reservas

Agora iremos configurar as páginas para os bibliotecários (administradores). Primeiramente iremos criar os itens de menu Livros Reservas. Então, selecione o item Admin (destaque da Figura 2.5) e adicione um novo item (botão "+"), informe o nome Livros na janela que abrir e clique em OK; selecione novamente o item Admin, adicione outro item clicando no botão "+", informe o nome Reservas e finalize clicando em OK (Figura 2.5).


Figura 2.5 - Adicionando os itens Livros e Reservas para o menu Admin


Selecione o item Livros e configure os campos destacados abaixo.


Figura 2.6 - Configurando item Livros do menu


  1. Campo Título: abra a janela de internacionalização e internacionalize o termo Livros (en: Books / pt: Livros).

  2. Campo Ícone: clique no botão "..." e pesquise pelo ícone book.

  3. Campo Ação: selecione o botão "..." para abrir a janela de ações, clique na aba Formulário, acesse o botão "..." do campo Formulário e pesquise pela página livro, dentro da pasta Administrativo. Clique em OK para fechar a Janela de seleção de ações e voltar para a janela de Opções de Menu.

  4. Campo Segurança: clique no ícone cadeado ao lado do campo Segurança e na janela que abrir, selecione o grupo Administradores para os campos Visível para e Habilitado para.


Por fim, selecione o item Reservas (destaque da Figura 2.7) e configure os campos abaixo.


Figura 2.7 - Configurando item de menu Livros


  1. Campo Título: abra a janela de internacionalização, ao lado do campo título, e internacionalize o termo Reservas (en: Bookings / pt: Reservas);

  2. Campo Ícone: clique no botão "..." e pesquise pelo ícone List;

  3. Campo Ação: clique no botão "..." para abrir a janela de ações, clique na aba Formulário, acesse o botão "..." do campo Formulário e pesquise pela página reserva, dentro da pasta Administrativo. Clique em OK para fechar a Janela de seleção de ações e voltar para a janela de Opções de Menu;

  4. Campo Segurança: clique no ícone cadeado ao lado do campo Segurança e na janela que abrir, selecione o grupo Administradores para os campos Visível para e Habilitado para.


Após configurarmos a barra de navegação web, teremos dois menus: Admin, acessível somente por usuários administradores e Biblioteca, com acesso exclusivo aos usuários do tipo Aluno. A figura 2.8 exibe como ficará o nosso menu após executar e abrir a nossa aplicação em um navegador web com o perfil Aluno.


Figura 2.8 - Menu acessado por um usuário Aluno na web

Barra de navegação mobile

Nessa parte iremos configurar a barra de navegação mobile. A versão mobile será destinada somente aos usuários do grupo de acesso Alunos, como estes não devem acessar a lista de usuários do sistema, alteraremos o item de menu Usuários para Minhas Reservas.

Abra a tela menu (localização Formulário/Mobile/Autenticado  ) e siga os passos abaixo.


Figura 3.1 - Configurando barra de navegação mobile


  1. Selecione o componente barra de navegação na página.
  2. Clique no botão "..." da propriedade Configuração para abrir a janela Opções de Menu.
  3. Selecione o item Users na árvore de itens lateral.
  4. Campo Nome: altere o conteúdo do campo para "Minhas reservas".
  5. Campo Título: altere o conteúdo do campo para Minhas reservas e internacionalize o termo "MinhasReservas" (en: My Booking / pt: Minhas Reservas).
  6. Campo Ícone: altere o ícone para "ion-ios-book", pesquisando o mesmo ao abrir a janela de ícones.
  7. Campo Ação: altere a página atual pela página minhas-reservas, clicando no botão "..." para abrir a janela de ações, acessando a aba Formulário e pesquisando pela página.
  8. Campo Segurança: clique no ícone cadeado e na janela que abrir remova o permissionável Administrators dos campos Visível para e Habilitado para e selecione o permissionável Alunos em seus lugares.


Após configurar a barra de navegação mobile, o menu terá a seguinte visualização ao abrir o aplicativo em um Smartphone (Figura 3.2).


Figura 3.2 - Menu acessado por um usuário aluno no mobile 


  • No labels