Programmation Qt/Les widgets
Cette page présente certains widgets de Qt, ceux que vous utiliserez principalement.
Introduction.
Tout d'abord, bienvenue dans ce nouveau chapitre. Avant de voir tous ces widgets, apprenons les choses essentielles :
QBlablabla *mon_blabla = new QBlablabla();
QBlabla mon_blablabla;
codice_8 : le widget de base.
codice_8 est LE widget de base. codice_8 hérite de codice_11. Quand on envoie un widget, tel qu'il soit, s'il n'a pas de widget parent, la fenêtre sera lancée et prendra la taille de celui-ci. Voici des propriétés pour les codice_8.
Les widgets afficheurs.
codice_28 : afficher un texte ou une image.
codice_28 est un objet de Qt. Il permet d'afficher un texte ou une image.
Afficher du texte.
Pour afficher du texte, il suffit d'écrire :
QLabel *m_texte = new QLabel(); // Création de l"objet
m_texte->setText("Hello world !"); // Définition du texte
La méthode à utiliser est donc codice_3. Pour récupérer ce texte, utilisez la méthode codice_2.
Afficher une image.
Pour afficher une image, utilisez la méthode codice_32 :
QLabel *m_image = new QLabel();
m_image->setPixmap(QPixmap("mon_image.png");
Vous pouvez utiliser la méthode codice_33 qui vous renvoie un codice_34.
codice_35 : une barre de progression.
Pour afficher une barre de progression, il faut écrire :
QProgressBar *m_progressbar = new QProgressBar(); /* Création de la barre de progression */
m_progressbar->setValue(50); /* Choix de la valeur de la barre → 50 % */
On remarque la présence de la méthode codice_36, pour choisir la valeur de cet objet, et on en déduit qu'il faut utiliser codice_37 pour récupérer cette valeur. Pour les signaux, il y a codice_38 qui s'active quand la valeur change.
codice_39 : un label pour nombre.
Un codice_39 est un label pour des nombres, mais dont l'écriture est type radio-réveil. On a la plupart des mêmes propriétés et signaux de codice_35 pour le codice_39.
codice_43 : un tableau.
Un codice_43 est un widget pour afficher un tableau. Ce tableau a la particularité d'afficher automatiquement des barres de défilement.
QTableWidget *m_tableau = new QTableWidget(); /* Création de l'objet */
m_tableau->setRowCount(5); /* Définition du nombre de lignes */
m_tableau->setColumnCount(1); /* Définition du nombre de colonnes */
QTableWidgetItem *itemQt = new QTableWidgetItem(tr("Qt"), .arg(pow(row+1, column))); /* Création d'un objet QTableWidgetItem */
m_tableau->setItem(row, column, itemQt); /* Ajout de l'item */
On remarque que pour créer un item, on doit utiliser un objet spécialement créé pour cela, qui se nomme codice_45. Le fonctionnement est un peu étrange, mais on aura souvent à changer seulement le texte. Dans ce cas, ce n'était pas très intelligent d'utiliser un codice_43 car un codice_47 était plus adapté.
Insérer les items.
Pour insérer un item, vous créez votre classe codice_45, puis, avec la méthode codice_49, vous l'insérez en précisant, la ligne, puis la colonne et enfin l'item. Vous pouvez aussi utiliser la méthode codice_23 pour insérer une icône à l'item.
Donner des titres aux lignes et aux colonnes.
Pour donner des titres aux lignes et aux colonnes, vous utilisez les méthodes codice_51 pour les colonnes et codice_52 pour les lignes. Ces deux méthodes fonctionnent de la même façon : vous précisez le numéro de la colonne ou de la ligne, puis l'item qui sera inséré à cette place.
codice_53 : une liste.
Un codice_53 est un widget pour liste. Il affiche automatiquement une barre de progression si besoin.
Les boutons.
codice_55 : un bouton classique.
codice_55 est une classe de Qt permettant de créer un bouton de type classique.
QPushButton *m_pushbutton = new QPushButton();
m_pushbutton->setText("Quitter");
Signaux.
Application :
connect(&m_pushbutton, SIGNAL(clicked()), qApp, SLOT(quit()));/* L'application quittera quand on cliquera sur le bouton */
Le codice_55 possède aussi la méthode codice_61, qui permet de créer un bouton affichant un menu quand on clique dessus, en donnant une classe codice_62 que nous étudierons dans un chapitre ultérieur.
codice_63 : une case à cocher.
La case à cocher est présente dans Qt sous la forme d'un codice_63. Pour en créer une, il faut suivre le processus habituel :
QCheckBox *caseACocher = new QCheckBox(" J'aime Qt");
codice_65 : un bouton radio.
Les boutons radio sont des groupes de boutons dont un seul de ceux-ci peut être coché. Pour en créer, cela change car il faut créer un objet de type codice_66, pour définir quels boutons iront ensemble ("Je programme en Qt" et "J'habite à New York" ne feront pas parti du même objet codice_66). Observons donc le protocole :
QGroupBox *qgroupbox = new QGroupBox("Votre language de programmation préféré :"); /* Création du QGroupBox */
QRadioButton *cPlusPlus = new QRadioButton("C++"); /* Création de l'option C++ ... */
QRadioButton *python = new QRadioButton("Python"); /*..., de l'option Python ... */
QRadioButton *php = new QRadioButton("PHP"); /*..., et de l'option PHP */
QVBoxLayout *layout = new QVBoxLayout(); /* Création du layout */
layout->addWidget(cPlusPlus);/* Ajout des QRadioButton */
layout->addWidget(python);
layout->addWidget(php);
qgroupbox->setLayout(layout); /* Définition du layout pour l'objet QGroupBox */
Les champs.
Les champs sont des widgets où l’utilisateur entre une information.
codice_68 : un champ de texte à une ligne.
Pour créer un champ de texte à une ligne en Qt, il faut créer un objet de type codice_68 :
QLineEdit *m_lineEdit = new QLineEdit();
m_lineEdit->setPlaceholder("Ex: Qt");
codice_70 : un champ de texte multi-ligne.
Pour créer un champ de texte multi-ligne en Qt, c'est un objet codice_70 qu'il faut créer :
QTextEdit *m_textedit = new QTextEdit();
codice_72 : un champ de nombres.
Un codice_72 est un champ de texte pour nombres. Le protocole pour créer un objet de ce type est le suivant :
QSpinBox *m_spinbox = new QSpinBox();
Propriétés.
Modifions les propriétés ci-dessus :
m_spinbox->setStep(2); /* On se déplacera de 2 en 2 */
m_spinbox->setMinimum(0); /* La valeur minimale sera de 0 */
m_spinbox->setMaximum(100); /* La valeur maximale sera de 100 */
Exercice.
Pour s'entraîner un peu, essayez de modifier la valeur d'un codice_35 avec un codice_72.
codice_81 : un champ de nombres non-entiers.
Un codice_81 est un codice_72 à l'exception qu'il gère aussi les nombres non-entiers. Pour créer un objet de ce type, suivez le code suivant :
QDoubleSpinBox *m_doublespinbox = new QDoubleSpinBox(); /* Création de l'objet */
Propriétés.
Modifions les propriétés :
m_doublespinbox->setMinimum(0);
m_doublespinbox->setDecimal(2); /* Il y aura deux chiffres après la virgule */
codice_86 : un curseur.
En Qt, codice_86 est une classe permettant de créer un curseur. Voici comment créer un objet de ce type :
QSlider *m_slider = new QSlider();
Exercice.
Comme plus haut dans cette page, vous pouvez contrôler un codice_35, mais avec cette fois-ci un codice_86.
codice_95 : un curseur en forme de cercle.
Le fonctionnement de codice_95 est quasiment le même que pour codice_86, cependant arrêtons-nous sur la méthode codice_98 : 
QDial *dial = new QDial();
dial->setValue(135);
Le nombre que représente le widget est un nombre en degrés (et non en radians).
codice_99 : une liste déroulante.
Une liste déroulante, codice_99, est l'équivalent de boutons radios (codice_65), à l'exception que celle-ci ne prend qu'une petite place même pour une grande liste.
QComboBox *m_combobox = new QComboBox(); /* Création de la liste */
m_combobox->addItem("Paris"); /* Ajout des options */
m_combobox->addItem("Tokyo");
m_combobox->addItem("Ottawa");
Propriétés.
Maintenant, nous allons écrire un petit code :
QPushButton *boutonEnvoyer = new QPushButton("Envoyer !"); /* Création d'un bouton pour envoyer la valeur de la liste */
connect(boutonEnvoyer, SIGNAL(clicked()), this, SLOT(QMessageBox::information(this, "Capitale", ("Votre capitale est : " + m_combobox->currentText()))));
codice_99 a quelques classes filles, comme codice_107, un liste déroulante pour les polices.
codice_108 : un champ pour date.
Un codice_108 se comporte à peu près comme un codice_72. Dans les propriétés, codice_90 est remplacé par codice_112. On utilise aussi la propriété codice_113 et codice_114. On remarque aussi codice_115, pour le format de la date qui signifie codice_116, codice_117, etc...
Allez, un essai !
QDateEdit *qdateedit = new QDateEdit();
qdateedit->setMinimumDate(QDate(1715, 9, 1)); /* Mort de Louis XIV le 1er septembre 1715 */
qdateedit->setMaximumDate(QDate(3000, 12, 31)) /* Notre programme pourra servir jusqu'au 29ème siècle */
qdateedit->setDisplayFormat(QString("yyyy-MM-dd")); /* Format anglophone */
qdateedit->setDisplayFormat(QString("dd/MM/yyyy")); /* Format européen */
Vous remarquerez que les dates sont un peu étendues. Mais pour vous, ce sera au format anglophone ou européen ? La réponse est : au format européen, car codice_118 est prend le dernier format donné, et cela pareil pour toutes les propriétés.
codice_119 : un champ pour temps.
Un codice_119 se comporte comme codice_108. Sont remplacés les codice_112 par codice_123.
QTimeEdit *qtimeedit = new QTimeEdit();
/* Horaires d'école */
qtimeedit->setMinimumTime(QTime(9, 30, 0)); /* Démarrage des cours à 09:30:00 */
qtimeedit->setMaximumTime(QTime(16, 0, 0)); /* Fin des cours à 16:00:00 */
qtimeedit->setDisplayFormat(QString("hh:mm:ss")); /* Heures:Minutes:Secondes */
codice_124 : un champ qui combine date et temps.
Comme indiqué dans le titre de cette section, l'objet codice_124 est une classe de Qt qui combine un codice_108 et un codice_119. Vous avez donc les propriétés de chacune des classes.
codice_128 : un calendrier.
Il se peut que vous n'aimiez pas la présentation de codice_108. Qt y a pensé ! Une classe codice_128 est à notre disposition.
QCalendarWidget *m_calendar = new QCalendarWidget();
m_calendar->setMinimumDate(QDate(1970 /* Année*/, 1 /* Mois */, 1 /* Jour */));
m_calendar->setGridVisible(true); /* Affichons la grille */
Eh oui, c'est plutôt compliqué d'insérer une date minimale (codice_131) ou maximale (codice_132). Bien évidemment, c'est au format anglophone (codice_116) et non au notre (codice_117).
Les widgets conteneurs.
Dans cette section, nous allons découvrir les widgets fait pour contenir. Car un codice_55 peut contenir un codice_35. Ah oui, ce n'est pas malin, mais cela nous prouve que Qt est flexible.
codice_137 : une bordure.
Le fonctionnement de codice_137 est très simple : 
QFrame *m_frame = new QFrame();
m_frame->setFrameStyle(QFrame::StyledPanel | QFrame::Raised) /* Exemple de bordure */
Ensuite, pour les widgets enfants, un codice_143 qui contient lui-même des widgets. À noter que codice_28 hérite de codice_137, donc pas besoin d'insérer un codice_28 dans un codice_137, puisque le label a déjà la fonctionnalité de la bordure.
codice_66 : un conteneur pour une catégorie de widgets.
QGroupBox *conteneur = new QGroupBox();
conteneur->setTitle("Mon conteneur");
QProgressBar *progressBar = new QProgressBar();
QPushButton *pushButton = new QPushButton("Coucou !");
/* Layout */
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(progressBar);
layout->addWidget(pushButton);
conteneur->setLayout(layout);
Vous pouvez aussi utiliser la propriété codice_149 pour choisir l'alignement du titre (par défaut, celui-ci se trouve à gauche). À noter qu'il existe un constructeur tel que :
QGroupBox *conteneur = new QGroupBox();
conteneur->setTitle("Mon conteneur");
QGroupBox *conteneur = new QGroupBox("Mon conteneur");
codice_140 : un conteneur à onglets.
Un codice_140 est un conteneur à onglets. Il ne peut y avoir qu'un seul widget par onglets. Heureusement, un widget peut en contenir un autre, autrement dit vous pouvez mettre un layout qui contient tous les widgets que vous voulez.
QTabWidget *onglets = new QTabWidget();
QWidget *pageAccueil = new QWidget();
QLabel *bienvenue = new QLabel("Bienvenue à tous");
QPushButton *boutonQuitter = new QPushButton("Quitter");
connect(boutonQuitter, SIGNAL(clicked()), qApp, SLOT(quit()));
QVBoxLayout *layout = new QVBoxLayout();
layout->addWidget(bienvenue);
layout->addWidget(boutonQuitter);
pageAccueil->setLayout(layout);
QLabel *image = new QLabel();
image->setPixmap(QPixmap("monImage.png"));
onglets->addTab(pageAccueil, "Accueil");
onglets->addTab(image, "Image");
Ce code affiche :
Vous pouvez aussi mettre des codice_140 dans des codice_140 :
QTabWidget *univers = new QTabWidget();
QTabWidget *systemeSolaire = new QTabWidget();
QWidget *pageSoleil = new QWidget();
QWidget *pageMercure = new QWidget();
QWidget *pageEtc = new QWidget();
systemeSolaire->addTab(pageSoleil, "Soleil");
systemeSolaire->addTab(pageMercure, "Mercure");
systemeSolaire->addTab(pageEtc, "...");
univers->addTab(systemeSolaire, "Système solaire")
Exercices.
Voici maintenant une liste d'exercices un peu plus complexes que ceux directement dans les sections appropriées, mais moins que par rapport à des TP :
Entraînez-vous !
Bilan.
Et bien, vous avez appris quelque chose d'essentiel. N'hésitez pas à relire et à pratiquer. Il est effectivement essentiel de pratiquer, car si vous allumez l'ordinateur à la fin de la lecture du livre, "c'est très mauvais". Si quelque chose ne va pas, allez dans la page de discussion et posez la question. Notre prochaine étape est le positionnement des widgets. Si tout est bon, je vous invite au chapitre suivant →.