Xamarin.Forms MVVM Code Snippets (ES)
Esta publicación es parte de la iniciativa creada por Luis Matos: Xamarin Month Code Snippets. Haz clic aquí para ver el resto de las impresionantes contribuciones de la comunidad.
Model-View-ViewModel es considerado el patrón de facto para el desarrollo de software que separa la lógica de aplicación y la interfaz de usuario de una forma limpia y ordenada.
Uno de los componentes de MVVM es el View Model, el cual implementa propiedades y comandos a los que la vista puede enlazarse. Además, sirve para notificar a la vista de cualquier cambio en las propiedades a través de notificaciones de eventos.
La estructura de todas las clases View Model es muy similar, y puedes hacer uso de los code snippets (fragmentos de código) para acelerar su desarrollo.
¡Vamos a crear unos cuantos snippets! Pero antes, ¿cómo podemos crear uno?
- Si estás utilizando Visual Studio para Windows, echa un vistazo aquí.
- Si estás utilizando Visual Studio para Mac, revisa esta guía.
En ambos casos, tu atención se enfoca en el código y los parámetros. Para este tutorial, utilizaré Visual Studio para Mac. Además, hay algunas consideraciones generales para todos los code snippets presentados:
- Todos los snippets son del tipo C# group.
- Todos los snippets tienen un tipo Mime text/x-csharp.
- La Descripción es opcional en cada snippet, pero se recomienda añadirla.
Para comenzar, haz clic en Visual Studio > Preferencias > Editor de Texto > Code Snippets.
Haz clic en el botón Agregar para así crear nuestro primer snippet, basevm, el cual describe la clase BaseViewModel. Cada clase View Model de nuestro proyecto hereda de BaseViewModel. El texto de la plantilla, así como el resto de configuraciones del snippet se presentan a continuación:
El código para este snippet está disponible aquí
Esta clase requiere unos cuantos espacios de nombre para funcionar, y los podemos agregar en un segundo snippet, basevmns:
El código de este snippet se encuentra disponible aquí
Ahora, vamos a crear tres snippets que serán usados por las clases View Model: uno para las propiedades, otro para los comandos, y el último para los espacios de nombre requeridos para que los comandos funcionen.
El snippet vmprop (para las propiedades en un View Model) se presenta a continuación:
Código disponible aquí.
Observa que hemos agregado variables, tales como $type$, $myVar$, y $MyProperty$, las cuales representan los elementos que pueden ser personalizados de acuerdo a tus necesidades en la implementación. Pero es necesario configurar estos parámetros, observa las siguientes imágenes:
type (el tipo de dato del campo y propiedad)
myVar (campo de la clase)
MyProperty (propiedad de la clase)
Ahora, pasemos al snippet vmcomm, el cual te permite crear un comando, como se muestra a continuación:
El código para este snippet se encuentra disponible aquí
La variable $myCommand$ se configura de la siguiente manera:
Mientras que para $MyCommand$ se hace lo siguiente:
Finalmente, el snippet nsvm para los espacios de nombre que los comandos requieren en la parte superior de cualquier clase View Model se indica a continuación:
Por supuesto, el código lo tienes disponible aquí
Luego de haber creado estos snippets en Visual Studio para Mac, debes cerrar la aplicación y reabrirla. Esto es obligatorio, de otra forma los snippets simplemente no funcionarán.
¿Cómo utilizar estos fragmentos de código en tu proyecto? Agrega una clase BaseViewModel, entonces elimina los espacios de nombre y el constructor…
Escribe basevmns…
Presiona TAB dos veces, y voilá. ¡Los espacios de nombre correctos aparecerán, tal como se esperaba!
Completa BaseViewModel, simplemente llamando al snippet basevm dentro de la clase.
Presiona TAB un par de veces. El código de la clase debería aparecer:
Ahora, agrega una clase EmployeeViewModel a tu proyecto, (en la misma carpeta donde creaste la clase BaseViewModel). Borra los espacios de nombre (y el constructor si así lo deseas), entonces escribe nsvm en la parte superior del archivo:
Presiona TAB un par de veces. El resultado se muestra a continuación:
Haz que la clase EmployeeViewModel herede de BaseViewModel y dentro utiliza el snippet vmprop:
Presiona TAB dos veces y observa cómo la definición completa de una propiedad aparece de inmediato:
Puedes editar el tipo de dato y los nombres de campo y propiedad, así como navegar entre estos tres elementos presionando TAB. Después de que termines de editar estos datos, presiona ENTER para completar la definición de la propiedad. A continuación, tienes un ejemplo:
Algo importante es que si editas el nombre del campo (employeeId), todas sus apariciones dentro del snippet (en el get y set en este caso) de actualizan automáticamente. Por supuesto, puedes reusar el snippet vmprop tantas veces como lo necesites, a fin de añadir más propiedades en la definición de tu View Model.
Ahora agreguemos un comando. En primer lugar, escribe vmcomm justo debajo de la propiedad creada:
Después de presionar TAB twice, puedes comenzar a editar los nombres de campo y propiedad del Command:
Presiona ENTER cuando termines. A continuación, va un ejemplo:
Por supuesto, puedes reutilizar el snipper vmcomm tantas veces como lo necesites para añadir más comandos.
Como puedes ver, es relativamente sencillo crear code snippets. La mejor parte es que te permite ser más productivo dado que puedes parametrizar estructuras de código que reemplazarás más adelante con variables de nombre específicas.
Espero que esta publicación haya sido interesante para tí, en caso de que tengas alguna pregunta, simplemente deja un comentario. También, no olvides compartir este post en caso de que consideres que puede serle útil a otra persona.
¡Hasta la próxima!
Luis
