Introdução ao MVVM (Model-View-ViewModel)

Introdução

Ao criar um aplicativo é comum termos problemas relacionados à camada de acesso à dados, camada de negócios e comumente na interface com o usuário.

Neste artigo e nos próximos sobre MVVM, vamos ver como melhorar a produtividade, testabilidade e facilidade de manutenção, no desenvolvimento de aplicativos, com o uso de Padrões de Projeto baseado em IU.

MVVM é um padrão de projeto baseado em UI, ele é uma aplicação do MVP, que é uma derivação do MVC. Estes padrões de projeto (MVC, MVP e MVVM) procuram atingir os mesmos objetivos mas com soluções diferentes.

Objetivos

• Rich UI (interface rica)
• Testabilidade
• Modularidade
• Facilidade de manutenção
• Flexibilidade

História do MVVM

MVVM foi introduzido em 2005 por John Gossman, na Microsoft, para ser usado com WPF (Windows Presentation Foundation) sendo uma aplicação concreta do MVP, descrito por Martin Fowler.

O MVVM como implementação do MVP usa varias capacidades específicas disponíveis em WPF, Silverlight, Windows Universal Platform (UWP). Algumas implementações do MVVM tais como MvvmCross, MVVM Light disponibilizam esse padrão para Xamarin.android e Xamarin.iOS.

MVVM Princípios

MVVM tem alguns princípios que quando seguidos, facilitam a sua implementação.

http://practicalmvvm.com/Manifesto/

Princípio da Simplicidade: Cada View deveria ter uma única ViewModel e uma ViewModel deveria fornecer serviços para uma única View.

Princípio da Blendability: Quando usado em plataforma Windows, deveria suportar o uso da ferramenta Blend (instalada junto com o Visual Studio).

Princípio de Designability: A ViewModel deveria disponibilizar dados para ser utilizados em Design Time.

Princípio da Testabilidade: As ViewModels e Models devem permitir/facilitar o uso de testes.

Arquitetura MVVM

View

A View é a interface com o usuário, uma tela, uma janela ou uma interface de entrada e saída qualquer.

A ligação entre a View e a ViewModel ocorre através da propriedade DataContext da View.

DataContext armazena uma referência para a ViewModel e assim através de data binding e commands a View se comunica com a ViewModel e tem acesso as atividades e dados fornecidos pela ViewModel.

A View não executa nenhuma operação no sistema. Ela simplesmente apresenta informações ao usuário e responde à essa interação de forma visual.

A View apenas interage com o usuário.

Por exemplo, numa caixa de texto, o usuário consegue ler ou escrever dados, mas não é tarefa da View validar esses dados ou envia-los para uma base de dados.

Outro caso seria um botão, o usuário pode clicar num botão, ele reage mostrando uma animação. Mas nenhum comando é executado pela View em resposta à essa interação com o usuário.

ViewModel

ViewModel é uma classe não visual, que dá vida a uma View.

A ViewModel não tem nenhuma ligação com a View, nenhuma referência, ela simplesmente fornece os dados e executa ações que a View necessita.

A ViewModel se comunica com a View por expor suas propriedades e através de bindings “notifica” a View sobre alguma alteração nos dados, ou atualiza os dados quando modificados pela View.

Uma ViewModel implementa algumas interfaces, tais como: INotifyPropertyChanged, INotifyCollectionChanged, ICommand, etc.

A ViewModel se conecta diretamente com o Model. Tendo acesso as propriedades e funcionalidades disponibilizadas pelo Model.

Model

O Model é a classe que contém os dados da sua aplicação, como empregado, produto, cliente, etc…

O Model define uma série de propriedades e métodos. Você pode criar um Modeldo zero ou obte-lo através de um ORM tipo Entity Framework ou ainda através de um servidor REST convertido do JSON, por exemplo.

Geralmente o Model também é responsável pela validação dos dados.

Data Binding

Data Binding é o meio de comunicação entre uma View e uma ViewModel.

Se a associação, binding, possui as configurações corretas e os dados fornecem as notificações adequadas, então, quando os dados mudam de valor, os elementos visuais que estão vinculados aos dados refletem alterações automaticamente e vice versa.

Exemplo de binding utilizando WPF

View

[sourcecode language=”csharp”]
<TextBox Text=”{Binding Nome}”/>
[/sourcecode]

ViewModel

[sourcecode language=”csharp”]
public string Nome
{
get
{
return _nome;
}
set
{
_nome = value;
RaisePropertyChanged(“Nome”);
}
}
[/sourcecode]

No exemplo acima, ao alterar o texto no TextBox da View essa alteração é refletida na propriedade Nome da ViewModel.

Se em alguma parte da ViewModel houver uma mudança no conteúdo da propriedade Nome (não da variável _nome) a View é notificada dessa alteração pela chamada RaisePropertyChanged(“Nome”);

[sourcecode language=”csharp”]
Nome = “.NET Coders”; // Atualiza o TextBox na View.
_nome = “.NET Coders”; // Não atualiza o TextBox na View,
// apenas o atributo _nome da ViewModel.
[/sourcecode]

Conclusão

É importante ressaltar que o binding é feito na View.
Quando o ambiente (WPF, UWP, etc.) oferece resursos de bindings nativos, na View, toda a troca de informação é feita através de binding sem nenhum código adicional. Em plataformas onde isso não existe, tais como Android e iOS temos que implementar uma alternativa.

A ViewModel por outro lado, implementa a interface INotifyPropertyChanged definindo o método RaisePropertyChanged, que é responsável em notificar a View sobre uma alteração no conteúdo da propriedade Nome.
O conteúdo da caixa de texto (TextBox) na view, não tem e nem deve ter seu conteúdo acessado ou modificado através de um código tipo: myTextBox.Text = “.NET Coders” ou string conteudo = myTextBox.Text, mesmo que quiséssemos usar o código acima, não existe uma referência à View dentro da ViewModel…

Essa é primeira parte sobre o funcionamento do padrão MVVM.
No próximo artigo veremos mais sobre Data Binding e como a ViewModel faz as notificações à View.