O Mendix é uma plataforma low-code que facilita a criação de aplicações de forma visual. O Studio Pro é o ambiente principal onde tudo acontece: você monta as páginas, configura o sistema, cria a lógica (microflows) e testa o aplicativo. Neste artigo, vou mostrar como a interface do Mendix é dividida, explicando o que tem em cada painel e para que serve, com foco em quem está começando ou quer entender melhor como usar a ferramenta no dia a dia.
Contextualização
O Studio Pro é o ambiente principal de trabalho no Mendix. É nele que tudo acontece: desde o design das páginas até a lógica de funcionamento da aplicação. Para quem está começando, entender como esse ambiente se organiza é essencial para aproveitar o potencial da ferramenta.
Neste artigo, explico como o Studio Pro é dividido e como cada parte da interface contribui para o desenvolvimento no dia a dia, com foco em quem está aprendendo ou quer se aprofundar na plataforma.
Conteúdo
Ao abrir o Mendix, ele inicia com a tela “Home” ou com a última tela que foi acessada. A interface principal do Studio Pro é dividida em cinco partes que serão decorridas mais profundamente a seguir:
- Painel superior: Contém o menu com opções de configuração do Mendix.
- Painel esquerdo: Traz o menu lateral com duas abas: “App Explorer” e “Page Explorer”. O “App Explorer” exibe a estrutura da aplicação (como páginas, microflows e outros elementos organizados por módulo), enquanto o “Page Explorer” apresenta uma hierarquia dos elementos contidos em uma página específica.
- Painel central: Exibe o conteúdo principal, como a visualização de uma página, microflow ou outro documento.
- Painel inferior: Reúne abas como “Changes” (histórico de alterações), “Errors” (erros de desenvolvimento), “Variables”, “Console”, “Find Results” (resultados de busca) e recomendações de boas práticas.
- Painel direito: Exibe as abas de “Properties” (propriedades do elemento selecionado), “Toolbox” (ferramentas para inserir elementos), “Debugger” (depuração de microflows/nanoflows) e “Marketplace” (módulos e widgets disponíveis para download).
Imagem 01: Visual completo de todos os painéis.
3.1 Painel Superior
O menu superior do Mendix Studio Pro é dividido em oito seções:
- File (Arquivo): Relacionado à criação de módulos, documentos e aplicativos, além de importação e exportação.
- Edit (Editar): Reúne funções clássicas como copiar, colar e localizar (como o atalho Ctrl+F).
- View (Visualizar): Permite exibir ou ocultar painéis, acessar o modo de tela cheia e abrir novas abas.
- App: Contém opções relacionadas à aplicação atual, como sincronização do diretório e criação de pacotes para deploy.
- Run: Inicia a execução da aplicação.
- Version Control (Controle de Versão): Permite realizar commit, ver histórico e fazer merge de branches (integração com Git).
- Language (Idioma): Gerencia os idiomas do sistema e da aplicação.
- Help (Ajuda): Acesso a materiais de suporte do Mendix.
No canto direito, há atalhos para executar, pausar ou publicar a aplicação. O botão View App permite visualizar a aplicação em diferentes perfis, como celular ou tablet, para teste de responsividade. Além de atalhos para o dashboard do projeto, ao marketplace e a MAIA, inteligência artificial do Mendix, que temos um artigo focada apenas ela.
Imagem 02: Painel Superior
3.2 Painel Esquerdo
O App Explorer é a aba de navegação principal, onde é possível visualizar todos os documentos da aplicação. O primeiro módulo listado é o módulo principal (não pode ser excluído). Dentro dele há seções como:
- Settings (Configuração): Para configurar parâmetros da aplicação (como o nível de segurança).
- Security (Segurança): Para visualizar e configurar os níveis de segurança.
- Navigation (Navegação): Para gerenciar perfis de navegação, interação e menus, inclusive em diferentes layouts (mobile, tablet etc.).
- Styling (Estilos): É a raiz da estilização da aplicação. O Mendix utiliza o layout Atlas Core.
- Marketplace Modules (Módulos de Marketplace): Lista os módulos baixados do Marketplace. Módulos com ícones verdes geralmente estão ligados à estilização; os azuis, à funcionalidade.
- System (Sistemas): Módulo do sistema que não pode ser alterado. Contém configurações como banco de dados, fuso horário, autenticação etc.
- MyFirstModule: Módulo onde você cria e personaliza a aplicação.
Já o Page Explorer exibe a hierarquia dos elementos presentes na página visualizada no painel central.
Imagem 3: Aba de “App Explorer”.
Imagem 4: Aba de Page Explorer acessada na tela de home.
3.3 Painel Central
O painel central exibe os documentos abertos, cada documento é exibido em uma aba e pode ser movido para o painel inferior, caso necessário. Este painel é o espaço principal de edição.
Imagem 5: Painel Central com a página de home nativo do Mendix.
3.4 Painel Inferior
As abas do painel inferior incluem:
- Stories: Usado principalmente por times que trabalham com metodologia Kanban.
- Changes: Lista todas as alterações feitas na aplicação. Também permite ações de commit e push (as mesmas disponíveis no menu “App”).
- Errors: Apresenta os erros e bugs atuais.
- Console: Mostra logs e a execução da aplicação.
- Breakpoints / Variables: Permitem acompanhar passo a passo a execução de microflows ou nanoflows, visualizando variáveis.
- Best Practice Recommender: Sugestões de boas práticas de desenvolvimento.
- Find Results: Mostra os resultados das buscas realizadas no projeto.
Imagem 6: Abas do painel inferior.
3.5 Painel da direita
Esse painel possui quatro abas principais:
- Properties (Propriedades): Exibe as propriedades do item selecionado no painel central (como páginas, botões ou microflows), incluindo estilo e configurações.
- Toolbox (Caixa de Ferramentas): Exibe os elementos disponíveis para serem inseridos no documento atual. Por exemplo, ao editar uma microflow, aparecem todas as atividades lógicas do Mendix; ao editar uma página, aparecem os widgets. Inclui também os “Building Blocks”, que são blocos prontos de layout.
- Debugger: Permite executar a depuração passo a passo de um microflow ou nanoflow.
- Marketplace: Pode ser acessado tanto por um ícone no painel superior (carrinho de compras) quanto por essa aba. É onde se encontra módulos, templates e widgets para enriquecer a aplicação.
- Maia: É o assistente com inteligência artificial do Mendix, que pode auxiliar durante o desenvolvimento.
Imagem 7: Aba de Properties da página de home
Imagem 8: Aba de Toolbox de uma página.
Imagem 9: Aba de Toolbox de uma microflow.
Imagem 10: Aba de Marketplace acessado no painel da direita.
Imagem 11: Aba de chat com a Maia.
Business Case
Quando falamos em criar aplicações de forma rápida e eficaz, o Mendix Studio Pro se torna uma ferramenta estratégica. Ele centraliza tudo em um único ambiente visual, permitindo que a equipe desenvolva, teste e publique aplicações com mais autonomia e velocidade.
Dominar a interface do Studio Pro reduz o tempo de aprendizado, evita retrabalhos e facilita a comunicação entre áreas técnicas e de negócio. Cada painel foi pensado para apoiar o fluxo de desenvolvimento com clareza, desde o início do projeto até o deploy.
A estrutura do Mendix Studio Pro é bem-organizada e intuitiva, com painéis separados por funcionalidades que facilitam o desenvolvimento e manutenção das aplicações. Compreender a função de cada painel é essencial para navegar com agilidade e tirar o máximo proveito da plataforma.
