Construindo aplicativos

Para construir um aplicativo, você deve criar Layouts, Páginas, preenchê-los com conteúdo e configurar a interação do aplicativo web.

Layouts

Anteriormente, introduzimos o conceito de Layouts . Para iniciar a criação do layout, primeiro você deve delinear a estrutura do seu aplicativo e identificar os modelos de página a serem utilizados.

Se você perder alguma coisa, não se preocupe. Você pode aumentar a lista de layouts como e quando necessário.

Lista de layouts

A Lista de Layout fornece todos os layouts do seu aplicativo web. Aqui você pode realizar uma variedade de operações e gerenciar layouts.

Para acessar a Lista de Layouts , selecione a quarta aba na barra de ferramentas esquerda na aba UI Designer ou use a tecla de atalho 4 . Todos os layouts do seu aplicativo serão exibidos aqui.

Cada aplicação deve ter pelo menos um layout. Ao criar um novo aplicativo, um ou vários layouts serão criados automaticamente dependendo do modelo de aplicativo selecionado. Um deles está marcado como **padrão**.

Na Lista de Layouts, você pode executar as seguintes ações nos layouts:

• selecione,
• adicionar novo,
• renomear,
• duplicado,
• excluir.

Layout padrão

O layout padrão é selecionado automaticamente na lista de layouts ao criar uma nova página. No entanto, isso pode ser substituído por um layout diferente, se necessário.

O uso do layout padrão aumenta a velocidade de desenvolvimento, por isso recomendamos usar o layout usado com mais frequência como padrão. Observe que apenas um layout pode ser definido como padrão por vez. A substituição do layout padrão não afeta as páginas existentes, a menos que o layout inicial seja excluído.

O layout padrão é marcado com um ícone de estrela azul na lista de layouts.

Criar novo layout

Você pode criar layouts diferentes para diferentes tipos de página. Siga estas etapas para criar um novo layout:

• Pressione CTRL/⌘+L ou abra a Lista de Layout (atalho 4 ) na barra de ferramentas Esquerda do UI Designer e clique no botão Mais no cabeçalho do painel.
• Forneça o nome do layout no modal que aparece. Recomendamos usar um título legível que reflita a estrutura do layout para identificação rápida ao atribuir layouts às páginas.
• Selecione o modelo de layout:
  • Base: modelo em branco sem elementos adicionais, bom para páginas sem navegação, como páginas de autenticação ou de erro.
  • Barra lateral esquerda: modelo com menu na barra lateral, bom para painéis de administração, CMS, ERP, etc.
  • Menu Superior: modelo com menu superior, bom para sites ou landing pages.
• Ative a configuração Layout padrão se esse layout for definido como padrão.
• Clique no botão Criar .

Não há limite para o número de layouts que você pode criar.

Renomeando Layout

Para renomear um layout, clique duas vezes no nome do layout, faça as alterações necessárias e pressione Enter para salvar ou Esc para reverter as alterações.

Duplicando layout

Para duplicar um layout, juntamente com seu conteúdo e configurações:

1. Passe o mouse sobre o layout que deseja duplicar.
2. Clique no ícone Duplicar.

Os layouts duplicados aparecem automaticamente na lista com um índice adicionado aos seus nomes. Se você duplicar o layout definido como padrão, o layout de origem não será substituído pelo recém-criado.

Excluindo layout

Para remover layout:

1. Passe o mouse sobre o layout que deseja excluir.
2. Clique no ícone Lixeira.
3. Confirme a exclusão.

Para excluir o layout vinculado a qualquer página, você deve reatribuir o layout de qualquer página vinculada antes de excluí-la. Isso pode ser feito através do modal de confirmação ou manualmente para cada página.

Para excluir o layout padrão, você deve configurar outro layout como padrão.

❗️ Importante: Você não pode desfazer uma operação de exclusão de layout.

Configurações de Layout

Clique no layout de destino na Lista de layouts para acessar suas configurações na barra lateral esquerda.

No cabeçalho da barra lateral Configurações, você pode renomear o layout selecionado clicando no nome ou excluí-lo.

Você pode definir o layout selecionado como padrão e visualizar todas as páginas vinculadas aqui. Para editar uma página vinculada, clique nela na lista.

Além disso, você pode construir alguma lógica de negócios para o layout.

Lógica de negócios de layout

Na guia lógica de negócios, selecione um gatilho para definir uma ação. Isso abrirá o editor de processos de negócios, focado no gatilho selecionado.

Aqui, você pode criar um fluxo de ação para um ou mais gatilhos, como implementar navegação, alterar propriedades condicionalmente, alternar visibilidade, enviar dados e muito mais. Consulte nosso guia sobre como construir um processo de negócios para obter mais informações.

🔔 Para obter o desempenho ideal do aplicativo, crie processos de negócios complexos no back-end.

Editando Layout

Os layouts, como componentes globais e modelos de página, aplicam automaticamente todas as modificações a todas as páginas vinculadas.

Para editar um layout, selecione o item de destino na lista de layouts e adicione quaisquer componentes necessários do painel de elementos da UI arrastando e soltando-os na área da tela.

Ao editar um layout, lembre-se de que o modelo inclui um componente Page Container imutável. Isso determina o posicionamento do conteúdo da sua página no modelo. O Page Container é destacado em verde e não pode conter componentes internos durante o modo de edição de layout. O conteúdo é definido diretamente na página e o tamanho do Page Container é determinado por seu componente pai.

Páginas

Depois de criar os layouts necessários, é o melhor momento para começar a criar as páginas do aplicativo web. Depois de criar os layouts necessários, é o melhor momento para começar a criar as páginas do aplicativo web. Cada página de aplicativo web fornece conteúdo exibido no navegador do usuário pelo URL de destino.

Árvore de páginas

A Árvore de páginas mostra a estrutura do seu site – as páginas do seu site e as pastas que abrigam essas páginas. Aqui você pode realizar diversas operações e organizar páginas e pastas.

Para abrir a árvore de páginas, selecione a terceira aba da barra de ferramentas esquerda do UI Designer ou pressione 3. Aqui serão exibidas todas as páginas do seu aplicativo.

Cada aplicativo deve ter pelo menos uma página. Quando você cria um novo aplicativo, uma ou várias páginas já são criadas dependendo do modelo de aplicativo selecionado.

Você pode realizar as seguintes ações em páginas e pastas:

• selecione,
• adicione nova página ou pasta,
• renomear,
• mova a página e as pastas para/fora da pasta,
• duplicado,
• excluir.

Página de índice

A página Índice é a página inicial do seu aplicativo. Quando seu aplicativo for executado, esta página será renderizada primeiro se você não tiver criado nenhum redirecionamento.

A página Índice marcou o ícone da Casa na árvore de páginas e não pode ser alternada para outra página. Por padrão, esta página está vinculada ao layout padrão criado automaticamente, mas você pode alterá-lo nas Configurações da Página.

Criar nova página

Para adicionar uma página ao seu aplicativo da web:

1. Pressione CTRL/⌘+P ou abra a Árvore de páginas (atalho 3 ) na barra de ferramentas esquerda do UI Designer e clique no botão Mais no cabeçalho do painel.
2. Forneça o URL da página no modal que aparece.
3. Selecione a pasta pai da página ou deixe o campo vazio para colocar a página na raiz.
4. Selecione Layout de página .
5. Clique no botão Criar .

💡 Para construir uma rota aninhada sem criar pastas, forneça um caminho completo para a página de destino no campo URL da página, por exemplo, configurações/perfil. A página Perfil será criada aninhada na pasta Configuração neste caso.

Você pode criar páginas e pastas ilimitadas para seu aplicativo da web.

🔔 Web apps construídas com AppMaster Studio geram roteamento de aplicativos por URL de página, portanto na forma de geração de página, utilize URL de página no formato correto e, para melhor entendimento, utilize uma URL amigável.

Criar nova pasta

Você pode criar pastas para organizar a navegação e construir o roteador certo para as páginas. Para criar uma nova pasta:

• Pressione CTRL/⌘+SHIFT+P ou abra a Árvore de páginas (atalho 3) na barra de ferramentas esquerda do UI Designer e clique no botão Pasta no cabeçalho do painel.
• Forneça o nome da pasta no modal que aparece.
• Selecione a pasta pai, se necessário, para criar um roteador aninhado
• Clique no botão Criar .

Elementos da IU

A interface do usuário do seu aplicativo consiste em elementos: campos de entrada, botões, imagens, caixas de seleção, calendários, imagens e ícones, cada um com uma finalidade específica.

AppMaster oferece um editor visual de arrastar e soltar que permite escolher e colocar elementos diretamente na página, em vez de escrever código e visualizá-lo imediatamente.

Adicionando Elementos

Para adicionar um elemento à tela:

1. Abra o Painel de Elementos da UI com uma lista de elementos da UI (atalho 1 ).
2. Selecione o elemento necessário ou use a barra de pesquisa.
3. Arraste o elemento selecionado para a página ou tela de layout.

Para colocar o elemento arrastado dentro do destino, solte o elemento acima dos elementos de destino.

Para adicionar um elemento antes ou depois de um elemento, arraste o elemento acima da borda do destino até que um separador apareça.

O divisor depende da direção do contêiner pai:

• Se o contêiner pai Direction for Vertical , os elementos serão adicionados de cima ou de baixo.
• Se o contêiner pai Direction for Horizontal , os elementos serão adicionados da esquerda ou da direita.

Personalizar elementos

Cada componente que você adiciona à tela é dotado de um conjunto abrangente de configurações personalizáveis. Com as propriedades do elemento, você pode gerenciar a aparência do elemento e os dados que serão exibidos.

Para configurar um elemento:

• Selecione o componente de destino na tela.
• Navegue até o painel Aparência, a primeira guia na barra lateral direita.
• No painel, escolha o item de configuração específico que deseja modificar.
• Insira seus valores preferidos nos campos designados.

A tela responde em tempo real, mostrando seus ajustes imediatamente.

Para obter orientação adicional, passe o cursor do mouse sobre uma configuração brevemente para exibir uma dica de ferramenta, fornecendo uma descrição concisa da função dessa configuração.

Além desses recursos interativos, o AppMaster aprimora os recursos de personalização por meio de seus blocos especiais de processos de negócios, Set Properties e Set Data . Esses blocos fornecem um nível avançado de acesso, permitindo alterar as configurações de cada componente de forma programática em seu aplicativo web.