Crear una [pequeña] aplicación completa usando wxPython (Parte 1)

Como les adelantaba en el post anterior, hoy comenzaré a publicar un tutorial de varias partes, en donde veremos como desarrollar una pequeña aplicación "completa" con wxPython y archivos XRC. El proyecto consistirá en realizar un catálogo de películas. El catálogo permitirá agregar, modificar y eliminar películas, así como hacer búsquedas dentro del listado. La parte gráfica la haremos haciendo uso de lo aprendido en tutoriales anteriores, usando archivos de recursos que realizaremos con wxFormBuilder y la información la guardaremos en una base de datos MySQL. Dicho esto, y sin entrar en mas detalles, empecemos a trabajar.

Estructurando la aplicación

Para estructurar nuestra aplicación, haremos uso del patrón MVC (Modelo-Vista-Controlador). Por si no sabes de que hablo, te comento brevemente de que se trata.
MVC es un patrón de diseño de software que propone dividir nuestra aplicación en tres componentes básicos: Modelo, Vista y Controlador. Esta forma de dividir la aplicación simplifica muchísimo la escalabilidad y el mantenimiento de la misma, pero también es cierto que a veces puede ser un tanto tediosa implementarla en proyectos pequeños. Si bien, nuestra aplicación entra en la categoría de proyecto pequeño, es una buena idea pensar a futuro, y generar buenos cimientos para futuras expansiones. Existen una gran cantidad de implementaciones del patrón MVC, e incluso a veces cada componente (Modelo, Vista y Controlador) pueden utilizar a su vez otro patrón de diseño en su interior, pero lo importante es comprender la idea básica detrás de MVC, y adaptarla a nuestras necesidades. A continuación veremos brevemente (y a grandes rasgos), cual es la función de cada componente del patrón MVC:

Modelo:

Este componente es el responsable de manipular los datos de nuestra aplicación. En nuestro caso será el encargado de permitirnos el acceso a una base de datos MySQL que contendrá el catálogo propiamente dicho. El modelo también es el responsable de implementar las reglas de negocio en la aplicación y es quien al producirse alguna modificación en los datos, puede comunicar este cambio a los otros componentes para que actúen en consecuencia (Por ej.: tras agregar un registro en una base de datos, se podría querer recargar el listado que esta viendo el usuario de modo que refleje los datos actualizados).

Vista:

La Vista es la encargada de presentar la información del Modelo de modo que se pueda interactuar con éste. La Vista puede quedarse a la "escucha" de cambios en el Modelo, para que al producirse cambios en él, la Vista se adapte a los nuevos datos.

Controlador:

El controlador hace de nexo entre la Vista y el Modelo, disparando acciones en respuesta a los eventos que ocurran en la aplicación, pudiendo invocar acciones en el Modelo y en la Vista.

Esta división de la aplicación en varios componentes, nos brinda una gran independencia entre los datos concretos (el Modelo) y como se ve la aplicación (la Vista), pudiendo tener varias Vistas de un mismo Modelo, y de este modo por ejemplo generar sobre un mismo Modelo, una Vista que nos permita acceder desde una PC y otra optimizada para acceder desde dispositivos móviles, o tal vez una Vista que nos permita acceder al Modelo vía una interfaz web, entre muchos otros escenarios posibles.

Este patrón de diseño no es el único, ni mucho menos, pero los demás quedan fuera del alcance de este tutorial, e incluso te invito a que profundices por ti mismo, sobre las distintas implementaciones y variaciones del patrón MVC.
Creo que con esta breve introducción, estamos en condiciones de comenzar con el desarrollo de la aplicación propiamente dicha. No aseguro que esta sea la mejor implementación de MVC; y los invito a que hagan sugerencias para mejorarla.

La Base de datos

Como ya les anticipe, para guardar los datos de nuestro catálogo haremos uso de MySQL. Nuestra base de datos será realmente muy simple, y por el momento tendrá tan sólo una tabla con tres campos.
El nombre de la base de datos será catalogo_peliculas_db y la única tabla que (por ahora) tendremos se llamará tblPeliculas. Para que vean los campos que tendrá la tabla, les muestro una captura de su estructura, vista con phpMyAdmin:

Claramente podríamos guardar muchos mas datos sobre cada película (director, elenco, nombre original, nacionalidad, etc.), pero por ahora no lo vamos a hacer para mantener la aplicación lo mas simple posible.

Ahora que ya tenemos el diseño de nuestra base de datos, pasemos a diseñar la interface gráfica de la aplicación.

La interface gráfica

Para crear la interface gráfica que le permita a los usuarios interactuar con nuestra aplicación; haremos uso (una vez mas) de wxFormBuilder. No es necesario que uses esta herramienta, sino que puedes usar cualquier otro editor de archivos XRC (incluso lo puedes hacer con un simple editor de textos). Si no sabes que es un archivo XRC o no sabes como generarlo, te invito a que leas mis tutoriales sobre organización de widgets en wxPython y manejo de archivos XRC con wxPython.

Por ahora, nuestra aplicación se compondrá sólo de dos ventanas: la "Ventana Principal" y el "Editor de Películas".

La Ventana Principal

La versión inicial de nuestra Ventana Principal será la siguiente:

Como pueden ver, nuestra Ventana Principal se compone de un menú, una barra de herramientas y una lista que muestra las películas que tenemos en nuestra base de datos.
A continuación les muestro una captura del Object Tree de wxFormBuilder para que vean claramente los widgets que la componen, y los nombres de cada uno de ellos.


El menú de nuestra aplicación desplegado se ve así:


Como se puede ver, el menú presenta las mismas opciones que la barra de herramientas, excepto la opción "Buscar" y se le añade la opción "Salir". Mas adelante, tal vez vayamos agregando nuevas opciones a nuestra interface, pero por el momento, con esto tenemos bastante para trabajar.

Ahora veamos la interfaz del Editor de Películas.

El Editor de Películas

A través del Editor de Películas, podremos agregar y modificar las películas del catálogo. Si "llamamos" a esta ventana desde la opción Agregar (ya sea desde la barra de herramientas o desde el menú), el Editor aparecerá con los campos en blanco, de modo que carguemos los datos de la película que queremos añadir al catálogo. En este caso, la pantalla aparecería así:

En cambio, si invocamos al Editor de Películas desde la opción Editar (tanto desde la barra de herramientas como desde el menú), este presentara los datos de la película seleccionada en el listado de la Ventana Principal, para de este modo, modificar la información necesaria y guardar los cambios. En este escenario, la pantalla se vería así:


Si bien tanto para agregar como para modificar una película, utilizamos el mismo editor, pueden notar que el texto del botón izquierdo cambia de Agregar a Guardar según en que modo se encuentra.

Al igual que con la Ventana Principal, a continuación les muestro como queda el Object Tree de wxFormBuilder para esta ventana:


IMPORTANTE:
Las dos ventanas estarán dentro de un mismo archivo XRC llamado gui.xrc.

Hasta aquí hicimos una breve presentación de la aplicación y de como la vamos a estructurar. En la próxima entrega comenzaremos a codificar la Ventana Principal y de este modo le iremos "dando vida" a nuestro pequeño catálogo.

Hasta la próxima!

Editado:
Ya esta disponible la parte II