PDF de programación - Módulo 2: Programación gráfica en entorno UNIX con una librería de alto nivel (Qt)

Nuevas Tecnologías de la

Programación

Módulo 2: Programación gráfica en entorno UNIX con una

librería de alto nivel (Qt)

Andrés Cano Utrera

Dpto. Ciencias de la Computación e I.A

Universidad de Granada

Octubre de 2008

Índice

1. Introducción a la programación con Qt

2. Primeros programas con Qt

2.1. Primer programa con Qt . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.2. Compilación del programa . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.3. Conexión de acciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
2.4. Gestores de posicionamiento . . . . . . . . . . . . . . . . . . . . . . . . . . . .

3. Creación de diálogos

3.1. Ejemplo de creación de una subclase de Diálogo . . . . . . . . . . . . . . . . .
3.2. Más sobre señales y slots . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

4. Un vistazo a los widgets de Qt

. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.1. Botones
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.2. Contenedores
4.3. Visores de items . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.4. Widgets para mostrar información . . . . . . . . . . . . . . . . . . . . . . . . .
4.5. Widgets de entrada . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
4.6. Diálogos predefinidos . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

5. La ventana principal

5.1. Definición de la clase ventana principal
. . . . . . . . . . . . . . . . . . . . . .
5.2. Constructor de la clase . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.3. El icono de la aplicación y mecanismo de recursos
. . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .
5.4. Creación de menús y toolbars
. . . . . . . . . . . . . . . . . . . . . . . . . .
. . . . . . . . . . . . . . . . . . . . . . . . . . .

5.4.1. Creación de las acciones
5.4.2. Creación de los menús

1

2
2
3
4
4

7
9
16

17
17
19
20
21
21
24

29
29
32
32
33
34
35

0-0

ÍNDICE

5.4.3. Creación de menús contextuales . . . . . . . . . . . . . . . . . . . . . .
5.4.4. Creación de barras de utilidades . . . . . . . . . . . . . . . . . . . . . .
5.5. Creación de la barra de estado . . . . . . . . . . . . . . . . . . . . . . . . . . .
Implementación de los slots . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.6.
5.7.
Introducción al manejo de eventos de bajo nivel
. . . . . . . . . . . . . . . . .
5.8. Uso de nuestros diálogos
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
5.9. Almacenamiento de la configuración de la aplicación . . . . . . . . . . . . . . .
5.10. Implementación del widget central . . . . . . . . . . . . . . . . . . . . . . . . .

6. Sistema de dibujo de Qt

6.1. Dibujar con QPainter . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.2. Otros atributos del QPainter . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.3. Transformaciones . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.4. Modos de composición . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.5. Rendering de alta calidad con QImage . . . . . . . . . . . . . . . . . . . . . . .
6.6. Clases QImage y QPixmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.1. Clase QImage . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.2. Clase QPixmap . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
6.6.3. Clase QPicture
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

7. Creación de widgets optimizados

7.1. Ejemplo: Un spin box hexadecimal . . . . . . . . . . . . . . . . . . . . . . . . .
7.2. Subclases de QWidget
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3. Ejemplo: Un editor de iconos . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.1. El fichero .h . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
7.3.2. El fichero .cpp . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .

0-1

36
36
37
37
40
41
43
44

45
45
50
50
52
54
56
56
59
60

61
61
64
64
65
67

1

INTRODUCCI ÓN A LA PROGRAMACI ÓN CON QT

1

1.

Introducción a la programación con Qt

Qt es un toolkit de plataforma cruzada (cross-platform) desarrollado
por Trolltech (empresa Noruega) para construir GUIs en C++

Puede funcionar en varias plataformas: Microsoft Windows, Unix/X11,
Mac OS X

Las primeras versiones datan de 1996

Con él se han desarrollado aplicaciones tales como: Google Earth,
Adobe Photoshop Elements, Skype y KDE

Se distribuye bajo ediciones comerciales o bien Open Source.

Incluye una extensa librería de clases C++ y utilidades para construir
las aplicaciones de forma rápida y sencilla.

2 PRIMEROS PROGRAMAS CON QT

2

2. Primeros programas con Qt

2.1. Primer programa con Qt

Hello Qt: chap01/hello.cpp

#include <QApplication>
#include <QLabel>
int main(int argc, char *argv[])
{

QApplication app(argc, argv);
QLabel *label = new QLabel("Hello Qt!");
label->show();
return app.exec();

}

1

2

3

4

5

6

7

8

9

Las líneas 1 y 2 incluyen las definiciones de las clases QApplication y
QLabel.

Para cada clase Qt existe un fichero de cabecera con el mismo
nombre

La línea 5 crea un objeto QApplication
• El constructor necesita argc y argv pues Qt soporta algunos

argumentos propios en la línea de comandos.

La línea 6 crea un widget (window gadget) (control o componente y
contenedor al mismo tiempo) QLabel con la cadena ‘‘Hello Qt!’’
• Los widgets pueden contener otros widgets.
• Normalmente las aplicaciones usan QMainWindow o QDialog como

ventana de la aplicación.

• Por ejemplo, la ventana de la aplicación contiene normalmente un

QMenuBar, QToolBars, una QStatusBar y otros widgets.

• Pero cualquier widget puede actuar como ventana como ocurre en el

ejemplo con QLabel.

2 PRIMEROS PROGRAMAS CON QT

3

La línea 7 muestra la etiqueta en pantalla.

Los widgets se crean siempre ocultos, para que puedan
optimizarse antes de mostrarlos (evitando el parpadeo).

La línea 8 da el control de la aplicación a Qt, comenzando el bucle de
eventos.

2.2. Compilación del programa

El código lo incluimos en un fichero hello.cpp dentro del directorio
hello.

Dentro del directorio hello ejecutamos para crear el fichero de
proyecto (hello.pro):

qmake-q4 -project

Para crear el fichero Makefile:

qmake-q4 hello.pro

Para obtener el ejecutable:

make

2 PRIMEROS PROGRAMAS CON QT

4

2.3. Conexión de acciones

Ejemplo de control de eventos: chap01/quit.cpp

#include <QApplication>
#include <QPushButton>
int main(int argc, char *argv[])
{

QApplication app(argc, argv);
QPushButton *button = new QPushButton("Quit");
QObject::connect(button, SIGNAL(clicked()),

&app, SLOT(quit()));

button->show();
return app.exec();

1

2

3

4

5

6

7

8

9

10

11

}

Los widgets emiten señales (signals) para indicar que se ha producido
una acción de usuario o cambio de estado en el widget.

Las señales pueden conectarse a una función (slot) que se
ejecutará automáticamente cuando se emita la señal.

En la línea 7 se conecta la señal clicked() del botón al slot quit()
del objeto QApplication.

2.4. Gestores de posicionamiento

Permiten controlar automáticamente la geometría (posición y tamaño)
de los widgets que contiene.
• QHBoxLayout: Coloca los widgets horizontalmente de izquierda a

derecha.

• QVBoxLayout: Coloca los widgets verticalmente de arriba hacia

abajo.

• QGridLayout: Coloca los widgets en una rejilla.

2 PRIMEROS PROGRAMAS CON QT

5

El siguiente programa usa tres widgets: QSpinBox, QSlider y QWidget
(ventana principal).

Los dos primeros serán hijos del tercero.

Ejemplo de Layouts y control de eventos: chap01/age.cpp

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

#include <QApplication>
#include <QHBoxLayout>
#include <QSlider>
#include <QSpinBox>
int main(int argc, char *argv[])
{

QApplication app(argc, argv);
QWidget *window = new QWidget;
window->setWindowTitle("Enter Your Age");
QSpinBox *spinBox = new QSpinBox;
QSlider *slider = new QSlider(Qt::Horizontal);
spinBox->setRange(0, 130);
slider->setRange(0, 130);
QObject::connect(spinBox, SIGNAL(valueChanged(int)),

slider, SLOT(setValue(int)));

QObject::connect(slider, SIGNAL(valueChanged(int)),

spinBox, SLOT(setValue(int)));

spinBox->setValue(35);
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(spinBox);
layout->addWidget(slider);
window->setLayout(layout);
window->show();
return app.exec();

}

Las líneas 8 a 11 crean los tres widgets.

Al crear un widget debe pasarse el padre en el constructor,
aunque en el ejemplo no hace falta hacerlo por lo que veremos
más adelante.

2 PRIMEROS PROGRAMAS CON QT

6

Las líneas 12 y 13 establecen los rangos válidos para el QSpinBox y
QSlider.

Las líneas 14 a 17 hacen que los objetos QSpinBox y QSlider estén
siempre sincronizados mostrando el mismo valor.

Las líneas 19 a 22 colocan los widgets QSpinBox y QSlider usando un
gestor de posicionamiento (layout manager)

La línea 22, a parte de instalar el gestor de posicionamiento en la
ventana, hace que los widgets QSpinBox y QSlider se hagan hijos del
widget de la ventana (window)

3 CREACI ÓN DE DI ÁLOGOS

7

3. Creación de diálogos

La mayoría de las aplicaciones contienen una ventana principal con una
barra de menús, una barra de herramientas, y varios diálogos.

Los diálogos muestran al usuario una serie de opciones que el usuario
puede modificar de valor.

Qt dispone de una serie de diálogos predefinidos.

También permite crear nuestros propios diálogos.

En Qt podemos crear tanto diálogos modales como no modales con una
clase que herede de QDialog:
• Diálogos modales: Bloquean el resto del interfaz gráfico hasta que

el usuario los cierra.
◦ Se muestran con el método exec() (que devuelve un entero que

indica que el diálogo se ha cerrado).

◦ exec(