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:

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!!!