Associação de dados do Windows e MVVM

  • Artigo

O MVVM (Model-View-ViewModel) é um padrão de design de arquitetura de interface do usuário para desacoplamento da interface do usuário e de código que não é da interface do usuário. Com o MVVM, você define sua interface do usuário declarativamente em XAML e usa a marcação da associação de dados para vinculá-la a outras camadas que contêm dados e comandos. A infraestrutura de associação de dados fornece um acoplamento flexível que mantém a interface do usuário e os dados vinculados sincronizados e roteia a entrada de usuários para os comandos apropriados.

Como oferece acoplamento flexível, o uso da associação de dados reduz as dependências rígidas entre diferentes tipos de código. Isso facilita a alteração de unidades de código individuais (métodos, classes, controles etc.) sem causar efeitos colaterais indesejados em outras unidades. Esse desacoplamento é um exemplo da separação de preocupações, que é um conceito importante em muitos padrões de design.

Benefícios do MVVM

O desacoplamento do código tem muitos benefícios, o que inclui:

  • Habilitar um estilo de codificação iterativo e exploratório. A alteração isolada é menos arriscada e mais fácil de experimentar.
  • Simplificar testes de unidade. As unidades de código isoladas umas das outras podem ser testadas individualmente e fora dos ambientes de produção.
  • Dar suporte à equipe de colaboração. O código desacoplado que segue interfaces bem projetadas pode ser desenvolvido por indivíduos ou equipes separadas e integrado posteriormente.
  • Aumentar a facilidade de manutenção. É menos provável que a correção de bugs em código desacoplado cause regressões em outro código.

Em contraste com o MVVM, um aplicativo com uma estrutura "code-behind" mais convencional normalmente usa a associação de dados somente em dados de exibição e responde à entrada do usuário manipulando diretamente os eventos expostos pelos controles. Os manipuladores de eventos são implementados em arquivos code-behind (como MainWindow.xaml.cs) e costumam ser acoplados fortemente aos controles e conter códigos que manipulam diretamente a IU. Isso dificulta ou impossibilita a substituição de um controle sem ter que atualizar o código de manipulação de eventos. Com essa arquitetura, os arquivos code-behind geralmente acumulam códigos que não estão relacionados diretamente à IU, como códigos de acesso ao banco de dados, que acabam sendo duplicados e modificados para uso com outros Windows.

Camadas de aplicativo

Ao usar o padrão MVVM, um aplicativo é dividido nas seguintes camadas:

  • A camada model define os tipos que representam seus dados corporativos. Isso inclui tudo o que é necessário para modelar o domínio principal do aplicativo e, muitas vezes, também inclui a lógica do aplicativo principal. Essa camada é completamente independente das camadas view e view-model e, muitas vezes, reside parcialmente na nuvem. No caso de uma camada de modelo totalmente implementada, é possível criar vários aplicativos cliente diferentes, se desejado, como aplicativos Web e do SDK de Aplicativo do Windows, que funcionam com os mesmos dados subjacentes.
  • A camada view define a interface do usuário usando marcação XAML. A marcação inclui expressões de associação de dados (como x:Bind) que definem a conexão entre componentes específicos da interface do usuário e vários membros de model e view-model. Os arquivos code-behind às vezes são usados como parte da camada de exibição a fim de conter código adicional necessário para personalizar ou manipular a interface do usuário ou extrair dados de argumentos do manipulador de eventos antes de chamar um método view-model que executa o trabalho.
  • A camada view-model fornece destinos de associação de dados para a exibição. Em muitos casos, view-model expõe o modelo diretamente ou fornece membros que encapsulam membros específicos do modelo. O view-model também pode definir membros para manter o controle dos dados que forem relevantes para a interface do usuário, mas não para o modelo, como a ordem de exibição de uma lista de itens. O modelo de exibição também atua como um ponto de integração com outros serviços, como códigos de acesso ao banco de dados. Para projetos simples, talvez você não precise de uma camada de modelo separada, mas apenas do view-model que encapsula todos os dados necessários.

MVVM básico e avançado

Como em qualquer padrão de design, há mais de uma maneira de implementar o MVVM, e várias técnicas diferentes são consideradas parte do MVVM. Devido a isso, há várias estruturas de MVVM de terceiros diferentes que dão suporte a várias plataformas baseadas em XAML, incluindo o SDK de Aplicativo do Windows. No entanto, essas estruturas geralmente incluem vários serviços para implementar a arquitetura desacoplada, tornando a definição exata do MVVM um pouco ambígua.

Embora estruturas sofisticadas de MVVM possam ser muito úteis, especialmente para projetos em escala empresarial, costuma haver um custo associado com a adoção de determinado padrão ou técnica, e nem sempre os benefícios são claros, dependendo da escala e do tamanho do projeto. Felizmente, você pode adotar apenas as técnicas que fornecem um benefício claro e tangível e ignorar outras até precisar delas.

Em particular, você pode obter muitos benefícios ao compreender e aplicar todo o poder da associação de dados e separar a lógica do aplicativo nas camadas descritas anteriormente. Isso pode ser feito simplesmente por meio dos recursos fornecidos pelo SDK de Aplicativo do Windows, sem uso de estruturas externas. Em especial, a extensão de marcação {x:Bind} torna a associação de dados mais fácil e com melhor desempenho do que nas plataformas XAML anteriores, eliminando a necessidade de muitos códigos genéricos que eram necessários anteriormente.

Para obter outras diretrizes sobre como usar o MVVM básico pronto para uso, confira Exemplo de UWP do banco de dados de pedidos de clientes no GitHub. Muitos dos outros exemplos de aplicativo UWP também usam uma arquitetura MVVM básica, e o exemplo de UWP de aplicativo de tráfego inclui versões code-behind e MVVM, com observações que descrevem a conversão de MVVM.

Confira também

Tópicos

Vinculação de dados em detalhes
Extensão de marcação {x:Bind}

Exemplos de MVVM de UWP

Exemplo de banco de dados de pedidos de clientes
Exemplo de inventário de VanArsdel
Exemplo de aplicativo de tráfego