Qt mediante herramientas gráficas

**Figura 3:** Interfaz `Qt Creator` (izquierda) y `Qt Designer` (derecha)
$\includegraphics[scale=0.2]{fig/qtcreatordesigner.ps}$

Así, para comenzar con el ejemplo se debe crear un proyecto desde el menú File, opción New File or Project de Qt Creator (figura 3) en el que se selecciona Qt4 Gui Application para generar una ``plantilla'' de una GUI. En este punto se debe elegir el nombre y la dirección del directorio raíz del proyecto, que en nuestro caso será llamado ventanaSalida, y el nombre de los archivos que serán generados, donde modificaremos el nombre de la clase por ventanaSalida. De este modo, son generados los archivos main.cpp, ventanaSalida.cpp, ventanaSalida.h, ventanaSalida.ui, ventanaSalida.pro. Los ficheros main.cpp y ventanaSalida.pro tienen la misma función que en el apartado anterior. Sin embargo, la implementación se crea en dos archivos, ventanaSalida.h para la definición de atributos y métodos, y ventanaSalida.cpp para escribir la funcionalidad de la interfaz. Una vez creado el proyecto, abriremos el archivo ventanaSalida.ui, desde el directorio elegido como raíz. Los ficheros .ui son asociados con Qt Designer, por lo que este se abrirá de forma integrada en Qt Creator, permitiendonos crear la interfaz mostrada en la figura 2. Al abrir el archivo, al centro del espacio de trabajo se encuentra la visualización de la ventana en construcción, la que en el ejemplo cuenta con tres widgets previamente agregados, QMenuBar, QMainToolBar y QStatusBar, los que son eliminados (click derecho sobre el widget a eliminar, remove ...), ya que son innecesarios en nuestro ejemplo. De esta forma, se agregan los widgets necesarios, arrastrandolos a la interfaz en desarrollo desde la barra a la izquierda del espacio de trabajo. Para el ejemplo, se incluye un botón QPushButton, modificando el nombre del objeto (objectName) por button y la etiqueta (text) del botón (debe estar seleccionado) por Quit, utilizando para ello la tabla de propiedades de la esquina inferior derecha. Para finalizar, se ubicará el botón en la esquina superior derecha y se ajustará el área de la ventana en construcción (cuadrado plomo), ``clickeando'' sobre ella y arrastrando el cuadro azul de la esquina inferior derecha hasta conseguir que se vea como en la figura 2. De esta forma, luego de compilar, presionando la flecha verde en el borde izquierdo de Qt Creator (similar al símbolo de play), se mostrará la ventana creada y se generarán varios archivos adicionales, entre ellos ui_ventanaSalida.h. En este archivo se implementa, al compilar, el código equivalente al diseño de la interfaz creada gráficamente con Qt Designer. Además, se modifica el archivo salidaVentana.cpp, agregando la cabecera #include ``ui_ventanaSalida.h''.

**Tabla 3:** Extracto archivo ui_ventanaSalida.h
$\begin{table} \begin{center} \lstset{ %aboveskip=8pt, backgroundcolor=\color{... ...ida: public Ui_ventanaSalida {}; } ... \end{lstlisting} \end{center}\end{table}$

Para agregar la acción de cierre al objeto button de la clase QPushButton (declarado en la línea 6 del cuadro 3), se debe proceder de forma similar al ejemplo anterior, incluyendo en el constructor de la clase la conexión entre la señal emitida por él y la función close del objeto de ventanaSalida, como se muestra en el código del cuadro 4. Así, en la línea 2 se agrega la cabecera que implementa la interfaz, y se incluye la línea 9 para agregar la función de cierre. Cabe destacar que se referencia a button mediante ui $\rightarrow$ button ya que el objeto de ventanaSalida es llamado ui en ventanaSalida.h (ventanaSalida *ui;) y que es necesario indicar que el método connect es implementado en el namespace QObject. Luego de realizar esta modificación y compilar el proyecto la interfaz es completamente funcional.

**Tabla 4:** Extracto archivo ventanaSalida.cpp
$\begin{table} \begin{center} \lstset{ %aboveskip=8pt, backgroundcolor=\color{... ...a::changeEvent(QEvent *e) { ... } \par \end{lstlisting} \end{center}\end{table}$