Construindo IU

Para projetar uma interface estruturada e de usabilidade, o AppMaster Web Designer fornece uma ampla gama de componentes de UI atômicos. Esses componentes podem ser combinados e agrupados de várias maneiras para se alinharem aos seus objetivos e metas.

AppMaster oferece os seguintes componentes de UI:

• Containers: Elementos fundamentais para estruturar e agrupar logicamente outros componentes.
• Modais e Gavetas: Componentes interativos para exibir informações ou ações adicionais sem sair da tela atual.
• Componentes de saída de valor dinâmico: inclui listas , grades e tabelas para apresentação de dados dinamicamente.
• Elementos básicos da UI: como Buttons , Text e Icons , essenciais para interações básicas da interface.
• Componentes de navegação: incluindo menus verticais e horizontais, guias e ferramentas de navegação semelhantes.
• Elementos do formulário: Várias entradas e controles para interação do usuário e coleta de dados.

Atualizações regulares na biblioteca de componentes aumentam sua capacidade de desenvolver aplicativos da Web com mais eficiência.

Vamos construir uma UI para nosso aplicativo de calculadora simples para demonstrar as possibilidades de um construtor de sites de arrastar e soltar AppMaster. Este aplicativo exibirá o resultado de várias operações matemáticas com base nos valores de entrada.

Contêiner flexível

Com o Flex Container , você pode gerenciar facilmente o alinhamento e o gerenciamento de empilhamento de todos os elementos filhos dentro de um contêiner.

Flex Container é um componente base para construir a estrutura da sua página web. Flex Container no AppMaster web app designer permite que os usuários organizem elementos filhos (widgets ou contêineres) de maneira flexível. Ele suporta alinhamentos horizontais e verticais, permitindo aos desenvolvedores criar layouts complexos que se adaptam a diferentes tamanhos de tela.

Adicionando contêineres

Usaremos dois contêineres principais: um para entrada de dados e outro para exibir resultados de cálculos agrupados em um contêiner comum.

Primeiro, adicione Flex Container à tela para abrigar todos os outros elementos.

No painel Aparência , você pode explorar uma série de configurações:

• ID do elemento: um identificador exclusivo para fazer referência ao contêiner em processos de negócios.
• Grupo Comum: Configurações para definir o estado padrão do componente, como visibilidade e estilo do cursor.
• Grupo Flex Child: determina como o elemento se comporta dentro de um componente flex-parent.
• Layout: configurações para organizar itens filhos dentro do contêiner.
• Tamanhos: Para especificar as dimensões dos elementos.
• Espaçamento : Ajusta o espaço dentro e ao redor do elemento.
• Plano de fundo: opções para cores e camadas de fundo.
• Raio de canto, bordas, sombra: personalização para bordas de elementos, bordas e efeitos de sombra.
• Dica de ferramenta: adiciona uma dica de ferramenta para ações de foco ou foco.

Personalize seu contêiner principal. Por exemplo, vamos definir Direction como horizontal e ajustar Gap , Padding , Corner radius e Borders .

Em seguida, adicione outro contêiner Flex dentro do contêiner principal para que o formulário insira valores. Defina-o para largura total para preencher o espaço disponível no contêiner pai.

Duplique este contêiner (usando CTRL/⌘+D ) para criar um bloco separado para exibir os resultados. Defina a propriedade Largura como 30%.

Adicionando Elementos de UI

Para continuar construindo seu aplicativo, é hora de adicionar os elementos de UI necessários.

Adicionar formulário

Nosso processo de negócios exige que o usuário insira dois números, ambos do tipo Float. Para tornar isso possível, adicione duas entradas flutuantes e um botão para iniciar o processo de cálculo.

Mude a direção do Flex Container do lado esquerdo para Vertical e adicione um Gap para que os elementos aninhados tenham um pouco de espaço entre eles. Adicione dentro deste contêiner Flex um Input Float para o primeiro valor, que rotularemos como 'X':

• Arraste e solte o elemento Input Float no contêiner do lado esquerdo.
• No Painel de aparência , personalize o campo adicionando um rótulo e um espaço reservado .
• Ajuste a aparência do campo para se adequar ao design do seu aplicativo.

Selecione o campo adicionado na tela e duplique-o usando CTRL/⌘+D . Modifique o rótulo e o espaço reservado do campo duplicado para representar o segundo valor, 'Y'.

Agora arraste e solte um elemento Button abaixo dos campos adicionados. No painel Aparência , ajuste o botão para abranger toda a largura. Isso pode ser conseguido definindo a propriedade Align no grupo Flex Child como Stretch .

Insira um rótulo para o botão e, opcionalmente, adicione um ícone para aprimorar seu apelo visual.

Depois de adicionar esses elementos, é uma boa prática renomeá-los para maior clareza e facilidade de identificação. Isso torna mais fácil consultá-los em seus processos de negócios, aumentando a compreensão e agilizando o processo de desenvolvimento.

Adicionar bloco de resultados

No lado direito do contêiner pai, configuraremos um espaço para exibir os resultados após a execução do nosso processo de negócio. Primeiro, defina a propriedade Direction deste contêiner como Vertical e adicione um pequeno Gap para manter os elementos bem espaçados. Altere sua largura para 30%.

Dentro deste container direito, insira um novo container Horizontal Flex e adicione dentro dele um elemento Icon representando a operação, um Bloco de Texto com símbolo de Igual e um Bloco de Texto onde será exibido o resultado da operação. Duplique este contêiner quatro vezes, atualizando cada uma para nossas operações matemáticas definidas.

Personalize cada elemento como desejar com o Painel de Aparência .

Adicionar bloco de dicas

Para melhorar a usabilidade da interface, criamos um espaço reservado que será exibido até que os resultados sejam obtidos. Para isso, adicione um Flex Container adicional, espelhando a largura correta do contêiner (30%), e coloque um Bloco de Texto dentro dele com uma dica descritiva.

Uma característica fundamental do contêiner com resultados é seu status de visibilidade inicial. Por padrão, desative o botão Visível , inicialmente tornando-o invisível.

Ocultar elemento

Tornaremos este contêiner visível e atualizaremos os dados somente após a execução do processo de negócio e a obtenção do resultado. É importante atribuir nomes aos Blocos de Texto, garantindo fácil identificação durante a criação dos processos de negócio e gravação dos resultados para exibição.

🎉 Bom trabalho! Criamos a UI perfeita para nosso aplicativo e estamos prontos para adicionar interatividade aos nossos elementos.