PDF de programación - Procesamiento Audiovisual - Sesión 1 Programación visual con Qt Creator

Procesamiento de Imágenes
Sesión 1. Programación visual con Qt Creator



Guión de Prácticas

Procesamiento de Imágenes



Máster NTI



Guión de prácticas



Sesión 1. Programación visual con Qt Creator



DESCRIPCIÓN



Descripción
Instalación
El entorno Qt
Primer programa
Estructura
¡Hola Mundo!
Contador
Depuración
Añadir icono
Formularios
Distribución
Seguir explorando

 Qt Creator es un Entorno Integrado de Desarrollo o IDE (editor + compilador +
depurador) bastante completo, moderno, potente, fácil de manejar, eficiente,
abierto y gratuito, que permite el desarrollo rápido de aplicaciones en entornos
MS Windows, Mac OS y Linux. Algunos ejemplos de programas creados con las
librerías Qt: Adobe Photoshop Album, Google Earth, KDE, Opera, Skype, VLC
media player… Nosotros usaremos Qt Creator 2.7.2 de julio de 2013.


 Características fundamentales de Qt Creator:

 Utiliza el lenguaje de programación orientado a objetos C++.
 Se basa en Qt, una librería multiplataforma y gratuita para la creación de

interfaces gráficos, programación web, multihilo, bases de datos, etc.

 Permite realizar programación visual y programación dirigida por eventos.
 Características avanzadas de
IDE: sintaxis coloreada, compleción
automática de código, ayuda sensible al contexto, inspector de objetos,
diseñador visual, compilador y depurador integrados, etc.

 Programación visual: el programador centra su atención en diseñar el aspecto
gráfico de la aplicación, la distribución de los elementos visuales (llamados
widgets: formularios, botones, menús, cuadros de texto, etc.), la interacción
entre los mismos, los distintos tipos de ventanas existentes, etc.

o Un entorno de programación 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, menús, etc.

o El programador diseña el aspecto gráfico que tendrá la aplicación

(WYSIWYG, What You See Is What You Get).

 Programación dirigida por eventos: el programador escribe el código que se
ejecutará en respuesta a determinados eventos (llamados slots: pulsar un
botón, elegir una opción 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 métodos de las ventanas. Nuestra ventana es una subclase de la
clase ventana (QMainWindow, QDialog o QWidget).

1



Procesamiento de Imágenes
Sesión 1. Programación visual con Qt Creator



 Componentes del entorno:

Guión de Prácticas

o Qt Creator es el entorno de desarrollo. Usamos la versión 2.7.2.
o Se basa en la librería Qt, un conjunto de funciones para la creación de
entornos gráficos multiplataforma. En concreto, nuestra versión de Qt
Creator usa la versión 5.1.0 de Qt.

o Puesto que Qt es solo una librería, Qt Creator necesita el compilador
MinGW (http://sourceforge.net/projects/mingw), que es un compilador
GCC para Windows. Qt Creator 2.7.2 usa la última versión disponible, que
era la MinGW 4.8.1 (se instala con Qt Creator).



INSTALACIÓN DE QT CREATOR 2.7.2



1. Descargar “Qt 5.1.0 for Windows 32-bit (MinGW 4.8, OpenGL, 666 MB)” desde:


http://qt-project.org/downloads



(Es posible que en este momento exista alguna versión más reciente de Qt
Creator, puesto que salen revisiones cada cierto tiempo. Por compatibilidad,
recomendamos que para las prácticas se use la versión 2.7.2.)


2. Ejecutar el fichero: qt-windows-opensource-5.1.0-mingw48_opengl-x86-offline.exe



Instalamos en el directorio por defecto:
C:\Qt\Qt5.1.0 y asociamos las extensiones de Qt.


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
podría dar problemas al ejecutarse… Tampoco funciona en Windows 2000.



Dejamos que se instalen los
componentes por defecto.



La licencia, también por defecto la
LGPL. Seleccionar “I have read…”



2



Y por último la entrada del menú de
inicio. La instalación puede tardar
unos 6 minutos.

Procesamiento de Imágenes
Sesión 1. Programación visual con Qt Creator



Guión de Prácticas



EL ENTORNO DE QT CREATOR

4. Ejecutar Qt Creator. Se abrirá una ventana como la mostrada abajo.



Menú



principal

Modos de



visualización



Seleccionar mo-
do compilación

Ejecutar

Depurar

Construir

Espacio
de trabajo

Ver

salida

5. Modos de visualización. Existen siete modos de visualización diferentes, que nos
permiten ver la información más adecuada en cada momento, según estemos
editando, depurando, ejecutando, buscando ayuda, etc.

5.1. Modo Welcome (Bienvenida). Aparece siempre al empezar. Contiene

tutoriales de Qt, ejemplos, y nos permite abrir proyectos rápidamente.

5.2. Modo Edit (Edición). Sirve para editar el código fuente de nuestra
aplicación. Es el modo más habitual de visualización cuando estamos
escribiendo el programa.

5.3. Modo Design (Diseño). Nos permite ver y modificar el diseño de las

ventanas y formularios de nuestra aplicación.

5.4. Modo Debug (Depuración). Lo usamos cuando estemos depurando la

aplicación. Muestra el código y la información de depuración.

5.5. Modo Projects (Proyectos). Permite ver y configurar las opciones del

proyecto. Normalmente no necesitaremos tocarlo mucho.

5.6. Modo Analyze (Análisis). Sirve para medir el tiempo consumido en

distintas operaciones del programa.

5.7. Modo Help (Ayuda). Muestra la ayuda de Qt. Desafortunadamente, no

incluye ayuda de C/C++ ni de las STL. Podemos usar Internet:
 http://www.manpagez.com Páginas MAN online (para C).
 http://www.cplusplus.com Referencia completa de C++ y las STL.


6. Método de trabajo. El proceso normal de trabajo empezará con la creación de un
nuevo proyecto. Después diseñaremos el aspecto gráfico de la ventana (o
ventanas) de nuestra aplicación. Escribimos el código usando el modo Edición.
Después depuramos y ejecutamos, hasta estar seguros del funcionamiento correcto
del programa.



3

Procesamiento de Imágenes
Sesión 1. Programación visual con Qt Creator



Guión de Prácticas



NUESTRO PRIMER PROGRAMA QT

7. Vamos a crear nuestro primer programa con Qt Creator y a analizar los ficheros de

los que consta un proyecto.


8. Dentro de Qt Creator, si tenemos abierto algún proyecto lo cerramos con: File |
Close All Projects and Editors. A continuación hacemos: File | New File or
Project… (o también, en el modo Welcome, solapa Develop, botón Create
Project).


9. Dentro de la ventana New Project elegimos en Projects la entrada Qt Gui

Application. Pinchamos en Choose…


10. En la siguiente ventana, dentro de Name: ponemos el nombre de nuestro proyecto.
Por ejemplo: HolaMundoQt (sin espacios). En Create in: seleccionamos el
directorio base (bajo ese directorio se creará un subdirectorio HolaMundoQt con
todos los ficheros de nuestro proyecto). Pinchamos en Next.


11. Seguidamente aparece otra ventana, Kit Selection, para elegir el kit con el que
queremos compilar el programa. El kit se refiere al compilador usado, opciones de
compilación, entorno de destino, y modos de compilación (Debug y Release). Por
defecto solo tendremos la opción de elegir el kit Desktop Qt 5.1.0 MinGW 32 bit.


12. A continuación viene otra ventana, solicitando el nombre de la ventana principal de
la aplicación (nombre de la clase y nombre de los ficheros asociados .h, .cpp y .ui),
y el tipo de ventana: QMainWindow, QWidget o QDialog.



13. QMainWindow es una ventana con menú superior y barra de estado debajo.
QWidget es una ventana vacía, con botones de maximizar, minimizar y cerrar.
QDialog es una ventana con botones de cerrar y ayuda. Dejamos QMainWindow,
dejamos los nombres que están y pinchamos en Next.



4



Procesamiento de Imágenes
Sesión 1. Programación visual con Qt Creator



Guión de Prácticas

14. Finalmente pinchamos en Finish 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.


ESTRUCTURA DE UN PROYECTO QT



15. Dentro de Qt Creator seleccionamos el modo Edit para ver los ficheros creados en
el proyecto. Debe aparecer algo parecido a lo siguiente (después de desplegar las
carpetas Headers, Sources y Forms).



16. Archivo: HolaMundoQt.pro. Contiene la definición 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 implementación (SOURCES). También puede contener
otra información, como la ruta de los ficheros include (INCLUDEPATH), las librerías
externas utilizadas (LIB) y los ficheros de recursos (RESOURCES).


17. Directorio: Forms. Dentro de este directorio se incluyen todos los formularios
(ventanas) que contiene nuestra aplicación. La aplicación puede contener varias
ventanas, pero solo una de ellas puede ser la ventana princ