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.

Entre na página inicial do Power Apps e abra o aplicativo Máquinas de Café Contoso no modo de edição.
Na tela inicial, selecione o botão Exibir Catálogo. Na fórmula OnSelect, altere Navigate('Catalog Screen') para:

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

Navigate('Admin Screen',ScreenTransition.Fade)
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.
Adicione uma transição a um botão Voltar. Coloque o aplicativo novamente no modo de edição e vá para a Admin Screen.
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)
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?
Retorne ao modo de edição. Adicione uma tela de Sucesso selecionando Nova tela>Modelos>Sucesso.
Renomeie a tela como Success Screen.
Vá para a Catalog Screen e selecione seu controle Form. Você pode selecioná-lo no painel de Exibição em árvore.
Na propriedade OnSuccess do formulário, insira o seguinte código:

Navigate(‘Success Screen’,ScreenTransition.Fade)
Agora que você adicionou OnSuccess ao formulário, vá para a Success Screen selecionando Success Screen no painel de Exibição em árvore.
Na Success Screen, insira um controle de Timer.
Ajuste as seguintes propriedades para o controle de Timer:
- AutoStart: true
- Duration: 4000
- OnTimerEnd: Navigate(‘Catalog Screen’,ScreenTransition.Fade)
- Visible: false
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.
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.
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.
Insira um controle Dropdown na tela inicial e posicione-o sob o canto superior esquerdo do retângulo do cabeçalho.
Insira um controle Text label e atualize a propriedade Text para Screen Navigation. Coloque-o logo acima do controle Dropdown.
Selecione o controle Dropdown. Atualize a propriedade Default para:

""
Ainda no controle Dropdown, atualize a propriedade Items para:

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

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)

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.
Adicione um ícone Home à Catalog Screen. Coloque o aplicativo novamente no modo de edição e selecione Catalog Screen.
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.
Cole a cópia do ícone Voltar (Ctrl+V) e reposicione-a no canto superior esquerdo do retângulo do cabeçalho.
Com o ícone Voltar colado selecionado, use o botão Ícone na barra de comando e altere o ícone para o ícone Home.
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.
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.

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

Comentários