excelente

1. Laboratorio Inform´tica II: Pr´ctica 5
a a
Felipe Lennis
felipe.lennis@microe.udea.edu.co
26 de noviembre de 2012
Objetivos
Realizar una introducci´n al framework Qt y al IDE Qt Creator para la construcci´n
o o
de interfaces gr´ficas de usuario.
a
Construir una interfaz gr´fica simple empleando los conceptos de signal y slot.
a
1. Instalaci´n del QtSDK en Ubuntu Linux
o
Del sitio web www.developer.nokia.com/Develop/Qt/ descargar el QtSDK para Lin-
ux de 32 o 64 bits, seg´n sea el caso. Los siguientes comandos instalan el SDK (Software
u
Developmente Kit), incluido el IDE (Integrated Development Environment) QtCreator en
el directorio de usuario (home) y no en la ra´ del sistema.
ız
$ sudo apt-get install cmake mesa-common-dev freeglut3-dev
$ sudo apt-get install binutils-gold
$ chmod +x QtSdk-offline-linux-x86-v1.2.1.run
$ ./QtSdk-offline-linux-x86-v1.2.1.run -style cleanlooks
2. Introducci´n al Qt Creator
o
Qt Creator permite la edici´n de c´digo en C++ y el dise˜o de interfaces gr´ficas
o o n a
de usuario. Adem´s es posible hacer debug, compilar y ejecutar las aplicaciones desde el
a
mismo entorno de desarrollo (IDE).
1

2. Para crear nuestra primera aplicaci´n, hacemos click en File->New File or Project-
o
>Other Project->Qt Console Application, lo que inicializa una aplicaci´n para con-
o
sola sin elementos gr´ficos para la interfaz de usuario. En la pesta˜a Edit, editamos el
a n
archivo main.cpp de la siguiente manera:
2

3. Qt posee un gran n´mero de clases, debido a esto es fundamental hacer uso de la
u
documentaci´n, que se encuentra disponible mediante la pesta˜a Help.
o n
3. Creando una Interfaz Grafica de Usuario (GUI)
Qu´ es un Widget? Un Widget es un componente visual, por ejemplo, un bot´n, un
e o
cuadro de texto, los items de un men´, o cualquier otro elemento que hace parte de la
u
interfaz gr´fica de usuario.
a
Para crear un proyecto con interfaz gr´fica, hacemos click en File->New File or
a
Project->Qt Widget Project->Qt Gui Application y navegamos a trav´s de los e
cuadros de di´logo que se presentan a continuaci´n. N´tese, dentro de la carpeta Forms del
a o o
proyecto creado, el archivo mainwindow.ui. Los archivos con extensi´n *.ui representan la
o
especificaci´n de la interfaz de usuario y pueden ser editados gr´ficamente. Al hacer doble-
o a
click sobre mainwindow.ui se habilita el modo de dise˜o (la pesta˜a Design) y podemos
n n
entonces comenzar a agregar widgets a nuestra interfaz gr´fica.
a
Para agregar un Widget, estos se arrastran desde la parte izquierda y se descargan
en la parte central (ventana). Agregue un dial, un lcdNumber y un pushButton, como se
muestra a continuaci´n.
o
3

4. Compile y ejecute la aplicaci´n.
o
3.1. Signals y Slots
Las se˜ales (signals) y los slots se usan para la comunicaci´n entre objetos. Una se˜al
n o n
se emite cuando un evento particular ocurre (por ejemplo, si se presiona un bot´n con
o
el mouse o se arrastra una barra de desplazamiento). Los Widgets de Qt tienen muchas
se˜ales predefinidas y el usuario tambi´n puede definir sus propias se˜ales.
n e n
Un slot es una funci´n que es llamada en respuesta a una se˜al particular. Los slots
o n
son funciones miembro comunes y corrientes, y los Widgets de Qt tambi´n tienen muchos
e
definidos por defecto.
El mecanismo de signals y slots garantiza que si se conecta una se˜al a un slot, la
n
funci´n representada por el slot ser´ llamada con los par´metros de la se˜al en el momento
o a a n
indicado.
La conexi´n entre signals y slots se puede realizar de manera gr´fica o mediante c´digo.
o a o
Para proceder gr´ficamente, realice la conexi´n de la se˜al valueChanged del dial con el
a o n
slot display del lcdNumber, como lo ilustra la figura a continuaci´n:o
4

5. Luego, asigne el nombre Reset para el pushButton, haga click derecho sobre este y
escoja la opci´n Go to slot..., luego seleccione la se˜al clicked().
o n
5

6. Dentro del slot generado en el archivo mainwindow.cpp para la se˜al clicked() in-
n
serte la l´
ınea:
ui->lcdNumber->display(0);
Compile y ejecute la aplicaci´n y observe que sucede al mover el dial y presionar el bot´n.
o o
3.2. Conexi´n mediante c´digo de signals y slots
o o
Elimine la conexi´n realizada anteriormente de manera gr´fica y agregue las siguientes
o a
l´
ıneas al constructor de la clase MainWindow:
connect(ui->dial, SIGNAL(valueChanged(int)),
ui->lcdNumber, SLOT(display(int)));
Compile y ejecute de nuevo la aplicaci´n.
o
3.3. Agregando un di´logo a la interfaz gr´fica.
a a
Una Ventana provee el espacio en pantalla sobre el cual se construye la interfaz gr´fica
a
principal, a menudo las ventanas tienen barras de men´ y de estado. En su parte central se
u
puede a˜adir cualquier tipo de Widget (QWidget). Las ventanas se construyen derivando
n
la clase QMainWindow. Los Di´logos, son ventanas auxiliares que muestran informa-
a
ci´n adicional o le presentan al usuario diversas preguntas y/o elecciones. Los di´logos se
o a
construyen derivando la clase QDialog y agregando a este los Widget necesarios.
Para agregar un di´logo a nuestra aplicaci´n, hacemos click derecho en la carpeta
a o
Forms y seleccionamos Add New->Qt->Qt Designer Form Class->Dialog With-
out Buttons.
Al hacer doble click sobre el archivo generado dialog.ui, se cambia al modo dise˜o. n
Adicione una etiqueta label con el nombre calendario y un Widget tipo calendario al
di´logo.
a
6

7. 3.4. Creando un men´ en la ventana principal
u
De regreso a la vista de dise˜o para la ventana principal (doble click sobre mainwindow.ui).
n
Localice la barra de men´ de la ventana y haga click en la etiqueta Type Here y reem-
u
place este nombre con File o Archivo. Cree en la pesta˜a del nuevo men´ File, la opci´n
n u o
Calendar o Calendario.
Ingrese las siguientes l´
ıneas de c´digo en el slot generado para la se˜al triggered()
o n
de la acci´n Calendario (recuerde incluir el archivo dialog.h en mainwindow.cpp):
o
Dialog *MyDialog = new Dialog();
MyDialog->show();
Compile y ejecute la aplicaci´n. ¿Que ocurrir´ sil el di´logo no se crea usando memoria
o ıa a
din´mica?.
a
Complete el ejemplo agregando una opci´n al men´ File que permita cerrar la
o u
ventana principal.
7

8. 4. Ejercicios
Elabore un editor de texto plano, con un men´ que contenga una opci´n para limpiar
u o
el texto escrito.
Elabore una calculadora, con una interfaz gr´fica similar a la que se muestra en la
a
figura a continuaci´n.
o
5. Para la pr´xima pr´ctica.
o a
Leer la documentaci´n de las clases QImage, QPixmap y QFileDialog.
o
8