Neste artigo, vou apresentar os principais conceitos sobre MVVM, DataBinding e da interface ICommand: apresentando o cenário e criando o projeto.

Quando trabalhamos com o Xamarin Forms em aplicações de negócios, geralmente definimos um modelo de domínio que representam as classes da nossa aplicação. Estamos, assim, definindo o Model que é constituido de classes C# e, geralmente, essas classes são classes POCO contendo apenas propriedades.

Outro componente essencial de uma aplicação Xamarin Forms são as páginas que contém layouts e outras views e representam o componente visual da nossa aplicação, conhecido como Views.

Para separar a lógica de negócio da parte visual, usamos o padrão MVVM e criamos para isso as classes que vão conter todo o código responsável por gerenciar a dar a vida às Views. Essas classes são conhecidas como o ViewModel é possui o objetivo de reunir toda a lógica de atualização, acesso e conversão de dados.

Temos assim o tripé: Model, View e ViewModel.

O recurso DataBinding atua de forma crucial para que a aplicação do padrão MVVM funcione. Vamos ver um pouco sobre ele.

O famigerado DataBinding e a interface ICommand

Se você procurar pela definição de DataBinding na Wikipédia vai encontrar:

“Ligação de dados, do inglês DataBinding, é uma técnica geral que une duas fontes de dados/informações e as mantêm em sincronia em um processo que estabelece uma conexão entre UI (interface de usuário) da aplicação e a lógica de negócio.”

Uma forma de fazer a ligação de dados no Xamarin Forms é fazer a ligação entre o Code-Behind, representado pelo código C#, e o código XAML, que define a interface do usuário. É assim que declaramos um evento para uma View no código XAML e fazemos o tratamento do evento no Code-Behind com C#.

Essa abordagem funciona, mas nos traz muitos problemas quando precisamos testar nossas aplicações. Esse é um dos motivos da utilização do padrão MVVM. Então, para contornar esse problema, usamos a abordagem MVVM onde o DataBinding é feito praticamente no código XAML, usando as propriedades BindingContext e Binding.

Nesta abordagem, o DataBinding, ou vinculação de dados, é usado para conectar as propriedades dos elementos visuais na View com as propriedades dos dados na ViewModel, permitindo a manipulação direta dos dados através da interface do usuário.

Mas diante da complexidade das aplicações de negócios, nem tudo são propriedades e, muitas vezes, a ViewModel expõe métodos públicos que precisam ser chamados a partir da View com base em uma interação do usuário.

Sem usar MVVM, teríamos que fazer a chamada dos métodos a partir de um evento, como um evento Clicked de um Button ou Tapped de um TapGestureRecognizer.

Para tornar um elemento de interface do usuário clicável com o gesto de toque, criamos uma instância de TapGestureRecognizer, manipulamos o evento Tapped e adicionamos o novo reconhecimento de gestos à coleção GestureRecognizers no elemento de interface do usuário.

Mas como podemos fazer a chamada de métodos acionados pela interação do usuário em uma View a partir de uma ViewModel?

A boa notícia é que o Xamarin Forms fornece um recurso que permite que a ligação de dados ou DataBinding realize chamada de métodos na ViewModel diretamente a partir de um Button ou TapGestureRecognizer e alguns outros elementos.

Esse recurso é a interface ICommand que permite definir e implementar um comando o que chamamos de commanding.

Usando comandos, o DataBinding pode fazer chamadas de método diretamente de uma ViewModel a partir das seguinte classes:

• Button
• MenuItem
• ToolbarItem
• SearchBar
• TextCell
• ImageCell
• ListView
• TapGestureRecognizer

Nota: Podemos também implementar comandos em classes customizadas.

Implementando um comando

Afim de implementar um Command, a ViewModel deverá definir uma ou mais propriedades do tipo ICommand. A interface ICommand define dois métodos e um evento:

public interface ICommand
{
    void Execute(object arg);
    bool CanExecute(object arg)
    event EventHandler CanExecuteChanged;   
}

As classes Command e Command<T> fornecidas pelo Xamarin.Forms implementam a interface ICommand, onde T é o tipo dos argumentos para Execute e CanExecute.

Bem como implementar a interface ICommand, essas classes também incluem o método ChangeCanExecute, que faz com que o objeto Command dispare o evento CanExecuteChanged.

Dentro de um ViewModel deve haver um objeto do tipo Command ou Command<T> para cada propriedade pública na ViewModel do tipo ICommand.

O construtor de Command ou Command<T> requer um objeto Action de retorno, que é chamado quando o botão chama o método ICommand.Execute.

O método CanExecute é um parâmetro de construtor opcional e toma a forma de um Func que retorna um booleano.

Vamos ver uma aplicação prática desse recurso em um exemplo bem simples para entendermos melhor o seu funcionamento.

Recursos usados: Visual Studio Community 2015

Nota: Baixe e use a versão Community 2015 do VS. Ela é grátis e é equivalente a versão Professional.

Criando um projeto no VS 2015 com Xamarin

Abra o Visual Studio Community 2015 e clique em New Project. Selecione Visual C#, o template Cross Plataform e, a seguir, Blank App (Xamarin.Forms Portable). Informe o nome XF_Apps e clique no botão OK.

Ao clicar no botão OK, será criada uma solução contendo 4 projetos (dependendo do seu ambiente pode haver alguma variação nos projetos).

O projeto comum possui a classe App.cs que irá conter o código compartilhado e que vamos usar neste artigo.

Não esqueça de atualizar o Xamarin Forms acionando o menu Tools e as opções Nuget Package Manager -> Manage Nuget Packages for Solution.

A seguir, clique em Update e selecione o item Xamarin Forms e clique em Install.

Criando a páginas MainPage

No menu Project, clique em Add New Item e, a seguir, em Cross Platform e em Forms Xaml Page. Depois informe o nome MainPage:

Inclua o código XAML abaixo na página MainPage:

<?xml version="1.0" encoding="utf-8" ?>
<ContentPage xmlns="http://xamarin.com/schemas/2014/forms"
             xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
             x:Class="XF_Apps.AppMvvm1.Views.MainPage">
    
    <StackLayout Spacing="20" VerticalOptions="Center" 
                 HorizontalOptions="Center">
        <Label Text="Xamarin Forms - MVVM" TextColor="Navy" 
               FontSize="20"/>
        <Entry x:Name="txtNome" Placeholder="Informe o nome" 
               FontSize="20" />
        <Button Text="Boas Vindas" TextColor="White" 
                BackgroundColor="Teal" 
                FontSize="20"
                Clicked="btn_Click" />
        <Label x:Name="lblMensagem" FontSize="30" 
               TextColor="Red" 
               FontAttributes="Bold" />
    </StackLayout>
    
</ContentPage >

Acima vemos a tela gerada pela página ContentPage e pelo Layout StackLayout e as views Label, Entry e Button definidas no código XAML em MainPage.

No arquivo code-behind MainPage.xaml.cs, vamos definir o tratamento do evento Clicked conforme abaixo:

private void btn_Click(object sender, System.EventArgs e)
{
        var nome = txtNome.Text;
        lblMensagem.Text = "Bem-Vindo " + nome;
}

Neste código, quando o usuário clicar no botão, o nome informado será exibido na Label – lblMensagem – com o texto: “Bem-Vindo nome_digitado”.

Tudo bem… A aplicação funciona. Mas essa é a abordagem tradicional sem MVVM.

Vamos melhorar a nossa aplicação aplicando o padrão MVVM na segunda parte do artigo.