Noções básicas do Editor de páginas

O Editor de páginas do App Maker é uma maneira fácil e visual de criar uma interface para os apps. Basta arrastar os widgets para a tela e vinculá-los aos dados e você terá uma IU.

O Editor de página tem três elementos principais: a tela em que você cria a IU, uma paleta de widgets com todos os elementos de IU necessários e uma barra lateral direita para controlar os detalhes.

Tela

Com a tela, é possível posicionar e ajustar os componentes, chamados widgets, que formam a IU do aplicativo. A tela não oculta conteúdo, exceto as propriedades do widget de vinculação de dados. Elas são renderizadas com marcadores até que você publique ou visualize o aplicativo.

À medida que você adiciona widgets à tela, é possível redimensioná-la para ver como o aplicativo será mostrado em diferentes tamanhos de exibição. Para mais informações, consulte Como definir o estilo em diferentes tamanhos de tela.

Paleta de widgets

Arraste os widgets da paleta para a tela. Alguns deles têm assistentes para você vinculá-los aos dados. Determinadas vinculações de dados serão automáticas se você tiver definido a fonte de dados padrão em uma página.

A barra lateral direita fornece três ferramentas diferentes que são necessárias para criar a IU:

FerramentaDescrição
Editor de propriedadeUma lista de propriedades que determina como o widget selecionado interage com os dados, responde aos eventos, é carregado na página e muito mais.
Editor de estiloUm painel para você controlar a aparência dos widgets na tela. É possível selecionar um tema integrado e criar seus próprios estilos com o CSS.
ResumoUma lista que exibe as relações entre os widgets da página. É possível ocultar widgets e bloquear a posição deles.

Vinculação de dados com o Editor de propriedade

Com o Editor de propriedade, é possível alterar as propriedades que controlam a maioria dos aspectos de um widget, como a localização, a exibição e o funcionamento dele. Por exemplo, os widgets de rótulo têm uma propriedade text que determina o texto exibido.

Há três maneiras de definir uma propriedade. Quando isso pode ser feito de mais de uma maneira, o ícone de lista suspensa é exibido. Clique nele para selecionar a forma de definição.

  • Valor estático (Igual a): os valores estáticos são convenientes porque é possível inseri-los diretamente. No entanto, eles não são alterados quando um usuário interage com o app.

  • Expressão de vinculação (Vinculação): recurso avançado para você conectar as IUs aos modelos de dados. Assim, elas respondem dinamicamente à medida que os dados são inseridos ou editados.

  • Opções (): escolha uma das opções predefinidas ou configure uma ou mais para selecioná-las. Por exemplo, selecione uma fonte de dados de uma página ou adicione uma lista de nomes de classes a uma propriedade styles.

Dicas rápidas sobre a tela

Veja a seguir algumas dicas para trabalhar com a tela:

  • Segure a tecla shift e arraste o mouse para selecionar vários widgets.

  • Com vários widgets selecionados, é possível movê-los como um grupo, editar propriedades compartilhadas e muito mais.

  • Clique com o botão direito nos widgets ou na tela para abrir um menu contextual.

  • Segure a tecla control ao reorganizar os widgets para desativar temporariamente as diretrizes de alinhamento da tela.

  • Use as teclas de seta para mover o widget um pixel de cada vez.

Leitura complementar

  • Saiba mais sobre os vários widgets do App Maker.

  • Descubra como personalizar a aparência do seu aplicativo com os estilos.

  • Veja orientações sobre como criar páginas em Layout avançado.