Curso Básico de Xamarin: Implementando MVVM en Xamarin.Forms
En este tutorial aprenderás a implementar el patrón MVVM en tus proyectos de Xamarin.Forms para incrementar la reutilización de código al mismo tiempo que sigues buenas prácticas y tienes códigos más limpios (sobre todo en la interfaz de usuario).
NOTA: El código fuente de este proyecto está disponible en mi repositorio de GitHub
Paso 1. Abre Visual Studio 2019 y selecciona Crear un nuevo proyecto.
Paso 2. Busca el tipo de proyecto Mobile App (Xamarin.Forms), selecciónala y da clic en Siguiente:
Paso 3. En el nombre de proyecto escribe MVVMDemo, asegúrate de seleccionar una ruta corta para la ubicación de tu solución y da clic en Crear:
Paso 4. Selecciona la plantilla Blank (proyecto vacío), selecciona las plataformas que deseas probar y da clic en OK:
Paso 5. Espera a que se genere la solución con los proyectos .NET Standard y el de cada plataforma. Ahora, da clic derecho en el proyecto MVVMDemo y agrega 3 carpetas: Models, ViewModels y Views.
Paso 6. En la carpeta Models agrega una clase llamada Product, la cual contiene el código mostrado a continuación.
Paso 7. Ahora en la carpeta ViewModels, agrega una clase llamada BaseViewModel, la cual contiene la funcionalidad básica de cada ViewModel, es decir, la implementación de INotifyPropertyChanged para notificar a la vista cuando una propiedad cambie su valor.
Paso 8. Como siguiente paso, crea la clase ProductViewModel, cuyo código se muestra a continuación. En esta clase tenemos las propiedades de un producto que serán actualizadas desde y hacia la vista, así como 2 comandos, uno para limpiar la información (nuevo producto) y otro para enviar los datos del producto por correo electrónico haciendo uso de la clase EmailMessage que se encuentra en Xamarin.Essentials.
Paso 9. El último ViewModel que vamos a crear se llama ListProductViewModel y tiene el código mostrado a continuación, donde se carga una lista de productos, se selecciona un elemento de la lista y se pasa como parámetro a otra página para mostrar su información mediante el comando GoToDetailsCommand.
Paso 10. Ahora comenzaremos con el código de las vistas. En primer lugar, en la carpeta Views agrega un nuevo elemento de tipo ContentPage llamado ProductView.
Paso 11. El código de esta interfaz de usuario es simple. Hay controles para editar la información de un producto:
- Una caja de texto(Entry) para el nombre del producto
- Otra Entry para el precio, configurando el teclado del dispositivo como numérico.
- Un Switch para indicar la disponibilidad del producto.
- Dos botones (Button), uno para limpiar el formulario y otro para enviar los datos por correo electrónico.
- Varios Label y un CheckBox para mostrar los datos que el usuario va introduciendo.
- Todo organizado en un Grid.
Por supuesto, todo elemento de esta vista está enlazado (cada control tiene Binding a un elemento definido en ProductViewModel ) y la referencia es a través del BindingContext a nivel de la página.
Paso 12. La última vista mostrará una lista de productos haciendo uso de un ListView. Agrega un nuevo ContentPage en la carpeta Views llamado ListProductView, que además de la lista de productos contiene un botón para navegar a la página anterior y mostrar los detalles del producto seleccionado.
Paso 13. Dado que requerimos el objeto Navigation para visitar la segunda página, el BindingContext no se asigna en el código XAML sino en el code-behind de C#, así que en ListProductView.xaml.cs establécelo en el constructor:
Paso 14. Finalmente, establece la página de inicio de la aplicación modificando el constructor de App.xaml.cs para que ListProductView sea la primer página a mostrar al ejecutar nuestra app:
Paso 15. ¡Listo! Ahora toca compilar y ejecutar la aplicación, a fin de verificar su correcto funcionamiento:
En este tutorial aprendiste a implementar MVVM en una app de Xamarin.Forms. Observa lo sencillo que es generar un modelo, una clase (ViewModel) que notifique cambios a la vista y reciba modificaciones de ella también.
Espero que esta publicación haya sido de utilidad para tí.
Sin más por el momento, me despido. ¡Nos vemos en la próxima entrega!
¡Gracias por tu visita!
Luis
