Conceber uma barra de menus interactiva e dinâmica na aplicação Qodly

No blogue desta semana, damos uma olhada na navegação. A navegação é um elemento-chave de qualquer aplicação Web. Um sistema de navegação bem estruturado permite aos usuários encontrar rapidamente o que precisam e melhora a sua experiência geral.

Com 4D Qodly Pro, gerenciar a navegação é simples e flexível. Usando o componente Page Loader, pode carregar páginas dinamicamente com base nas ações do usuário.

Nesse artigo, vamos explorar como configurar uma barra de navegação eficiente usando 4D Qodly Pro. Usaremos nossa aplicação Performance Review como exemplo, que pode ser baixada do GitHub (link a ser adicionado). Cobriremos seu design, interações e gerenciamento de permissões para criar uma experiência perfeita adaptada a cada papel de usuário.

Aplicativo de análise de desempenho

Carregando páginas com o Page Loader

Carregar uma página com 4D Qodly Pro é intuitivo. Simplesmente arraste e largue o componente Page Loader na sua interface e associe-o a uma fonte de dados baseada em texto.

O Carregador de Páginas carrega automaticamente a página correspondente ao valor armazenado na fonte de dados. Ao atualizar este valor, os utilizadores podem navegar sem problemas entre diferentes páginas da aplicação.

Escolhendo o tipo certo de navegação

Agora que entendemos como carregar páginas usando o carregador de páginas, precisamos determinar como modificar dinamicamente esse recurso de dados para facilitar a navegação suave e intuitiva.

Existem três tipos principais de navegação:

• Barra de menus: Uma barra de navegação tradicional, sempre visível, ideal para acesso rápido.
• Menu de hambúrguer: Um menu dobrável acessado através de um ícone, perfeito para aplicações móveis.
• Menu de barra lateral: Posicionado lateralmente, é adequado para aplicações complexas com várias secções.

 

O tipo de navegação deve ser escolhido com base nas necessidades específicas da sua aplicação e dos utilizadores-alvo. Um sistema de navegação bem concebido melhora a experiência do utilizador e garante um acesso fácil às principais funcionalidades.

Para a aplicação de análise de desempenho, optamos por uma barra de menus clássica. Esta abordagem permite um acesso rápido a diferentes secções, assegurando simultaneamente uma experiência suave tanto em computadores como em tablets.

Criar uma barra de navegação

A nossa barra de navegação foi concebida para ser simples, eficiente e fácil de utilizar. Eis as suas principais caraterísticas:

• Uma barra de navegação de altura fixa com uma opção autocolante para permanecer visível na parte superior.
• O ícone e o nome da aplicação.
• Um menu pendente de Recursos Humanos que contém:
  • Colaborador
  • Revisão
  • Formação
• Um botão Gerente.
• Um botão Colaborador.
• O nome do utilizador com sessão iniciada.
• Um botão de Terminar sessão.

 

 

Criando a barra superior

A barra de navegação é sempre apresentada na parte superior da tela. Para o conseguir, criamos uma caixa de estilo com uma propriedade sticky:

• position: sticky garante que a barra permanece visível durante o deslocamento.
  
• top: 0 e left: 0 posicionam a barra no canto superior esquerdo da página.

 

 

Adicionar o ícone e o título da aplicação

Utilizamos uma caixa de estilo com Flexbox para alinhar elementos e manter a capacidade de resposta em vários tamanhos da tela.

Dentro desta caixa:

• Um componente de imagem para o ícone.
• Um componente de texto para apresentar o nome da aplicação.

Criar os menus

É adicionada uma segunda caixa de estilo (utilizando o Flexbox) para conter o menu pendente e os dois botões de navegação.

Criar o menu pendente “Recursos Humanos

Para criar o menu pendente, utilizamos um componente personalizado chamado Popover. Pode descarregar este componente a partir do GitHub.

• Arraste e solte o componente Popover na sua página.
• Na secção do menu, adicione um texto estático intitulado Human Resources (Recursos Humanos).
• Na secção de sobreposição, insira três botões denominados Colaborador, Revisões e Formações.

Para mais informações sobre componentes personalizados, consulte a nossa publicação anterior no blogue: “Ampliar a nossa aplicação Qodly com componentes personalizados”

Adicionar o botão Manager e Collaborator

Basta adicionar dois botões separados com as etiquetas “Gestor” e “Colaborador”.

Criar a área de informação registada

Uma terceira caixa de estilo (utilizando a Flexbox) é utilizada para apresentar o nome do utilizador com sessão iniciada e fornecer uma ação de fim de sessão.

• Um componente Text, ligado à fonte de dados do nome de utilizador, apresenta o nome do utilizador com sessão iniciada no lado direito da barra de navegação.

• O botão Terminar sessão permite aos utilizadores terminar rapidamente a sessão. No evento onClick do botão, atribua a ação de fim de sessão de autenticação padrão.

Para obter mais detalhes sobre a autenticação, consulte esta publicação anterior do blogue: Integrar a autenticação do utilizador nas suas aplicações Qodly.

Implementar interações de navegação

A navegação é gerida através de uma variável chamada pageName, que age como fonte de dados para o Page Loader.

• Cada elemento de menu está associado a uma ação que actualiza o valor pageName.
• Quando o utilizador clica num botão, a página correspondente é carregada dinamicamente.
• Para cada botão, aplicamos a ação Definir origem de dados no evento onClick:
  • pageName = “CollaboratorPage” para exibir a página do Colaborador.
  • pageName = “ManagerPage” para exibir a página Manager.
  • E assim por diante…

Esta abordagem garante uma experiência de navegação suave e rápida sem recarregar a aplicação.

Gerenciando permissões

Nem todos os botões de menu são visíveis para todos os utilizadores. A sua visibilidade depende das funções do utilizador:

• Colaborador: Acesso apenas à página Colaborador.
• Gerente: Acesso às páginas Gerente e Colaborador.
• RH: Acesso a todas as páginas.

Utilizamos a gestão de estados para controlar dinamicamente quais as opções visíveis com base na função do utilizador com sessão iniciada.

Manuseamento de várias funções

Um Gestor tem uma função dupla:

• Como Colaborador, efetua a sua própria avaliação de desempenho.
• Como gestor, revê e valida as avaliações de desempenho dos membros da sua equipa.

Para lidar com isto, definimos dois recursos de dados:

• userInfo.maxRole: Representa a função mais elevada atribuída ao utilizador.
• userInfo.role: Representa a função atualmente ativa que o utilizador está a utilizar.

 

Preenchimento dos recursos de dados:

Durante a autenticação, utilizando a função ds.authentify(), as informações do utilizador são armazenadas no armazenamento da sessão:

var $obj : Object
$obj :=Session.storage

If ($obj.Employee=Null)
Use ($obj)
$obj .Employee:=New shared object
End use
End if

Use ($obj.Employee)
$obj .Employee.ID:=$employee.ID
$obj .Employee.name:=$employeeFirstname+" "+$employee.Lastname
$obj .Employee.role:="Colaborador"
$obj .Employee.maxRole:="Colaborador"
End Use

É fornecida uma função auxiliar getUserInfo() para obter os dados do utilizador na página Web:

exposed Function getUserInfo: Object
If (Session=Null)
return Storage .Employee
Else
return Session .storage.Employee
End if

No evento onClick do botão de início de sessão, ambas as funções são chamadas:

• ds.authentify()
• ds.getUserInfo()

 

Criação e configuração de estados:

• Clique no botão “+” para adicionar estados.

 

 

• Crie um estado maxManager, onde o menu Recursos Humanos está oculto (display: none).

 

 

• Crie um estado maxCollaborator, onde as opções Recursos Humanos, Gerente e Colaborador são ocultadas. Uma vez que um Colaborador só tem acesso a uma página, o menu de navegação torna-se desnecessário.

 

 

Definir regras de exibição condicional:

Queremos:

• Se userInfo.maxRole = “hr”, apresentar o estado predefinido.
• Se userInfo.maxRole = “manager”, apresentar o estado Manager.
• Se userInfo.maxRole = “colaborador”, apresentar o estado Colaborador.

Estas regras são facilmente implementadas utilizando o editor de configuração de estados condicionais do Qodly Studio.

Para mais detalhes sobre a gestão de estados, consulte a nossa publicação anterior no blogue: Torne as suas aplicações Qodly dinâmicas e interactivas com estados.

Existem outros estados para gerir o menu, a janela de início de sessão ou o item de menu selecionado. Cabe-lhe a si explorar a forma como está configurado, e sinta-se à vontade para se juntar a nós no fórum se tiver alguma dúvida.

Otimização para diferentes tamanhos de ecrã

A nossa aplicação foi concebida para utilização em computadores de secretária e em tablets. Para garantir uma experiência óptima para o utilizador, a barra de navegação é totalmente responsiva.

• Ocultar determinados elementos quando o ecrã é demasiado pequeno (por exemplo, o nome da aplicação e o nome do utilizador com sessão iniciada).
• Reorganização do menu numa disposição em colunas em ecrãs mais pequenos para maximizar o espaço.

 

A ocultação dinâmica de elementos é gerida através de consultas multimédia CSS (por exemplo, utilizando a largura máxima), enquanto o Flexbox com a opção Wrap garante que o menu se ajusta automaticamente com base no espaço disponível.

• Tela grande

• Tela média

• Tela pequena

Para obter mais informações sobre a personalização de CSS no Qodly Studio, consulte a nossa publicação anterior: Personalize as suas interfaces Qodly com CSS.

Próximos passos

Agora tem os elementos essenciais para criar uma barra de navegação interativa e dinâmica com 4D Qodly Pro.

Nós o encorajamos a compartilhar suas implementações e fazer perguntas no Fórum 4D para continuar a se envolver com a comunidade.