Anterior

Siguientes

¿Qué es MVVM?

Completado

Las aplicaciones de Xamarin.Forms que no usan MVVM suelen tener más código en sus archivos de código subyacente. Los archivos de código subyacente siguen este patrón: {algo}.xaml.cs. Normalmente, la mayoría del código del archivo de código subyacente controla el comportamiento de la interfaz de usuario. El comportamiento de la interfaz de usuario puede incluir cualquier cosa que le suceda a la interfaz de usuario, como un cambio en el color o en el texto. Además, puede incluir cualquier cosa que suceda debido a la interfaz de usuario, incluidos los controladores de clic de botones.

Un problema de este enfoque es que resulta complicado escribir pruebas unitarias para archivos de código subyacente. Los archivos de código subyacente de una aplicación de Xamarin.Forms derivan de un tipo de marco de Xamarin.Forms. A menudo asumen un estado de la aplicación que se crea mediante el análisis de XAML o incluso mediante otras páginas. Estas condiciones son difíciles de controlar en un ejecutor de pruebas unitarias que incluso podría no ejecutarse en un dispositivo móvil, y mucho menos con una interfaz de usuario. Por lo tanto, las pruebas unitarias rara vez pueden probar los comportamientos de la interfaz de usuario en estos archivos.

Cuando se usa correctamente, el patrón MVVM soluciona estos problemas moviendo la mayor parte de la lógica de comportamiento de la interfaz de usuario a clases que se pueden someter a pruebas unitarias, llamadas modelos de vista. El modelo MVVM suele usarse con marcos que admiten el enlace de datos. Eso se debe a que, con Xamarin.Forms, se puede enlazar a datos cada elemento de la interfaz de usuario a un modelo de vista y eliminar por completo (o casi) el código de una vista o el código subyacente.

¿Cuáles son los elementos de una aplicación MVVM?

Aunque el modelo de vista es el único elemento del patrón MVVM, este también define un elemento de "modelo" y un elemento de "vista". Las definiciones de estos elementos son coherentes con otros patrones comunes, como el Modelo-Vista-Controlador (MVC).

¿Qué es un modelo?

En una aplicación MVVM, el modelo hace referencia a los datos y a la lógica de negocios. El modelo no concierne a cómo se presenta la aplicación al usuario.

Un buen criterio para definir qué código se agrega al modelo es que se podría portar la aplicación de móvil a web, o a una herramienta de línea de comandos, y usar el mismo modelo en los tres lugares. No tiene nada que ver con la presentación al usuario.

En lo que respecta a la aplicación de RR. HH. de nuestro escenario, el modelo podría incluir una clase Employee y una clase Department que contengan los datos y la lógica de esas entidades. El modelo también puede incluir elementos como una clase EmployeeRepository que contenga la lógica de persistencia. Otros modelos de diseño de software podrían considerar cosas como repositorios como independientes del modelo. Pero en el contexto de MVVM, se suele hacer referencia a cualquier lógica de negocios o datos empresariales como parte del modelo.

Aquí tiene dos ejemplos de un modelo en C#:

public class Employee
{
    public int Id { get; }
    public string Name { get; set; }
    public Employee Supervisor { get; set; }
    public DateTime HireDate { get; set; }
    public void ClockIn() { ... }
}

public class EmployeeRepository
{
    public IList<Employee> QueryEmployees() { ... }
    ...
}

¿Qué es una vista?

El código de la vista controla los elementos que interactúan directamente con el usuario. Normalmente, esto significa cambiar píxeles en la pantalla y recibir clics y pulsaciones. Los elementos de la vista incluyen controles como botones y campos de entrada, así como cualquier otro elemento puramente visual, como temas, estilos y fuentes.

En muchas aplicaciones de Xamarin.Forms, no se tiene que escribir código de C# para las vistas. En su lugar, las vistas se definen a menudo mediante los archivos .xaml. Por supuesto, hay situaciones en las que se exige un control de usuario personalizado. En esos casos, se puede crear un código de vista propio. Eche un vistazo al módulo del representador de Xamarin.Forms para crear controles personalizados de Xamarin.Forms.

¿Qué es un modelo de vista?

Esto nos lleva de nuevo al modelo de vista. El modelo de vista es el intermediario entre la lógica de negocios y las vistas.

Antes de profundizar más, piense en lo que un modelo de vista puede hacer por usted. Considere en la aplicación de RR. HH. una página modal en la que se muestran los días de vacaciones disponibles de un empleado. Queremos que nuestra pantalla muestre el saldo de vacaciones como una cadena en el formato: "2 semanas, 3 días, 4 horas". Pero nuestra lógica de negocios calcula ese mismo valor como 13,5 días. Nuestra estructura tendría un aspecto parecido a este:

• Modelo: la clase Employee, que incluye un método:

  public decimal GetVacationBalanceInDays()
  {
      //Some math that calculates current vacation balance.
      ...
  }
  

• Modelo de vista: una clase EmployeeViewModel que tiene una propiedad como esta:

  public class EmployeeViewModel
  {
      private Employee _model;
      ...
      public string FormattedVacationBalance
      {
          get
          {
              decimal vacationBalance = _model.GetVacationBalanceInDays();
              ... // Some logic to format and return the string
          }
      }
  }
  

• Vista: una página XAML que contiene una sola etiqueta y un botón Cerrar. La etiqueta tiene un enlace a la propiedad del modelo de vista:

  <Label Text="{Binding FormattedVacationBalance}" />
  

  Solo necesitaríamos que el elemento BindingContext para la página estuviera establecido en una instancia de EmployeeViewModel.

En este ejemplo, nuestro modelo se encarga de la lógica de negocios. Esta lógica no está enlazada a Xamarin.Forms o a un elemento móvil; ni siquiera a una presentación visual. Se podría usar la misma lógica para una aplicación de telefonía. La vista no sabe nada sobre la lógica de negocios. Las etiquetas saben cómo colocar píxeles en la pantalla, pero no les importa si se van a mostrar días de vacaciones restantes o una cadena aleatoria. El modelo de vista tiene un conocimiento limitado de ambos mundos, de modo que puede actuar como un intermediario.

Lo interesante es ver cómo el modelo de vista logra ser un intermediario: Expone propiedades a las que se puede enlazar una vista. Las propiedades públicas son la única manera en la que un modelo de vista proporciona los datos. Esto lleva cuestionar por qué se denomina "modelo de vista". Mientras que el "modelo" de MVVM representa la estructura, los datos y la lógica de los procesos empresariales, el "modelo de vista" representa la estructura, los datos y la lógica que necesita la vista.

Continuar