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

Você está chegando ao final deste módulo, então vamos aplicar o que foi aprendido em um exercício guiado.

Neste exemplo, você continuará configurando transições de tela no aplicativo Contoso Coffee Machines. Se estiver usando outro aplicativo de várias telas, você poderá seguir etapas semelhantes.

1. Entre na página inicial do Power Apps e abra o aplicativo Contoso Coffee Machines no modo de edição.

2. Na tela inicial, selecione o botão Exibir Catálogo (Button2 no exemplo abaixo). Na propriedade OnSelect, substitua:

   Navigate('Catalog Screen')

   por:

   Navigate('Catalog Screen',ScreenTransition.Cover)

   

3. Ainda na tela inicial, selecione o botão Admin Screen. Em sua fórmula OnSelect, altere:

   Navigate('Admin Screen')

   para:

   Navigate('Admin Screen',ScreenTransition.Fade)

4. Visualize o aplicativo. Selecione os botões Catálogo e Administração para observar as transições. Em seguida, use os botões Voltar para retornar à tela inicial.

5. Alterne de volta para o modo de edição. Em Admin Screen, selecione o ícone de seta usado como um botão para voltar. Atualize a propriedade OnSelect:

   Back()

   para:

   Back(ScreenTransition.UnCoverRight)

6. Visualize o aplicativo novamente. Selecione o botão Admin Screen e selecione o botão Voltar. Observe a diferença na transição de retorno.

7. No modo de edição, insira uma nova tela: Nova tela>Modelos>Sucesso. Renomeie-a para Success Screen.

8. Em Catalog Screen, selecione seu controle de Formulário no Modo de exibição de árvore.

9. Defina a propriedade OnSuccess do formulário como:

   Navigate(‘Success Screen’,ScreenTransition.Fade)

10. Navegue até Success Screen no Modo de exibição de árvore e insira um controle de Timer.

11. Defina estas propriedades do controle de Timer:

    • AutoStart: true

    • Duration: 4000

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

    • Visible: false

    

12. Retorne à Catalog Screen e visualize o aplicativo. Faça uma alteração no formulário e selecione Salvar alterações.

    O aplicativo deve exibir Success Screen por quatro segundos e, em seguida, retornar à Catalog Screen.

13. Saia do modo de visualização e retorne para a Home Screen. Agora, adicione um menu de navegação suspenso.

14. Insira um controle de Lista Suspensa e posicione-a na área superior esquerda do retângulo do cabeçalho.

15. Adicione um controle de Rótulo de texto acima da lista suspensa e defina sua propriedade Text como:

    Screen Navigation

    Defina a propriedade Color como:

    Color.White

16. Selecione o controle Dropdown e defina suas propriedades:

    • Default: ""

    • Items: ["", "Catalog Screen", "Admin Screen"]

17. Defina a propriedade OnChange:

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

    

18. Visualize o aplicativo novamente. Teste a lista suspensa para confirmar a navegação entre telas.

19. Retorne ao modo de edição e selecione a Catalog Screen. Copie o ícone Voltar (Ctrl+C) e cole-o (Ctrl+V). Mova o ícone duplicado para a parte superior direita do retângulo do cabeçalho.

20. Altere o ícone duplicado para um ícone de Início.

21. Defina a propriedade OnSelect do ícone de Início como:

    Navigate('Home Screen', ScreenTransition.CoverRight)

22. Visualize o aplicativo. Em Catalog Screen, confirme se a seleção do ícone de Início leva você de volta à Home Screen.

Você configurou com êxito os recursos de navegação em seu aplicativo:

• As funções Navigate e Back com transições de tela.
• Uma Success Screen exibida no envio do formulário usando OnSuccess.
• Um Timer que navega após um atraso via OnTimerEnd.
• Um menu Suspenso para navegação usando OnChange.
• Um ícone de Início para retornar à tela inicial.

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