MVVMCoffee

Neste artigo irei demonstrar como você pode trabalhar com o pattern MVVM (Model-View-ViewModel) em suas aplicações Xamarin.Forms, da maneira que eu considero mais simples possível  e sem depender de nenhum framework.

M V VM

mvvm

“O padrão Model-View-ViewModel (MVVM) ajuda a separar a lógica de negócios e apresentação de um aplicativo de sua interface do usuário (UI) de forma precisa. Mantendo uma separação clara entre a lógica do aplicativo e a interface do usuário, ajudando a resolver vários problemas de desenvolvimento e tornando mais fácil de testar um aplicativo, manter e evoluir. Ele pode também melhorar muito a oportunidades de reutilização de código e permitir que os desenvolvedores e designers de interface do usuário possam mais facilmente colaborarem durante o desenvolvimento de suas respectivas partes de um aplicativo.”Docs Microsoft

MVVMCoffee

Eu resolvi criar este pacote devido a necessidade que encontrei no meu dia-a-dia de trabalho. Lá na empresa temos o costume de não trabalhar com frameworks de MVVM, então toda vez que começo um projeto novo, necessito criar algumas classes bases para que possamos utilizar o MVVM e depois adaptarmos de acordo com a necessidade do projeto.

Pensando nisso, resolvi criar esta biblioteca para não precisar realizar este trabalho toda vez que iniciamos um novo projeto. Assim, eu ganho o tempo para tomar um café.

Gostaria de ressaltar que esta biblioteca não tem o intuito de competir ou substituir o uso dos frameworks. Caso você esteja buscando referências sobre os frameworks para MVVM, recomendo pesquisar sobre: MVVM Cross ou Prism, são dois ótimos frameworks e bem consolidados no mercado.

Vamos ao que interessa, como que você pode utilizar este plugin e também ganhar um tempo para tomar um café.

ADICIONANDO O NUGET PACKAGE

Instale o plugin em seu projeto compartilhado.

Screen Shot 2019-07-24 at 17.16.16

Estrutura de pastas

É de suma importância que você crie a seguintes estrutura de pastas em seu app para que o Plugin possa funcionar corretamente.

Crie três pastas, sendo elas: Models, Views e ViewModels.

  • Models – Pasta para as classes que representam suas entidades.
  • Views – Pasta para as suas pages.
  • ViewModels – Pasta para as classes que representam suas ViewModels.

Screen Shot 2019-07-24 at 17.19.24

Nomenclatura de arquivos

É também de suma importância para que o plugin funcione corretamente que todos os seus arquivos que representam suas Views e ViewModels estejam corretamente nomeados.

  • Views – Todo arquivo de page, precisa terminar com a palavra “Page”.
  • ViewModels – Todos os arquivos que representem ViewModel precisa terminar com a palavra “ViewModel”.

Screen Shot 2019-07-24 at 23.44.24

Essa nomenclatura é necessária para que o plugin possa identificar qual Page pertence a sua respectiva ViewModel.

Model

Toda classe que represente sua entidade, necessita herdar de “BaseModel”, para que dessa forma você possa utilizar  o método SetProperty e com isso a interface INotifyPropertyChanged.

ViewModels

Toda classe que represente uma ViewModel, necessita herdar de “BaseViewModel”, para que dessa forma você possa utilizar as ViewModels nos exemplos de navegação a seguir.

Views

No Code-behind de suas páginas, defina na propriedade BindingContext qual ViewModel pertence aquela Page, como demonstrado a seguir.

Navegação

Para navegação temos 4 métodos, sendo eles:

PushAsync – Colocar uma nova página na pilha de páginas.

 

SetRootAsync – Definir uma nova página como a página root, ou seja, a primeira da pilha de páginas.

 

PopAsync – Navegar para a página anterior da pilha de páginas.

 

PopToRootAsync – Navegar para a primeira página da pilha de páginas.

Hands-on

App

Na classe App.cs comece atribuindo uma nova NavigationPage para MainPage, como demonstrado a seguir.

XAML

Edite sua MainPage adicionando dois Buttons, como demonstrado a seguir.

 

Crie a FormPage, contendo um Entry e uma Label para testar o uso da interface INotifyPropertyChanged  e dois Buttons para utilizar os métodos PopAsync e PopToRootAsync, como demonstrado a seguir.

Observação: Lembre-se de adicionar no Code-behind de suas pages a sua respectiva ViewModel.

ViewModel

Na MainViewModel crie os commands para navegação e seus respectivos métodos.

 

Crie a classe FormViewModel, com os Commads de navegação e seus respectivos métodos, também crie um objeto do tipo Customer.

No final teremos a seguinte estrutura de projeto

Screen Shot 2019-07-27 at 14.56.49

Resultado

ezgif.com-video-to-gif.gif

 

Esse e todos os exemplos deste blog encontram-se disponíveis no GitHub.

icongithub

2 comentários em “MVVMCoffee

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair /  Alterar )

Foto do Google

Você está comentando utilizando sua conta Google. Sair /  Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair /  Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair /  Alterar )

Conectando a %s