Procesamiento Audiovisual Sesin 1.

Programacin visual con Qt Creator

Guin de Prcticas Descripcin Instalacin El entorno Qt Primer programa Estructura Hola Mundo! Contador Depuracin Aadir icono Formularios Distribucin Seguir explorando Problemas al instalar

Procesamiento Audiovisual 3 II/ITIS

Guin de prcticas

Sesin 1. Programacin visual con Qt Creator

DESCRIPCIN

Qt Creator es un Entorno Integrado de Desarrollo o IDE (esto es, editor + compilador + depurador) bastante completo, moderno, potente, fcil de manejar, eficiente, abierto y gratuito, que permite el desarrollo rpido de aplicaciones en entornos MS Windows, Mac OS y Linux. Algunos ejemplos de programas creados con las libreras Qt: Adobe Photoshop Album, Google Earth, KDE, Opera, Skype, VLC media player Nosotros usaremos Qt Creator 2010.01. Caractersticas fundamentales de Qt Creator: Utiliza el lenguaje de programacin orientado a objetos C++. Se basa en Qt, una librera multiplataforma y gratuita para la creacin de interfaces grficos, programacin web, multihilo, bases de datos, etc. Permite realizar programacin visual y programacin dirigida por eventos. Caractersticas avanzadas de IDE: sintaxis coloreada, complecin automtica de cdigo, ayuda sensible al contexto, inspector de objetos, diseador visual, compilador y depurador integrados, etc. Programacin visual: el programador centra su atencin en disear el aspecto grfico de la aplicacin, la distribucin de los elementos visuales (llamados widgets: formularios, botones, mens, cuadros de texto, etc.), la interaccin entre los mismos, los distintos tipos de ventanas existentes, etc. o Un entorno de programacin visual se asemeja a un programa de dibujo, donde la imagen es una ventana (o formulario), y los elementos para dibujar son botones, etiquetas de texto, mens, etc. o El programador disea el aspecto grfico que tendr la aplicacin (WYSIWYG, What You See Is What You Get). Programacin dirigida por eventos: el programador escribe el cdigo que se ejecutar en respuesta a determinados eventos (llamados slots: pulsar un botn, elegir una opcin del men, abrir o cerrar una ventana, etc.). o No existe la idea de un control de flujo secuencial en el programa, sino que el programador toma el control cuando se dispara un evento. o La labor del programador es asociar a cada evento el comportamiento adecuado. Las ventanas son clases, los componentes (widgets) son clases, y los eventos (slots) son mtodos de las ventanas. Nuestra ventana es una subclase de la clase ventana (QMainWindow, QDialog o QWidget). 1

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

Componentes del entorno: o Qt Creator es el entorno de desarrollo. Usamos la versin 2010.01. o Se basa en la librera Qt, un conjunto de funciones para la creacin de entornos grficos, creado por Trolltech y actualmente propiedad de Nokia (http://qt.nokia.com). En concreto, se usa la versin 4.6.1 de Qt. o Puesto que Qt es slo una librera, Qt Creator necesita el compilador MinGW (http://sourceforge.net/projects/mingw), que es un compilador GCC para Windows. Aunque hay versiones ms recientes de MinGW, Qt Creator 2010.01 usa la versin MinGW 4.4.0 (se instala con Qt Creator).

INSTALACIN DE QT CREATOR 2010.01

1. Descargar Qt Creator 2010.01 (273 Mbytes) desde: http://qt.nokia.com/downloads/sdk-windows-cpp (Es posible que en este momento exista alguna versin ms reciente de Qt Creator, puesto que salen revisiones cada cierto tiempo. Por compatibilidad, recomendamos que para las prcticas de PAV se use la versin 2010.01.) 2. Ejecutar el fichero descargado: qt-sdk-win-opensource-2010.01.exe

3. IMPORTANTE: si se instala en Windows XP, es recomendable que est actualizado con el SP3. En un Windows XP sin SP3 puede instalarse pero podra dar problemas al ejecutarse Tampoco funciona en Windows 2000.

4.1. No hace falta instalar ningn depurador adicional. Usaremos el que lleva por defecto.

4.2. Vamos a dejar las opciones 4.3. Instalamos en el directorio por defecto (aunque tal vez por defecto: podramos quitar la ltima). C:\Qt\2010.01 Ojo, se requieren 1,4 Gbytes. 2

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

EL ENTORNO DE QT CREATOR
5. Ejecutar Qt Creator. Se abrir una ventana como la mostrada abajo.
Men principal Modos de visualizacin

Espacio de trabajo

Ejecutar Depurar Construir Ver salida

La traduccin de Qt Creator al espaol es muy incompleta. Y tambin podra instalarse en ingls.

6. Modos de visualizacin. Existen seis modos de visualizacin diferentes, que nos permiten ver la informacin ms adecuada en cada momento, segn estemos editando, depurando, ejecutando, buscando ayuda, etc. 6.1. Modo Bienvenida (Welcome). Aparece siempre al empezar. Contiene tutoriales de Qt y nos permite abrir proyectos rpidamente. 6.2. Modo Edicin (Edit). Sirve para editar el cdigo fuente de nuestra aplicacin, as como las ventanas y formularios del programa. Es el modo ms habitual de visualizacin cuando estemos escribiendo el programa. 6.3. Modo Depuracin (Debug). Lo usamos cuando estemos depurando la aplicacin. Muestra el cdigo y la informacin de depuracin. 6.4. Modo Proyectos (Projects). Permite ver y configurar las opciones del proyecto. Normalmente no necesitaremos tocarlo mucho. 6.5. Modo Ayuda (Help). Muestra la ayuda de Qt. Desafortunadamente, no incluye ayuda de C/C++ ni de las STL. Podemos usar Internet: http://www.manpagez.com Pginas MAN online (para C). http://www.cplusplus.com Referencia completa de C++ y las STL. 6.6. Modo Salida (Output). Sirve para ver la salida del compilador, la salida del programa o el resultado de las bsquedas. 7. Mtodo de trabajo. El proceso normal de trabajo empezar con la creacin de un nuevo proyecto. Despus disearemos el aspecto grfico de la ventana (o ventanas) de nuestra aplicacin. Escribimos el cdigo usando el modo Edicin. Despus depuramos y ejecutamos, hasta estar seguros del funcionamiento correcto del programa. 3

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

NUESTRO PRIMER PROGRAMA QT

8. Vamos a crear nuestro primer programa con Qt Creator y a analizar los ficheros de los que consta un proyecto. 9. Dentro de Qt Creator, si tenemos abierto algn proyecto lo cerramos con: Archivo | Cerrar todos los proyectos. A continuacin hacemos: Archivo | New File or Project (o tambin, en el modo Bienvenida, solapa Desarrollar, botn Crear un nuevo proyecto). 10. Dentro de la ventana Nuevo elegimos en Proyectos la entrada Aplicacin Qt4 con GUI (Qt4 Gui Application). Pinchamos en Aceptar. 11. En la siguiente ventana, dentro de Nombre ponemos el nombre de nuestro proyecto. Por ejemplo: HolaMundoQt (sin espacios). En Crear en seleccionamos el directorio base (bajo ese directorio se crear un subdirectorio HolaMundoQt con todos los ficheros de nuestro proyecto). Pinchamos en Siguiente. 12. La siguiente ventana nos pide los mdulos que queremos aadir al proyecto. No necesitamos ninguno. Pinchamos en Siguiente.

13. Seguidamente aparece otra ventana, solicitando el nombre de la ventana principal de la aplicacin (nombre de la clase y nombre de los ficheros asociados .h, .cpp y .ui), y el tipo de ventana: QMainWindow, QWidget o QDialog.

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

14. QMainWindow es una ventana con men superior y barra de estado debajo. QWidget es una ventana vaca, con botones de maximizar, minimizar y cerrar. QDialog es una ventana con botones de cerrar y ayuda. Dejamos QMainWindow, dejamos los nombres que estn y pinchamos en Siguiente.

15. Finalmente pinchamos en Terminar y se genera nuestro proyecto. Ya hemos creado nuestro primer proyecto Qt! Ahora vamos a ver la estructura, el contenido y el significado de los ficheros de un proyecto. Si no funciona, mira los puntos 68 y 69.

ESTRUCTURA DE UN PROYECTO QT
16. Dentro de Qt Creator seleccionamos el modo Edicin para ver los ficheros creados en el proyecto. Debe aparecer algo parecido a lo siguiente (despus de desplegar las carpetas Forms, Headers y Sources).

17. Archivo: HolaMundoQt.pro. Contiene la definicin de todos los ficheros y elementos de los que se compone el proyecto. Es un archivo de texto. En concreto, define el nombre de los formularios del proyecto (FORMS), de los ficheros de cabecera (HEADERS) y de implementacin (SOURCES). Tambin puede contener otra informacin, como la ruta de los ficheros include (INCLUDEPATH), las libreras externas utilizadas (LIB) y los ficheros de recursos (RESOURCES). 18. Directorio: Forms. Dentro de este directorio se incluyen todos los formularios (ventanas) que contiene nuestra aplicacin. La aplicacin puede contener varias ventanas, pero slo una de ellas puede ser la ventana principal (la que se muestra al ejecutar el programa). 18.1. Archivo: mainwindow.ui. Es la ventana principal de la aplicacin. Las ventanas tienen siempre extensin .ui. Internamente son archivos de texto en formato XML, que describen los elementos visuales de la ventana (botones, 5

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

etiquetas, mens, etc.). No la editaremos manualmente sino de forma visual usando el editor de ventanas de Qt Creator. 19. Directorio: Headers. Dentro de este directorio estn todos los archivos de cabecera (es decir, los .h). Recordar que los archivos de cabecera contienen la definicin de las clases, constantes, variables y procedimientos pblicos. En general tendremos dos tipos de ficheros de cabecera: asociados a las ventanas, o asociados a mdulos no visuales. 19.1. Archivo: mainwindow.h. Contiene la declaracin de la ventana principal de nuestra aplicacin. Nuestras ventanas sern siempre clases, declaradas como subclases de QMainWindow, QWidget o QDialog. Observar el contenido del fichero mainwindow.h. El archivo mainwindow.ui (que no es cdigo C/C++ sino XML) se compila para generar automticamente el fichero ui_mainwindow.h, donde se define una clase Ui::MainWindow, que es la que contiene los botones, etiquetas, etc. Despus, dentro de mainwindow.h se define la clase MainWindow que incluye un atributo Ui::MainWindow *ui; 20. Directorio: Sources. Dentro de este directorio est la implementacin de las clases y de las funciones del programa. Contiene archivos de cdigo C++ (con extensin .cpp). Pueden ser los asociados a las ventanas o asociados a mdulos no visuales. 20.1. Archivo: mainwindow.cpp. Aqu es donde va la implementacin de los slots (los mtodos asociados a los eventos de las ventanas), as como de cualquier otro mtodo que queramos aadir a la clase. Contiene algo de cdigo generado automticamente. Tambin podemos definir procedimientos fuera de las clases, si lo necesitamos. 20.2. Archivo: main.cpp. Es el programa principal de nuestra aplicacin, el procedimiento main. Y qu hace el main?

Se define una QApplication a, se define una MainWindow w, se muestra la ventana w y se ejecuta la aplicacin a. Sencillo, verdad? 21. Resumen. Podemos crear un nuevo proyecto con Bienvenida | Crear nuevo proyecto | Aplicacin Qt4 con GUI. El proyecto tiene un fichero de proyecto (.pro), un programa principal (main.cpp), una o varias ventanas, y posiblemente mdulos adicionales. Las ventanas constan de un fichero con el formulario de la ventana (.ui), un fichero de cabecera (.h) y uno de implementacin (.cpp). Los mdulos no visuales contendrn el fichero de cabecera (.h) y el de implementacin (.cpp).

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

HOLA MUNDO!
22. Vamos a hacer un sencillo programa Hola Mundo! y luego implementaremos algo un poco ms avanzado. 23. Partimos del proyecto HolaMundoQt que hemos creado en los pasos del 10 al 15. Seleccionamos el modo Edicin (en los botones de modos de visualizacin). En la lista de archivos del proyecto que aparece a la izquierda, seleccionamos HolaMundoQt | Forms | mainwindow.ui y hacemos doble clic encima.

Seleccin de objetos Archivos del proyecto Paleta de componentes Diseo del Formulario Inspector de objetos

24. Se abrir el editor de formularios (como se muestra arriba). A la izquierda aparece la paleta de componentes, con todos los elementos (widgets) que podemos aadir a nuestro formulario. En el centro aparece el diseo del formulario con el que estamos trabajando. Y a la derecha aparece el inspector de objetos, donde podemos editar las propiedades de los objetos que contiene el formulario. 25. Dentro del inspector de objetos, nos vamos a la propiedad windowTitle y escribimos: Mi primer programa Qt. 26. A continuacin, en la paleta de componentes, pinchamos con el ratn en el componente llamado Push Button y lo arrastramos dentro del formulario. Podemos cambiar su tamao y posicin segn queramos; y tambin el texto. Para ello podemos usar el inspector de objetos (propiedad text), o bien hacer doble clic en el botn. Vamos a poner: Saludar. 27. Ahora vamos a poner algo de cdigo asociado al botn Saludar. Pinchamos con el botn derecho del ratn sobre el botn Saludar. En el men desplegable que aparece, seleccionamos Go to slot Nos aparecer una ventana con la lista de 7

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

eventos que se pueden asociar al botn. Seleccionamos clicked() y pulsamos en Aceptar. 28. Se abrir automticamente el fichero mainwindow.cpp dentro del editor de cdigo, donde se habr creado un nuevo mtodo de la ventana, asociado a la pulsacin del botn Saludar. El cursor se queda esperando a que escribamos el cdigo del mtodo. void MainWindow::on_pushButton_clicked() { } 29. Dentro de las llaves escribimos: QMessageBox::information(this, "Mensaje", "Hola Mundo"); 30. Dentro del men principal de Qt Creator, guardamos el proyecto con Archivo | Guardar todo. En general, siempre es aconsejable grabar con cierta regularidad. 31. Ahora ejecutamos el programa con Construir | Ejecutar, o bien con el botn 32. Y el resultado es Uppps! Error de compilacin: 'QMessageBox' has not been declared. Claro, QMessageBox es una clase que est definida en la librera QMessageBox. En general, todas las clases de Qt estn definidas en libreras que tienen el mismo nombre que la clase. En definitiva, debemos aadir al principio: #include <QMessageBox> 33. De nuevo, guardar y ejecutar. Ahora s, ya hemos creado nuestro primer Hola mundo con Qt! Acurdate de cerrarlo antes de seguir. 34. La ejecucin conlleva implcitamente la compilacin del proyecto (compilacin + enlace). Tambin se puede hacer explcitamente con Construir | Construir todo. 35. Observar los ficheros que se han creado dentro del directorio de nuestro proyecto: 35.1. HolaMundoQt.pro: fichero principal del proyecto. 35.2. main.cpp: programa principal de la aplicacin. 35.3. mainwindow.ui, mainwindow.h, mainwindow.cpp: ficheros asociados a la ventana principal. 35.4. ui_mainwindow.h: fichero de cdigo creado automticamente a partir del mainwindow.ui. 35.5. Makefile, Makefile.Debug, Makefile.Release: ficheros makefile del proyecto, en modo debug o release. 35.6. HolaMundoQt.pro.user: algunas opciones adicionales de configuracin, que se pueden ver en el modo Proyectos. 35.7. Directorio debug: archivos de compilacin del proyecto en modo depuracin, cdigo objeto (.o) y el ejecutable (.exe). 35.8. Directorio release: lo mismo pero para el modo versin final.

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

UN SENCILLO CONTADOR
36. Ahora vamos a hacer algo un poco ms avanzado: un contador manual. Creamos un proyecto nuevo (repetir los pasos del 10 al 15) de tipo QWidget y le damos el nombre Contador. (Cuidado! No meterlo como un subdirectorio dentro de HolaMundoQt. Si est abierto el proyecto HolaMundoQt, cerrarlo primero.) 37. En el modo Edicin, nos vamos al fichero Forms | widget.ui, y se abre el editor de formularios. Seleccionar componentes de la paleta de componentes y ponerlos en el formulario, hasta crear una ventana con el siguiente aspecto. Algunas propiedades deben ser ajustadas con el inspector de objetos.
label: QLabel
text: Valor del contador font: Point Size: 12 Bold: true

Widget: QWidget
windowTitle: Mi contador

lineEdit: QLineEdit
text: 0 font: Point Size: 40 alignment: AlignHCenter

pushButton, pushButton_2, pushButton_3: QPushButton

text: Aumentar,

commandLinkButton: QCommandLinkButton
text: Salir

lineEdit_2: QLineEdit

38. Podemos guardar y luego ejecutar para ver el aspecto que tendr el programa. 39. Ahora vamos a meter el cdigo asociado a los eventos de inters. Seleccionamos el botn Salir, pinchamos en el botn derecho del ratn, y elegimos Go to slot Luego seleccionamos el evento clicked() y Aceptar. 40. Ahora debemos estar dentro del editor de cdigo, editando el fichero widget.cpp, y dentro del mtodo creado on_commandLinkButton_clicked(). Escribimos el siguiente cdigo: close(); 41. La operacin close() es un mtodo de la clase Widget (dentro de la cual nos encontramos), e indica que se cierre la ventana. 42. Vamos ahora a programar el efecto de los botones. Para ello necesitamos una variable entera que nos sirva de contador. Para simplificar, la vamos a definir como una variable global (es decir, fuera de la clase ventana). En widget.cpp nos vamos justo despus de los includes y escribimos: int contador= 0; 43. Igual que hemos hecho con el botn Salir, hacemos con el botn Aumentar. Nos vamos a widget.ui. Creamos para este botn su evento clicked() y escribimos: void Widget::on_pushButton_clicked() { contador++; 9

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

ui->lineEdit->setText(QString::number(contador)); } 44. El atributo ui (user interface) est dentro de nuestro formulario (en la clase Widget) y a su vez ui contiene todos los elementos del formulario (tenemos ui->label, ui-> lineEdit, ui->pushButton, etc.). Por otro lado, QString::number es una operacin esttica para convertir un nmero en un QString (el tipo cadena usado en Qt). 45. De la misma forma, para el botn pushButton_2 le asociamos el evento: void Widget::on_pushButton_2_clicked() { contador--; ui->lineEdit->setText(QString::number(contador)); } 46. Finalmente, queremos que el botn pushButton_3 calcule el factorial del valor actual del contador. As que en el cdigo de su evento escribimos: void Widget::on_pushButton_3_clicked() { long resultado= 1; for (int i= 1; i<=contador; i++) resultado*= i; ui->lineEdit_2->setText(QString::number(resultado)); } 47. Guardamos el proyecto y lo ejecutamos. (Por cierto, qu ocurre si ejecutamos sin guardar primero?) Si hay problemas, repasar todos los pasos y preguntar al profesor.

DEPURACIN CON QT CREATOR

48. La forma ms sencilla y comn de depurar es escribir mensajes en ciertos puntos de inters del programa. Para ello, podemos usar la funcin qDebug. Tiene el mismo formato que el printf de C (por ejemplo, podemos poner: qDebug("La variable a vale %d y b vale %d", a, b); El resultado se mostrar en la parte inferior del entorno de Qt Creator, seleccionando: 3 Salida de la aplicacin. 49. Pero tambin tenemos herramientas para hacer depuracin ms avanzada. Los proyectos pueden ser construidos en dos modos diferentes: el modo debug y el modo release. El modo se selecciona en Proyectos | Build configuration. 49.1. Modo debug. Es ms adecuado cuando estamos en la fase de desarrollo del proyecto. Se genera toda la informacin de depuracin. 49.2. Modo release. Se usa una vez acabado el proyecto, para entregar el programa al cliente. El cdigo est ms optimizado en tiempo y espacio. 50. Para usar las funciones avanzadas de depuracin: (1) debemos tener activado el modo debug; y (2) hay que ejecutar el proyecto pinchando el botn (o F5).

10

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

51. Procedimiento para hacer depuracin de programas con Qt Creator: 51.1. En primer lugar, sealar dentro del cdigo los puntos de ruptura (los sitios donde queremos que se detenga la ejecucin). Para aadirlos/eliminarlos, debemos pinchar en el cdigo, a la izquierda de los nmeros de las lneas; se muestra una bola roja sobre los puntos de ruptura definidos. 51.2. Ejecutar el programa estando en modo debug y con el botn . 51.3. Cuando la ejecucin llega a un punto de ruptura, se detiene y podemos empezar la depuracin. Tenemos la posibilidad de: ejecutar paso a paso (F10), ejecutar paso a paso entrando en las llamadas a procedimientos (F11), ver el valor de las variables locales (solapa Locales y observadores), ver el valor de otras variables (en la misma solapa, con el botn derecho del ratn, opcin Insertar nuevo item a observar), ejecutar hasta una lnea concreta, etc. 51.4. Una vez comprobado un trozo de cdigo, podemos continuar la ejecucin o detener la depuracin .

AADIR UN ICONO AL PROGRAMA

52. A todos nos gusta poder personalizar al mximo nuestros programas. Cmo podemos cambiar el icono de nuestra aplicacin creada con Qt Creator? 52.1. Abrimos el proyecto HolaMundoQt. 52.2. Usamos la opcin de men Archivo | New File or Project 52.3. En la ventana que aparece, seleccionamos Qt | Archivo de recursos Qt y le damos a Aceptar. 52.4. Nos pide que le asignemos un nombre al archivo de recursos. Por ejemplo, podemos escribir: recursos, y luego Siguiente. Y despus Terminar. 52.5. Se ha aadido a nuestro proyecto una nueva carpeta Resources con el archivo de recursos. Adems, se ha abierto el editor dentro del fichero de recursos. Pinchamos dentro del editor en Agregar | Agregar prefijo. 52.6. A continuacin, seleccionamos Agregar | Agregar archivos. 52.7. Seleccionamos un archivo con el icono deseado (extensin .ico) y Aceptar. 52.8. Guardamos el proyecto: Archivo | Guardar todo. 52.9. Ahora seleccionamos en el editor el archivo Forms | mainwindow.ui 52.10. Teniendo seleccionado el objeto ventana (MainWindow) nos vamos a la propiedad windowIcon dentro del inspector de objetos. 52.11. Pinchar a la derecha de windowIcon y sale la opcin Choose Resource 52.12. Para acabar, slo tenemos que seleccionar nuestro icono en la ventana que aparece y darle a Aceptar (puede ser necesario pinchar en la flecha verde, para actualizar la ventana y que salga el icono). 52.13. Ya podemos guardar el proyecto y ejecutarlo.

MLTIPLES FORMULARIOS
53. Normalmente los programas no tienen una nica ventana, sino que hacen uso de muchos formularios auxiliares. Cmo construir una aplicacin con varios formularios? 53.1. Abrimos el proyecto Contador (si tenamos algn proyecto abierto, cerrarlo). Vamos a aadir un formulario que nos permita seleccionar el tamao del incremento. 53.2. Usamos la opcin de men Archivo | New File or Project 11

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

53.3. En la ventana que aparece, seleccionamos Qt | Clase del formulario de Qt Designer y le damos a Aceptar. 53.4. Se nos pide que seleccionemos el tipo de formulario. Elegimos el primer tipo, Dialog with Buttons Bottom y le damos a Siguiente. 53.5. Nos pide el nombre de la ventana y de los ficheros asociados. Dejamos los que estn (class Dialog). Le damos a Siguiente y luego Terminar. 53.6. Abrimos dialog.ui en el editor y diseamos una ventana como la siguiente.
label: QLabel
text: Incremento:

Dialog: QDialog
windowTitle: Incremento del contador

spinBox: QSpinBox
value: 1 minimum: 1 maximum: 100

buttonBox: QDialogButtonBox

53.7. Todos los QDialog tienen un mtodo exec() para ejecutarlos de forma modal (bloquear el padre hasta que no se cierre) y que devuelve true/false segn el usuario pulse aceptar/cancelar (tambin podemos cerrar el cuadro de dilogo mediante cdigo, con las funciones accept() y reject()). 53.8. Vamos a aadir a la clase Dialog un mtodo getValor() para obtener el valor seleccionado por el usuario en el incremento. Por lo tanto, editamos dialog.h y dentro de la clase Dialog aadimos: public: ... int getValor(void); private: ... int valor; 53.9. Editamos ahora dialog.cpp y ponemos: Dialog::Dialog(QWidget *parent) : ... valor= 1; // Inicializacin } int Dialog::getValor(void) { return valor; } 53.10. Volvemos a dialog.ui, seleccionamos buttonBox y en Go to slot... seleccionamos el evento accepted() y escribimos: valor= ui->spinBox->value(); accept(); 53.11. Y en el slot rejected() del buttonBox escribimos simplemente: reject(); 12

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

53.12. Ahora queremos usar ese cuadro de dilogo desde el contador. Nos vamos a widget.ui, aadimos un botn al formulario, creamos su slot clicked() y en el cdigo asociado ponemos: Dialog d; // Nos definimos una ventana de tipo Dialog if (d.exec()) // y la ejecutamos incremento= d.getValor(); 53.13. La variable incremento se supone que es una variable global que debemos aadir en widget.cpp. Adems, dentro de este fichero widget.cpp debemos hacer el include de dialog.h. Por lo tanto, nos vamos al principio del cdigo de widget.cpp y escribimos: #include <dialog.h> int incremento= 1; 53.14. Para acabar, en los sitios donde pona: contador++; escribimos: contador+= incremento; Y donde pona: contador--; escribimos: contador-= incremento; 53.15. Ya podemos darle a guardar todo y ejecutar.

DISTRIBUCIN DE PROGRAMAS CREADOS CON QT CREATOR

54. Cuando creamos un programa no suele ser para quedrnoslo nosotros mismos, sino para que lo pueda usar otra gente. Pero, cmo distribuir un programa creado con Qt Creator? Debemos tener en cuenta algunas cosas. 55. En primer lugar, generar el proyecto con el modo Release. El archivo ejecutable aparecer bajo el directorio release y ser mucho ms pequeo que el ejecutable en modo debug. 56. En segundo lugar: incluir los archivos DLL necesarios. El cdigo de las libreras Qt est dentro de archivos DLL (Dynamic Link Library), que se instalan con Qt Creator. Para distribuir una aplicacin a una persona que no tenga Qt Creator, es necesario entregarle los archivos DLL que se usan. Se deben copiar en el mismo directorio donde est nuestro ejecutable (aunque lo ideal sera que se copiaran a una zona compartida que est en el PATH del sistema). En concreto, normalmente se deben copiar las siguientes DLL al distribuir nuestros programas Qt (es conveniente comprobar si falta alguna otra ms): C:\Qt\2010.01\qt\bin\QtCore4.dll (2,30 Mbytes) C:\Qt\2010.01\qt\bin\QtGui4.dll (9,06 Mbytes) C:\Qt\2010.01\mingw\bin\libgcc_s_dw2-1.dll (42,0 Kbytes) 57. En efecto... lo anterior implica que, incluso para el programa ms simple, necesitamos entregar al usuario unos 11 Mbytes en archivos DLL. Y todo eso adems de las DLL correspondientes a OpenCV En cualquier caso, es conveniente asegurarse que no le faltan otras DLL al usuario.

COSAS PARA SEGUIR EXPLORANDO

58. Complecin automtica de cdigo. El entorno de Qt Creator tiene algunas utilidades muy interesantes en la edicin de cdigo. Una de ellas es la capacidad de 13

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

autocompletar cdigo cuando estamos a medio de escribirlo. Una forma de usarlo es cuando escribimos el nombre de un objeto y nos muestra la lista de mtodos y atributos del mismo. Pero tambin se puede usar en cualquier momento, pulsando Control + Espacio. 59. Autoindentacin del cdigo. Muchas veces nos descuidamos al indentar el cdigo fuente. Despus de escribir muchas lneas, es difcil volver a editar todos los espacios para dejar el cdigo bien indentado. Solucin: usar la indentacin automtica. O bien con Control + I, o bien con Editar | Avanzado | Autoindentar seleccin. 60. Comentado/descomentado rpido. Otra interesante funcionalidad del editor es la posibilidad de comentar o descomentar rpidamente un fragmento del cdigo. Para ello, simplemente debemos seleccionar el trozo que queremos comentar (o descomentar) y pulsar Control + / (es decir, Control + Mays. + 7). 61. Ayuda sensible al contexto. En el modo de visualizacin Ayuda podemos encontrar ayuda sobre las funciones de Qt (recordar, no hay ayuda general sobre C, C++ ni las STL). Tambin podemos usar la ayuda en el modo Edicin. Cuando nos movemos con el ratn sobre el texto, aparece informacin sobre el elemento que hay debajo. Si aparece F1, significa que podemos pulsar F1 para obtener ayuda de esa clase o mtodo. 62. Errores de compilacin. Desafortunadamente, no siempre escribimos todo perfectamente bien a la primera, y surgen los errores de compilacin. El editor de Qt Creator nos seala en rojo los errores de sintaxis mientras escribimos. Otra utilidad, pulsando con el botn derecho sobre un smbolo podemos ver su definicin. Por otro lado, al compilar podemos ver los errores de compilacin (debajo, en el panel 1 Construccin) o bien podemos ver la salida extendida del compilador (en el panel 4 Salida del compilador). 63. Reconstruir todo. A veces (raramente) el compilador se vuelve loco y produce mensajes de error muy extraos y sin sentido. Si ese es el caso, es conveniente usar la opcin Construir | Reconstruir todo. En ocasiones (muy pocas) hay que ver la salida extendida del compilador para poder entender la causa del problema. 64. Propiedades del proyecto. Dentro del modo de visualizacin Proyectos podemos ver los detalles sobre la compilacin y ejecucin del proyecto (en modo debug y release). Normalmente no necesitamos cambiar nada. Obsrvese que en la ejecucin se incluyen en el PATH los directorios necesarios de Qt y MinGW; por eso, si ejecutamos nuestro .exe fuera del entorno, nos dar un error (no se encuentran algunas DLL necesarias). Ver el punto 56 para saber cmo solucionar este problema. 65. Usando el localizador. Cuando tenemos muchos ficheros abiertos y queremos localizar dnde se encuentra la definicin de una clase o de un mtodo concreto, podemos usar el localizador (que aparece en la parte inferior de Qt Creator). Si lo que queremos es buscar un trozo de texto, usaremos el men Editar | Buscar/Reemplazar. Podemos buscar en un fichero o en todos los del proyecto. 66. Asociacin de extensin pro. Al instalar Qt Creator, no se asocian automticamente los ficheros con extensin .pro a Qt Creator. Si queremos que al 14

Procesamiento Audiovisual Sesin 1. Programacin visual con Qt Creator

Guin de Prcticas

hacer doble clic sobre el fichero .pro se abra automticamente, deberemos hacer la asociacin a mano. 67. Y mucho ms por explorar. Es conveniente que eches un vistazo a los componentes existentes en la paleta de componentes, sus propiedades, los cuadros de dilogo existentes, los tipos de datos de Qt que pueden ser de ayuda, etc. 67.1. Componentes de utilidad: label, line edit, push button, radio button, check button, spin box, combo box, slider, etc. 67.2. Cuadros de dilogo predefinidos: existen algunos cuadros de dilogo muy interesantes, como los QColorDialog (para seleccionar un color) y los QFileDialog (para seleccionar un nombre de fichero). Ejemplo, seleccionar un nombre de fichero para abrir:
QString nombre= QFileDialog::getOpenFileName();

Seleccionar un nombre de fichero para guardar:

QString nombre= QFileDialog::getSaveFileName();

Abrir un fichero incluyendo filtros para que la seleccin sea un archivo de vdeo:
QString nombre; nombre= QFileDialog::getOpenFileName(this, "Abrir archivo de vdeo" ,"", tr("Archivos AVI (*.avi);; Otros vdeos (*.mpg *.mov *.wmv);;Todos los archivos (*.*)"));

67.3. Tipo de datos QString: para almacenar cadenas. Ejemplo, convertir un entero seleccionado en un spin box, a un QString:
int numero= ui->spinBox->value(); QString cadena= QString::number(numero);

Almacenar en un QString una cadena dada en un char *:

char str[]= "Hola"; QString cadena= QString::fromAscii(str);

Convertir un QString a un char*:

char str[500]; QString cadena= "Adis!"; strcpy(str, cadena.toAscii());

67.4. Leer y escribir archivos: para leer y escribir en archivos del disco se usan los tipos QFile, QTextStream y QDataStream. Buscar ms informacin en la ayuda de Qt Creator.

POSIBLES PROBLEMAS AL INSTALAR QT CREATOR

68. Para ejecutar Qt Creator bajo entornos Windows debes tener Windows XP con SP3, Windows Vista, o Windows 7. Si tienes instalado Windows XP pero sin la actualizacin SP3, entonces puede darte problemas la ejecucin de Qt Creator. La informacin oficial de Nokia es que ya no dan soporte para sistemas operativos antiguos (Windows 2000, Windows XP SP1, etc.). 69. Tengo Windows XP con SP3, he instalado el Qt Creator correctamente, creo un proyecto, le doy a ejecutar... y no me funciona! 69.1. Comprueba dentro del panel 4 Salida del compilador si el error que te da es "No se estableci ninguna versin vlida de Qt". En ese caso, se puede arreglar de manera sencilla. 69.2. Ve a la opcin de men Herramientas | Opciones | Qt4 | Qt versions. Pinchar en el botn "+" que aparece a la derecha. 69.3. Dentro de "Nombre de la versin" escribir: 4.6.1 ; dentro de "QMake Location" escribir: C:\Qt\2010.01\qt\bin\qmake.exe ; y dentro de "Directorio de MinGW" poner: C:\Qt\2010.01\mingw . Darle a Aceptar y ya debera ir todo. 15