Visão geral do designer de interface do usuário

Depois de criar o aplicativo com sucesso, você será direcionado para a guia UI Designer.

O UI Designer no AppMaster foi projetado para ser fácil de usar, permitindo que você crie páginas impressionantes de aplicativos da web sem esforço.

Por meio de sua interface intuitiva de arrastar e soltar, você pode criar páginas da web e preenchê-las com conteúdo perfeitamente, eliminando a necessidade de habilidades avançadas de codificação.

O UI Designer é dividido em quatro seções principais com as quais os usuários podem interagir:

1. Barra de ferramentas esquerda
2. Painel superior
3. Painel inferior
4. Área da tela
5. Painel de Propriedades

Barra de ferramentas esquerda

A barra de ferramentas do lado esquerdo oferece ferramentas para estruturar seu site. Ao clicar nos ícones situados no topo desta barra lateral, os seguintes painéis serão revelados:

• Lista de elementos da interface do usuário
• Árvore de Elementos
• Árvore de páginas
• Árvore de layouts
• Gerente de Ativos

Lista de elementos da interface do usuário (atalho: 1 )

A Lista de Elementos da UI fornece todos os elementos que podem ser adicionados à área da tela arrastando do painel.

Os elementos da UI são organizados em categorias com base em sua finalidade, facilitando a navegação e a localização do widget apropriado para seu aplicativo.

Para acessar rapidamente o elemento, você pode usar a barra de pesquisa na parte superior do painel.

Árvore de Elementos (atalho: 2 )

Na árvore de elementos , você pode gerenciar e organizar todos os componentes colocados na página selecionada do seu aplicativo web.

Aqui, você pode interagir com estes elementos:

• mova itens entre a árvore arrastando,
• renomear componentes,
• alterar o estado de visibilidade dos elementos na tela (ocultar/exibir).

Use a barra de pesquisa na parte superior do painel para o elemento de pesquisa rápida na árvore.

Árvore de páginas (atalho: 3 )

A árvore de páginas permite organizar e gerenciar as páginas do seu site. Você pode criar novas páginas ou pastas aqui.

Na Árvore de Páginas você pode duplicar ou excluir páginas ou pastas.

Use a barra de pesquisa na parte superior do painel para acessar a página ou pasta de pesquisa rápida na árvore.

Lista de layouts (atalho: 4 )

A Árvore de Layouts ajuda no gerenciamento dos layouts de sua página. Assim como na Árvore de Páginas você pode duplicar ou excluir layouts.

Use a barra de pesquisa na parte superior do painel para obter o layout de pesquisa rápida na árvore.

Gerenciador de ativos (atalho: 5 )

O Assets Manager facilita o upload e a organização de ativos (como documentos, imagens e animações) para uso do seu site.

Todos os ativos que você enviar durante o desenvolvimento serão mantidos no Asset Manager e poderão ser reutilizados sem reenvio.

Você também pode remover qualquer ativo que não seja mais necessário.

Barra superior

A barra superior fornece um conjunto adicional de configurações de visualização. Começando pelo lado esquerdo, próximo ao botão de menu, e estendendo-se para a direita, você tem o seguinte conjunto de ferramentas:

• Documento Atual: exibe a página ou layout em que você está trabalhando atualmente.
• Pontos de interrupção: os ícones de pontos de interrupção permitem alternar entre diferentes pontos de interrupção para visualizar e modificar a aparência do seu site em vários tamanhos de dispositivos.
• Desfazer e Refazer: os botões Desfazer e Refazer permitem reverter ou reaplicar ações realizadas no Designer, como aplicar um estilo ou remover um elemento. Também estão disponíveis atalhos: para desfazer ação - CRTL/⌘+Z e para refazer ação - CTRL/⌘+SHIFT+Z .

Barra inferior

O painel inferior permite ampliar ou redimensionar a visualização da página.

No lado esquerdo do painel, você pode definir a resolução personalizada da página definindo a altura e a largura da tela.

No lado direito você pode controlar a escala:

• Aumentar ou diminuir o zoom
• Definir escala em porcentagens
• Definir tamanho real
• Ajustar a janela atual à área visível

Tela

A tela é o seu espaço de trabalho interativo. É aqui que você pode interagir com os componentes da página. Você pode selecionar elementos, reposicioná-los e editar o conteúdo diretamente na página.

Além disso, você pode copiar ( CRTL/⌘+C ) e colar ( CRTL/⌘+V ) elementos entre páginas e aplicativos ou duplicar elementos na página atual ( CRTL/⌘+D ).

Painel de Propriedades

O painel Propriedades no lado direito do Designer permite personalizar a aparência visual e o comportamento do elemento, layout ou página selecionado.

O painel Propriedades é composto por 4 painéis principais:

• Painel de aparência
• Painel de opções adicionais (opcional)
• Painel de consultas de mídia
• Painel de lógica de negócios

No cabeçalho do painel, você pode renomear o item selecionado clicando no nome do item, ler a descrição ou excluir o item clicando no ícone Lixeira.

Painel de aparência

O Painel de Aparência permite acessar o conteúdo estático e as propriedades exibidas do elemento selecionado. Você pode inserir ou selecionar esses valores nos campos correspondentes e os estilos serão aplicados imediatamente aos seus elementos na tela.

Se nenhum elemento estiver selecionado na tela, este painel exibirá as configurações da página ou layout atual.

Painel de opções adicionais

O Painel de Opções Adicionais destina-se a elementos que requerem dados ou opções de configuração extras.

Você pode definir a fonte de dados ou inserir opções manualmente dependendo do componente selecionado.

Painel de consultas de mídia

O Painel de Consultas de Mídia permite substituir as propriedades do item para cada ponto de interrupção definido.

Painel de lógica de negócios

O Painel Lógica de Negócios fornece todos os gatilhos para um elemento e permite estabelecer a interação do elemento quando o gatilho é acionado.