André Carlucci

Skeptic .net development

Criando aplicações para o Wp7 utilizando o MVVM-Light

Se você já pensou em criar aplicações utilizando o padrão MVVM, com certeza já ouviu falar do framework MVVM Light.

O propósito do toolkit é acelerar a criação e o desenvolvimento de aplicações MVVM em WPF, Silverlight e claro, para o Windows Phone, no qual focaremos neste post.

Como outras implementações do MVVM, o framework ajuda a separar a View de sua lógica de negócios, proporcionando aplicações testáveis e mais fáceis de manter. 

Desenvolvendo sua primeira aplicação MVVMLight

Comece criando um projeto simples do Windows phone 7:

Dê o nome de “HelloMvvmLight” e clique em OK.

O jeito mais fácil de instalar o MvvmLight é utilizar o Nuget. Se você não tem a aba do nuget ativa em seu workspace, vá em:

 Clique nesta aba, tenha certeza que no dropdown “Default project” parace “HelloMvvmLight” e digite:

No momento deste post, foi instalado a versão 3.0.3

Vamos dar uma olhada no que foi adicionado ao projeto:

2 novas dlls:

GalaSoft.MvvmLight.WP7.dll

ViewModelBase: classe base para ViewModels
Messenger: Acho que vale um post só para explicar o messenger, mas basicamente esta classe implementa um observer possibilitando comunicação desacoplada entre classes.
RelayCommand: Classe facilita a criação de comandos enviados da View para o ViewModel.
GalaSoft.MvvmLight.Extras.WP7.dll
EventToCommand behavior: beharvior que te habilita a conectar qualquer evento de qualquer controle para um ICommand, sem a necessidade de utilizar code-behind.
DispatcherHelper: helper para utilizar o dispatcher em aplicações multithread.

Um diretório chamado ViewModel

Neste diretório temos 2 classes:
MainViewModel: seu primeiro ViewModel, extendendo a classe ViewModelBase, do próprio MVVMLight.
ViewModelLocator: O ViewModelLocator é o local onde vamos centralizar toda lógica para conectar uma View à um ViewModel e gerenciar nossos serviços para que tenhamos dados de design e dados de produção. Perceba que o ViewModelLocator já expõe a classe MainViewModel como uma propriedade pública. É assim que vamos fazer o bind desta para sua view correspondente (MainPage.xaml).

ViewModelLocator como global resource no App.xaml

Foi adicionado no seu App.xaml o ViewModelLocator como resource global da aplicação. Sendo assim, ele será instanciado quando usado pela primeira vez e mantido como estático (uma única instância) para podermos referenciá-lo em qualquer View do projeto.

<Application.Resources>
    <vm:ViewModelLocator x:Key=”Locator” d:IsDataSource=”True” />
  Application.Resources>

Juntando a View e o ViewModel

Abra o arquivo MainPage.xaml e adicione no cabeçalho:

DataContext=”{Binding Source={StaticResource Locator}, Path=Main}”

Agora a View quando instanciada, vai referenciar nosso ViewModelLocator e realizar um “get” na propriedade “Main”, configurando-o como fonte de dados para nossos “bindings”. Sempre que quiser criar novas Views, basta criar novas propriedades públicas no ViewModelLocator expor novo ViewModel da mesma forma.
Para ver isso em ação, na MainPage ainda, vá até o TextBlock chamado “ApplicationTitle” e vamos substituir a propriedade Text (que no momento está “MY APPLICATION”) por um binding, ficando assim:

<TextBlock x:Name=”ApplicationTitle”
           Text=”{Binding Titulo}
           Style=”{StaticResource PhoneTextNormalStyle}“/>

 Para completar, abra a classe MainViewModel e crie uma propriedade pública chamada Titulo:

public string Titulo {
       get { return “MVVMLight”; }
}

Pronto, de “play” na aplicação e veja como seu título mudou para “MVVMLight”, informação que veio diretamente do nosso ViewModel.
Simples, né? Por hoje é isso, agora você já sabe como começar. Vamos explorar mais a fundo as funcionalidades do MVVMLight nos próximos posts.