qt creator

´
Guion 2
´
Interfaces graficos en Qt con
Qt-designer
Noviembre de 2011

´
Nuevas Tecnolog´as de la Programacion
ı
Curso 2011/2012

´ndice
I
´
1. Introduccion

5

´
2. Introduccion a Qt designer

6

´
3. Creacion de widgets hijos

7

´
4. Definicion de las propiedades de los widgets

8

5. Colocando los widgets con gestores de posicionamiento

9

´
´
6.Compilacion y ejecucion del programa

11

7. Heredando de la clase generada por Qt Designer

12

8. Otras utilidades de Qt

14

´
Nuevas Tecnolog´as de la Programacion
ı

1.

´
Interfaces graficos en Qt con Qt-designer

´
Introduccion

Qt designer es una utilidad de Trolltech (http://trolltech.com),
empresa comprada recientemente por Nokia (http://qt.nokia.com/),
˜
´
paradisenar y construir interfaces graficos de usuario (GUIs) con compo˜
´
nentes Qt. Permite disenar y construir widgets y dialogos usando forms
´
´
con los mismos widgets que se usaran en la aplicacion. Los componentes
˜
creados con Qt designer pueden hacer uso del mecanismo de senalesslots. El GUI resultante puede previsualizarse para comprobar que tiene
´
el aspecto y se comporta segundeseabamos.
´
´
Qt Designer puede usarse para desarrollar la aplicacion completa o
algunos de los forms solamente. Los forms que se crean usando Qt De´
´
signer acaban traduciendose en codigo C++.
Existe otra utilidad llamada Qt Creator que incluye a Qt Designer como
´
una de sus utilidades. Qt Creator permite el desarrollo de la aplicacion
´
˜
completa, y no solo el diseno de los forms.´
Para programar en qt en las aulas de practicas de la ETSIIT, usaremos
Ubuntu 10.04. Comenzaremos descargando alguno de los programas de
´
´
ejemplo del libro C++ GUI Programming with Qt 4 (2a edicion), que estan
´
disponibles en la pagina web de la asignatura, en el apartado de otros temas docentes (http://decsai.ugr.es/~acu/NTP/CursoActual/
´
otros.html). Concretamente aparecen en elultimo enlace del Modulo
´
´
2. Descarga por ejemplo el fichero hello.cpp que esta en la carpeta
chap01/hello. Debes guardar este fichero en tu cuenta, en una carpeta llamada hello. Los pasos para obtener el ejecutable de este programa
ser´an:
ı
´
Colocandote dentro de la carpeta hello, ejecuta la utilidad qmake
para obtener el fichero de proyecto (hello.pro):

> qmake-qt4 -projectEjecuta la utilidad qmake para obtener el fichero Makefile:

> qmake-qt4
Compila el programa a partir del anterior fichero Makefile:

> make
Ejecuta el programa generado:

> ./hello
Puedes probar ahora a descargar otros de los programas de ejemplo,
para obtener el ejecutable de la misma forma.

5

5

´
Nuevas Tecnolog´as de la Programacion
ı

2.

´
Interfaces graficos en Qt conQt-designer

´
Introduccion a Qt designer

˜
´
En primer lugar usaremos Qt designer para disenar el dialogo mostra´
´
do en la siguiente figura. Este dialogo se usa en la aplicacion Spreadsheet
´
(Hoja de calculo) para solicitar al usuario que introduzca el nombre de una
´
celda en la hoja de calculo:

Los pasos que tendremos que llevar a cabo son los siguientes:
Crear e inicializarlos widgets hijos.
Colocar los widgets hijos en layouts.
Establecer el orden (tab) de los widgets dentro del form.
˜
Establecer las conexiones senales-slots.
Implementar los slots.
Para ejecutar Qt designer abre un terminal en linux y ejecuta el coman´
do designer-qt4. Apareceran las siguientes ventanas:

Cuando comienza a ejecutarse Qt Designer, muestra una lista de plan´
tillas(templates) para distintos tipos de forms (dialogos, ventana principal,
widget).

6

6

´
Nuevas Tecnolog´as de la Programacion
ı

´
Interfaces graficos en Qt con Qt-designer

´
´
Selecciona la plantilla Widget y pulsa el boton Create. Quizas podr´amos
ı
usar la plantilla Dialog with Buttons Bottom, pero para este ejemplo crea´
remos los botones OK y Cancel a mano para ver como se...