Associação de dados do Windows e MVVM

O MVVM (Model-View-ViewModel) é um padrão de design de arquitetura da interface do usuário que separa a interface do usuário e o código que não é da interface do usuário. Saiba como o MVVM permite o acoplamento flexível usando a associação de dados no XAML para sincronizar a interface do usuário e os dados, melhorando a manutenção e reduzindo as dependências.

Como ele fornece acoplamento flexível, o uso da associação de dados reduz as dependências rígidas entre diferentes tipos de código. Essa abordagem facilita a alteração de unidades de código individuais (métodos, classes, controles e assim por diante) sem causar efeitos colaterais não intencionais em outras unidades. Essa desassociação é um exemplo da separação de preocupações, que é um conceito importante em muitos padrões de design.

Benefícios do MVVM

Desacoplar seu código tem muitos benefícios, incluindo:

• Habilitando um estilo de codificação exploratório e iterativo. A alteração isolada é menos arriscada e mais fácil de experimentar.
• Simplificando o teste de unidade. Você pode testar unidades de código isoladas umas das outras individualmente e fora dos ambientes de produção.
• Suporte à colaboração em equipe. Indivíduos ou equipes separados podem desenvolver código desacoplado que adere a interfaces bem projetadas e integre-o posteriormente.
• Melhorando a manutenibilidade. Corrigir bugs no código desacoplado é menos provável que cause regressões em outro código.

Em contraste com o MVVM, um aplicativo com uma estrutura mais convencional de "code-behind" normalmente usa a vinculação de dados para exibição de dados. Ele responde à entrada do usuário manipulando diretamente eventos expostos por controles. Os manipuladores de eventos são implementados em arquivos code-behind (como MainWindow.xaml.cs) e geralmente são firmemente acoplados aos controles. Normalmente, eles contêm código que manipula a interface do usuário diretamente. Essa estrutura torna difícil ou impossível substituir um controle sem precisar atualizar o código de tratamento de eventos. Com essa arquitetura, os arquivos code-behind geralmente acumulam código que não está diretamente relacionado à interface do usuário, como o código de acesso ao banco de dados, que acaba sendo duplicado e modificado para uso com outras janelas.

Camadas de aplicativo

Ao usar o padrão MVVM, divida seu aplicativo nas seguintes camadas:

• A camada de modelo define os tipos que representam seus dados de negócios. Essa camada inclui tudo o que é necessário para modelar o domínio principal do aplicativo e geralmente inclui a lógica principal do aplicativo. Essa camada é completamente independente das camadas de modo de exibição e de modelo de exibição e geralmente reside parcialmente na nuvem. Dada uma camada de modelo totalmente implementada, você poderá criar vários aplicativos cliente diferentes se desejar, como o SDK do Aplicativo windows e aplicativos Web que funcionam com os mesmos dados subjacentes.
• A camada de exibição define a interface do usuário usando a 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 modelo e modelo de exibição. Às vezes, você pode usar arquivos code-behind como parte da camada de exibição para 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 de modelo de exibição fornece destinos de associação de dados para a exibição. Em muitos casos, o modelo de exibição expõe o modelo diretamente ou fornece membros que encapsulam membros específicos do modelo. O modelo de exibição também pode definir membros para manter o controle de dados 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 serve como um ponto de integração com outros serviços, como o código de acesso a dados. Para projetos simples, talvez você não precise de uma camada de modelo separada, mas apenas um modelo de exibição que encapsula todos os dados necessários.

MVVM básico e avançado

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

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

Em particular, você pode obter muito benefício simplesmente compreendendo e aplicando todo o poder da associação de dados e separando a lógica do aplicativo nas camadas descritas anteriormente. Isso pode ser feito usando apenas os recursos fornecidos pelo SDK do Aplicativo do Windows e sem usar nenhuma estrutura externa. Em particular, a extensão de marcação {x:Bind} torna a associação de dados com um desempenho mais fácil e superior do que nas plataformas XAML anteriores, eliminando a necessidade de grande parte do código clichê necessário anteriormente.

Para obter orientações adicionais sobre como usar o MVVM básico e pronto para uso, confira o exemplo UWP de Pedidos de Clientes no GitHub. Muitos dos outros exemplos de aplicativo UWP também usam uma arquitetura MVVM básica, e o exemplo UWP do Aplicativo de Tráfego inclui as versões code-behind e MVVM, com anotações que descrevem a conversão MVVM.

Consulte também

Tópicos

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

Exemplos de MVVM UWP

Exemplo de Banco de Dados de Pedidos de Clientes
Exemplo de Inventário vanArsdel
Exemplo de Aplicativo de Tráfego