Xamarin.Forms MVVM com Prism – Parte 2

Padrão

Fala Jovem!

Hoje vamos dar sequência nos trabalhos com o Framework MVVM Prism. Se você não leu nossa introdução clica aqui.

O que vamos fazer?

Vamos criar um app (Apenas a navegação) que tem uma MasterDetailPage (Aquela page com menu lateral) e Uma página inicial que terá um botão que leva para página de detalhes.

Bora la!

Crie um novo projeto Prism Xamarin Forms (Vou fazer apenas Android).

Vamos adicionar  uma page do tipo “Prism MasterDetailPage” com o nome de Inicial.xaml

Vamos agora incluir a propriedade Title logo abaixo do x:Class .

Vamos criar uma MasterDetailPage.Master e colocar um stacklayout e um button que nos levará de volta para a Inicial. É a master que ira gerar os itens do nosso menu.

Ok, agora vamos adicionar ao nosso projeto um Navigation Page para gerar a interface de navegação. O nome será Navegacao.xaml

Ok. Vamos criar uma ContentPage chamada Detalhes para entendermos o conceito de navegação do Prism. Iremos navegar da Inicial/MainPage para a detalhes. Vamos incluir o titulo Detalhes e um texto detalhes no centro da page. Apenas para identificar que estamos na Page Detalhes.

A MainPage será a nossa página principal  e será carrega junto com nossa masterdetail Inicial (Já vamos detalhar melhor essa história de juntos).

Na MainPage adicione um titulo Inicial, uma label com o texto Inicial e um Botão detalhes com um Command para NavigateCommand.

Vamos editar nosso App.xaml.cs para que o app carregue nossa Page Inicial. O projeto prism criou seu app chamando a MainPage.

Nós vamos alterar essa linha para ficar assim:

Aqui estamos dizendo (de forma bem simplista) ao Prism que carregue a Inicial (Nossa masterdetail), passe pela navegação e carregue a MainPage.

Se rodarmos nosso app você verá que o botão Inicial do menu não está executando nenhuma ação e o botão detalhes também não.

Agora vamos editar a mainPageViewModel.cs para executar nosso comando de navegação NavigateCommand do botão detalhes.

Inicialmente adicionamos o using Prism.Navigation e implementamos a interface INavigationAware . A interface prevê dois metodos: OnNavigatedFrom e OnNavigatedTo  que iremos discutir em um próximo post. Por hora vamos no concentrar em nosso construtor e implementar o NavigateCommand do nosso Botão detalhes.

Criamos uma propriedade do tipo DelegateCommand com o nome que atribuímos ao commad do nosso botão. No caso NavigateCommand. Logo em seguida criamos um atributo _navigationService para controlar nosso fluxo de navegação.

No construtor MainPageViewModel recebemos o parâmetro navigationService . Dentro do construtor atribuímos o navigationService para o  _navigationService. Logo em seguida vamos executar nosso NavigateCommand e chamar nosso método Detalhe(). E o método detalhe() que irá realmente nos levar para a página detalhes, através do método NavigateAsync.

Agora se clicarmos no botão detalhes da MainPage ele irá nos levar para a página de detalhes e teremos no topo um botão voltar gerado pelo Prism.

Coisa linda hem?!

Agora vamos seguir a mesma logica e editar o InicialViewModel.cs ele deve ficar assim:

Perceba que não implementamos  interface INavigationAware . Eu apenas mostrei ela na tela mainPage para deixar você curioso para nosso próximos post =).

Resumindo, você pode remover a implementação da interface INavigationAware do MainPageViewModel.cs e tudo estará  funcionando.

Por hoje vamos ficando por aqui pessoal. Esse foi um primeiro contato com os recursos de navegação de tela do Prism. Nos próximos post vamos aprender sobre Deep Link e recursos mais avançados na parte de navegação. Além de outros tipos de tela como TabbedPage e CarouselPage.

Os fontes gerados nessa série estão disponíveis em: https://github.com/mhbsti/serie-prism

Abraço.

Marcos Hitanael Barchiki dos Santos

13 comentários sobre “Xamarin.Forms MVVM com Prism – Parte 2

  1. Carlos

    Cara muito legal o seu post, mas refazendo aqui não deu certo ele estoura um exception quando vai rodar no emulador sabe me dizer o que pode ser ?

  2. Milton Câmara

    Estou implementando este . seu exemplo, porém me deparei com uma situação, será que você poderia ajudar? Olha só, tenho uma WelcomPage que não tem nada, somente a página pura, quando clicar no botão entrar, que existe nesta página, vou navegar até a MainPage que existe este MenuLateral, é possível utilizando este conceito de nevegação do Prism?

    Muito obrigado!

    • mhbs

      Sim é possível. No App.xaml.cs utilize o NavigationService.NavigateAsync(“WelcomPage”). No Botão entrar direcione da mesma forma (Vai precisar criar um command para esse botão entrar e assim direcionar para a mainpage). A MainPage precisa ser uma MasterDatailPage para ter o menu lateral. Abraço.

  3. Kepler

    Olá Marcos, tudo bom? Gostei muito do seu post.
    Eu to tendo um problema com o prism que tá na versão 1.10 que ele já cria uma NavigationPage lá no RegisterTypes e quando eu vou colocar o Caminho “Inicial/NavigationPage/MainPage” ou “Inicial/Navegacao/MainPage” ao compilar ele da uma exception. Mas quando eu não uso a Inicial e deixo apenas “NavigationPage/MainPage” roda sem problemas. Você pode me ajudar?

  4. Renan Felipe Ferreira

    Parabéns meu querido, espero que continue com as postagens. Tinha dúvidas sobre como dar o primeiro passo com MasterDetailPage e você a sanou. Muito obrigado 🙂

Deixe uma resposta

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *