C++ / Programacion de Model/View

Bienvenidos sean a este post, hoy verremos un patron de diseño.

Este tipo de programacion tiene sus raices en el patron de diseño MVC (Model View Controller), del cual hablamos en la seccion de PHP, y su idea principal es descomponer el problema en tres componentes debilmente acoplados:

• Model: se encarga de almacenar y manipular los datos
• View: se encarga de renderizar y mostrar los datos
• Controller: se encarga de logica de negocios adicionales y llevar los datos desde model a view

La programacion de Model/View es una version mas simplificada de MVC porque solo tendreos dos de los tres elementos, y la parte que se encarga Controller sera derivada entre Model y View haciendo que ambos esten mas en tema con la manipulacion de los datos. Aunque en nuestra arquitectura Model/View, la parte de Controller estara fusionada con View. Model representa a los datos, los cuales comunican con su fuente para proveer una interfaz conveniente para los otros componentes en la arquitectura. La implementacion de Model y comunicacion con otros componentes esta basado en el tipo de datos que maneja. View obtiene referencias mediante los indices de Model, y a su vez View puede rercuperar y suministrar datos a Model. Esto hace que View pueda editar los datos, y una seccion llamada delegate se encargara de manejar las comunicaciones entre ambos y mantener los datos sincronizados.

Por lo tanto, cada uno de los componentes (Model, View y Delegate) son definidos por clases abstractas que proveen interfaces comunes, inclusive estas proveen implemetaciones predeterminadas de caracteristicas en algunos casos. Esta de mas aclarar que este trabaja con señales y slots de los cuales hablamos en el post anterior. Cuando el Model encuentra cambios en los datos, lo informa en el View. Por otro lado, las interacciones del usuario con elementos de datos renderizados son informados por señales desde el View y estas desde Delegate informan tanto a View como Model la edicion de los datos.

Model esta basado en la clase QAbstractItemModel, la cual define una interfaz que es usado por View y Delegate. Qt provee un conjunto de clases model existentes que no provee ninguna notificacion; sin embago, si necesitas crear nuevos Model deberiamos hacerlas herederas de QAbstractItemModel. Las clases QListView, QTableView, y QTreeView son tipos basicos de View que podemos utilizar en la mayoria de las aplicaciones:

• QListView: muestra una lista de elementos
• QTableView: muestra datos en una tabla
• QTreeView: muestra datos en una lista jerarquica

Si queremos trabajar con estas clases, una sugerencia de Qt es hacerlas herederas de QAbstractListModel o QAbstractTableModel en lugar de QAbstractItemModel. Estas tres clases son consideradas como de nucleo y clases de bajo nivel. Para dar los primeros pasos es mas recomendable usar a:

• QListWidget
• QTreeWidget
• QTableWidget

Vamos a ver un ejemplo simple para ver como trabaja con uno de las clases anteriores:

#include <QtWidgets>
#include <QListWidget>

int main(int argc, char** argv)
{
  QApplication app(argc, argv);
  QListWidget* lista{new QListWidget};
  new QListWidgetItem("Tinchicus", lista);

  lista->show();
  return app.exec();
}

Primero importamos las librerias que necesitamos, la primera es para poder crear la aplicaion y la segunda es para la lista, y luego tenemos al main. Primero generamos la aplicacion mediante QApplication que se correra al final. Luego creamos un elemento lista de tipo QListWidget y la siguiente linea es para agregar un elemento (item) para la lista anterior. Observen que pasamos el valor del elemento y luego el objeto de la lista. Para finalmente, mostrar la lista en pantalla y devolver a la aplicacion para que se ejecute. Por si no venis de los posts anteriores, lo primero que debemos hacer es crear un archivo con la extension .pro:

QT += widgets
SOURCES += qt.cpp

La primer linea es para indicar que modulos de Qt se usaran y la segunda es para indicar cual es el codigo fuente parar crearlo, ahi deben usar el nombre de su codigo fuente, y luego deben compilarlo primero de la siguiente manera:

$ qmake qt.pro

Este es el metacompilador para crear un Makefile que sera el verdadero creador del ejecutable. El nombre del archivo debe ser el de su archivo .pro, y una vez que finalice solo deben ejecutar lo siguiente::

$ make

Este se encarga de crear el ejecutable, y con este archivo creado puede pasar a ejecutarrlo donde debemos tener una ventana como lla siguiente:

Ya tenemos nuestra lista con su primer elemento, veamos otra forma de agregar un elemento en la lista. Para ello debemos modificar el codigo anterior de la siguiente manera:

#include <QtWidgets>
#include <QListWidget>

int main(int argc, char** argv)
{
  QApplication app(argc, argv);
  QListWidget* lista{new QListWidget};
  new QListWidgetItem("Tinchicus", lista);
  QListWidgetItem* nuevo{new QListWidgetItem};
  nuevo->setText("Enzo");
  lista->insertItem(0, nuevo);

  lista->show();
  return app.exec();
}

En este caso, tenemos tres nuevas lineas. La primera linea se encarga de crear un objeto que representa a un elemento de la lista anterior. Luego le establecemos un texto o valor a este mediante setText y en la ultima linea lo agregamos a la lista. El primer argumento sera para indicar en que posicion agregaremos a este nuevo elemento, y el segundo sera el objeto que deseamos agregar. El resto del codigo sigue siendo el mismo, compilen nuevamente este codigo y veamos como es la nueva salida:

Primera curiosidad, el nuevo elemento no reemplazo al existente sino que lo desplazo. Es decir, no sobreescribio al valor en esa posicion sino que lo desplazo al siguiente, manteniendo ambos valores en la lista. Con esto completado, tenemos una nocion basica sobre este tema pero pasemos a ver como podemos hacer lo mismo pero con model y view. Para ello moddifiquemos el codigo anterior de la siguiente manera:

#include <QtWidgets>
#include <QListWidget>

int main(int argc, char** argv)
{
  QApplication app(argc, argv);

  QStringList lista;
  lista << "Tinchicus" << "Enzo";

  QAbstractItemModel *model = new QStringListModel(lista);

  QListView view;
  view.setModel(model);

  view.show();
  return app.exec();
}

Es muy parecido a lo que vimos anteriormente pero con unas sutiles diferencias. Primero generamos una lista y agregamos los dos valores que teniamos anteriormente. El siguiente paso sera crear al objeto que sera el model de nuestra estructura. Para que funcione lo debemos crear con el tipo QAbstractItemModel pero usaremos el constructor de QStringListModel, que es heredera de la clase abstracta, y le pasaremos la lista anterior como argumento. Lo siguiente sera crear el view para poder ver a nuestro model. Y a este le pasaremo el model mediante setModel, y finalmente mostrarla con show y devolver la aplicacion creada al inicio. Si lo compilan y ejecutan, deben obtener la misma ventana que teniamos del ejemplo anterior. Ventajas de trabajar de esta forma, podemos generar una lista con los datos a mostrar, p.e. tomarlo desde una base de datos, que se pasa a un objeto que sera la parte model y este simplemente asignarla a la parte view para mostrarla. En lugar de tener que generar elemento por elemento como fue en los primeros dos ejemplos. No se preocupen, en el proximo post veremos nuevammente este y otros temas.

En resumen, hoy hemos visto al patron Model/View, que es, como se compone, como trabajan entre ellos, asi como una serie de ejemplos para verlo en accion. Espero les haya resultado de utilidad sigueme en tumblr, Twitter o Facebook para recibir una notificacion cada vez que subo un nuevo post en este blog, nos vemos en el proximo post.