Laboratorio Inform´tica II: Pr´ctica 5                                   a           a                                    ...
Para crear nuestra primera aplicaci´n, hacemos click en File->New File or Project-                                       o...
Qt posee un gran n´mero de clases, debido a esto es fundamental hacer uso de la                       udocumentaci´n, que ...
Compile y ejecute la aplicaci´n.                                o3.1.   Signals y Slots    Las se˜ales (signals) y los slo...
Luego, asigne el nombre Reset para el pushButton, haga click derecho sobre este yescoja la opci´n Go to slot..., luego sel...
Dentro del slot generado en el archivo mainwindow.cpp para la se˜al clicked() in-                                         ...
3.4.    Creando un men´ en la ventana principal                      u   De regreso a la vista de dise˜o para la ventana p...
4.     Ejercicios       Elabore un editor de texto plano, con un men´ que contenga una opci´n para limpiar                ...
Upcoming SlideShare
Loading in …5
×

Practica5

347 views
280 views

Published on

excelente

Published in: Education
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
347
On SlideShare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Practica5

  1. 1. Laboratorio Inform´tica II: Pr´ctica 5 a a Felipe Lennis felipe.lennis@microe.udea.edu.co 26 de noviembre de 2012Objetivos 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. a1. 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 uDevelopmente Kit), incluido el IDE (Integrated Development Environment) QtCreator enel 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 cleanlooks2. 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 ade usuario. Adem´s es posible hacer debug, compilar y ejecutar las aplicaciones desde el amismo entorno de desarrollo (IDE). 1
  2. 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- osola sin elementos gr´ficos para la interfaz de usuario. En la pesta˜a Edit, editamos el a narchivo main.cpp de la siguiente manera: 2
  3. 3. Qt posee un gran n´mero de clases, debido a esto es fundamental hacer uso de la udocumentaci´n, que se encuentra disponible mediante la pesta˜a Help. o n3. Creando una Interfaz Grafica de Usuario (GUI) Qu´ es un Widget? Un Widget es un componente visual, por ejemplo, un bot´n, un e ocuadro de texto, los items de un men´, o cualquier otro elemento que hace parte de la uinterfaz gr´fica de usuario. a Para crear un proyecto con interfaz gr´fica, hacemos click en File->New File or aProject->Qt Widget Project->Qt Gui Application y navegamos a trav´s de los ecuadros de di´logo que se presentan a continuaci´n. N´tese, dentro de la carpeta Forms del a o oproyecto creado, el archivo mainwindow.ui. Los archivos con extensi´n *.ui representan la oespecificaci´n de la interfaz de usuario y pueden ser editados gr´ficamente. Al hacer doble- o aclick sobre mainwindow.ui se habilita el modo de dise˜o (la pesta˜a Design) y podemos n nentonces comenzar a agregar widgets a nuestra interfaz gr´fica. a Para agregar un Widget, estos se arrastran desde la parte izquierda y se descarganen la parte central (ventana). Agregue un dial, un lcdNumber y un pushButton, como semuestra a continuaci´n. o 3
  4. 4. Compile y ejecute la aplicaci´n. o3.1. Signals y Slots Las se˜ales (signals) y los slots se usan para la comunicaci´n entre objetos. Una se˜al n o nse emite cuando un evento particular ocurre (por ejemplo, si se presiona un bot´n con oel mouse o se arrastra una barra de desplazamiento). Los Widgets de Qt tienen muchasse˜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 nson funciones miembro comunes y corrientes, y los Widgets de Qt tambi´n tienen muchos edefinidos por defecto. El mecanismo de signals y slots garantiza que si se conecta una se˜al a un slot, la nfunci´n representada por el slot ser´ llamada con los par´metros de la se˜al en el momento o a a nindicado. La conexi´n entre signals y slots se puede realizar de manera gr´fica o mediante c´digo. o a oPara proceder gr´ficamente, realice la conexi´n de la se˜al valueChanged del dial con el a o nslot display del lcdNumber, como lo ilustra la figura a continuaci´n:o 4
  5. 5. Luego, asigne el nombre Reset para el pushButton, haga click derecho sobre este yescoja la opci´n Go to slot..., luego seleccione la se˜al clicked(). o n 5
  6. 6. Dentro del slot generado en el archivo mainwindow.cpp para la se˜al clicked() in- nserte 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 o3.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 al´ ı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. o3.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 aprincipal, a menudo las ventanas tienen barras de men´ y de estado. En su parte central se upuede a˜adir cualquier tipo de Widget (QWidget). Las ventanas se construyen derivando nla clase QMainWindow. Los Di´logos, son ventanas auxiliares que muestran informa- aci´n adicional o le presentan al usuario diversas preguntas y/o elecciones. Los di´logos se o aconstruyen 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 oForms 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. nAdicione una etiqueta label con el nombre calendario y un Widget tipo calendario aldi´logo. a 6
  7. 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). nLocalice la barra de men´ de la ventana y haga click en la etiqueta Type Here y reem- uplace este nombre con File o Archivo. Cree en la pesta˜a del nuevo men´ File, la opci´n n u oCalendar o Calendario. Ingrese las siguientes l´ ıneas de c´digo en el slot generado para la se˜al triggered() o nde la acci´n Calendario (recuerde incluir el archivo dialog.h en mainwindow.cpp): oDialog *MyDialog = new Dialog();MyDialog->show(); Compile y ejecute la aplicaci´n. ¿Que ocurrir´ sil el di´logo no se crea usando memoria o ıa adin´mica?. a Complete el ejemplo agregando una opci´n al men´ File que permita cerrar la o u ventana principal. 7
  8. 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. o5. Para la pr´xima pr´ctica. o a Leer la documentaci´n de las clases QImage, QPixmap y QFileDialog. o 8

×