Capítulo 1. Introduccion

Idea

El objetivo de este taller es el de introducir el uso de la herramienta designer para hacer el desarrollo de una aplicacion de “modo visual”; es decir, a la WYIWYG (ooops, no se si lo dije bien). Particularmente, algunas de las cosas que veremos son las siguientes (no limitado a):

  • Creacion visual de una aplicacion: incluyendo sus menus, toolbars, dialogos, etc.

  • Creacion de la vista (aka Widget) principal de la aplicacion. Nota: en Qt todo son “widgets”, nada mas de “controles”, ni de “ventanas”, etc. En efecto, en contraste con el termino ventana, que viene del mundillo de las oficinas, mediante la expresion widget se busca denotar un concepto de interaccion mas general, por ejemplo una interfaz 3-D (por decir lo primero que se me viene a la mente).

  • Conexion visual entre widgets, empleando el paradigma de SIGNALS/SLOTS. En mi opinion, una de las mejores propiedades que posee Qt; en la de otros, una de las peores cosas del mundo.

  • En el punto anterior, “widget” significa: widget de Qt.

  • Dos puntos atras, “widget” tambien significa: widget creado por el usuario! Prueba de la versatilidad del designer (que no por facilitarnos la vida, nos la limita, como sucede con la mayoria de IDE's), significa esto que un tercero crea un widget (con la herramienta que mejor le venga) y este (me refiero al widget, no al usuario), se puede integrar sin el menor de los aspavientos al designer. Es precisamente de este modo que, por ejemplo, se ha conseguido integrar los widgets de KDE al designer.

Para cumplir con los objetivos anteriores vamos a desarrollar la portentosa Canvas Demo, cuyo aspecto es el siguiente:

La portentosa canvas demo

La Canvas Demo hace exactamente lo que tienes en mente: si picas uno de los botones (correspondientes a instancias de la clase estandar QPushButton de Qt), adiciona el elemento grafico correspondiente en el widget de arriba, que corresponde a una instancia de la clase MyCanvasView. Esta clase la he creado copiando codigo de aqui y alla de varios de los ejemplos que vienen en la distro Qt (al fin y al cabo es software libre!).

Baste ahora con decir que es MyCanvasView. Pero digamoslo comodamente, en lenguaje UML:

uml

Como se puede ver MyCanvasView se “deriva” mediante “inheritance” de la clase estandar de Qt QCanvasView y “usa”, como agregados, las clases QCanvas y QCanvasItem de Qt. En realidad, los agregados que va a usar, mediante “polimorfismo”, son las clases ImageItem y BouncyLogo, que no son mas que especializaciones de las clases QCanvasRectangle y QCanvasSprite de Qt, respectivamente (al fin y al cabo es c++!).

En lenguaje coloquial, MyCanvasView, es un widget que pinta cosas y que mas pronto de lo que te imaginas estara listo para que lo uses de modo visual en el designer.

Nota: Si deseas una comprension pormenorizada, te recomiendo estudiar el Canvas Module de Qt. Pero, en otra ocasion. Val?

Requisitos

Ninguno. Bueno, ninguno si te encuentras tomando este taller de modo presencial ya que Ramon Navarro (sea esta la ocasion para agradecerle) se ha tomado la molestia de instalar los siguientes paquetes de Debian/Testing (paquetes cuya instalacion, si te encuentras online deberas verificar de acuerdo al sabor de Qt que tengas: Mac, Win, GNU-Linux/Distro):

  • libqt3-dev

  • libqt3-headers

  • libqt3c102

  • qt3-designer

  • qt3-doc. Opcional, pero clave: que puede hacer uno sin la documentacion de la API? Aha, nada. Para verificar la correcta instalacion (y no tener que atormentar a Ramon a ultima hora) pica aca. Si todo va bien, por favor deja abierta esta ventana aparte, sino contacta con Ramon.

Organizacion

Para facilitar la realizacion de este taller (y de paso una miqueta mi vida ;-), a diferencia de este capitulo, el tutorial posee un alto contenido grafico. La idea es que ustedes hacen el taller visual de la Canvas Demo y a medida que vayan incursionando en sus pormenores, me van dejando conocer las inquietudes que surjan al respecto. Listas y listos? Bien!