Pop-ups e caixas de diálogo

Use os pop-ups e as caixas de diálogo para exibir informações e solicitar uma resposta do usuário. Esses recursos são úteis para:

  • confirmar uma solicitação do usuário, como a exclusão de um registro;
  • ter como foco uma tarefa importante, como a criação de uma nova ordem de inventário;
  • exibir informações importantes que o usuário precisa confirmar;
  • mostrar que uma transação está em andamento após o usuário realizar uma ação.

O App Maker é compatível com dois tipos de caixas de diálogo:

  • Pop-ups: opção pré-configurada que abrange uma variedade de cenários de notificação. Os pop-ups atendem aos padrões do "Material Design".
  • Caixas de diálogo personalizadas: páginas inteiras ou em fragmento que você cria para notificar os usuários do app. Configurar caixas de diálogo personalizadas requer mais trabalho. No entanto, elas são úteis se o aplicativo tem uma aparência diferente, que não seja "Material Design".

Usar pop-ups integrados do App Maker

Os pop-ups são uma ótima maneira de adicionar interações e notificações modais e não modais com rapidez ao aplicativo.

Adicionar um pop-up é igual a incluir uma página inteira ou em fragmento:

  1. Coloque o ponteiro sobre Páginas. Depois, clique em "Adicionar" add e em Pop-up.
  2. Edite o texto da caixa de diálogo pop-up.
  3. Use o Editor de propriedades para configurar o onClick e outras propriedades que controlam o funcionamento do pop-up.

Pop-up vazio

Use esse recurso como uma tela em branco para criar um pop-up personalizado. Ele não inclui conteúdo gerado. Portanto, é preciso adicionar widgets para criar uma caixa de diálogo.

Personalizar este pop-up

Configure a aparência e os eventos do pop-up e dos widgets dele no Editor de propriedade.

Use esse recurso para adicionar um menu que desliza na tela a partir da esquerda, além de exibir os destinos de navegação do aplicativo. O menu de navegação vincula apenas as páginas que existem no momento da criação dele. Se você adicionar páginas ao aplicativo depois, será necessário adicioná-las manualmente ao menu.

Personalizar este pop-up

Configure a aparência e os eventos do pop-up no Editor de propriedade. Também é possível editar o texto exibido no menu e arrastar as páginas para reorganizar a ordem delas.

Caixa de diálogo de confirmação

Use a confirmação para que os usuários garantam que realmente querem prosseguir com a ação que acabaram de invocar. Essa caixa de diálogo costuma ser associada a um aviso ou informações importantes relacionadas a essa ação.

Personalizar este pop-up

Configure a aparência e os eventos do pop-up no Editor de propriedade.

Além disso, este pop-up requer que você:

  • edite o título. Os títulos da caixa de diálogo de confirmação precisam ser significativos e refletir a ação solicitada;
  • edite o campo de texto para descrever o que acontecerá se o usuário concluir a ação;
  • altere o texto do botão e atribua eventos onClick a ele.

Caixa de diálogo de notificação

Use este pop-up para informar ao usuário sobre um evento ou ação não importante. Ele não requer entrada do usuário.

Personalizar este pop-up

Configure a aparência e os eventos do pop-up no Editor de propriedade. Por padrão, o botão Ok fecha a caixa de diálogo.

Além disso, este pop-up requer que você:

  • edite o título. O título da caixa de diálogo precisa ser significativo e refletir a descrição dela;
  • edite o campo de texto para descrever o que o aplicativo está fazendo.

Use este pop-up para solicitar que o usuário aguarde enquanto o aplicativo conclui uma tarefa.

Personalizar este pop-up

Configure a aparência e os eventos do pop-up no Editor de propriedade.

Snackbar

Use este pop-up para fornecer um feedback rápido sobre uma operação por meio de uma mensagem na parte inferior da tela. Ele contém uma única linha de texto relacionada à operação.

Personalizar este pop-up

Configure a aparência e os eventos do pop-up no Editor de propriedade.

Além disso, este pop-up requer que você:

  • edite o campo de texto. Ele precisa ser uma única linha de texto relacionada à ação;
  • se necessário, altere o texto do botão Ignorar para uma ação mais apropriada e atualize o evento onClick dele.

Criar uma caixa de diálogo personalizada

É possível usar qualquer página inteira ou em fragmento como uma caixa de diálogo:

  1. Arraste um botão para a página e clique na propriedade onClick.
  2. Selecione a ação predefinida Abrir caixa de diálogo.
  3. Selecione a página inteira ou em fragmento para abri-la como uma caixa de diálogo.

Outra opção é escrever o código em um script do lado do cliente para mostrar uma página chamada MyDialog como uma caixa de diálogo:

app.showDialog(app.pages.MyDialog);
    

Fechar uma caixa de diálogo

Para fechar uma caixa de diálogo aberta quando o usuário do aplicativo clica em um botão, faça o seguinte:

  1. Selecione o widget de botão e clique na propriedade onClick.
  2. Selecione a ação Fechar caixa de diálogo.

Outra opção é escrever o código em um script do lado do cliente:

app.closeDialog();
    

Propriedades do CSS

Use as classes do CSS a seguir para personalizar as propriedades da caixa de diálogo no app:

  • .app-Dialog: aplicada ao elemento de nível superior da caixa de diálogo.
  • .app-DialogGlass: aplicada ao elemento glass que abrange o restante da IU enquanto a caixa de diálogo está aberta.
  • .app-DialogBody: aplicada ao conteúdo da caixa de diálogo.

Tamanho da caixa de diálogo

O tamanho da caixa de diálogo é determinado pelas dimensões da página inteira ou em fragmento.

Para alterar as dimensões da caixa de diálogo, clique na página inteira ou em fragmento e modifique as dimensões no Editor de propriedades.