Introducci on al desarrollo de GUIs mediante Qt

Eric Orellana-Romero, Cristian Duran-Faundez Departamento de Ingenier a El ectrica y Electr onica, Facultad de Ingenier a Universidad del B o-B o, Concepci on, Chile Email: eorellan@alumnos.ubiobio.cl, crduran@ubiobio.cl Document Version: 1.0.0 Oct-2012
Resumen Un importante t opico referente al desarrollo de software, al que no siempre se da la importancia que merece, es la creaci on de interfaces de usuario amigables. Seg un dicta la experiencia, un proyecto con una interfaz complicada resulta dif cil de aprender a utilizar, inuyendo negativamente en el exito de este, a pesar de que cumpla con los requerimientos impuestos. Dado lo anterior, en este trabajo se entregan las bases para el desarrollo de interfaces de usuario (GUI - graphical user interface), utilizando las herramientas disponibles en la biblioteca Qt para su desarrollo y el lenguaje C++ para implementar la l ogica requerida. Durante el desarrollo del art culo se muestran ejemplos b asicos para comprender los conceptos relacionados con Qt, concluyendo con dos aplicaciones en la que se utilizan en conjunto y se agrega mayor complejidad.

1.

Introducci on

Uno de los factores que causa mayor impacto en los usuarios al evaluar un software es su interfaz. Si bien es posible cumplir con todos los requerimientos exigidos por el cliente utilizando como nexo humanom aquina un int erprete de comandos (consola o terminal), un importante porcentaje de usuarios no se relaciona com unmente con este m etodo, por lo que se genera un aprendizaje lento y poco intuitivo, lo que puede derivar en la no utilizaci on de la aplicaci on desarrollada, llevando al fracaso al proyecto [1, secci on 1]. Producto de lo anterior, los dise nadores de software buscan generar interfaces de usuario (UI) sencillas e intuitivas, siendo importante considerar su presentaci on, la interacci on con el usuario y la sem antica (signicado) asociada a ella. Si bien en primera instancia, un usuario eval ua la presentaci on de la interfaz (la que no debe sobrecargarse), posteriormente cobra relevancia su facilidad de uso (interacci on), por lo que, con el prop osito de mejorar la adaptaci on del usuario al software, se agrega sem antica a los objetos que la componen. Un ejemplo de esto es la met afora ligada al espacio principal de trabajo en sistemas operativos (Linux, Mac OS, Windows), el que es asociado a un escritorio [2, secci on 1]. Dada la importancia de contar con un buen dise no al implementar la UI, se han generado principios para guiar su desarrollo y m etricas para evaluar su funcionamiento [2, secciones 2 y 3], permitiendo crear interfaces cada vez m as amigables al usuario, siendo ampliamente utilizadas las UIs gr acas (GUIs). Puesto que el dise no de una interfaz de f acil aprendizaje (intuitiva, f acil interacci on, etc.), buena apariencia y funcional forma parte importante del exito de una aplicaci on, se han implementado diversas utilidades para desarrollar de manera sencilla GUIs que cumplan con estas caracter sticas, reduciendo el tiempo y el esfuerzo por parte del grupo desarrollador. Una de ellas es la estudiada en este trabajo, el framework Qt, el que es introducido en la secci on 2. Su instalaci on es explicada en la secci on 3, mostrando como proceder en sistemas Linux y Windows. Como una forma de aclarar los conceptos asociados a su utilizaci on, en el apartado 4 se explica su funcionamiento a trav es de c odigo, para luego, en el apartado 5, utilizar las herramientas gr acas disponibles para agilizar el desarrollo, todo mediante ejemplos. Posterior a esto, en la secci on 6 se crean dos aplicaciones que incluyen a los ejemplos explicados previamente y agregan una mayor complejidad, concluyendo con la secci on 7, en la que se entrega la s ntesis del trabajo realizado. Adem as, se adjunta a este trabajo el c odigo para implementar la u ltima aplicaci on de ejemplo.

DEL FRAMWORK QT INSTALACION

2.

Framework Qt para el desarrollo de GUIs

Qt es un completo framework de trabajo que entrega herramientas para la creaci on multiplataforma de interfaces gr acas. Fue desarrollado por la empresa Quasar Technologies1, que posteriormente cambia su nombre a Trolltech, con el n de contar con una herramienta que permitiera generar interfaces multiplataforma para proyectos escritos en C++. De esta forma, en 1994 fue lanzada la primera versi on de Qt, Q por el primer nombre de la empresa que inici o su desarrollo (Quasar) y t por la palabra toolkit, contando con soporte para los sistemas Linux y Windows. Producto de esto, en 2001 se a nade soporte para MAC OS X, transform andose en una de las herramientas m as utilizadas para la creaci on de entornos gr acos. En 2008 Trolltech es adquirido por Nokia, extendi endose su aplicabilidad a sistemas m oviles. En cuanto a licencias de uso, Qt es distribuido bajo 3 diferentes tipos, GPL, LGPL y comercial. El primer tipo, GPL, est a orientado al desarrollo de aplicaciones libres, por lo que los c odigos de ellas y cualquier cambio realizado al c odigo fuente de Qt deben estar disponibles a la comunidad. El segundo tipo, LGPL, permite la creaci on de aplicaciones cerradas, pero cualquier cambio realizado a los c odigos del framework deben ser compartidos. Por u ltimo, la licencia comercial permite realizar aplicaciones completamente cerradas. De esta forma, existen versiones de Qt gratuitas y de paga, dependiendo de la licencia bajo la que se rige el desarrollo [1], [3]. As , de ser una herramienta utilizada en unos pocos proyectos, ha pasado a ser una de las m as utilizadas, siendo tal vez los proyectos m as conocido el gestor de ventanas utilizado en el proyecto KDE2 , Photoshop y Google Earth. En la actualidad se encuentra disponibles en la versi on 4.8.3 para plataformas Linux, Mac OS y Windows.

3.

Instalaci on del framwork Qt

Para comenzar a utilizar este framework es preciso agregar las librer as y programas (Qt Creator, Qt Designer, entre otros) asociados a el. En los pr oximos apartados se muestra este proceso para sistemas Linux y Windows.

3.1.

Instalaci on bajo sistemas Linux

Linux es un sistema operativo libre que en la mayor a de sus distribuciones cuenta con un repositorio en el que se almacena gran cantidad de software gratuito, siendo administrado por la comunidad desarrolladora del proyecto utilizado (Debian, Ubuntu, Fedora, etc.). Mediante este repositorio es posible descargar e instalar aplicaciones autom aticamente, utilizando para ello gestores disponibles para esta tarea. En este trabajo se utiliza el sistema operativo GNU/Linux Debian Squeeze, release 2.6.32-5-686, y como gestor de descarga e instalaci on de programas desde los repositorios, aptitude. El primer paso para agregar el framework Qt a Linux, es dar a conocer al gestor antes mencionado la direcci on FTP del repositorio donde se encuentra contenido Qt, modicando3 para ello el chero sources.list, como se muestra a continuaci on4 . 1. Abrir el chero de conguraci on sources.list, accediendo mediante consola como super-usuario:
# gedit / etc / apt / sources . list

2. Agregar la direcci on FTP del servidor espejo en Chile del repositorio ocial de Linux Debian:
1 2

deb http :// ftp . cl . debian . org / debian / squeeze main contrib non - free deb - src http :// ftp . cl . debian . org / debian / squeeze main contrib non - free

3. Guardar los cambios y cerrar.

creadores del framework Qt son los ingenieros Haavard Nord y Eirik Chanble-Eng. ocial KDE, http://www.kde.org/ 3 Se utiliza el procesador de texto gedit. 4 Se asume que la m aquina cuenta con una conexi on a Internet
2 P agina 1 Los

3.2 Instalaci on bajo sistemas Windows

QT MEDIANTE CODIGO

Una vez realizados estos pasos, mediante las instrucciones mostradas abajo, en primer lugar se actualiza la lista de paquetes disponibles para ser instalados por aptitude, luego se proceden a instalar las librer as de C/C++ y los compiladores (gcc y g++) contenidos en el paquete build-essential, siguiendo con el constructor de proyectos make y el framework Qt. Es recomendable la utilizaci on de gestores de instalaci on, pues manejan las dependencias y conictos que pudieran generarse.
# # # # aptitude aptitude aptitude aptitude -u install build - essential install make install qtcreator

Al nalizar el proceso, Qt est a completamente instalado en nuestro sistema.

3.2.

Instalaci on bajo sistemas Windows

El proceso de instalaci on de Qt para sistemas Windows es similar al explicado anteriormente, exceptuando el hecho de que no se cuenta con repositorios desde donde descargar e instalar los paquetes necesarios. Dado esto, se debe obtener el instalador del framework desde la p agina ocial del proyecto5, disponible en la secci on Product, Download Qt. Siguiendo estos pasos, se descarga la versi on 4.8.3 bajo licencia comercial, por lo que su utilizaci on gratuita es v alida durante un periodo de prueba de 30 d as. Si es preciso utilizar Qt bajo licencia GPL, es posible obtener el instalador mediante el link Qt Project site 6 mostrado en la misma p agina, a trav es del cual se accede al sitio open sources del proyecto. En nuestro caso utilizamos la versi on 1.2.1 de Qt SDK para Windows, la que contiene la versi on 4.8.1 de las librer as y los programas necesarios para agilizar el proceso de desarrollo. As , una vez descargado el instalador, se siguen los pasos dados por el wizard de instalaci on, procediendo como con cualquier aplicaci on Windows. Se recomienda instalar todas las aplicaciones disponibles para tener una versi on completa del framework.

4.

Qt mediante c odigo

Qt fue desarrollado como un framework multiplataforma utilizando el paradigma de programaci on orientado a objetos, por lo que cuenta con clases (atributos p ublicos y m etodos) dedicadas a la generaci on de objetos gr acos y al control de la interacci on entre ellos. A modo de introducci on, se muestra un ejemplo que ejecuta el cl asico mensaje Hola Mundo, utilizando algunas clases de Qt y el lenguaje de programaci on C++. Cuadro 1: Implementaci on Hola Mundo utilizando Qt
1 2 3 4 5 6 7 8 9

# include < QApplication > # include < QLabel > int main ( int argc , char * argv []) { Q A p p l i c a t i o n app ( argc , argv ) ; QLabel * label = new QLabel (" Hola Mundo ") ; label - > show () ; return app . exec () ; }

Mediante el c odigo mostrado arriba se genera la ventana de la gura 1. En detalle, a trav es de las l neas 1 y 2 se incluyen las clases que implementan ventanas de aplicaci on y etiquetas, respectivamente. En una ventana de aplicaci on, t picamente se agregan barras de men u (QMenuBar), barras de herramientas (QToolBar), barras de estado (QStatusBar) y otros componentes, llamados widgets. En las l neas 5 y 6 se genera, en primer lugar, un objeto de QApplication llamado app, el que es inicializando a trav es de
5 http://qt.nokia.com/ 6 http://qt-project.org/

QT MEDIANTE CODIGO

su constructor con las variables argc y argv, y posteriormente, un puntero de tipo QLabel llamado label, mediante el cual se crea un objeto inicializado con el string Hola Mundo. En la l nea 7, se hace visible la etiqueta creada y, para nalizar, en la l nea 8, se entrega el control de la aplicaci on a la ventana app, comenzando el bucle de eventos asociada a ella. Dado que la aplicaci on es extremadamente sencilla, la denici on de la interfaz se programa directamente en la funci on main, no siendo una pr actica habitual. Es recomendable crear los widgets de forma oculta, para de esta forma evitar el parpadeo de la ventana.

Figura 1: Ejecuci on c odigo cuadro 1 Para conseguir un archivo ejecutable de la ventana en la gura 1, se debe compilar el c odigo del cuadro 1. Para ello Qt cuenta con herramientas que facilitan esta tarea. Los pasos a seguir para esto son mostrados abajo, donde la primera instrucci on genera un archivo intermedio, con extensi on .pro, que identica al proyecto, la segunda genera un archivo Makefile, en el que se declaran reglas de compilaci on de la aplicaci on, y la u ltima ejecuta las reglas antes mencionadas, generando una archivo binario en base a los c odigos del proyecto.
qmake - qt4 - project -o salida . pro qmake salida . pro make

Una vez concluida la compilaci on, como se menciona arriba, se genera una chero binario ejecutable con el nombre dado al archivo .pro, en este caso salida, el que puede ser arrancado mediante la instrucci on
./ salida

El ejemplo mostrado en el cuadro 1 no es de gran utilidad por s solo, ya que no se generan interacciones con el usuario. Para esto, Qt implementa se~ nales entre widgets, las que son utilizadas para controlar ciertas acciones de inter es. En el c odigo a continuaci on se agrega funcionalidad al ejemplo anterior para explicar este concepto. Cuadro 2: Implementaci on interacci on b asica entre widgets
1 2 3 4 5 6 7 8 9 10

# include < QApplication > # include < QPushButton > int main ( int argc , char * argv []) { Q A p p l i c a t i o n app ( argc , argv ) ; QPushButt on * button = new QPushButt on (" Quit ") ; QObject :: connect ( button , SIGNAL ( clicked () ) ,& app , SLOT ( quit () ) ) ; button - > show () ; return app . exec () ; }

As , mediante el programa en el cuadro 2 se genera la ventana mostrada en la gura 2, implementando un bot on QPushButton que al ser presionado cierra la ventana QApplication que lo contiene. Las diferencias con el ejemplo anterior se encuentran en las l neas 2, 6 y 7. As , en la l nea 2 se incluye la cabecera de la clase QPushButton, en 6 se genera un puntero a la clase y se crea el objeto button, 4

 5 QT MEDIANTE HERRAMIENTAS GRAFICAS

inicializandolo con el stream Quit, y en 7 se implementa la funcionalidad de QPushButton, utilizando para ello el m etodo connect presente en el namespace QObject del framework Qt. En detalle, en la l nea 7, se relaciona a button con app ejecutando la funci on SLOT(quit()) sobre app al emitirse la se nal clicked() una vez presionado button. En general este es el m etodo utilizado para generar interacci on entre widgets por Qt, SIGNAL-SLOT. En base a las textitse nales (SIGNALs) emitidas por un objeto, se ejecutan determinados SLOTs (en este caso quit() ) de otros, realizando acciones previamente establecida.

Figura 2: Ejecuci on c odigo cuadro 2

Los ejemplos mostrados en este apartado explican el proceso b asico de creaci on de las aplicaciones gr acas Qt, sin utilizar herramientas de ayuda para el programador, con el n de comprender a nivel de c odigo el procedimiento efectuado durante el desarrollo, permitiendo un mejor entendimiento una vez que se utilice QDesigner.

5.

Qt mediante herramientas gr acas

Como se menciona anteriormente, existen diferentes programas que facilitan el desarrollo de una aplicaci on. Puesto que construir entornos gr acos utilizando la metodolog a explicada en el apartado anterior resulta engorroso y costoso (tiempo), en este trabajo se adoptan dos herramientas incluidas al instalar Qt para facilitar el proceso, Qt Creator y Qt Designer. De este modo, Qt Creator se utiliza como IDE de programaci on y Qt Designer como editor gr aco de widgets. La principal ventaja de utilizar Qt Designer es que permite realizar el dise no de la aplicaci on de forma gr aca, generando la cabecera ui nombreProyecto.h, que implementa el c odigo necesario para construirla. A modo de explicar el funcionamiento de estas herramientas, se re-implementa el ejemplo mostrado en la gura 2.

Figura 3: Interfaz Qt Creator (izquierda) y Qt Designer (derecha)

As , para comenzar con el ejemplo se debe crear un proyecto desde el men u File, opci on New File or Project de Qt Creator (gura 3) en el que se selecciona Qt4 Gui Application para generar una plantilla 5

 5 QT MEDIANTE HERRAMIENTAS GRAFICAS

de una GUI. En este punto se debe elegir el nombre y la direcci on del directorio ra z del proyecto, que en nuestro caso ser a llamado ventanaSalida, y el nombre de los archivos que ser an generados, donde modicaremos 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 cheros main.cpp y ventanaSalida.pro tienen la misma funci on que en el apartado anterior. Sin embargo, la implementaci on se crea en dos archivos, ventanaSalida.h para la denici on de atributos y m etodos, 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 cheros .ui son asociados con Qt Designer, por lo que este se abrir a de forma integrada en Qt Creator, permitiendonos crear la interfaz mostrada en la gura 2. Al abrir el archivo, al centro del espacio de trabajo se encuentra la visualizaci on de la ventana en construcci on, 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 on QPushButton, modicando el nombre del objeto (objectName) por button y la etiqueta (text) del bot on (debe estar seleccionado) por Quit, utilizando para ello la tabla de propiedades de la esquina inferior derecha. Para nalizar, se ubicar a el bot on en la esquina superior derecha y se ajustar a el area de la ventana en construcci on (cuadrado plomo), clickeando sobre ella y arrastrando el cuadro azul de la esquina inferior derecha hasta conseguir que se vea como en la gura 2. De esta forma, luego de compilar, presionando la echa verde en el borde izquierdo de Qt Creator (similar al s mbolo de play), se mostrar a la ventana creada y se generar an varios archivos adicionales, entre ellos ui ventanaSalida.h. En este archivo se implementa, al compilar, el c odigo equivalente al dise no de la interfaz creada gr acamente con Qt Designer. Adem as, se modica el archivo salidaVentana.cpp, agregando la cabecera # include ui ventanaSalida.h.

Cuadro 3: Extracto archivo ui ventanaSalida.h

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

... class U i _ v e n t a n a S a l i d a { public : QWidget * c e n t r a l W i d g e t ; QPushBut to n * button ; void setupUi ( QMainWind ow * v e n t a n a S a l i d a ) { ... } void r e t r a n s l a t e U i ( QMainWind o w * v e n t a n a S a l i d a ) { ... } }; namespace Ui { class v e n t a n a S a l i d a : public U i _ v e n t a n a S a l i d a {}; } ...

Para agregar la acci on 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 on entre la se nal emitida por el y la funci on close del objeto de ventanaSalida, como se muestra en el c odigo 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 on de cierre. Cabe destacar que se referencia a button mediante uibutton ya que el objeto de ventanaSalida es llamado ui en ventanaSalida.h (ventanaSalida *ui;) y que es necesario indicar que el m etodo connect es implementado en el namespace QObject. Luego de realizar esta modicaci on y compilar el proyecto la interfaz es completamente funcional.

APLICACION

Cuadro 4: Extracto archivo ventanaSalida.cpp

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

# include " v e n t a n a s a l i d a . h " # include " u i _ v e n t a n a s a l i d a . h " v e n t a n a S a l i d a :: v e n t a n a S a l i d a ( QWidget * parent ) : QMainWin do w ( parent ) , ui ( new Ui :: v e n t a n a S a l i d a ) { ui - > setupUi ( this ) ; QObject :: connect ( ui - > button , SIGNAL ( clicked () ) , this , SLOT ( close () ) ) ; } v e n t a n a S a l i d a ::~ v e n t a n a S a l i d a () { ... } void v e n t a n a S a l i d a :: changeEve n t ( QEvent * e ) { ... } }

6.

Aplicaci on

Para nalizar, se crean dos aplicaciones utilizando los conceptos explicados previamente mediante ejemplos. La primera, editor, genera una lista de palabras ingresadas mediante un widget QLineEdit y almacenadas a trav es de un widget QListWidget, pudiendo ser convertidas a may uscula o min uscula previo a ser ingresadas a la lista. Luego, al nalizar la aplicaci on, es generado un chero lista.data en el directorio ra z del proyecto, el que contiene los datos ingresados a la lista. El objetivo de editor es mostrar el manejo de strings de texto. La segunda, implementa una calculadora, con el objetivo de mostrar el manejo de variables num ericas a partir de strings de texto. Se compone de un objeto de QLineEdit, mediante el cual se ingresan valores, ya sea por botones o directamente desde teclado, pudiendo realizar operaciones de suma, resta, multiplicaci on y divisi on.

6.1.

Editor

Como en los ejemplos mostrados anteriormente, el primer paso es generar un nuevo proyecto en Qt Creator, File New File or Project Qt4 GUI Application. Una vez creado, se edita el chero editor.ui mediante Qt Designer, eliminando los widgets innecesarios y agregando un objeto de QLineEdit, uno de QListWidget, tres de QPushButton y dos de QRadioButton. As , modicando las propiedades de cada uno y utilizando las opciones de agrupamiento (en la barra superior) la interfaz resultante es como se muestra en la gura 4. Es importante el nombre que se da a cada objeto, ya que mediante el ser an referenciados. Por esto, se modican los nombres de los objetos de las diferentes clases de widgets seg un: Clase de Widget QListWidwet QLineEdit QPushButton QPushButton QPushButton QRadioButton QRadioButton Nombre Objeto lista entrada agregar convertir nalizar mayuscula minuscula

Luego de esto, las modicaciones para programar las funcionalidades descrita deben realizarse directamente al c odigo. De esta forma, se agregaran tres slots, add(), conv() y nish(). El primero agrega el 7

6.1 Editor

APLICACION

Figura 4: Interfaz Editor

texto escrito en entrada a lista. El segundo convierte el texto en entrada a may usculas o min usculas, dependiendo de que objeto de QPushButton se encuentre activado (true: activado, false: desactivado). Por u ltimo, nish(), genera el archivo lista.data y agrega el texto en lista, luego termina la aplicaci on. As , los slots son denidos en editor.h como se muestra en el cuadro 5 e implementados en editor.cpp como se muestra en el cuadro 6. Cuadro 5: Denici on slots de editor
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18

# ifndef EDITOR_H # define EDITOR_H # include # include # include # include ... private slots : void add () ; void conv () ; void finish () ; }; # endif // EDITOR_H < QMainWindow > < ctype .h > < stdio .h > < stdlib .h >

Posterior a esto, se establece la conexi on entre las se nales emitidas al ser presionado cada boton y el slot correspondiente. Dicha conexi on se realiza modicando el constructor de la clase editor como se muestra en el cuadro 7. Adem as, mediante las l neas 6 y 7 se entrega el foco7 a entrada y se selecciona por defecto el objeto de QPushButton mayuscula, respectivamente. Cabe destacar, que los objetos de la clase QPushButton son m utuamente excluyentes, por lo que no es necesario programar este comportamiento. Es importante recalcar que los widgets agregados no efect uan comportamientos que no se programen previamente. Un ejemplo de esto es la inserci on de datos a lista, ya que mediante la l nea 8 del cuadro 7 se establece que al emitir la se nal clicked() por el bot on agregar se ejecuta el slot add(), pero adem as, en la l nea siguiente, se establece que al emitirse la se nal returnPressed() por entrada, se ejecuta el mismo
7 Se

resalta el objeto, y en el caso de los objetos de QLineEdit, se prepara para ingresar texto (cursor parpadeante).

6.2 Calculadora

APLICACION

Cuadro 6: Implementaci on slots de editor

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44

# include " editor . h " # include " ui_editor . h " ... void editor :: add () { if ( ui - > entrada - > text () != NULL ) { ui - > lista - > addItem ( ui - > entrada - > text () ) ; ui - > entrada - > clear () ; } ui - > entrada - > setFocus () ; } void editor :: conv () { if ( ui - > mayuscula - > isChecked () ) { QString text ( ui - > entrada - > text () ) ; ui - > entrada - > clear () ; ui - > entrada - > setText ( text . toUpper () ) ; } if ( ui - > minuscula - > isChecked () ) { QString text ( ui - > entrada - > text () ) ; ui - > entrada - > clear () ; ui - > entrada - > setText ( text . toLower () ) ; } ui - > entrada - > setFocus () ; } void editor :: finish () { FILE * file ; file = fopen (" lista . dat " ," wb ") ; for ( int i = 0; i < ui - > lista - > count () ; i ++) fprintf ( file ," % s \ n " , ui - > lista - > item ( i ) -> text () . toUtf8 () . data () ) ; fclose ( file ) ; close () ; }

slot. De esta forma, los datos pueden ser ingresados presionando el bot on agregar o presionando la tecla enter del teclado, una vez nalizada la escritura. Si no se agrega la l nea 9 al constructor, el presionar la tecla enter no genera acci on alguna. Una vez nalizado este proceso basta compilar y ejecutar la aplicaci on para corroborar que se cumplan los objetivos propuestos.

6.2.

Calculadora

Como se explica anteriormente, calculadora tiene por objetivo mostrar el manejo de datos num erico a partir de cadenas de texto ingresadas mediante objetos de la clase QLineEdit. Esta aplicaci on no es trivial, ya que los datos ingresados son cadenas de texto, debiendo ser convertidos a variables num ericas antes de ser utilizados, y posterior al procesamiento, deben ser re-convertidos a cadenas de caracteres para ser mostrados al usuario. La generaci on gr aca de la interfaz se realiza siguiendo el mismo procedimiento

6.2 Calculadora

APLICACION

Cuadro 7: Constructor de editor

1 editor :: editor ( QWidget * parent ) : 2 QMainWin do w ( parent ) , 3 ui ( new Ui :: editor ) 4{ 5 ui - > setupUi ( this ) ; 6 ui - > entrada - > setFocus () ; 7 ui - > mayuscula - > setChecked ( true ) ; 8 QObject :: connect ( ui - > agregar , SIGNAL ( clicked () ) , this , SLOT ( add () ) ) ; 9 QObject :: connect ( ui - > entrada , SIGNAL ( r e t u r n P r e s s e d () ) , this , SLOT ( add () ) ) ; 10 QObject :: connect ( ui - > convertir , SIGNAL ( clicked () ) , this , SLOT ( conv () ) ) ; 11 QObject :: connect ( ui - > finalizar , SIGNAL ( clicked () ) , this , SLOT ( finish () ) ) ; 12 }

mostrado en el ejemplo anterior, creando la aplicaci on mostrada en la gura 5.

Figura 5: Interfaz de calculadora As los nombres dados a los objetos incluidos son los mostrados a continuaci on, y representan la funcionalidad de cada uno: Clase de Widget QLineEdit QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton QPushButton Nombre Objeto entrada clear div mult resta suma igual uno dos tres cuatro cinco seis siete ocho nueve cero

Una vez creada la interfaz gr aca, se debe generar la funcionalidad de esta. La l ogica implementada para el ingreso de datos al objeto entrada, consiste en que cuando un bot on de n umero se presiona, 10

6.2 Calculadora

APLICACION

todo el texto en en el se almacena en una variable temporal, para posteriormente agregar el n umero correspondiente y volver a escribirlo en entrada. Para ello se crea un slot para cada bot on, el que es lanzado al presionarlos. Este proceso es mostrado en el cuadro 8, dando como ejemplo el bot on uno. Cuadro 8: Ingreso de valores a calculadora
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

... void calculado ra :: b_uno () { a g r e g a r _ d a t o s ("1") ; } ... void calculado ra :: a g r e g a r _ d a t o s ( const char * numero ) { // r e c u p e r a c i o n de datos desde entrada unsigned int lenght = ui - > entrada - > size () . height () ; // cantidad de caractere s en entrada char data [ lenght +1]; // variable de a l m a c e n a m i e n t o strcpy ( data , ui - > entrada - > text () . toUtf8 () . data () ) ; // agregacio n numero strcat ( data , numero ) ; // escritura de nuevo dato en entrada QString input ( data ) ; ui - > entrada - > setText ( input . toUtf8 () . data () ) ; ui - > entrada - > setFocus () ; }

Una vez nalizado el ingreso del primer n umero, se debe presionar el bot on asociado a la operaci on requerida, para luego ingresar el segundo. Para esto se utilizan dos atributos privados de la clase calculadora, numero1 y numero2. As , al presionar el bot on de operaci on se almacena el valor en la variable numero1, permitiendo el ingreso del pr oximo. Para mostrar esto, se utiliza como ejemplo el operador +, mostrando su implementaci on en el cuadro 9 Cuadro 9: Ingreso segundo valor de una operaci on
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

... void calculado ra :: b_suma () { g u a r d a r _ d a t o s () ; strcpy ( operador ," SUM ") ; ui - > entrada - > clear () ; ui - > entrada - > setFocus () ; } ... void calculado ra :: g u a r d a r _ d a t o s () { // conversio n y a l m a c e n a m i e n t o de entrada bool * ok = false ; if ( operador [0] == ( char ) NULL ) numero1 = ui - > entrada - > text () . toInt ( ok ,10) ; else numero2 = ui - > entrada - > text () . toInt ( ok ,10) ; }

De esta forma, a trav es del m etodo privado guardar datos() se almacena el primer valor en numero1, ya que el atributo privado operador es inicializado previamente como NULL. Luego de esto se indica que la operaci on a realizar es SUM, se borran los datos en entrada y se entrega el foco a entrada para on toInt(...) de la clase el ingreso del segundo n umero. En el m etodo guardar datos(), se utiliza la funci QObject (el m etodo text() retorna un objeto de la clase QObject) para convertir los caracteres en una variable de tipo int. Una vez nalizada la inserci on del segundo valor, se presiona el bot on igual, por lo que, como se 11

CONCLUSIONES

Cuadro 10: C alculo de la operaci on y exposici on del resultado

1 void calculado ra :: b_igual () 2{ 3 int n_resulta do ; 4 5 if ( operador [0] != ( char ) NULL ) 6 { 7 g u a r d a r _ d a t o s () ; 8 9 if (! strcmp ( operador ," SUM ") ) n_resulta d o 10 if (! strcmp ( operador ," RES ") ) n_resulta d o 11 12 ui - > entrada - > clear () ; 13 char * temp = itoa ( n_resulta d o ) ; 14 QString resultado ( temp ) ; 15 free ( temp ) ; 16 ui - > entrada - > setText ( resultado ) ; 17 18 numero1 = n_resulta d o ; 19 operador [0] = ( char ) NULL ; 20 } 21 22 ui - > entrada - > setFocus () ; 23 }

= numero1 + numero2 ; = numero1 - numero2 ;

muestra en el cuadro 10, se almacena el segundo valor mediante el m etodo guardar datos(). En este caso, ya que operador contiene el valor SUM, es almacenado en la variable numero2. Luego, se realiza la operaci on correspondiente, y se muestra el resultado en entrada, para lo que debe convertirse la variable , este proceso se realiza desde la l nea 12 a la 16 del num erica n resultado en una cadena de caracteres. As cuadro 10. Para ello se utiliza una variable temporal de tipo char *, la que almacena el valor retornado por el m etodo privado itoa() 8 a partir de la variable de tipo int, n resultado. Luego se crea el objeto resultado de la clase QString, para almacenar el valor, en caracteres, del resultado obtenido e ingresarlo a entrada para que el usuario puede visualizarlo. El detalle del m etodo itoa() es mostrado en el cuadro 11. As , luego de la implementaci on es posible ingresar valores mediante los botones generados para ello o mediante el teclado. La implementaci on completa se encuentra anexada al tutorial y se muestra el c odigo para las operaciones de suma y resta, para cada bot on num erico, para el bot on igual y para el bot on clear. Las operaciones de multiplicaci on y divisi on son dejadas como trabajo personal para el lector.

7.

Conclusiones

Qt es un poderoso framework para la generaci on de interfaces gr acas de usuario que no solo permite el dise no de estas, sino que, adem as, cuenta con m etodos que facilitan el manejo de los datos, siendo considerado una completa herramienta multiplataforma para este prop osito. Un ejemplo de ello, es el IDE de programaci on Qt Creator y el IDE de desarrollo gr aco de interfaces Qt Designer, los que trabajando en conjunto generan el c odigo referente a la programaci on gr aca, reduciendo de manera notable los tiempos de desarrollo. Para generar la interacci on entre widgets se utiliza el m etodo de se nales y slots (SIGNAL-SLOT ). Al producirse una se nal, se ejecuta el c odigo implementado en el slot correspondiente. Dicha correspondencia se realiza mediante el m etodo connect de la clase QObjects en el constructor de cada ventana.
8 Convierte

una variable de tipo int en una cadena de caracteres, retornando el puntero a ella.

12

REFERENCIAS

REFERENCIAS

Cuadro 11: Conversi on int to char*, m etodo itoa()

1 char * calculado r a :: itoa ( int number ) // int a char 2{ 3 char * word ; 4 unsigned int i ; 5 6 word = ( char *) malloc ( sizeof ( char ) ) ; 7 8 // conversio n int a char , orden inverso 9 for ( i = 0; number > 0; i ++) 10 { 11 word = ( char *) realloc ( word ,( i +1) * sizeof ( char ) ) ; 12 word [ i ] = ( char ) (( number %10) + 48) ; 13 number = ( int ) ( number /10) ; 14 } 15 word = ( char *) realloc ( word ,( i +1) * sizeof ( char ) ) ; 16 word [ i ] = ( char ) NULL ; 17 18 // r e o r d e n a m i e n t o valores 19 char temp [ strlen ( word ) ]; 20 for ( i = 0; i < strlen ( word ) ; i ++) 21 temp [ i ] = word [ strlen ( word ) -i -1]; 22 for ( i = 0; i < strlen ( word ) ; i ++) 23 word [ i ] = temp [ i ]; 24 25 word = ( char *) realloc ( word ,( strlen ( word ) +1) * sizeof ( char ) ) ; 26 word [ strlen ( word ) ] = ( char ) NULL ; 27 28 return word ; 29 }

Qt hoy en d a es considerado una de las principales herramientas para la creaci on de GUIs, mostrando su estabilidad y rapidez en grandes proyectos, como KDE. Por lo que, si la aplicaci on no se comporta como se desea, es importante vericar nuestros c odigos y recordar que las funcionalidades de la GUI deben ser programadas, por lo que cualquier acci on que no lo sea, simplemente no funcionar a.

Referencias
[1] D. G. Guti errez, Tutorial de Qt4 Designer y QDevelop, FIB-UPC, 2011. [2] L. S. M. G omez, Dise no de Interfaces de Usuario. Principios, Prototipos y Heur sticas para Evaluaci on. [3] Zona qt. Sitio web dedicado al framework Qt, accesado el 3 de Octubre de 2012. [Online]. Available: http://www.zonaqt.com/

13