Neste post vou falar um pouco sobre o padrão MVVM e como utiliza-lo com Silverlight.
MVVM? É de comer?
rs. Não, não é nenhum xingamento e muito menos algo de comer.
MVVM ou Model View – ModelView é um design pattern que na minha opinião é o melhor patter para se desenhar aplicações em Silverlight.
Porque não utilizar outros Patterns mais conhecidos como MVC ou MVP?
No padrão MVP, o Presenter é responsável pela configuração e gerenciamento de estado de uma determinada view.
No padrão MVP o Controller tem um papel parecido com o do Presenter.
Porém em Silverlight, a nossa camada de VIEW ou exibição contém um XAML que pode conter diversos Bindings, triggers, e gerenciamentos de estado, diferente das Views dos outros Patterns que são “burras” no Silverlight o XAML tem inteligência e vida própria.
Qual a solução?
O MVVM é um padrão derivado do MVP e do MVC, que foi disceminado pela comunidade de desenvolvimento WPF da Microsoft. A grande diferença é que apesar da ViewModel manipular e definir estados da View, a View pode declarativamente realizar bindings para propriedades da ModelView.
Separando melhor as camadas:
View = Composição de XAML e C# que manipula estados do XAML.
Model = Como as Models de MVC e MVP, define as chamadas de regras de negócio para exibição
ModelView = Camada que prepara os dados recebidos da Model para exibição no XAML.
Abaixo segue um gráfico para ilustrar o que disse acima:
.gif)
Hands On Mode ON
Para ilustrar melhor ainda o processo, vamos criar um MVVM Hello World em Silverlight:
No Visual Studio 2008 crie um novo projeto e permita que ele crie o projeto de testes:
Na sua Page.XAML, copie o código abaixo:
<UserControl x:Class="ExemploMVVM.Page"
xmlns="http://schemas.microsoft.com/winfx/2006/xaml/presentation"
xmlns:x="http://schemas.microsoft.com/winfx/2006/xaml"
Width="400" Height="300">
<Grid Background="White" ShowGridLines="True" x:Name="LayoutRoot">
<Grid.ColumnDefinitions>
<ColumnDefinition></ColumnDefinition>
<ColumnDefinition></ColumnDefinition>
</Grid.ColumnDefinitions>
<Grid.RowDefinitions>
<RowDefinition></RowDefinition>
<RowDefinition></RowDefinition>
</Grid.RowDefinitions>
<TextBlock x:Name="txb1" Text="{Binding Nome}"></TextBlock>
<TextBlock x:Name="txb2" Text="{Binding Idade}" Grid.Row="1" Grid.Column="0"></TextBlock>
<TextBlock x:Name="txb3" Text="{Binding Sobrenome}" Grid.Row="0" Grid.Column="1"></TextBlock>
<TextBlock x:Name="txb4" Text="{Binding Curso}" Grid.Row="1" Grid.Column="1"></TextBlock>
</Grid>
</UserControl>
Agora vamos definir uma Classe do Tipo Aluno, para ser nosso objeto de transporte.
namespace ExemploMVVM
{
public class Aluno
{
public Aluno(string pstrNome, string pstrSobrenome, int pintIdade, string pstrCurso)
{
this.Nome = pstrNome;
this.Sobrenome = pstrSobrenome;
this.Idade = pintIdade;
this.Curso = pstrCurso;
}
private string gstrNome;
private string gstrSobrenome;
private int gintIdade;
private string gstrCurso;
public string Nome
{
get { return gstrNome; }
set { gstrNome = value; }
}
public string Sobrenome
{
get { return gstrSobrenome; }
set { gstrSobrenome = value; }
}
public int Idade
{
get { return gintIdade; }
set { gintIdade = value; }
}
public string Curso
{
get { return gstrCurso; }
set { gstrCurso = value; }
}
}
}
Agora vamos criar nossa View Model. Reparem que ela recebe uma interface IAlunoView e um Serviço para ser Rodado. Isso expande as possibilidade de utilização, sendo que você pode definir uma interface para serviços também, e dessa forma você pode popular n views com n serviços.
namespace ExemploMVVM
{
public class AlunoViewModel
{
private IAlunoView view;
public string Nome{ get; set;}
public string Sobrenome{ get; set;}
public int Idade { get; set; }
public string Curso { get; set; }
private IAlunoService svcAluno;
public AlunoViewModel(IAlunoView view, IAlunoService svcAluno)
{
this.view = view;
this.svcAluno = svcAluno;
Initialize();
}
private void Initialize()
{
var p = svcAluno.ObterAlunoCurso("Arquitetura");
Nome = p.Nome;
Sobrenome = p.Sobrenome;
Idade = p.Idade;
Curso = p.Curso;
}
}
}
E por fim, o C# da nossa View:
namespace ExemploMVVM
{
public partial class Page : UserControl, IAlunoView
{
private readonly AlunoViewModel vmm;
public Page()
{
InitializeComponent();
vmm = new AlunoViewModel(this, new AlunoService());
this.DataContext = vmm;
}
}
}
Resumo da ópera
Resumindo, a grande vantagem de utilizar MVVM com Silverlight é que você pode aproveitar todo o poder de utlização de Bindings do XAML e ainda assim, criar um modelo de arquitetura onde você pode reutilizar a mesma regra de negócio(ViewModel e Model) com diversos designs diferentes(Views); No nosso caso, poderiamos tanto utilizar essa visualização dos quatro quadrados quanto fazer um CARD FLOW com os nomes e fotos dos alunos, quanto também criar uma visualização de grid com os dados dos alunos expostos.
Abaixo segue o código fonte que utilizei para esse exemplo.
ExemploMVVM.zip (782,28 kb)
Abraços a todos e espero que possam usufluir desse modelo de arquitetura muito recomendado para aplicações em Silverlight.
Até a próxima Arqinovação!!!