Motivacin La interfaz grfica de usuario (llamada GUI) es aquello que facilita a un usuario interactuar con un programa.

Es necesario que sta sea agradable y con gran facilidad de uso para que l se lleve una primera impresin positiva del software debido a que constituye el primer contacto con un sistema. La creacin de GUI ha sido y sigue siendo un tema clave, que puede incluso llegar a tener un impacto mayor que otros factores a la hora de definir el xito de un producto informtico en el mercado. Interfaces innovadoras, interactivas y creativas, auguran un gran xito para dicho producto, tal y como hemos podido comprobar con diferentes gadgets electrnicos, como por ejemplo la interfaz tctil de Ipod (Apple), o el boom de la Ipod Touch (Interfaz tctil) . Muchas veces, el lenguaje C y/o C++ no es un favorito de los estudiantes y/o programadores porque, segn ellos, no tiene una interfaz grfica. Piensan que un programa en C slo sirve para ejecutarlo en la shell y consiste en escribir y leer de la pantalla, es mero intercambio de nmeros y letras. Hasta ahora los programadores desarrollan aplicaciones en visual basic, que es un lenguaje muy visual y bastante flexible, potente que se centra en el form que se muestra al ejecutar el programa. La pregunta es, Cmo programar en lenguaje C o C++ con una interfaz grfica en C del tipo de Visual Basic? Qt es una librera que oculta la complejidad propia del API1 y, en algunos casos, proporciona un sistema multiplataforma. Y proporciona un juego de herramientas y elementos grficos para la creacin de interfaces y aplicaciones multiplataforma. Actualmente cuenta con un gran xito y una gran implantacin en diferentes mbitos, que van desde las aplicaciones de escritorio hasta los sistemas electrnicos industriales y empotrados. Objetivo El objetivo principal de este tutorial de Qt y QDevelop es tomar como referencia los tutoriales existentes que no funcionan a fin de conseguir un tutorial que sirva de referencia para aquellos programadores que quieran introducirse en la creacin de GUI y aplicaciones mediante Qt. Qt y sus componentes principales es un framework open source con licencia GPL para el desarrollo de aplicaciones e interfaces multiplataforma. El paquete integra herramientas de desarrollo y soporte tales como QtDesigner y QtAssistant, as como libreras de clases auxiliares a Qt. Tambin incluye el compilador Gcc MinGW para Windows de Microsoft. QtDesigner es una herramienta de desarrollo para crear interfaces grficas de usuario (GUI). Adems, proporciona un conjunto de componentes estndar y un mecanismo de conexin llamado signal-slot, para conectar eventos de la interfaz con la lgica del programa que han de soportar. QtAssistant es un componente para navegar por la documentacin, en forma de pginas HTML, e implementa opciones de bsqueda y de extensin. QDevelop
1 Interfaz de programacin de aplicaciones o API (del ingls Application Programming Interface) es el conjunto de funciones y procedimientos (o mtodos, en la programacin orientada a objetos) que ofrece cierta librera para ser utilizado por otro software como una capa de abstraccin. (tambin denominadas comnmente "libreras").

es un entorno de desarrollo con licencia GPL desarrollado por Jean Luc Biord. Disponible para Windows y Linux, una de sus caractersticas ms interesantes de QDevelop es el hecho de admitir plugins externos, como el depurador GDB y la sugerencia automtica va CTags. QDevelop no integra Designer dentro de su interfaz, pero puede invocarlo externamente. Creacin de la aplicacin inicial En primer lugar, y a modo de prctica, vamos a crear una pequea aplicacin muy sencilla para entender y empezar a manejar Qt. Iniciar Qdevelop:

Imagen 1: Pantalla principal de QDevelop Lo primero es configurar la interfaz para indicar el directorio de proyectos por defecto, el directorio de include entre otros. Ver imagen 2. Presionar el botn aceptar para guardar la configuracin. Esta tarea slo se hace una vez, a menos que requiera cambiar la configuracin.

Imagen 2: Configuracin de QDevelop A continuacin, crear un nuevo proyecto con la opcin de men Proyecto > Nuevo proyecto:

Imagen 3: Creando nuevo proyecto Aparece una ventana desde la que seleccionamos el tipo de aplicacin a crear (en esta primera aplicacin es Aplicacin con ventana principal) y el nombre del proyecto (prueba1) tal y como muestra la siguiente imagen, y presionar el botn de aceptar:

Imagen 4: Crear un nuevo proyecto A continuacin, regresar a la pantalla principal de QDevelop, en la que observa, a mano derecha en el Explorador del Proyecto, el rbol de archivos que corresponde a su proyecto:

Imagen 5: rbol de programas del proyecto

Este proyecto, genera 3 grupos de archivos: Dialogo de la aplicacin: es la interfaz o ventana de la aplicacin, que es lo que ve el usuario al ejecutar la aplicacin. Cabeceras: Archivos de la aplicacin que contienen las declaraciones del proyecto. Fuentes: Archivos que contienen el cdigo fuente del proyecto. Fsicamente, en la carpeta del proyecto, encuentra lo siguiente: en la raz del proyecto figuran los archivos de configuracin de ste, y los directorios src y ui que contienen, respectivamente, el cdigo fuente y el archivo de interfaz de la aplicacin. Una vez creado el proyecto y tras haber comprobado la estructura de ste, vamos a compilarlo y ejecutarlo. Para compilarlo, seleccione la opcin Compilar > Compilar del men (o presione F7): puede ver el resultado de la compilacin en la zona de Salidas que se encuentra en la parte inferior de la ventana de la aplicacin. Si tiene seleccionada la pestaa de Compilar, se le muestran los resultados de la compilacin. Una vez compilado sin errores, basta con la opcin Depurar > Iniciar Programa (o presionar F5) para ejecutarlo: Si ha seguido los pasos correctamente, el resultado es una ventana Win32 vaca, en la que no hay implementada ninguna funcionalidad pero que es el punto inicial del proyecto: Modificando la interfaz En los siguientes pasos ampliaremos la aplicacin creada en el paso anterior con el objetivo de implementar alguna funcionalidad sencilla, como rellenar una lista con el input ingresado por el usuario mediante un campo de texto. En primer lugar extenderemos la interfaz de usuario para dar soporte a las nuevas funcionalidades que contendr la aplicacin mediante QtDesigner. Para ello modificaremos el archivo mainwindow.ui del proyecto. Este archivo, mainwindow.ui, representa la ventana principal del proyecto (por defecto es una ventana vaca), y ha sido creado por QDevelop. Haciendo doble clic sobre ste... se abrir el editor grfico QtDesigner y podremos modificarla: El manejo de QtDesigner es bastante sencillo, arrastre los componentes requeridos (llamados widgets) desde la barra de herramientas de la izquierda (llamada Widget Box) hasta la ventana de su proyecto. A continuacin, proceder a colocar los elementos de interfaz necesarios, que son un List Widget (subcategora Item Widget), un Line Edit (subcategora Input Widgets) y un Push Button (subcategora Buttons), arrastrndolos desde la Widget box hasta su ventana, quedando distribuidos del modo siguiente: Es necesario configurar el layout de los elementos dentro de la ventana y alinear los elementos. Para ello ha de seleccionar los elementos que requiere alinear y elegir el botn de layout apropiado. Podemos alinear un elemento con otro elemento, un elemento con grupos alineados de elementos, grupos alineados de elementos, e incluso todos los elementos. El nuestro caso, seleccionaremos en primer lugar el botn y el Line Edit, y haremos clic sobre el botn layout

horizontal, una de las opciones de layout presentes en la barra de iconos (o bien en la opcin de men Form > Layout Horizontally) Una vez hecho esto podemos ver cmo estos dos elementos han cambiado de tamao y se han redistribuido en la ventana de la aplicacin de manera idntica: A continuacin fijaremos el elemento restante, y haremos que el tamao de los elementos sea proporcional y uniforme al tamao de la ventana: clicaremos en un rea vaca de la ventana y seleccionamos la opcin Layout in a Grid, quedando la ventana de la manera siguiente: Para ver una previsualizacin de la ventana podemos seleccionar la opcin Form > Preview o bien mediante el atajo Ctrl + R: La ventana aparecer y podremos ver que al cambiar el tamao de sta, los elementos contenidos cambian de tamao de manera proporcional. Para cerrar la ventana pulsaremos el botn X de la barra de titulo de la ventana. Los elementos que hemos usado para crear la ventana se llaman widgets, y tienen una serie de propiedades. Ahora que ya tenemos el diseo bsico de la ventana, pasaremos a configurar algunas propiedades de los widgets implicados. Para modificar las propiedades de los widgets usaremos el editor de propiedades (Property Editor) que se encuentra en la parte inferior izquierda de la ventana principal de QtDesigner. ste contiene los pares propiedad-valor para los widgets del diseo que estn seleccionados actualmente: En primer lugar hemos de seleccionar de qu widget queremos modificar propiedades. Existen dos maneras para seleccionarlo: Seleccionando el widget desde la ventana principal. Seleccionando el widget desde la barra de herramientas Object Inspector (parte superior derecha de la ventana principal de QtDesigner). En esta barra aparece una jerarqua de todos los objetos que forman parte de la ventana principal.

Por ejemplo, para cambiar las propiedades del botn lo que haremos ser seleccionar el botn de la ventana principal, y seguidamente el Property Editor nos mostrar todas las propiedades disponibles para el botn. De estas propiedades, vamos a cambiar: ObjectName->btAdd (nombre para el widget) TextProperty->&Anadir (texto que mostrara el botn) (Ntese que el & delante del String Anadir har referencia al shortcut para el botn) Haremos lo mismo para el widget Line Edit, las propiedades que cambiaremos sern: ObjectName->edText (nombre para el widget) Y finalmente tambin haremos lo mismo para el elemento List Widget: ObjectName->lbMyList (nombre para el widget) Desde el Property Editor no slo podemos configurar las propiedades de los widgets de la ventana, tambin las propiedades de la ventana en s. Por ejemplo, podemos ajustar el diseo (layout, mrgenes, etc....) mediante el objeto centralwidget (debajo de MainWindow en el Object Inspector). Al hacer clic sobre ste, Property Editor nos mostrar sus propiedades, que

podremos modificar. Tambin podemos probar a cambiar el ttulo de la ventana principal. Para ello, seleccionaremos el objeto MainWindow desde el Object Editor (o bien haciendo clic sobre un rea vaca de la ventana) y modificaremos su propiedad windowTitle con el String que deseemos, quedando la ventana finalmente de la siguiente manera: Hay multitud de propiedades que permiten configurar cada Widget en particular, es recomendable navegar un poco por la estructura de objetos e ir mirando las propiedades de cada uno de ellos para acabar de entender el funcionamiento de QtDesigner. A continuacin, guardamos la ventana mediante la opcin de men File > Save Form, o haciendo clic sobre el icono del diskette en la barra de iconos: Seguidamente cerramos QtDesigner, volviendo a QDevelop. Una vez en QDevelop, recompilamos y ejecutamos el proyecto para ver si funciona, obteniendo una ventana idntica a la que previamente habamos previsualizado en QtDesigner: (Modificando el comportamiento) A partir de ahora vamos a incorporar el cdigo necesario para que nuestra aplicacin ejecute alguna tarea til, como puede ser recoger todos los inputs del usuario y mostrarlos en una lista, mediante el mecanismo estrella de Qt, Signals y Slots. 3.4.1 El mecanismo Signal-Slot En la programacin de Interfaces Graficas de Usuario (GUI) se busca que los cambios o eventos producidos sobre un objeto sean comunicados a la resta de objetos. El mecanismo de Signals y Slots es un mecanismo de comunicacin entre objetos seguro, flexible y totalmente orientado a objetos, en comparacin con otros mtodos como por ejemplo los callbacks. Los objetos de Qt pueden contener Signals y Slots. Bsicamente, al producirse un evento sobre un objeto este emite un Signal, que har que se ejecute un determinado Slot (una funcin en respuesta al Signal emitido) de otro objeto. Para que este sistema funcione es necesaria una conexin entre los Signals y Slots de los objetos implicados de antemano. Podemos considerar este mecanismo como algo equiparable al sistema de interrupciones (Signals) y RSI -Rutinas de Servicio de Interrupciones- (Slots) de Arquitectura de Computadores. En nuestra aplicacin, el botn emitir un Signal (clicked) y queremos que cuando eso suceda se ejecute una determinada funcin de la ventana principal. Esa funcin es el Slot. Para conseguirlo, primero vamos a definir un Slot en el archivo de cabecera de la ventana principal, mainwindowimpl.h: Q_OBJECT public: MainWindowImpl( QWidget * parent = 0, Qt::WFlags f = 0 ); private Slots: void addClicked(); }; #endif Ahora implementaremos el Slot (addClicked) que hemos definido. Queremos que al recibir el Signal clicked del botn, se lea y aada el contenido del campo de texto a una lista, y se acabe borrando el contenido de este campo de texto. El siguiente cdigo, que deber ir dentro del archivo fuente mainwindowimpl.cpp, responde a nuestras necesidades: void MainWindowImpl::addClicked()

{ if(edText->text() == "") // If there is no text then exit this function return; lbMyList->addItem(edText->text()); // Add the text typed to the list edText->setText(""); // erase the text from the box they typed in edText->setFocus(); // set the focus back to the LineEdit from the button } Finalmente falta conectar el Signal del objeto emisor (Signal clicked del botn) con el Slot del objeto receptor (Slot addClicked() de la ventana principal). Este ltimo paso lo haremos en la funcin constructora MainWindowImpl, dentro del archivo fuente mainwindowImpl.cpp, aadiendo la siguiente lnea: MainWindowImpl::MainWindowImpl( QWidget * parent, Qt::WFlags f) : QMainWindow(parent, f) { setupUi(this); connect(btAdd, SIGNAL(clicked()), this, SLOT(addClicked())); } Si ahora compilamos y volvemos a ejecutar la aplicacin, esta debera mostrarnos el comportamiento que deseamos.