Continuous Improvement - TWRT
Início » Mendix » Como Criar Páginas no Mendix: Guia Completo Passo a Passo

Como Criar Páginas no Mendix: Guia Completo Passo a Passo

Como Criar Páginas no Mendix: Guia Completo Passo a Passo

Criar páginas no Mendix é um processo simples e intuitivo, que pode ser feito de diferentes formas. Neste guia, vamos explorar três métodos diferentes para criar páginas e configurar sua aplicação de maneira eficiente.

Antes de começarmos, este tutorial foi realizado na versão Mendix 10.17.0, podendo haver pequenas diferenças caso esteja utilizando uma versão diferente.

Como Criar Páginas no Mendix: Guia Completo Passo a Passo

Método 1: Criando uma Página Pela Navegação

A primeira forma de criar uma página é diretamente no menu de navegação do Mendix. Siga os passos abaixo:

  1. Acesse o menu de navegação no seu aplicativo.
  2. Clique em “New Item” para adicionar um novo item ao menu.
  3. Configure:
    • Caption: Nome da página.
    • àcone: Escolha um ícone para o menu.
    • On Click: Selecione Show Page para abrir uma nova página.
  4. Escolha um modelo de página no popup que aparecerá:
    • Páginas responsivas para web, tablet ou celular.
    • Tipos de layouts padrão do Mendix (Atlas UI).
    • Modelos prontos como dashboards, formulários e tabelas.
  5. Clique em “OK” para salvar a página e vinculá-la ao menu de navegação.

Método 2: Criando uma Página Diretamente no Módulo

Esse método é um pouco mais manual, mas dá maior controle sobre a estrutura da página.

Como Criar Páginas no Mendix: Guia Completo Passo a Passo

  1. No Explorer do Mendix, acesse o seu módulo.
  2. Clique com o botão direito e selecione Add Page.
  3. Escolha um layout de página:
    • Páginas responsivas para diferentes dispositivos.
    • Tipos de páginas como formulários, listas ou detalhes.
  4. Configure os elementos visuais conforme necessário.
  5. Salve a página e conecte-a ao fluxo da aplicação.

Método 3: Criando Páginas a Partir do Banco de Dados

Este é o método mais rápido e eficiente, pois permite gerar páginas automaticamente com base na sua estrutura de dados.

  1. No Data Modeler, selecione a entidade desejada (ex: Usuário).
  2. Clique com o botão direito e escolha Generate Overview Pages.
  3. Configure:
    • Escolha as entidades para as quais deseja criar páginas.
    • Defina o layout padrão (Atlas UI).
    • Ative a opção para sobrescrever páginas existentes, se necessário.
  4. Clique em OK para gerar as páginas automaticamente.

O Mendix criará automaticamente:

  • Uma página de listagem (Overview Page) com um Data Grid para exibir os registros.
  • Uma página de edição (Edit Page) para adicionar e editar registros.
  • Botões para criar, editar e excluir objetos diretamente.

Conectando a Página ao Menu de Navegação

Após criar a página, precisamos adicioná-la ao menu para que os usuários possam acessá-la.

  1. Acesse o menu de navegação.
  2. Clique em New Item e configure:
    • Caption: Nome da página (ex: “Usuários”).
    • Icone: Escolha um ícone relevante.
    • Ação: Show Page e selecione a página overview gerada anteriormente.
  3. Salve e recarregue o Mendix para ver as alterações.

Testando a Página na Web

Depois de configurar tudo, podemos testar a página no navegador:

  1. Execute a aplicação e clique no botão de navegação.
  2. Acesse a nova página e veja os elementos gerados.
  3. Teste criando, editando e excluindo registros para garantir que tudo funciona corretamente.

Conclusion

Criar páginas no Mendix é um processo flexível que pode ser feito de diferentes formas, dependendo da necessidade do seu projeto.


🔗 Referência Externa: Para mais informações, visite o site Mendix oficial.

How It Works

O processo de criação de páginas no Mendix é simples e intuitivo. Siga estas etapas para desenvolver suas páginas de forma eficiente:

  1. Acesse o Mendix Studio: Inicie o Mendix Studio e selecione o projeto no qual deseja trabalhar.
  2. Crie uma nova página: No painel de navegação, clique em “Páginas” e escolha a opção “Nova Página”. Você pode optar por um modelo em branco ou usar um dos modelos pré-definidos.
  3. Adicione elementos: Utilize a biblioteca de widgets à esquerda para arrastar e soltar elementos como botões, formulários e tabelas na sua página.
  4. Configure propriedades: Selecione cada elemento para ajustar suas propriedades, como texto, cores e ações ao clicar.
  5. Visualize e publique: Após finalizar a edição, utilize a opção de visualização para ver como a página ficará. Quando estiver satisfeito, publique as alterações.

Com essas etapas, você pode criar páginas dinâmicas e funcionais no Mendix, facilitando o desenvolvimento de aplicações web.

Benefits

1. Facilidade de Uso

O Mendix oferece uma interface intuitiva que permite até mesmo usuários sem experiência em programação criar páginas de forma rápida e eficiente. Por exemplo, com apenas alguns cliques, você pode adicionar elementos como botões e formulários.

2. Integração Rápida

Com o Mendix, você pode integrar facilmente suas páginas a bancos de dados e APIs externas. Isso significa que, se você precisar acessar dados em tempo real, como informações de clientes, a integração pode ser feita em questão de minutos.

3. Personalização Avançada

A plataforma permite personalizar suas páginas de acordo com as necessidades do seu negócio. Você pode ajustar layouts, cores e estilos para refletir a identidade visual da sua marca, tornando seu aplicativo mais atraente e funcional.

4. Colaboração em Tempo Real

O Mendix facilita a colaboração entre equipes, permitindo que múltiplos usuários trabalhem nas mesmas páginas simultaneamente. Isso é especialmente útil em projetos grandes, onde a comunicação e a sincronização são essenciais.

5. Suporte e Comunidade Ativa

Ao utilizar o Mendix, você tem acesso a uma vasta comunidade de desenvolvedores e suporte técnico. Isso garante que você possa encontrar soluções para problemas rapidamente e compartilhar experiências com outros usuários.

Use Cases

O Mendix é uma plataforma poderosa que permite a criação de páginas web de forma rápida e eficiente. A seguir, apresentamos alguns casos de uso práticos que demonstram como você pode aplicar essa ferramenta em diferentes cenários:

  • Desenvolvimento de Aplicativos Internos:

    Uma empresa pode utilizar o Mendix para criar um aplicativo interno que gerencie o fluxo de trabalho dos funcionários, permitindo que eles atualizem status de projetos, solicitem férias e acessem documentos importantes, tudo em uma interface amigável.

  • Portais de Atendimento ao Cliente:

    Organizações podem desenvolver portais de atendimento ao cliente onde os usuários possam abrir tickets, consultar FAQs e acessar guias de solução de problemas, melhorando a experiência do cliente e reduzindo o volume de chamadas para o suporte.

  • Sistemas de E-commerce:

    Com o Mendix, é possível criar uma página de e-commerce personalizada que permita aos clientes navegar por produtos, realizar compras e acompanhar pedidos, tudo isso com integração a sistemas de pagamento e logística.

  • Aplicativos de Relacionamento com o Cliente (CRM):

    Empresas podem desenvolver soluções de CRM que ajudam a gerenciar interações com clientes, armazenar informações de contato e acompanhar vendas, aumentando a eficiência e a personalização do atendimento.

How to Implement

Para criar páginas no Mendix de forma eficaz, siga este guia passo a passo:

  1. Acesse o Mendix Studio: Inicie o Mendix Studio e abra o projeto no qual você deseja trabalhar.
  2. Crie uma nova página: No painel de navegação, clique em “Páginas” e, em seguida, em “Nova Página”. Escolha um modelo que atenda à s suas necessidades.
  3. Personalize a página: Utilize o editor visual para adicionar widgets, como botões, tabelas e formulários. Arraste e solte os elementos na área de design.
  4. Defina as propriedades: Selecione cada widget e ajuste suas propriedades no painel à direita. Isso inclui texto, cores e comportamentos.
  5. Teste a página: Clique em “Visualizar” para testar a funcionalidade da página. Verifique se todos os elementos estão funcionando como esperado.
  6. Publique as alterações: Após testar, clique em “Publicar” para que suas alterações sejam aplicadas ao aplicativo.

Dicas práticas:

  • Utilize a documentação do Mendix para entender melhor as funcionalidades de cada widget.
  • Faça uso de componentes reutilizáveis para manter a consistência nas páginas.

Evite os seguintes erros comuns:

  • Não sobrecarregue a página com muitos elementos, pois isso pode afetar a performance.
  • Não esqueça de testar a responsividade da página em diferentes dispositivos.

Agora é hora de colocar a mão na massa! Comece a criar suas páginas e explore as funcionalidades do Mendix.


Discover the power of Mendix

author avatar
Eduardo Salerno
Eduardo Salerno is a specialist in IT portfolio and project management, with extensive experience in Planview implementations and digital transformation. At TWRT, he leads initiatives that connect business strategy with technological execution.
Scroll up