En un artículo anterior, hablamos de las diferencias entre las arquitecturas de software MVVM y MVC, en este caso vamos a centrarnos en MVVM en Delphi, el patrón desarrollado por Microsoft en 2004, a continuación vamos a ver un posible acercamiento a MVVM en Delphi.
Buenas Prácticas
Para empezar, es importante organizar nuestro código de la forma más clara posible. Aunque no sea indispensable, siempre es una buena practica mantener un código limpio y organizado para cuando tenga que leer ese código otro programador o nosotros mismos. Pensadlo de este modo, no es lo mismo encontrar un bolígrafo en un escritorio organizado que en uno que tiene mil papeles tirados por encima, en el primer caso apenas tardare unos segundos en obtener lo que busco mientras que en el segundo caso… suerte para encontrarlo.
Regresando al código, es recomendable tener tres carpetas separadas en el proyecto, una para vistas, otra para vistas-modelos y otra más para modelos. Aparte de eso, es aconsejable usar un prefijo para nombrar las unidades del proyecto, de modo que cada vez que añadamos una unidad al proyecto, tendríamos que nombrarlo de esta manera:
- Model.NombreUnidad: Si es un modelo
- ViewModel.NombreUnidad: Si es una vista-modelo
- View.NombreUnidad: Si es una vista
Como decía, no es obligatorio implementar nada de esto, pero siempre es recomendable seguir unas pautas “universales”, que entienda cualquier programador, sobre todo porque recordemos que una ventaja de estos patrones de diseño es que varios programadores pueden trabajar en el mismo proyecto sin ‘pisarse’ el trabajo.
Referencias entre los diferentes elementos MVVM en Delphi.
Como mencionamos en el anterior artículo, la vista tiene una referencia a la vista-modelo, y a su vez la vista-modelo tiene una referencia al modelo, por lo tanto, en el código, esto se refleja en el apartado ‘uses’, quedaría más o menos como lo vemos en el siguiente código:
unit View.NombreUnidad;
interface
uses
ViewModel.NombreUnidad;unit ViewModel.NombreUnidad;
interface
uses
Model.NombreUnidad;MVVM en Delphi: Enlace de datos
Esta es la pieza clave del patrón MVVM. Podemos vincular las propiedades de diferentes objetos, para que los cambios en una propiedad de un objeto se reproduzcan automáticamente en la propiedad de otro. Esto puede ahorrar mucho código porque evita que tengas que sincronizar manualmente la interfaz de usuario (la vista) con los datos que esta muestra.
LiveBindings: el secreto del vínculo
Para este tema, Delphi cuenta con una solución muy potente y con una gran flexibilidad, que son los ‘LiveBindings’, que te permiten conectar cualquier fuente de dato a cualquier interfaz o elemento gráfico de una manera visual y sencilla.
Esta opción algunas veces puede resultar algo lenta, por lo que también puedes crear tu propia solución, eso sí, escribiendo más código.
En otros lenguajes de programación como Angular, esto que queremos conseguir sería lo equivalente a los observables, con la ventaja de que en Delphi solo tienes que añadir estos componentes a tu vista y podrás realizar los enlaces de manera visual con solo unos clicks.
Si no conoces Delphi, para que te hagas una idea de la potencia del LiveBindings te dire que, sin escribir nada de código, puedes hacer que los caracteres que escribas en una caja de texto, puedan mostrarse en otro componente, por ejemplo una etiqueta, o que puedes mostrar el contenido de cualquier fuente de datos, en una tabla ( o Grid), solo con el LiveBinding. Increíble ¿no?
Acciones
Otro punto importante del LiveBindings es su integración con otro componente de Delphi, Action Lists. Esto implica que este componente, además de sus acciones estándar, contiene también acciones de LiveBindings, por ejemplo, para hacer una navegación para los datos de un grid generado con LiveBindings.
¿Por qué hablo de acciones si estamos hablando del patrón MVVM?
Porque un ejemplo básico que podemos pensar para conocer el funcionamiento de este patrón es saber cómo podríamos habilitar o deshabilitar un componente de la vista, por ejemplo, un botón, que dependiera de una validación del modelo.
Imagina que tenemos un formulario y queremos que el botón ‘enviar’ sólo este activo después de una comprobación, por ejemplo, del campo ‘email’.
Para esto, tendríamos una acción en la vista que fuese ‘enviarDatos’, esto, en el código lo que haría sería igualar la propiedad ‘enable’ del botón a una propiedad de tipo boolean en la vista-modelo que fuese ‘puedeEnviar’, que, a su vez, obtuviese ‘true’ o ‘false’ de la propiedad ‘emailValido’ del modelo.
Esto sería algo así:
El código mostrado en la imagen es el siguiente:
(Vista)
procedure TView1.enviarDatos(Sender: TObject);
begin
btnEnviar.Enable:= ViewModel.puedeEnviar;
end;(Vista-modelo)
property puedeEnviar: boolean read GetPuedeEnviar;
function TViewModel1.GetPuedeEnviar: Boolean;
begin
Result:= Model.emailValido;
end;(Modelo)
property Email: string read FEmail write FEmail;
property emailValido: boolean read GetEmailValido;
function TModel1.GetEmailValido: Boolean;
begin
Result:= Email <> '';
end;Como puedes observar, este esquema es muy similar a la estructura MVVM, el usuario interacciona con la vista, esta se comunica con la vista-modelo y por último se llama al modelo.
Conclusión
Ahora conoces elementos que podrían intervenir en una aplicación Delphi utilizando el patrón de diseño MVVM.
Con estas pautas vemos como la lógica de negocio queda desacoplada de la interfaz de usuario, puedes cambiar por completo la vista que el código de la vista-modelo y el modelo no cambian y es la vista la que enlaza con los procedimientos y funciones de la vista-modelo. Trabajar con este tipo de arquitectura te permite reutilizar el código fácilmente.
Para cualquier consulta o ayuda que necesites para tus proyectos Delphi puedes ponerte en contacto con nosotros a través de nuestro formulario de contacto.
Deja una respuesta