[WPF] Soporte MVVM en controles Telerik

marzo 17, 2016 Christian Amado 0 Comentarios

¿Qué es MVVM?

En el desarrollo de software hay un sinnúmero de patrones de cómo estructurar sus esfuerzos de desarrollo. MVVM o Model-View-ViewModel es un modelo de desarrollo basado fuertemente en torno a una separación de cuestiones en aplicaciones WPF.

Con este fin, las aplicaciones se dividen en tres componentes principales: la vista, el modelo de vista y el modelo.

Vista (View)

Trabajando desde la parte superior, la vista es responsable de lo que aparece ante el usuario. En este sentido, una vista puede considerarse como una plantilla que muestra algún tipo de información al usuario y maneja la interacción del usuario dentro de una aplicación. Esto podría ser una forma de presentación, un motor de búsqueda de subasta o cualquier otro número de posibles escenarios de usuario. En muchos casos, la vista será manejada por un diseñador que se especializa en UX (experiencia de usuario), pero tiene poco o ningún conocimiento sobre el dominio o la lógica de negocio en la aplicación. Con esto en mente, no se coloca cualquier código de negocios complejo en la vista directamente. Por el contrario, debes abstraer lo máximo que se pueda para que la lógica de la vista y negocios puede ser trabajada en forma independiente y se una a través de la estructura del enlace en WPF.

Vista Modelo (View Model)

Esto nos lleva a la VistaModelo, el verdadero caballo de batalla de la aplicación, que contiene la lógica de negocio y de otra manera el núcleo de la aplicación. A través de enlace de datos, colecciones y propiedades públicas, el problema puede estar expuesto a la vista e incluso modificarse dependiendo el tipo de enlace. Esto permite una separación clara entre la presentación y la lógica de la aplicación.

Modelo (Model)

Por último, pero ciertamente no menos importante, es el modelo. En muchos casos el modelo se deriva de un sistema ORM como el acceso a datos de Telerik o Entity Framework, pero en general el resto de la aplicación es independiente del modelo. Sin importar de donde viene los datos, como la vista llama a los métodos correctos y entiende la estructura subyacente de la clase, tienes una aplicación completa y coherente. Cuando estos tres elementos se combinan se obtiene una aplicación completamente funcional. La vista se encarga de la interacción con el usuario y muestra información al usuario, el modelo es responsable de los datos de la aplicación y las diferentes operaciones CRUD además de consultas que se realizan y el modelo existente como el pegamento que combina estos dos a través del motor de enlace de datos de WPF.

¿Por qué usar MVVM?

En un mundo donde tenemos la capacidad para arrastrar y soltar un control complejo de nuestra caja de herramientas, lanzar unos eventos, recibir rápida funcionalidad y pasar al siguiente punto del trabajo, a veces nos olvidamos de que desarrollo de software fácil no equivale necesariamente a software bien estructurado, fácilmente extensible, unido y comprobable. MVVM ayuda con todos estos puntos.

Durante el desarrollo del patrón MVVM, hay una clara distinción entre donde debe existir cierto código. La Vista es totalmente responsable de la presentación, no contiene ningún código (excepto en casos donde el código es muy específico de la vista) y sólo es responsable de mostrar datos y recoger feedback. El modelo contiene lógica que es accesible mediante el enlace pero nunca se enlaza directamente con la Vista. De hecho, la vista no necesita absolutamente ningún conocimiento de lo que se carga por detrás. Por lo tanto, si la funcionalidad no está funcionando como se esperaba, se puede examinar rápidamente la vista para garantizar declaraciones de enlace coincidentes; de lo contrario su ViewModel es segmentado y separado; aparte de la interfaz de usuario se puede probar.

Otra razón para desarrollar en forma más modular y segmentada como MVVM es una combinación de extensibilidad y capacidad de mantenimiento. Con los métodos de programación estándar de drag-and-drop a menudo termina con un caos desordenado de código que es difícil de leer y aún más difícil de depurar. Con el patrón MVVM, tienes una clara distinción entre la vista Código, la lógica de negocios, la interacción en el modelo y la interacción de back-end que se lleva a cabo con el modelo y la base de datos. Si necesita modificar la lógica de negocio detrás de ciertas operaciones, puede modificar fácilmente el ViewModel y sin tocar la Vista o el Modelo. Si su diseñador quiere actualizar la apariencia de la aplicación, pueden sustituir fácilmente la Vista. Sólo necesitan asegurarse de que las declaraciones de enlace coincidan con la nueva vista, propiedades públicas y colecciones en el modelo.

Soporte de Telerik para MVVM

Telerik, no está ajeno a los patrones de desarrollo y las prácticas que emergen en la constantemente creciente y cambiante ecosistema .NET. Microsoft ha aceptado MVVM como el estándar de facto para el desarrollo de aplicaciones con WPF. Tomemos por ejemplo el control RadGridView. Siempre puede tomar el camino fácil y permitir al RadGridView generar columnas automáticamente basado en su origen de datos, pero a veces queremos más control sobre lo que se está visualizando. Mirando el código a continuación, podemos ver tres partes claves del patrón MVVM en acción con la interfaz de usuario WPF:

Dos ejemplos del soporte integrado para el patrón MVVM son la inclusión de dos elementos necesarios para nuestros ensamblados – ViewModelBase y una implementación de DelegateCommand. Cuando se utiliza MVVM, una de las cosas que necesitamos para estar seguros es garantizar las actualizaciones de la interfaz de usuario según cambios dentro de la vista, así que ViewModelBase incluye una implementación de INotifyPropertyChanged, lo que nos permite notificar a la interfaz de usuario de versiones como sigue:

DelegateCommand, por el contrario, es una implementación de la interfaz ICommand que permite utilizar comandos entre la Vista y el ViewModel. Como MVVM desalienta el uso del archivo de código subyacente para proporcionar una separación más clara de las preocupaciones, necesitamos alguna forma de habilitar eventos, de manera a rellenarlos a través de la Vista para que los usuarios pueden interactuar con la aplicación. Como un ejemplo de esto, podemos enlazar una RadButton con un DelegateCommand de nuestro ViewModel y engancharlo con el RadGridView utilizando solamente XAML y nuestro ViewModel:

Telerik también ha creado un marco de comando enrutado rico y poderoso que permiten interacciones directas con los controles. Un gran ejemplo de esto es el RadGridViewCommand, que le permiten disparar comandos dentro de RadGridView por el uso de un simple enlace de elemento a elemento. Para lograr esto, podemos usar un RadButton con comando y CommandTarget se establece: