 |
Introducció |
|
Widgets de QT |
|
Signals i Slots |
|
Disposició dels widgets (classe Layout) |
|
QT Designer |
|
Enllaços d'interès |
Continguts:
Introducció Widgets de QT Signals i Slots Disposició dels widgets (classe Layout) QT Designer Enllaços d'interès
Abans de començar a crear un projecte d'exemple de QT pas per pas, serà necessari explicar alguns conceptes propis de la llibreria QT:
En QT tot són widgets. Qualsevol objecte que apareix en la pantalla és un widget.
El que es vol dir és que no existeix el concepte de controls, finestres, botons... a cadascun d'aquests termes se'ls anomena widgets. És a dir, un botó, un menú, una etiqueta, una barra d'eines, una icona... tot són widgets.
Ara bé, de widgets n'hi ha de molts tipus i cadascun té les seves propietats; algunes d'elles comunes a tots els widgets, i altres específiques depenent de la classe a la qual pertanyen.
A continuació podem veure alguns widgets de QT:
Widget |
Figura |
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
|
 |
És un dels punts més importants dins la programació d'aplicacions basade en QT.
Es tracta del mecanisme de comunicació entre els diferents objectes que utilitza la llibreria QT.
Quan canvia un widget, ens interessa notificar aquest canvi a un altre widget a fi que es realitzi alguna acció. Per exemple, si l'usuari tanca un determinat botó (widget de tipus botó) és possible que vulguem que es tanqui una determinada finestra, és a dir, que s'executi una funció de tancarFinestra().
Tenim llavors que un Signal és emès del widget botó cap al widget finestra i que en aquest segon hi haurà un Slot que recollirà aquest Signal i executarà la funció pertinent.
S'ha de dir que existeix la possibilitat que múltiples Slots estiquin connectats a un mateix Signal. Llavors s'executaran tots els Slots l'un darrere l'altre en un ordre arbitrari.
En la següent figura podem veure un diagrama de la connexió de Signals i Slots:
Disposició dels widgets (classe Layout)
A l'hora de crear la finestra d'una aplicació (fitxers .ui) ho podem fer de dos maneres diferents:
Tant si es fa d'una manera o de l'altra, el que s'està fent és crear un widget pare i a partir d'aquí anar-li col.locant widgets fills (que alhora poden ser pares d'altres widgets). Per exemple primer es crea la finestra principal d'una aplicació i després hi anem afegint diferents elements (widgets) a sobre: botons, etiquetes, barres d'eines...
El que interessa és que tots aquests widgets estiguin ben disposats, és a dir, estiguin correctament alineats, es redimenssionin al canviar la mida de la finestra, etc.
Per aconseguir aquest fet, QT es basa en l'ús de la classe Layout QLayout i en particular de les seves tres subclasses QHBoxLayout, QVBoxLayout i QGridLayout.
Tal com s'ha dit, a l'hora de dissenyar una finestra ho podem fer "a mà" o amb el QT Designer. Cal dir que és recomanable fer-ho amb l'eina QT Designer si no es té molta experiència en el maneig de Layouts, i tot i així és més ràpid i intuitiu utilitzar el QT Designer per realitzar qualsevol canvi i després compilar-ho amb el QDevelop que fer-ho a mà.
A continuació veurem la disposició gràfica al posicionar 5 widgets (tots botons QPushButton) sobre un layout depenent del seu tipus. També veurem quin seria el codi font per crear-ho si es vulgués fer a mà:
Veiem el codi necessari per fer-ho:
/*Creació del widget i botons*/
QWidget *window = new QWidget;
QPushButton *button1 = new QPushButton("One");
QPushButton *button2 = new QPushButton("Two");
QPushButton *button3 = new QPushButton("Three");
QPushButton *button4 = new QPushButton("Four");
QPushButton *button5 = new QPushButton("Five");/*Creació del layout i addició dels botons*/
QHBoxLayout *layout = new QHBoxLayout;
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
layout->addWidget(button4);
layout->addWidget(button5);window->setLayout(layout);
window->show();
El codi necessari és idèntic a l'anterior excepte en la creació del layout, que ara serà del tipus QVBoxLayout:
/*Creació del widget i botons*/
QWidget *window = new QWidget;
QPushButton *button1 = new QPushButton("One");
QPushButton *button2 = new QPushButton("Two");
QPushButton *button3 = new QPushButton("Three");
QPushButton *button4 = new QPushButton("Four");
QPushButton *button5 = new QPushButton("Five");/*Creació del layout i addició dels botons*/
QHBoxLayout *layout = new QVBoxLayout;
layout->addWidget(button1);
layout->addWidget(button2);
layout->addWidget(button3);
layout->addWidget(button4);
layout->addWidget(button5);window->setLayout(layout);
window->show();
Veiem el codi:
/*Creació del widget i botons*/
QWidget *window = new QWidget;
QPushButton *button1 = new QPushButton("One");
QPushButton *button2 = new QPushButton("Two");
QPushButton *button3 = new QPushButton("Three");
QPushButton *button4 = new QPushButton("Four");
QPushButton *button5 = new QPushButton("Five");/*Creació del layout i addició dels botons*/
QGridLayout *layout = new QGridLayout;
layout->addWidget(button1, 0, 0);
layout->addWidget(button2, 0, 1);
layout->addWidget(button3, 1, 0, 1, 2);
layout->addWidget(button4, 2, 0);
layout->addWidget(button5, 2, 1);window->setLayout(layout);
window->show();
Un cop vistes les 3 disposicions possibles, es pot fer tota mena de combinacions disposant els widgets de la forma que es cregui més convenient.
És una aplicació creada per Trolltech per dissenyar interfícies gràfiques d'usuari (GUI) amb components de QT. Ens permet dissenyar widgets i diàlegs de forma senzilla.
En la següent imatge podem veure l'estructura de l'aplicació:
A la part esquerra hi tenim els diferents widgets (que passaran a ser widgets fills de la finestra principal) que podem utilitzar i que només ens caldrà arrossegar dins la finestra de l'aplicació que estiguem dissenyant. A la part central hi tenim la finestra que esiguem disssenyant. I a la part dreta hi tenim una sèrie de finestres que fan referència a les propietats d'un determinat widget amb el qual estiguem treballant, una altra amb la que podem modificar els Signals/Slots, una altra que ens permet treballar amb un fitxer de recursos...
A grans trets, amb el QT Designer farem el següent:
 |
 |
 |
 |
Josep Ramon Benet Bitrià
2008
