programacion qt4 facil

24
 Programacion QT4 facil Luis Tomas Wayar October 31, 2010

Upload: edarblanco

Post on 09-Jul-2015

78 views

Category:

Documents


1 download

DESCRIPTION

Libro sobre el lenguaje e programacion QT en su version 4

TRANSCRIPT

Page 1: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 1/24

 

Programacion QT4 facil

Luis Tomas Wayar

October 31, 2010

Page 2: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 2/24

 

1

A mi esposa Elisa, mi companera de toda la vida.

Page 3: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 3/24

 

Sobre este documento

Motivacion

Para aprender a programar en C++ usando las librerıas QT recurrı a varios

libros que me resultaron de gran utilidad, lamentablemente todos ellos en ingles,todos muy completos y abundantes en explicaciones lo que resulta un pocotedioso de leer cuando uno lo que quiere es obtener los conocimientos y losresultados rapido. Por eso he decidido escribir este documento, donde voy aintentar escribirlo pensando en como me gustarıa a mi encontrar un documentoque me introduzca en un tema de programacion en particular, yendo a los temasdirectamente y poniendolos en practica en un ejemplo sin entrar en muchosdetalles que confundan y dilaten el proceso de aprendizaje. Es raro encontrardocumentacion donde se muestre y explique la metodologıa para el uso, por esoeste documento va a proveer una guıa incremental donde en ejemplos simplesy sencillos vamos a ver como usar esta fantastica librerıa de programacion deinterfaces graficas de usuario.

Como es sabido la mejor forma de aprender algo es haciendolo, por eso, luego

de explicado el ejemplo para cada tema, se proponen al final de cada capitulounos ejercicios para que el lector los desarrolle y adquiera las destrezas necesariaspara aplicar lo aprendido.

Mi idea es leer todo lo que encuentre sobre cada tema, mas la experienciapropia y escribir lo mas simple y conciso posible.

Audiencia

Este documento esta destinado a todos aquellos que quieran aprender a usary sacar el maximo provecho a la programacion de interfaces graficas de usuariousando el lenguaje de programacion C++ y las librerıas QT4. Se requierenconocimientos previos de programacion C++ y de la terminologıa y conceptos

propios de la programacion de GUIs.Se usa como plataforma de desarrollo GNU/Linux pero tambien se pueden

aplicar a otras plataformas con los cambios mınimos propios de cada sistemaoperativo.

2

Page 4: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 4/24

 

3

Herramientas

Para la realizacion de las practicas se usara un editor o ide de programadory el correspondiente compilador de C++, se recomienda como editores VIM oKdevelop que son mis favoritos, sin embargo se puede optar por otros editoreso ides segun sea su eleccion. Para la compilacion y pruebas se necesita acceso aun emulador de terminal.

Page 5: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 5/24

 

Bibliografıa

[1] C++ GUI Programming with Qt 4, Second Edition

[2] The Art of Building Qt Applications

[3] Introduction to Design Patterns in C++ with Qt 4

4

Page 6: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 6/24

 

Indice general

I Introduccion a QT 7

1. Comenzando 8

1.1. Algunas convenciones iniciales . . . . . . . . . . . . . . . . . . . . 91.2. Nuestro primer programa . . . . . . . . . . . . . . . . . . . . . . 9

1.2.1. Hola mundo . . . . . . . . . . . . . . . . . . . . . . . . . . 91.2.2. Crear el proyecto . . . . . . . . . . . . . . . . . . . . . . . 101.2.3. Compilar y ejecutar el programa . . . . . . . . . . . . . . 101.2.4. Entendiendo el programa . . . . . . . . . . . . . . . . . . 10

1.3. Disposicion de widgets . . . . . . . . . . . . . . . . . . . . . . . . 121.3.1. Planificando la apariencia . . . . . . . . . . . . . . . . . . 121.3.2. Entendiendo el programa . . . . . . . . . . . . . . . . . . 13

1.4. Disposiciones mas complejas . . . . . . . . . . . . . . . . . . . . . 141.4.1. Anidando Layouts . . . . . . . . . . . . . . . . . . . . . . 141.4.2. Entendiendo el codigo . . . . . . . . . . . . . . . . . . . . 16

1.5. Conectando eventos con acciones . . . . . . . . . . . . . . . . . . 17

1.5.1. Senales y slots . . . . . . . . . . . . . . . . . . . . . . . . 171.5.2. Entendiendo el codigo . . . . . . . . . . . . . . . . . . . . 181.5.3. Un poco mas sobre slots y senales . . . . . . . . . . . . . 181.5.4. Entendiendo el codigo . . . . . . . . . . . . . . . . . . . . 19

5

Page 7: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 7/24

 

Indice de figuras

1.1. Ventana de ejemplo1 . . . . . . . . . . . . . . . . . . . . . . . . . 111.2. Ventana de ejemplo2 . . . . . . . . . . . . . . . . . . . . . . . . . 131.3. Diagrama de ejemplo 3 . . . . . . . . . . . . . . . . . . . . . . . . 16

1.4. Ventana de ejemplo3 . . . . . . . . . . . . . . . . . . . . . . . . . 171.5. Diagrama de interconexion de senales y slots . . . . . . . . . . . 201.6. Ventana del ejemplo 5 . . . . . . . . . . . . . . . . . . . . . . . . 21

6

Page 8: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 8/24

 

Parte I

Introduccion a QT

7

Page 9: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 9/24

 

Capıtulo 1

Comenzando

“Hay solo dos clases de lenguajes de programacion: aquellos delos que la gente esta siempre quejandose y aquellos que nadie usa.”

— Bjarne Stroustrup

En este capitulo vamos aprender los siguientes temas:

Nuestro primer programa

Como crear un proyecto

Como organizar los widgets en la ventana

8

Page 10: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 10/24

 

CAP ITULO 1. COMENZANDO 9

1.1. Algunas convenciones iniciales

Vamos a ponernos de acuerdo en algunas convenciones b asicas sobre comoescribir

Los nombres de clase comienza con una letra mayuscula

Los nombres de las funciones comienzan con una letra minuscula.

Aunque son permitidos por el compilador los puntos, guiones, subrayado yotros caracteres especiales deben evitarse siempre que sea posible (exceptodonde se indica a continuacion).

En los nombres compuestos por varias palabras se escriben la iniciales conmayusculas.

Las constantes se escriben con la inicial en mayuscula, constantes globalesy macros todo con mayusculas.

Cada nombre de clase debe ser un sustantivo.

Cada nombre de la funcion debe ser un verbo.

Cada nombre de variable bool debe producir una aproximacion razonablea su funcion.

1.2. Nuestro primer programa

1.2.1. Hola mundo

Vamos a comenzar haciendo un primer programa, se trata como es de esperardel clasico “Hola mundo”, esta vez pensado para desplegarse en una simpleventana sin ningun tipo de control. Cree un directorio llamado ejmeplo1 y dentrode el escriba un archivo con el siguiente codigo, nombrelo ejemplo1.cpp

1 # i n c l u d e < Q A p p l i ca t i o n >2 # i n c l u d e < Q L a b el >3 i n t m a in ( i n t a rg c , c h ar * a r gv [ ] )4 {5 Q A p p l i c at i o n a p p ( a rg c , a r g v ) ;6 Q L ab e l * l a be l = n e w Q L ab e l ( " Ho l a M u nd o " ) ;7 l a b e l - > s h o w ( ) ;8 r e t u r n a p p . e x e c ( ) ;9 }

Page 11: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 11/24

 

CAP ITULO 1. COMENZANDO 10

1.2.2. Crear el proyecto

Ahora vamos crear el proyecto para nuestro primer ejemplo, para ello vamosa utilizar la herramienta qmake1, se trata de una herramienta desarrollada porlos creadores de las librerıas QT2 para la simplificacion del proceso de creacion La empresa

Nokia comproa la empre-sa Trolltechcreadora de lalibrerıa QT

de proyectos, basicamente su funcionalidad consiste en la automatizacion de lacreacion de los archivos Makefile para la compilacion.

Desde una terminal ejecute el siguiente comando para crear un nuevo proyec-to basado en nuestro codigo fuente.

$ q m ak e - p r o je c t

Observe que ahora tiene un nuevo archivo llamado ejemplo1.pro, este es suarchivo de configuracion del nuevo proyecto.

Ahora vamos a crear nuestro archivo Makefile a partir de ejemplo1.pro, paraello ejecute el siguiente comando en una terminal.

$ q m a k e e j e m p l o1 . p r o

1.2.3. Compilar y ejecutar el programa

Tenemos ahora un nuevo archivo en nuestro directorio llamado Makefile,este es el que se encargara de automatizar la compilacion y enlazado de nuestrocodigo fuente, para ello ejecutamos el siguiente comando en una terminal.

$ m a ke

Tenemos ya un archivo ejecutable al que podemos invocar simplemente llam an-dolo desde linea de comando.

$ . / e j e m p l o1

Con lo que podremos ver en la Figura 1.1 en la pagina siguiente

1.2.4. Entendiendo el programa

Analicemos este breve programa para comprender la funcionalidad de cadauna de sus partes.

En esta linea (1) incluimos la clase QApplication. QApplication es la clase Cada claseexistente en QTtiene un includecon el mismonombre que laclase

1Podemos encontrar el manual de qmake en http://doc.trolltech.com/4.5/qmake-manual.html

2La pagina oficial de la librerıa QT es http://qt.nokia.com/

Page 12: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 12/24

 

CAP ITULO 1. COMENZANDO 11

Figura 1.1: Ventana de ejemplo1

que contiene a toda aplicacion que use esta librerıa, recibe argc que contiene elnumero de argumentos recibidos por el programa, debemos considerar que siem-pre sera el numero de argumentos pasados mas 1, ya que el primer argumentose reserva para contener el nombre del programa. El segundo es un puntero aun array de chars que contiene los parametros pasados en el mismo orden enque fueron escritos.

1 # i n c l u d e < Q A p p l i ca t i o n >

En la linea 2 incluimos la clase QLabel la que sirve para mostrar un texto o unaimagen, no provee ningun tipo de interaccion con el usuario.

1 # i n c l u d e < Q L a b el >

En la linea 6 creamos un objeto de la clase QApplication llamado app que recibecomo argumentos los provistos desde linea de comandos, en este caso no vamos

a proveerle ninguno cuando lo ejecutemos.

1 Q A p p l i c at i o n a p p ( a rg c , a r g v ) ;

En la linea 7 creamos un puntero de tipo QLabel llamado etiqueta que apuntaa un nuevo objeto que recibe como parametro una cadena “Hola mundo”.

1 Q L ab e l * l a be l = n e w Q L ab e l ( " Ho l a M u nd o " ) ;

En la linea 8 llamamos al metodo show del objeto label que tiene como funcionhacer visible el objeto, por defecto los widgets al ser instanciados no se desplieganen pantalla.

Page 13: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 13/24

 

CAP ITULO 1. COMENZANDO 12

1 l a b e l - > s h o w ( ) ;

Finalmente en la linea 9 llamamos a nuestro objeto principal (app) el cual de-volvera el valor de retorno del programa.

1 r e t u rn a p p . e x e c ( ) ;

1.3. Disposicion de widgets

1.3.1. Planificando la apariencia

La librerıa QT cuenta con una serie de contenedores que permiten ordenarla disposicion de los widgets en nuestras ventanas, se conocen como Layouts, ytodos derivan de una clase padre llamada QLayout, mediante estos elementos esposible controla la geometrıa de los elementos graficos a ser desplegados. Paraentenderlo mejor pensemos en ellos como si se tratara de celdas donde meter loswidgets o incluso otros Layouts. Los widgets

son los ele-mentos queconformanlas interfacesgraficas deusuarios

Segun nuestras necesidades disponemos de los siguientes, QBoxLayout, QGrid-Layout, QFormLayout, y QStackedLayout. A su vez estos heredan en nuevasclases que agregan funcionalidades o caracterısticas a los manejadores de dis-posicion, por ejemplo, QBoxLayout tiene dos clases heredadas, QVBoxLayoutque organiza la disposicion verticalmente y QHBoxLayout que lo hace de man-era horizontal. En el ejemplo siguiente aplicaremos ambos para demostrar y

comprender su funcionamiento.En un nuevo archivo llamado ejemplo2.cpp escriba el siguiente codigo.

1 # i n c l u d e < Q A p p l i ca t i o n >2 # i n c l u d e < Q V B o x La y o u t >3 # i n c l u d e < Q L a b el >4 i n t m a i n ( i nt a rg c , c h ar * a r gv [ ] ) {5 Q A p p l i c at i o n a p p ( a rg c , a r g v ) ;6 Q W i d g et v e n t a na ;7 Q V B o x L a yo u t * p r i n c i p a lL a y o u t = n e w Q V B o x L a y o u t ( & v e n t a n a ) ;8 Q L ab e l * l a be l 1 = n ew Q L ab e l ( " Ho l a ") ;9 Q L ab e l * l a be l 2 = n ew Q L ab e l ( " Mu n do " ) ;10 principalLayout ->addWidget(label1);11 principalLayout ->addWidget(label2);12 v e n t a n a . s h o w ( ) ;

13 r e t u r n a p p . e x e c ( ) ;14 }

Siga los pasos descriptos en el ejemplo1 para crear el proyecto y compilar elprograma. Como resultado de la ejecucion del programa obtendremos la ventande la Figura 1.2

Page 14: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 14/24

 

CAP ITULO 1. COMENZANDO 13

Figura 1.2: Ventana de ejemplo2

1.3.2. Entendiendo el programa

Analicemos ahora el codigo. Como pueden ver se agrego una nueva inclusion,esta incorpora la clase QVBoxLayout, es un contenedor que ordena sus elementoscontenidos de manera vertical, uno debajo de otro.

1 # i n c l u d e < Q V B o x La y o u t >

Luego, para utilizarlo, instanciamos un nuevo objeto llamado principalLayout,observe que recibe como argumento el objeto padre, de esta manera se convierteen el contenedor de nivel superior del widget ventana. Otra cosa importantea tener en cuenta en esta linea es la forma en que instanciamos, teniendo encuenta que C++ no provee mecanismos de manejo automatico de memoria esel programador quien tiene que tomar los recaudos necesarios para gestionarinteligentemente la misma, esa es la razon por la cual creamos el objeto mediante“new” ya que de esta manera nos referimos al objeto mediante un puntero que

lo ubica en el “heap”, de no hacerlo ası el objeto y todos sus elementos derivadosse crearıan en el “stack” y permanecerıan en memoria durante todo el tiempo El Stack oPila es el areade memoriaestatica dondese almacenanpor ejemplolas variableslocales

de vida del proceso, haciendolo con “new” una vez que se llama a su destructorse libera del “heap” la memoria utilizada.

El Heap oMonton es unaarea de memo-ria dinamica

que se usa porejemplo paraubicar objetoscreados connew

1 u d a Q V B o x La y o u t * p r i n c i p a l La y o u t = n e w Q V B o x L a y o u t ( & v e n t a n a ) ;

La manera incorrecta de instanciarlo seria.

1 Q V B o x L a yo u t p r i n c i p a l La y o u t ( & v e n t a n a ) ;

De igual manera instanciamos los dos objetos QLabel, recurriendo a punteros.

Page 15: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 15/24

 

CAP ITULO 1. COMENZANDO 14

1 Q L ab e l * l a be l 1 = n ew Q L ab e l ( " Ho l a ") ;2 Q L ab e l * l a be l 2 = n ew Q L ab e l ( " Mu n do " ) ;

Ahora debemos embeber los dos nuevos QLabel (label1 y label2) dentro delcontenedor QVBoxLayout (principalLayout), para ello usamos el metodo ad-dWidget de la clase QVBoxLayout que tiene como funcion insertar el widget alfinal del contenedor.

1 principalLayout ->addWidget(label1);2 principalLayout ->addWidget(label2);

En este ejemplo se muestra la forma basica en que se disponen los elementos

dentro de una ventana, lo importante a aprender es la forma en que se organizala disposicion de elementos, en resumen se trata de usar contenedores (Layouts)para insertar elementos (widgets) dentro de sus celdas.

1.4. Disposiciones mas complejas

1.4.1. Anidando Layouts

En el ejemplo anterior vimos como usar los Layouts para disponer de man-era ordenada los widgets dentro de la ventana, este metodo nos ofrece un sinfınde opciones al momento de disenar nuestras interfaces de usuario, es impor-tante considerara que se pueden anidar y tienen varios atributos y metodos que

permiten controlar su posicionamiento y comportamiento.En el siguiente ejemplo se introducen varios nuevos widgets, QLineEdit,QRadioButton, QCheckBox, QTextEdit, QPushButton, es facil deducir la fun-cion y el funcionamiento de cada uno de ellos, no hace falta entrar en expli-caciones al respecto. Tambien introducimos en este ejemplo el nuevo LayoutQHBoxLayout cuyo comportamiento es similar al QVBoxLayout con la soladiferencia que dispone de los widgets de manera horizontal.

Veamos el ejemplo.

1 # i n c l u d e < Q t G u i / Q A p p li c a t i on >2 # i n c l u d e < Q t G u i / Q C h ec k B o x >3 # i n c l u d e < Q t G u i / Q F r a m e >4 # i n c l u d e < Q t G u i / Q H B o xL a y o ut >5 # i n c l u d e < Q t G u i / Q L a b e l >6 # i n c l u d e < Q t G u i / Q L i ne E d i t >7 # i n c l u d e < Q t G u i / Q P u s hB u t t on >8 # i n c l u d e < Q t G u i / Q R a d io B u t t on >9 # i n c l u d e < Q t G u i / Q S p a ce r I t em >10 # i n c l u d e < Q t G u i / Q T e xt E d i t >11 # i n c l u d e < Q t G u i / Q V B o xL a y o ut >12

Page 16: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 16/24

 

CAP ITULO 1. COMENZANDO 15

13 i n t m a in ( i n t a rg c , c h ar * a r gv [ ] )14 {15 Q A p p l i c at i o n a p p ( a rg c , a r g v ) ;16 / / C r ea m os e l w i dg e t p r i nc i p al17 Q W i d g et v e n t a na ;18 / / C r ea m os e l L a yo u t p r i nc i p al q u e s e r a d e t i po H o ri z o nt a l19 Q H B o x L a yo u t * p r i n c i p a lL a y o u t = n e w Q H B o x L a y o u t ( & v e n t a n a ) ;20

21 / / C r ea m os d o s l a y o u ts v e r ti c a le s p a ra p o ne r l os e n e l p r i nc i pa l22 Q V B o x L a yo u t * i z q u i e r d o VL a y o u t = n e w Q V B o x L a y o u t ( ) ;23 Q V B o x L a yo u t * d e r e c h o V La y o u t = n e w Q V B o x L a y o u t ( ) ;24

25 / / C r ea m os u n l a yo u ts q u e s e a g r eg a ra a l a yo u t i z q ui e r do V L ay o u t26 Q V B o x L a yo u t * i z q s u p V La y o u t = n e w Q V B o x L a y o u t ( ) ;27

28 / / C r ea m os l o s l a y o u ts q u e s e a g r eg a r an e n i z q su p V La y o ut29 Q H B o x L a yo u t * l t H L a y o ut = n e w Q H B o x L a yo u t ( ) ;30 Q L ab e l * l a be l = n e w Q L ab e l ( " E ti q ue t a " ) ;31 Q L in e E di t * l i ne E d it = n e w Q L i ne E d it ( " I n gr e s e u n t e xt o " ) ;32 ltHLayout ->addWidget(label);33 ltHLayout ->addWidget(lineEdit);34

35 Q H B o x L a yo u t * r b H L a y o ut = n e w Q H B o x L a yo u t ( ) ;36 Q R a d i o B ut t o n * r a d i o B u t to n 1 = n e w Q R a d i o B u t t o n ( " R B 1 " ) ;37 Q R a d i o B ut t o n * r a d i o B u t to n 2 = n e w Q R a d i o B u t t o n ( " R B 2 " ) ;38 rbHLayout ->addWidget(radioButton1);39 rbHLayout ->addWidget(radioButton2);40

41 Q H B o x L a yo u t * c b H L a y o ut = n e w Q H B o x L a yo u t ( ) ;42 Q C h e c k Bo x * c h e c k B ox 1 = n e w Q C h e c k B o x ( " C B 1 " ) ;43 Q C h e c k Bo x * c h e c k B ox 2 = n e w Q C h e c k B o x ( " C B 2 " ) ;44 cbHLayout ->addWidget(checkBox1);45 cbHLayout ->addWidget(checkBox2);46

47 / / A g r eg a mo s l os L a yo u t s c r ea d o s a i z q su p V La y o ut48 izqsupVLayout ->addLayout(ltHLayout);49 izqsupVLayout ->addLayout(rbHLayout);50 izqsupVLayout ->addLayout(cbHLayout);51

52 / / C r ea m os u n n u e v o w i d g e t d e e d ic i on d e t e x t o .53 Q T ex t E di t * t e xt E d it = n e w Q T e xt E d it ( " E d it o r d e t e xt o s i mp l e ") ;54

55 / / A g r eg a mo s e l l a y o u t i z q s u p VL a y ou t y e l w i d g e t d e e d i ci o n d et e x t o a i z q u i e r d oL a y o u t

56 izquierdoVLayout ->addLayout(izqsupVLayout);57 izquierdoVLayout ->addWidget(textEdit);58

59 / / C r ea m os u n L a yo u t p a ra l o s b o t o n es d e l t i p o Q V B ox L a yo u t60 Q V B o x L a yo u t * b o t o n e s V La y o u t = n e w Q V B o x L a y o u t ( ) ;61 Q P u s h B u tt o n * p u s h B u t to n 1 = n e w Q P u s h B u t t o n ( " B o t o n 1 " ) ;62 Q P u s h B u tt o n * p u s h B u t to n 2 = n e w Q P u s h B u t t o n ( " B o t o n 2 " ) ;63 Q P u s h B u tt o n * p u s h B u t to n 3 = n e w Q P u s h B u t t o n ( " B o t o n 2 " ) ;64

65 / / A g r eg a mo s l os b o to n e s a l l a yo u t66 botonesVLayout ->addWidget(pushButton1);67 botonesVLayout ->addWidget(pushButton2);68 botonesVLayout ->addWidget(pushButton3);69

70 / / C r ea m os u n S p ac e r p a ra m e jo r d i s po s i ci o n71 Q S p a c e r It e m * v e r t i c a l Sp a c e r = n e w Q S p a c e r I t e m ( 2 0 , 1 8 8 ,

Q S i z e P o li c y : : M i n i mu m , Q S i z e P o li c y : : E x p a n d i n g ) ;72

73 / / A g r eg a mo s a d e r ec h o VL a y ou t e l l a y o u t d e b o to n es y e l s p a c e r74 derechoVLayout ->addLayout(botonesVLayout);75 derechoVLayout ->addItem(verticalSpacer);76

77 / / F i na l m en t e a g r eg a m os a l l a yo u t p r i nc i p al l o s l a yo u ts i z qu i e rd o yderecho

Page 17: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 17/24

 

CAP ITULO 1. COMENZANDO 16

78 principalLayout ->addLayout(izquierdoVLayout);79 principalLayout ->addLayout(derechoVLayout);80

81 v e n t a n a . s h o w ( ) ;82 r e t u r n a p p . e x e c ( ) ;83 }

El diagrama que usamos corresponde a una ventana que contiene varios widgetsorganizados a su vez en varios layouts, en la Figura 1.3 se puede ver el modelode diagrama.

Figura 1.3: Diagrama de ejemplo 3

Una vez compilado el ejemplo siguiendo el mismo procedimiento de los ejem-plos anteriores obtenemos la ventana de la Figura 1.4

1.4.2. Entendiendo el codigo

En este nuevo ejemplo incorporamos nuevos layouts y los organizamos anidan-dolos, podemos ver que ademas de agregar widgets a un layout como lo hici-mos en el ejemplo anterior tambien podemos agregarles nuevos layouts, en laslineas de abajo vemos una combinacion de ambos que se agregan a izquier-

doVLayout tanto un layout “izqsupVLayout” como un widget “textEdit”, a suvez izqsupVLayout es un layout que anida a otros tres layouts horizontales.

1 izquierdoVLayout ->addLayout(izqsupVLayout);2 izquierdoVLayout ->addWidget(textEdit);

Page 18: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 18/24

 

CAP ITULO 1. COMENZANDO 17

Figura 1.4: Ventana de ejemplo3

1.5. Conectando eventos con acciones

1.5.1. Senales y slots

Hasta ahora los ejemplos que vimos no tienen ningun tipo de interaccion conel usuario, solo despliegan ventanas y en ellas los widgets, en este nuevo ejemplousaremos un boton el cual sera capaz de responder a un evento.

La mayorıa de las librerıas de diseno de interfaces de usuario usan callbackso simplemente entran en un bucle a la escucha de eventos para disparar meto-dos internos, en el caso de QT la cosa es un poco diferente, entramos ac a alconcepto de Senal-SLOT, la ventaja principal de esta implementacion es queuna senal puede conectarse a tantos slots como sea necesario, ası un solo eventopuede disparar varias acciones de manera mas simple para el programador. Masadelante veremos con mayo detalle el tema de los slots, por ahora veamos unejemplo sencillo.

1 # i n c l u d e < Q A p p l i ca t i o n >2 # i n c l u d e < Q V B o x La y o u t >3 # i n c l u d e < Q L a b el >4 # i n c l u d e < Q P u s h Bu t t o n >5

6 i n t m a in ( i n t a rg c , c h ar * a r gv [ ] )7 {8 Q A p p l i c at i o n a p p ( a rg c , a r g v ) ;

Page 19: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 19/24

 

CAP ITULO 1. COMENZANDO 18

9 Q W i d g et v e n t a na ;10 Q V B o x L a yo u t * p r i n c i p a lL a y o u t = n e w Q V B o x L a y o u t ( & v e n t a n a ) ;11 Q L ab e l * l a be l = n e w Q L ab e l ( " Ho l a m u nd o " ) ;12 Q P u s h B u tt o n * b o t o n = n e w Q P u s h B u t t o n ( " S a l i r " ) ;13 principalLayout ->addWidget(label);14 principalLayout ->addWidget(boton);15 v e n t a n a . s h o w ( ) ;16 Q O b j e ct : : c o n n e c t ( b o t on , S I G N A L ( c l i c ke d ( ) ) , & a p p , S L O T ( q u it ( ) ) )

;17 r e t u r n a p p . e x e c ( ) ;18 }

1.5.2. Entendiendo el codigo

Usamos aquı como base el ejemplo 2, reemplazamos el segundo label porun boton, simplemente lo instanciamos y luego de agregarlo a nuestro layout

usamos el metodo “connect”de la clase QObject. Como se puede observar los dosprimeros argumentos que recibe son el objeto que genera la senal y la senal en simisma ante la que tiene que responder, los ultimos dos argumentos correspondenal objeto que va a recibir la senal, en este caso nuestra aplicacion“app” y el slot.. Un SLOT es

una funcionnormal de unaclase especial-mente definidapara reaccionarante una senal

Esta linea de codigo lo que hace es enlazar el objeto “boton” con el SLOT “quit()”que actuara sobre el objeto “app” al producirse la senal “clicked()”.

1 Q O b j e ct : : c o n n e c t ( b o t on , S I G N A L ( c l i c ke d ( ) ) , & a p p , S L O T ( q u i t ( ) ) ) ;

1.5.3. Un poco mas sobre slots y senales

Todos los widgets emiten senales y tienen slots, podemos ası conectar lasenal emitida de un determinado widget para que actue sobre otro medianteel llamado a uno de sus slots. La idea es, cuando se produce un evento en unobjeto, este emite una senal. Esa senal se puede conectar con un slot (que nodeja de ser un metodo de otro objeto) que responde a esa senal.

Ademas, es posible conectar una senal a varios slots. O hace que un slotresponda a varias senales.

En el ejemplo siguiente vemos como tres ob jetos que emiten senales (QSpin-Box, QDial y QSlider) y uno que no (QLabel) se interconectan usando estemecanismo para cambiar su estado de acuerdo a los eventos que disparan senalesen cada uno de los objetos. Veamos el codigo.

1 # i n c l u d e < Q A c t io n >2 # i n c l u d e < Q A p p l i ca t i o n >3 # i n c l u d e < Q B u t t o nG r o u p >4 # i n c l u d e < Q D i a l >5 # i n c l u d e < Q F r a me >6 # i n c l u d e < Q L a b el >

Page 20: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 20/24

 

CAP ITULO 1. COMENZANDO 19

7 # i n c l u d e < Q P u s h Bu t t o n >8 # i n c l u d e < Q S l i de r >9 # i n c l u d e < Q S p i nB o x >10 # i n c l u d e < Q V B o x La y o u t >11

12 i n t m a in ( i n t a rg c , c h ar * a r gv [ ] )13 {14 Q A p p l i c at i o n a p p ( a rg c , a r g v ) ;15 Q W i d g et v e n t a na ;16

17 Q V B o x L a yo u t * v e r t i c a l La y o u t = n e w Q V B o x L a y o u t ( & v e n t a n a ) ;18 Q S pi n B ox * s p in B ox = n e w Q S pi n Bo x ( ) ;19 Q D ia l * d i al = n e w Q D i a l ( );20 d i a l - > s e t O b j e c t N a m e ( Q S t r i n g : : f r o m U t f 8 ( " d i a l " ) ) ;21 Q S li d er * h o r iz o n ta l S li d e r = n e w Q S l id e r ( );22 horizontalSlider ->setOrientation(Qt::Horizontal);23 Q L ab e l * l a be l = n e w Q L a b e l () ;24 Q P u s h B u tt o n * s a l i r B u tt o n = n e w Q P u s h B u t t o n ( " S a l i r " ) ;25

26 verticalLayout ->addWidget(spinBox);27 verticalLayout ->addWidget(dial);28 verticalLayout ->addWidget(horizontalSlider);29 verticalLayout ->addWidget(label);30 verticalLayout ->addWidget(salirButton);31

32 v e n t a n a . s h o w ( ) ;33

34 Q O b j e ct : : c o n n e c t ( s p i n Bo x , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , d i al ,S L O T ( s e t V a l u e ( i n t ) ) ) ;

35 Q O b j e ct : : c o n n e c t ( s p i n Bo x , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) ,h o r i z o nt a l S l i de r , S L O T ( s e t V a l ue ( i n t ) ) ) ;

36 Q O b j e ct : : c o n n e c t ( s p i n Bo x , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , l a b el ,S L O T ( s e t N u m ( i n t ) ) ) ;

37 Q O b j e ct : : c o n n e c t ( d i al , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , s p i n Bo x ,S L O T ( s e t V a l u e ( i n t ) ) ) ;

38 Q O b j e ct : : c o n n e c t ( d i al , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) ,h o r i z o nt a l S l i de r , S L O T ( s e t V a l ue ( i n t ) ) ) ;

39 Q O b j e ct : : c o n n e c t ( d i al , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , l a b e l , S L O T (s e t N u m ( i n t ) ) ) ;

40 Q O b j e ct : : c o n n e c t ( h o r i z o n t al S l i d e r , S I G N AL ( v a l u e C h a n g e d ( i n t ) ) ,s p i nB o x , S L O T ( s e t V a lu e ( i n t ) ) ) ;

41 Q O b j e ct : : c o n n e c t ( h o r i z o n t al S l i d e r , S I G N AL ( v a l u e C h a n g e d ( i n t ) ) ,l a be l , S L O T ( s e t N um ( i n t ) ) ) ;

42 Q O b j e ct : : c o n n e c t ( h o r i z o n t al S l i d e r , S I G N AL ( v a l u e C h a n g e d ( i n t ) ) ,d i al , S L O T ( s e t V a l ue ( i n t ) ) ) ;

43 Q O b j e ct : : c o n n e c t ( s a l i r B ut t o n , S I G N A L ( c l i ck e d ( ) ) , & a p p , S L O T (q u i t ( ) ) ) ;

44

45 r e t u r n a p p . e x e c ( ) ;46 }

1.5.4. Entendiendo el codigo

Podemos ver que tenemos en este ejemplo algunos nuevos widgets que lalibrerıa QT nos ofrece, una vez instanciados y ordenados en un Layout vertical

hacemos todas las confecciones necesarias para que cualquier evento que se pro-duzca en los widgets capaces de emitir senales disparen una accion. En este casoen particular el cambio de cualquiera de los widgets con valores variables modi-fica a los otros, la unica excepcion es QLabel que como sabemos no es editable.En el diagrama de la Figura 1.5.

Page 21: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 21/24

 

CAP ITULO 1. COMENZANDO 20

Figura 1.5: Diagrama de interconexion de senales y slots

Si ejecutamos este ejemplo obtenemos la ventana de la Figura 1.6 donde

podemos ver que los valores de cada widget es coherente con los otros. Laslineas del programa que realizan estas conexiones son las siguientes.

1 Q O b j e ct : : c o n n e c t ( s p i n Bo x , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , d i al , S L O T (s e t V a l u e ( i n t ) ) ) ;

2 Q O b j e ct : : c o n n e c t ( s p i n Bo x , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) ,h o r i z on t a l S l id e r , S L O T ( s e t V a l ue ( i n t ) ) ) ;

3 Q O b j e ct : : c o n n e c t ( s p i n Bo x , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , l a b el , S L O T (s e t N u m ( i n t ) ) ) ;

4 Q O b j e ct : : c o n n e c t ( d i al , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , s p i n Bo x , S L O T (s e t V a l u e ( i n t ) ) ) ;

5 Q O b j e ct : : c o n n e c t ( d i al , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , h o r i z o nt a l S l i de r, S L O T ( s e t V al u e ( i n t ) ) ) ;

6 Q O b j e ct : : c o n n e c t ( d i al , S I G N A L ( v a l u e Ch a n g e d ( i n t ) ) , l a b e l , S L O T (s e t N u m ( i n t ) ) ) ;

7 Q O b j e ct : : c o n n e c t ( h o r i z o n t al S l i d e r , S I G N AL ( v a l u e C h a n g e d ( i n t ) ) ,

s p i nB o x , S L O T ( s e t V a lu e ( i n t ) ) ) ;8 Q O b j e ct : : c o n n e c t ( h o r i z o n t al S l i d e r , S I G N AL ( v a l u e C h a n g e d ( i n t ) ) ,

l a be l , S L O T ( s e t N um ( i n t ) ) ) ;9 Q O b j e ct : : c o n n e c t ( h o r i z o n t al S l i d e r , S I G N AL ( v a l u e C h a n g e d ( i n t ) ) , d i al

, S L O T ( s e t V al u e ( i n t ) ) ) ;10 Q O b j e ct : : c o n n e c t ( s a l i r B ut t o n , S I G N A L ( c l i ck e d ( ) ) , & a p p , S L O T ( q u i t ( )

) ) ;

Donde por cada widget emisor de senales se hacen tres conexiones a cada unode los widgets capaces de recibir esas senales en sus slots.

Page 22: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 22/24

 

CAP ITULO 1. COMENZANDO 21

Figura 1.6: Ventana del ejemplo 5

Page 23: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 23/24

 

Apendice 1

Licencia

Copyright (c) Luis Tomas Wayar. Se concede permiso para copiar, distribuir

y/o modificar este documento bajo los terminos de la Licencia de DocumentacionLibre de GNU, Version 1.3 o cualquier otra version posterior publicada porla Free Software Foundation; sin Secciones Invariantes ni Textos de CubiertaDelantera ni Textos de Cubierta Trasera. Una copia de la licencia est a incluidaen la seccion titulada GNU Free Documentation License.

22

Page 24: Programacion QT4 facil

5/10/2018 Programacion QT4 facil - slidepdf.com

http://slidepdf.com/reader/full/programacion-qt4-facil 24/24

 

Index

addWidget, 14

clicked, 18connect, 18

Layouts, 12, 14

Makefile, 10

QApplication, 10QBoxLayout, 12QCheckBox, 14QDial, 18QFormLayout, 12QGridLayout, 12QHBoxLayout, 12, 14QLabel, 11, 14, 18QLayout, 12QLineEdit, 14

qmake, 10QObject, 18QPushButton, 14QRadioButton, 14QSlider, 18QSpinBox, 18QStackedLayout, 12QT, 10QTextEdit, 14quit, 18QVBoxLayout, 12, 14

Senales, 17

slots, 17

23