Widgets

Os widgets são componentes usados para criar páginas. Eles podem ser de diversas coisas, como rótulos simples que exibem texto e formulários complexos que permitem aos usuários ver e editar dados.

No App Maker, a criação de páginas com o recurso "arrastar e soltar" simplifica o uso dos widgets. Além disso, com as diversas propriedades da ferramenta, é possível personalizar os widgets e adicionar funcionalidades para criar uma IU completa.

Tipos de widgets

Acesse os widgets por meio da paleta , localizada no canto superior à esquerda do editor de páginas. O App Maker categoriza os widgets da paleta para facilitar a localização deles:

CategoriaFinalidadeExemplos
Dados Widgets para exibir ou editar dados de modelo. Eles são compostos, ou seja, hierarquias que incluem painéis, rótulos, caixas de texto e botões. É possível editar a saída dos assistentes. Formulário e tabela
Entrada Widgets para processar a entrada do usuário, como cliques ou texto. Botão, rótulo, caixa de texto, área de texto, caixa de seleção, lista suspensa, caixa de data, grupo de opções, avaliação com estrelas, controle deslizante, caixa de sugestões, editor de texto, seleção múltipla, seletor de usuários e seletor do Drive
Exibição Widgets para exibir textos, imagens e outros elementos de IU não interativos. Link, imagem, mapa do Google, ícone de ajuda, ícone de carregamento, HTML e paginação
Layout Usados para organizar outros widgets. Eles também aceitam atribuições da fonte de dados. Painel fixo, painel horizontal, painel vertical, lista, grade, acordeão, guias, divisão horizontal e divisão vertical
Gráficos Widgets para mostrar dados em gráficos. Gráfico de barras, gráfico de linhas, gráfico de pizza e gráfico de tabela
Fragmentos de página Paleta de fragmentos de página que você criou. Elementos de IU repetidos em várias páginas, como cabeçalhos e rodapés
Suas imagens Paleta de imagens que você enviou ao app. Logotipos de produtos e ícones personalizados

Propriedades dos widgets

Cada widget tem propriedades que podem ser editadas para especificar diversos atributos. Por exemplo, quais dados são exibidos, onde os widgets estão posicionados e até mesmo como eles respondem à entrada do usuário. Utilize o Editor de propriedades à direita da tela de uma página para ver e editar as propriedades do widget selecionado.

O editor agrupa as propriedades por função, que variam de acordo com o widget.

Grupo de propriedades Descrição
Nome do widget Inclui duas propriedades básicas, que são nome e fonte de dados, e pelo menos mais uma específica da função do widget.
Configurações de desempenho Inclui uma única propriedade que controla quando os widgets filho são carregados. Ela é aplicável apenas a páginas e widgets de layout ou de dados que contenham widgets de layout.
Layout Inclui propriedades que especificam a posição e o tamanho do widget.
Espaçamento Inclui propriedades que especificam a margem e o padding do widget.
Eventos Inclui propriedades que determinam a resposta do widget a determinados eventos, como o carregamento de dados e a entrada do usuário.
Validação de dados Inclui propriedades que definem os requisitos de validação dos widgets de entrada de texto. Aplicável apenas a widgets de entrada relevantes.
Exibição Inclui propriedades que afetam a aparência e a visibilidade do widget.
Fluxo Inclui propriedades que determinam como os widgets de layout com fluxo posicionam os widgets filho. Aplicável apenas a widgets de layout.
Outro Inclui propriedades que controlam como os erros de validação exibem e definem o título HTML do widget. Na maioria dos navegadores, o título HTML é exibido como uma dica.

Propriedades básicas

Todos os widgets têm duas propriedades básicas:

  • Nome: identificador usado para referenciar o widget na vinculação de dados, scripts, estilos e muito mais. Os nomes dos widgets precisam ser exclusivos para a página deles e não podem começar com um número ou conter espaços. O App Maker gera nomes automaticamente quando você adiciona widgets a uma página. No entanto, é mais recomendado renomear os widgets, dando um nome que você consiga lembrar depois para fins de referência.
  • Fonte de dados: atribui uma fonte de dados para fornecer ao widget acesso fácil a ela. É possível atribuir fontes de dados somente a widgets de formulário e de layout. Todos os outros herdam a fonte de dados do widget de layout pai.

Ciclo de vida dos widgets

Os widgets têm um ciclo de vida simples: eles são criados pelo App Maker e depois anexados a uma página para que fiquem visíveis. Quando não são mais necessários, eles são desanexados pelo App Maker. É possível anexar e desanexar os widgets várias vezes, mas a criação é feita somente uma vez.

Criação

Ao criar um widget, o App Maker define as propriedades dele e gera o HTML. É possível acessar as propriedades do widget logo depois da criação por meio da propriedade app.pages mesmo se ele ainda não estiver anexado a uma página. Por padrão, o App Maker cria a maioria dos widgets imediatamente após o usuário acessar um app. As listas e os widgets relacionados são exceções: o App Maker cria apenas os widgets filho após o carregamento das fontes de dados.

Anexação

Quando um widget é anexado a uma página pelo App Maker, na verdade, ele é inserido na estrutura HTML ou DOM para que fique visível aos usuários. O App Maker anexa a maioria dos widgets de uma página quando o usuário a visita. Os widgets são descarregados quando o usuário sai da página. Novamente, as listas e os widgets relacionados são exceções porque os filhos deles são anexados só depois do carregamento das fontes de dados e porque eles podem anexar e desanexar novas linhas de acordo com alterações nas fontes.

O App Maker define vinculações quando anexa widgets e as remove quando a desanexação deles é feita. Isso significa o seguinte: as propriedades não são confiáveis para definir valores antes da anexação do widget. Além disso, solicitações do servidor costumam ser ativadas à medida que as fontes de dados são carregadas para preencher vinculações.

Todos os widgets têm eventos onAttach, onDetach e onDataLoad que executam código em resposta a alterações nos ciclos de vida dos widgets. Leia mais sobre esses eventos em Lógica dos widgets.

Configurações de desempenho

Controle quando as páginas e os widgets do app são inicializados. Por padrão, o App Maker faz download de todos os componentes quando um usuário abre o app. No entanto, ao adicionar páginas, talvez seja necessário adiar o carregamento de algum conteúdo para impedir que o app demore muito para abrir.

Para controlar como o app inicializa o conteúdo, clique em uma página ou painel e selecione Configurações de desempenho no Editor de propriedades. Escolha uma das opções a seguir:

  • Inicialização completa: o App Maker inicializa todas as páginas e widgets quando o usuário abre o app. Essa é a configuração padrão do App Maker e funciona melhor em apps menores. Com o uso dessa opção em todas as páginas, um app grande com páginas complexas pode demorar muito para abrir.
  • Inicialização parcial: escolha essa opção para painéis ou páginas leves em apps grandes. O App Maker faz download do conteúdo e da estrutura de uma página ou painel quando o usuário abre o app. No entanto, os widgets não são inicializados até que o usuário abra a página principal. Com essa opção, o app é carregado mais rapidamente do que a configuração padrão. No entanto, o tempo de carregamento de páginas separadas pode aumentar.
  • Inicialização adiada: essa opção é melhor para páginas complexas em apps grandes. O App Maker não carrega a estrutura da página ou do painel, exceto se o usuário abrir a página principal. O app exibe um indicador de progresso animado enquanto o App Maker faz download do conteúdo e cria a página. Com essa opção, o app é carregado mais rapidamente. No entanto, o carregamento de páginas separadas é mais lento.
  • Inicialização baseada em script: use essa opção se o app incluir widgets usados somente quando determinadas condições forem atendidas. É possível escrever um script que chame createChildren quando o usuário executa ações específicas. O App Maker não carrega widgets filho, exceto se forem necessários.

Por exemplo, se o app demorar muito para carregar, use a opção de Inicialização completa nas páginas mais importantes. Atrase o carregamento de outras páginas usando a Inicialização parcial. Se você achar que seu app ainda demora muito para carregar, utilize a opção de Inicialização adiada em determinadas páginas.

Lembre-se de que as propriedades e vinculações de um widget ficam inacessíveis até que ele seja inicializado. Você precisa testar completamente todas as configurações de desempenho personalizadas antes de implantar essas alterações para os usuários.

Veja práticas recomendadas sobre design de apps.