t.vaira (2011-2012) 1

InterfaceUtilisateurGraphique(GUI) Notiondefentre

Utilisationdesclasses:QWidget,QDialogetQMainWindow

Leslayouts

Botededialoguemodaleetnonmodale

LesapplicationSDIetMDI

Utilisationdesclasses:QAction,QMenu,QToolBar,QDockWidgetetQStatusBar

Graphiqueetdessin2D:leframeworkGraphicsViewetQPainter

QPictureetQImage

Lagestiond'vnementsourisetleglisserdposer(drag&drop)

t.vaira (2011-2012) 2

InterfaceUtilisateurGraphique

t.vaira (2011-2012) 3

LesexemplesdeQt Touslesexemplesdececourssontdisponiblesl'adressesuivante:

http://tvaira.free.fr/dev/qt/exemplesqt.zip

LadocumentationdeQtfournitdenombreuxexemples(plusde400),notamment:

http://doc.qt.io/qt4.8/exampleswidgets.html http://doc.qt.io/qt4.8/dialogsstandarddialogs.html http://doc.qt.io/qt4.8/examplesmainwindow.html http://doc.qt.io/qt4.8/widgetswindowflags.html http://doc.qt.io/qt4.8/exampleslayouts.html

LesexemplespourQt5sontici:http://doc.qt.io/qt5/

t.vaira (2011-2012) 4

LaclasseQWidgetLaclasseQWidget:

hritedeQObject estlaclassemredetoutesles

classesservantraliserdesinterfacesgraphiques

Leswidgets: sontcapabledese"peindre" sontcapablederecevoirlesvnementssouris,clavier sontleslmentsdebasedesinterfacesgraphiques sonttousrectangulaires ilssontordonnssuivantlaxez(gestiondelaprofondeur) ilspeuventavoirunwidgetparent

t.vaira (2011-2012) 5

Notiondefentre Unwidgetquin'estpasincorpordansunwidgetparentestappelunefentre.

Habituellement,lesfentresontuncadreetunebarredetitre,maisilestgalementpossibledecrerdesfentressansdcorationenutilisantdespropritsspcifiques(windowflags).

DansQt,QMainWindowetlesdiffrentessousclassesdeQDialogsontlestypesdefentreslespluscourantes.

t.vaira (2011-2012) 6

Leswidgets IlexistebeaucoupdesousclassesdeQWidgetquifournissentunerelle

fonctionnalit,tellequeQLabel,QPushButton,QListWidgetetQTabWidget.

Leswidgetsquinesontpasdesfentressontdeswidgetsenfants,affichsdansleurwidgetparent.LaplupartdeswidgetsdansQtsontprincipalementutilesentantquewidgetsenfants.

Parexemple,ilestpossibled'afficherunboutonentantquefentredehautniveau,maisonprfregnralementmettrelesboutonsl'intrieurd'autreswidgets,telsqueQDialog.

t.vaira (2011-2012) 7

Widget:exemplen1 Unwidgetesttoujourscrcach,ilestdoncncessaired'appelerlamthode

show()pourl'afficher

#include #include

int main( int argc, char* argv[] ){ QApplication MonAppli( argc, argv );

QLabel *pMonTexte = new QLabel(QString::fromUtf8("Bonjour tous"), NULL);

pMonTexte->show(); return MonAppli.exec();}

t.vaira (2011-2012) 8

Widget:exemplen2 D'unemaniregnrale,leswidgetssonthirarchiquementincluslesunsdansles

autres.Leprincipalavantageestquesileparentestdplac,lesenfantslesontaussi. Onajouteunboutonetlesdeuxlmentsserontinclusdansunmmewidget:

#include #include #include

int main( int argc, char* argv[] ) { QApplication MonAppli( argc, argv ); QWidget *pMaFenetre = new QWidget();

QLabel* pMonTexte = new QLabel("...", pMaFenetre); QPushButton *pMonBouton = new

QPushButton("Quitter", pMaFenetre); pMaFenetre->show(); return MonAppli.exec();}

Widget parent

Widgets enfants

t.vaira (2011-2012) 9

Widget:exemplen3 Pourrendreactiflebouton,onconnectelesignalclicked()misparl'objet

pMonBoutonauslotquit()del'objetMonAppli:

#include #include #include int main( int argc, char* argv[] ) { QApplication MonAppli( argc, argv ); QWidget *pMaFenetre = new QWidget();

QLabel* pMonTexte = new QLabel("...",pMaFenetre); QPushButton *pMonBouton = new QPushButton("Quitter", pMaFenetre);

QObject::connect(pMonBouton, SIGNAL(clicked()), &MonAppli, SLOT(quit()));

pMaFenetre->show();

return MonAppli.exec();}

Si on clique sur le bouton, on quitte

l'application.

Lesapplicationsdoiventseterminerproprementenappelant

QApplication::quit().Cettemthodeestappele

automatiquementlorsdelafermeturedudernierwidget.

t.vaira (2011-2012) 10

Widget:exemplen4 LessousclassesdeQWidgetpossdentdenombreusesmthodesquipermettent

d'agirsurl'aspectvisuel:

int main( int argc, char* argv[] ) { QApplication MonAppli( argc, argv ); QWidget *pMaFenetre = new QWidget();

QLabel* pMonTexte = new QLabel("Bonjour tous",pMaFenetre); QPushButton *pMonBouton = new QPushButton("Quitter",pMaFenetre);

pMonBouton->setGeometry(0,0,pMonTexte->width(),40); pMonBouton->move(50, 50); pMonBouton->resize(150, 50); pMonBouton->setFont(QFont("Arial", 18, QFont::Bold));

QObject::connect(pMonBouton, SIGNAL(clicked()), &MonAppli, SLOT(quit())); pMaFenetre->show();

return MonAppli.exec();}

t.vaira (2011-2012) 11

Widget:exemplen5 LesfeuillesdestyleQt(QSS)sontunmcanismepuissantquipermetde

personnaliserl'apparencedeswidgets. Lesconcepts,laterminologieetlasyntaxedesfeuillesdestyleQtsontfortement

inspirsparlesfeuillesdestyleencascade(CSS)utilisesenHTMLmaisadaptesaumondedewidgets.int main( int argc, char* argv[] ) { QApplication MonAppli( argc, argv ); QWidget *pMaFenetre = new QWidget(); QFile file("qss/default.qss"); if(file.open(QFile::ReadOnly)) { QString styleSheet = QLatin1String(file.readAll()); MonAppli.setStyleSheet(styleSheet); }

... pMonBouton->setStyleSheet("background-color: green"); ... return MonAppli.exec();}

t.vaira (2011-2012) 12

Leslayouts(1/2) Qtfournitunsystmededisposition(layout)pourl'organisationetle

positionnementautomatiquedeswidgetsenfantsdansunwidget.Cegestionnairedeplacementpermetl'agencementfacileetlebonusagedel'espacedisponible.

QtinclutunensembledeclassesQxxxLayoutquisontutilisspourdcrirelafaondontleswidgetssontdispossdansl'interfaceutilisateurd'uneapplication.

TouteslessousclassesdeQWidgetpeuventutiliserleslayoutspourgrerleursenfants.QWidget::setLayout()appliqueunemiseenpageunwidget.

Lorsqu'unlayoutestdfinisurunwidgetdecettemanire,ilprendenchargelestchessuivantes:

Positionnementdeswidgetsenfants Gestiondestailles(minimale,prfre) Redimensionnement Misejourautomatiquelorsquelecontenuchange

t.vaira (2011-2012) 13

Leslayouts(2/2) Quelqueslayouts:horizontal,vertical,grille,formulaire...

QHBoxLayout

QVBoxLayoutQFormLayout QGridLayout

t.vaira (2011-2012) 14

Widget:exemplen6(1/3) OnpeutrutiliserleswidgetsdeQt:

Parhritage:extensiond'untypedewidget Parcomposition:assemblagedewidgets

#ifndef MYWIDGET_H#define MYWIDGET_H#include #include #include class MyWidget : public QWidget{ Q_OBJECT public: MyWidget( QWidget *parent = 0 ); private: QLCDNumber *lcd; QSlider *slider;};#endif

t.vaira (2011-2012) 15

Widget:exemplen6(2/3) Oninstanciedeuxobjetswidgets:labarreQSlideretl'affichageLCD

QLCDNumber. Onconnecte:slider>valueChanged(int)(mthodedclencheuse)lcd>display(int)

(mthodedclenche)

#include

#include "mywidget.h"

MyWidget::MyWidget( QWidget *parent ) : QWidget( parent ){ lcd = new QLCDNumber( this ); slider = new QSlider( Qt::Horizontal, this ); QVBoxLayout *mainLayout = new QVBoxLayout; mainLayout->addWidget(lcd); mainLayout->addWidget(slider); setLayout(mainLayout);

connect( slider, SIGNAL(valueChanged(int)), lcd, SLOT(display(int)) );}

Iln'yapasdedeletecarlewidgetparentsechargeradeladestructiondeseswidgets

enfants.

t.vaira (2011-2012) 16

Widget:exemplen6(3/3) Pourfinir,oninstancienotrenouveauwidgetetonl'affiche:

#include

#include "mywidget.h"

int main( int argc, char **argv ){

QApplication a( argc, argv );

MyWidget w;

w.show();

return a.exec();}

t.vaira (2011-2012) 17

EncapsulationdeWidgets ExempledewidgetsQtencapsulantd'autreswidgets:QGroupBox,

QTabWidget

t.vaira (2011-2012) 18

Widget:exemplen7(1/3) EnutilisantQStyleFactory::keys(),onobtientlalistedesstylesdisponibles:

#include #include #include

class MyDialog : public QDialog{ Q_OBJECT public: MyDialog(QWidget *parent) : QDialog(parent) { QComboBox *styleComboBox = new QComboBox; styleComboBox->addItems(QStyleFactory::keys()); qDebug() setBuddy(styleComboBox); connect(styleComboBox, SIGNAL(activated(QString)), this, SLOT(changeStyle(QString))); }

t.vaira (2011-2012) 19

Widget:exemplen7(2/3) LaclasseQStyleestuneclassedebaseabstraitequiencapsulelelookandfeelde

l'interfacegraphique.QtcontientunensembledesousclassesQStylequimulentlesstylesdesdiffrentesplatesformesprisesenchargeparQt(QWindowsStyle,QMacStyle,QMotifStyle,etc.)Pardfaut,cesmodlessontconstruitsdanslabibliothqueQtGui.

Onpeutchangerpendantl'excutionlestyledel'applicationavecsetStyle():...private slots: void changeStyle(const QString &styleName) { QApplication::setStyle(QStyleFactory::create(styleName)); QApplication::setPalette(QApplication::style()->standardPalette()); }};

t.vaira (2011-2012) 20

Widget:exemplen7(2/3) LaclasseQStyleestuneclassedebaseabstraitequiencapsulelelookandfeelde

l'interfacegraphique.QtcontientunensembledesousclassesQStylequimulentlesstylesdesdiffrentesplatesformesprisesenchargeparQt(QWindowsStyle,QMacStyle,QMotifStyle,etc.)Pardfaut,cesmodlessontconstruitsdanslabibliothqueQtGui.

t.vaira (2011-2012) 21

LaclasseQDialog LaclasseQDialogestlaclassedebasedesfentresdedialogue.Ellehritede

QWidge