Exercício: prática de navegação em aplicativos

  • 30 minutos

Você está chegando ao fim deste módulo, então, vamos reunir tudo em um exercício.

No exemplo a seguir, você continua adicionando a funcionalidade de transição de tela ao aplicativo Máquinas de Café Contoso, mas pode usar qualquer aplicativo de várias telas. As etapas a seguir correspondem ao aplicativo em que você está trabalhando neste roteiro de aprendizagem.

Observação

Ao inserir fórmulas, é melhor digitá-las na fórmula (fx) em vez de usar a técnica de copiar/colar. As aspas simples e duplas não são traduzidas da mesma maneira no Power Apps.

  1. Entre na página inicial do Power Apps e abra o aplicativo Máquinas de Café Contoso no modo de edição.

  2. Na tela inicial, selecione o botão Exibir Catálogo. Na fórmula OnSelect, altere Navigate('Catalog Screen') para:

    Navigate('Catalog Screen',ScreenTransition.Cover)

  3. Ainda na tela inicial, selecione o botão Admin Screen. Na fórmula OnSelect, altere Navigate('Admin Screen') para:

    Navigate('Admin Screen',ScreenTransition.Fade)

  4. Coloque o aplicativo no modo de visualização. Teste a aparência das transições selecionando os botões na tela inicial para ir para as respectivas telas e use os botões Voltar para voltar à tela inicial.

  5. Adicione uma transição a um botão Voltar. Coloque o aplicativo novamente no modo de edição e vá para a Admin Screen.

  6. Selecione o ícone de seta (ou qualquer ícone que você esteja usando como botão Voltar) e altere a fórmula de OnSelect de Back() para:

    Back(ScreenTransition.UnCoverRight)

  7. Volte para a tela inicial e coloque seu aplicativo no modo de visualização. Selecione o botão Admin Screen e selecione o botão Voltar. Você notou a diferença na transição?

  8. Retorne ao modo de edição. Adicione uma tela de Sucesso selecionando Nova tela>Modelos>Sucesso.

  9. Renomeie a tela como Success Screen.

  10. Vá para a Catalog Screen e selecione seu controle Form. Você pode selecioná-lo no painel de Exibição em árvore.

  11. Na propriedade OnSuccess do formulário, insira o seguinte código:

    Navigate(‘Success Screen’,ScreenTransition.Fade)

  12. Agora que você adicionou OnSuccess ao formulário, vá para a Success Screen selecionando Success Screen no painel de Exibição em árvore.

  13. Na Success Screen, insira um controle de Timer.

  14. Ajuste as seguintes propriedades para o controle de Timer:

    • AutoStart: true

    • Duration: 4000

    • OnTimerEnd: Navigate(‘Catalog Screen’,ScreenTransition.Fade)

    • Visible: false

    Captura de tela das propriedades de controle de temporizador.

  15. Para testar a funcionalidade do temporizador de Success Screen, retorne à Catalog Screen e coloque o aplicativo no modo de exibição. Selecione qualquer item e faça uma alteração no item do formulário.

  16. Selecione o botão Salvar alterações na parte inferior do formulário. Se você fizer isso corretamente, o aplicativo mostrará a Success Screen por quatro segundos e, depois, retornará para a Catalog Screen, em que você pode continuar fazendo alterações.

  17. Feche o modo de visualização e retorne à tela inicial no painel de Exibição em árvore. Agora você criará um menu suspenso de navegação.

  18. Insira um controle Dropdown na tela inicial e posicione-o sob o canto superior esquerdo do retângulo do cabeçalho.

  19. Insira um controle Text label e atualize a propriedade Text para Screen Navigation. Coloque-o logo acima do controle Dropdown.

  20. Selecione o controle Dropdown. Atualize a propriedade Default para:

    ""

  21. Ainda no controle Dropdown, atualize a propriedade Items para:

    ["", "Catalog", "Admin"]

  22. Insira a seguinte fórmula para a propriedade OnChange do controle Dropdown:

    Switch(
    Self.SelectedText.Value,
    "Catalog",
    Navigate(
        'Catalog Screen',
        ScreenTransition.Cover
    ),
    "Admin",
    Navigate(
        'Admin Screen',
        ScreenTransition.Cover
    )
);
Reset(Self)

  23. Coloque o aplicativo novamente no modo de exibição/reprodução e teste a funcionalidade OnChange do controle DropDown para ir para as outras telas.

  24. Adicione um ícone Home à Catalog Screen. Coloque o aplicativo novamente no modo de edição e selecione Catalog Screen.

  25. Selecione o controle do ícone Voltar no canto superior direito da Catalog Screen e copie-o usando Ctrl+C ou clicando com o botão direito e selecionando Copiar.

  26. Cole a cópia do ícone Voltar (Ctrl+V) e reposicione-a no canto superior esquerdo do retângulo do cabeçalho.

  27. Com o ícone Voltar colado selecionado, use o botão Ícone na barra de comando e altere o ícone para o ícone Home.

  28. Altere a propriedade OnSelect para:

    Navigate('Home Screen', ScreenTransition.CoverRight)

    Agora você tem uma maneira de retornar ao início após salvar as alterações nos dados.

  29. Na Catalog Screen, coloque o aplicativo no modo de visualização. Verifique se a seleção do controle do ícone de início leve você à tela inicial.

Você adicionou com êxito algumas funcionalidades de navegação a um aplicativo:

  • Transições de tela para as funções Navigate e Back.
  • Uma tela de Sucesso que você acessa usando a propriedade OnSuccess de um formulário.
  • Um controle de Timer que retorna à Catalog Screen usando a propriedade OnTimerEnd.
  • Um controle Dropdown que vai para outras telas usando a propriedade OnChange.
  • Um ícone Home para permitir que os usuários retornem à tela inicial.

Em seguida, você concluirá uma verificação de conhecimento.