Xamarin.Forms MVVM com Prism – Parte 1

Padrão

Fala Jovem.

Hoje vamos iniciar uma série sobre desenvolvimento de apps com Xamarin.Forms, utilizando MVVM e o Framework Prism. Vejo poucos artigos nacionais abordando a utilização do Prism, em especial materiais introdutórios. Pois bem, vamos resolver essa lacuna Baby.

Farei alguns posts, acredito que uns 5 ou 6, que irão mostrar como usar o melhor do Prism.  Vou aproveitar e expor as experiências que tive com Prism nesses  últimos meses.

Começando do Básico

O Prism é um Framework MVVM que foi criado pela “Patterns & Practices” que é uma divisão da Microsoft.  Posteriormente ele foi liberado de forma open e hoje é mantido pela comunidade e alguns MVP’s encabeçam o projeto dentro do GitHub. O Prism permite a criação de aplicativos XAML com WPF, Windows 10 UWP e Xamarin.Forms. Ele fornece uma coleção de design patterns que são uteis quando se trabalha com XAML, além de permitir implementar o MVVM, Injeção de dependência entre outras funcionalidades.

Antes de seguirmos, estou tomando por base que você já tem Visual Studio, conhece o básico de C#, Xamarin, Xamarin.Forms e MVVM. Se você não sabe o que é MVVM clique aqui.

Basicamente MVVM tem esse comportamento:

É quase um primo do MVC.

Observação: Nada lhe impede de criar sua própria implementação do MVVM no Xamarin.Forms ou usar outros frameworks com Light ou Cross.

Para começarmos, vamos instalar o “Prism Template Pack”, ele irá nos ajudar bastante.  Clique aqui para baixar.  A instalação é só clicar em Install e pronto.

Agora vamos abrir nosso Visual Studio (VS) e criar nosso projeto. Não tem muito erro, o Prism Template pack só tem uma opção para Xamarin.Forms.

Logo em seguida ele abre um janela super bacana, para definir quais plataformas nosso app irá rodar. Eu escolhi só Android =)

Os templates Xamarin Forms poderiam tem essa janela!  =)

Após clicar no “Create project” o VS irá criar nossa solution ficando assim:

Basicamente é  um projeto Xamarin.Forms Portable que você já conhece, só que já está com os pacotes e referências do Prism. Nada impede de usar o shared project, ok?!

Por padrão o “motor” de injeção de dependência é o Unity .  Mas nada impede de você outras opções junto com o Prism. Por exemplo o Ninjact ou AutoFac

Se você olhar no projeto Portable verá que foram criadas algumas pastas.

  • Views: Será nessa pasta que iremos colocar nossas Views. Ela já tem a MainPage.xaml
  • ViewModels:  Para guardar nossa ViewModel. Já tem o MainPageViewModel.cs
  • App: Uma classe que já está configurada para inicializar o Prism

Se abrirmos o App.xaml.cs veremos:

Temos três métodos básicos:

  • App (Construtor) :  É o construtor base que leva o IPlatformInitializer  como objeto de parâmetros;
  • OnInitialized:  Carrega a infra utilizada pelo Forms através do InitializeComponent() e faz a navegação para a tela inicial do app. (Mais adiante vamos conhecer melhor essa implementação e outras opções);
  • RegisterTypes:  É onde registramos os “container” de injeção de dependência, para cada view ou service do nosso app;

Por padrão setamos nulo no “IPlatformInitializer initializer = null”. Mas poderíamos aproveitar para registrar alguma dependência específicas do container, que só existem em um projeto da nossa solution (Veremos isso mais adiante, por hora deixa Null.)

Conectando Views e ViewModels

A chave para fazer o MVVM funcionar é conectar a ViewModel com a View e assim realizar o “binding” (BindingContext ) dos dados da ViewModel na View. (Calma que já detalhamos melhor…)

Um detalhe, se você já trabalhou com WPF, o BindingContext aqui no Xamarin.Forms é o seu DataContext lá do WPF.

Prism faz uso de uma convenção de nomenclatura simples para ligar automaticamente uma ViewModel a sua View. Olha só:

  • Os arquivos (Pages) XAML devem ser armazenados em uma pasta do projeto chamado Views;
  • O ViewModel deve ser armazenado em uma pasta do projeto chamado ViewModels e precisa ter o mesmo nome da Page XAML mais o sufixo ViewModel (por exemplo, o ViewModel ligado ao MainPage.xaml será chamado MainPageViewModel ). Sacou!

Além de seguir esse padrão nos nomes dos arquivos e pastas, precisamos registrar no “container” cada Page XAML que adicionamos ao nosso app e assim tratar corretamente a navegação.

Para fazer isso utilizamos o metodo registerTypes da nossa App Class.

Vamos adicionar mais uma Page XAML em nosso app para ver como vai ficar.

Clique no seu projeto portable com o botão direito / Add/ New Item

Lembra do Template pack que instalamos no inicio? Então ele vai ser uma mão na roda para adicionarmos novas Pages XAML. Clique na opção Prism e na lista de opção escolha Prism ContentPage (Xamarin.Forms), de um nome para Page e clique em add.  Vamos olhar nossa solution.

Ele já criou a View e ViewModel. Se olharmos o App.xaml.cs veremos que ele já registrou essa nova Page XAML.

Isso já nos livrou de ter que criar esses arquivos de forma manualmente ou de acabar esquecendo algum deles ou de registrar a Page.

Em outros Framework MVVM, você registra o ViewModels e eventualmente, todos os serviços relacionados a ele. No Prism, basta registrar o tipo da Page “Container.RegisterTypeForNavigation<Cliente>(); ”  E pronto a ligação já está feita.

Se você não é um fã de convenções de nomenclatura, você não é obrigado a usá-los, na verdade, o método RegisterTypeForNavigation () tem outra assinatura, que  é RegisterTypeForNavigation <T, Y> () , onde T é o tipo de Page Xaml e Y é o tipo do ViewModel que deseja definir como BindingContext . Se você quiser ligar o seu MainPage a um ViewModel chamado ClienteViewModel , basta registra-lo assim:

Na sequência vamos abortar outras formas de navegação no RegisterTypes().

O ViewModel

Abaixo vemos o código do MainPage.xaml, notamos que no ContentPage vemos apenas um atributo utilizado pelo Prism, o ViewModelLocator.AutowireViewModel.

Através desse atributo que o Prism faz a ligação da View com a ViewModel. Se ele for definido como verdadeiro e você respeitar as convenções de nomenclatura o seu ViewModel será o BindingContext da sua View de forma automática.

Ainda no XAML criamos um StackLayout e um label para fazer o Binding da nossa propriedade Title.

Observação: A partir da versão 6.2 do Prism, esse atributo não se faz mais necessário, a não ser que você deseja definir ele como falso. Ele ainda acaba vindo em seu XAML para ficar mais fácil o entendimento. Mas se seguir a convenção pode remover ele sem medo. Eu prefiro deixar ele no código para ficar mais claro.

Uma característica dos Framework’s MVVM é ter uma classe para que nossos ViewModels possam ter acesso rápido as funções mais utilizadas. No Prism podemos usar a BindableBase. Ela implementa o INotifyPropertyChanged na interface e assim propaga as mudanças entre a View e ViewModel. Dessa forma podemos usar o SetProperty() para definir os valores e a INotifyPropertyChanged se encarrega de avisar os controles da mudança.

Vamos dar uma olhada no MainPageViewModel.cs

Nossa ViewModel está herdando da BindableBase e usando a interface INavigationAware (Falaremos mais dessa interface nos próximos posts).

Foi criado uma propriedade Title que através do MVVM está ligada ao Title da MainPage.xaml . Temos um construtor e o método OnNavigatedFrom vazio (Veremos mais sobre eles nos próximos posts).

Além de termos o método OnNavigatedTo, e esse já está com uma implementação básica. Antes de falar sobre ele, vamos voltar no método OnInitialized do App.xaml.cs:

O Através do NavigationService  o NavigateAsync está chamado a View MainPage e passando a string “Hello%20from%20Xamarin.Forms” dentro da chave “title” . Para tratar esses parâmetros de navegação o Prism tem a classe “NavigationParameters” . (Isso me fez lembrar quando passava valores via Get em url… rsrsr)

Ou seja, quando NavigateAsync chama a View MainPage ele chega no método OnNavigatedTo que está implementado na ViewModel da MainPage.

Tendo isso em mente, voltamos para o método OnNavigatedTo

Ele recebe um objeto do tipo NavigationParameters e se existir  a Key “title” dentro do objeto, ele carrega o conteúdo e concatena com “and prism” e coloca na nossa propriedade Title. Como nossa propriedade Title do ViewModel está ligada a Title da View ele faz o binding desse texto em nossa View que exibi na tela: “Hello from Xamarin.Forms and Prism”.

Olha só que lindo…. MVVM mostrando sua força.

Hoje vimos o primeiro grão de areia desse deserto que é o MVVM…(Que dramático :-). Brincadeiras a parte, o que vimos hoje é só uma micro introdução do Prism. No próximo post vamos conhecer algumas outras opções de navegação e como usar os Service no Prism.

Deixe nos cometários suas dúvidas, problemas, erros que achou e como podemos melhorar essa serie de post sobre Prism.

Qualquer coisa estou no Twitter  @mhbsantos ou no gitHub mhbsti

Forte Abraço.

Marcos Hitanael Barchiki dos Santos

11 comentários sobre “Xamarin.Forms MVVM com Prism – Parte 1

    • mhbs

      Sim. Não irá precisar. O Prism irá fazer a ligação entre a sua view e o ViewModel. Exemplo, se você criar uma propriedade na ViewModel chamada NomeCliente poderá fazer um binding dela no sua view com {Binding NomeCliente}

      • Juliano Silva

        Obrigado pela resposta,
        Aproveitando sua resposta, hoje eu estou trabalhando em um projeto Xamarin Forms mais estou passando por um problema que eu já vinculei a minha View com a ViewModel, mais acontece o seguinte quando eu crio uma lista de objetos em memoria;
        exemplo : listaPessoa.Add(New Pessoa{ NomePessoa = “Fulano”});
        o binding na View funciona perfeitamente.

        Mais quando eu faço o mesmo processo só que preenchendo a lista com informações vindo do JasonConvert a mesma View não lista não aparece as informações vindas do Web Server. Mesmo eu colocando a propriedade List que eu criei no Binding no ListView;
        exemplo: ItemsSource=”{Binding ListaPessoas}”

        Isso já aconteceu com você?
        Você tem alguma sugestão ou solução possível ?

  1. Muito bom o post, você esta de parabéns, sou iniciante em Xamarin e estava querendo dar uma olhada em um Framework, depois de algum tempo, vi que o Prism é muito elogiado e declarado simples, mas muito forte, e com seu posto vi isso mesmo, parabéns, ganhou um seguidor no blog!

Deixe uma resposta

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