• 50 heures
  • Difficile

Ce cours est visible gratuitement en ligne.

Ce cours existe en livre papier.

Vous pouvez obtenir un certificat de réussite à l'issue de ce cours.

Vous pouvez être accompagné et mentoré par un professeur particulier par visioconférence sur ce cours.

J'ai tout compris !

Mis à jour le 25/03/2019

Modélisez ses fenêtres avec Qt Designer

Connectez-vous ou inscrivez-vous gratuitement pour bénéficier de toutes les fonctionnalités de ce cours !

À force d'écrire le code de vos fenêtres, vous devez peut-être commencer à trouver cela long et répétitif. C'est amusant au début mais, au bout d'un moment on en a un peu marre d'écrire des constructeurs de 3 kilomètres de long juste pour placer les widgets sur la fenêtre.

C'est là que Qt Designer vient vous sauver la vie. Il s'agit d'un programme livré avec Qt (vous l'avez donc déjà installé) qui permet de concevoir vos fenêtres visuellement. Mais plus encore, Qt Designer vous permet aussi de modifier les propriétés des widgets, d'utiliser des layouts et d'effectuer la connexion entre signaux et slots.

Nous commencerons par apprendre à manipuler Qt Designer lui-même. Vous verrez que c'est un outil complexe mais qu'on s'y fait vite car il est assez intuitif.
Ensuite, nous apprendrons à utiliser les fenêtres générées avec Qt Designer dans notre code source.

C'est parti !

Présentation de Qt Designer

Qt Designer existe sous forme de programme indépendant mais il est aussi intégré au sein de Qt Creator, dans la sectionDesign. Il est plus simple de travailler directement à l'intérieur de Qt Creator et cela ne change strictement rien aux possibilités qui vous sont offertes. En effet, Qt Designer est complètement intégré dans Qt Creator !

Comme c'est le plus simple et que cette solution n'a que des avantages, nous allons donc travailler directement dans Qt Creator.

Je vais supposer que vous avez déjà créé un projet dans Qt Creator. Pour ajouter une fenêtre de Qt Designer, allez dans le menuFichier > Nouveau fichier ou projetpuis sélectionnezQt > Classe d'interface graphique Qt Designer

Ajout d'une fenêtre
Ajout d'une fenêtre

Choix du type de fenêtre à créer

Lorsque vous demandez à créer une fenêtre, on vous propose de choisir le type de fenêtre :

Choix du type de fenêtre
Choix du type de fenêtre

Les 3 premiers choix correspondent à des QDialog.
Vous pouvez aussi créer une QMainWindowsi vous avez besoin de gérer des menus et des barres d'outils.
Enfin, le dernier choix correspond à une simple fenêtre de type QWidget.

Pour tester Qt Designer, peu importe le choix que vous ferez ici. On peut partir sur une QDialogsi vous voulez (premier choix par exemple).

Dans la fenêtre suivante, on vous demande le nom des fichiers à créer (figure suivante). Pour le moment vous pouvez laisser les valeurs par défaut.

Noms des fichiers
Noms des fichiers

Trois fichiers seront créés :

  • dialog.ui: c'est le fichier qui contiendra l'interface graphique (de type XML). C'est ce fichier que nous modifierons avec l'éditeur Qt Designer ;

  • dialog.h: permet de charger le fichier.uidans votre projet C++ (en-tête de classe) ;

  • dialog.cpp: permet de charger le fichier.uidans votre projet C++ (code source de classe).

Analyse de la fenêtre de Qt Designer

Lorsque vous avez créé votre fenêtre, Qt Designer s'ouvre au sein de Qt Creator (voir figure suivante).

Qt Designer dans Qt Creator
Qt Designer dans Qt Creator

Notez que, d'après le ruban de gauche, nous sommes dans la section Design de Qt Creator. Vous pouvez retrouver les fichiers de votre projet en cliquant surÉditer.

Wow ! Mais comment je vais faire pour m'y retrouver avec tous ces boutons ?

En y allant méthodiquement.
Notez que la position des fenêtres peut être un peu différente chez vous, ne soyez pas surpris.
Détaillons chacune des zones importantes dans l'ordre :

    1. Sur la barre d'outils de Qt Designer, au moins quatre boutons méritent votre attention. Ce sont les quatre boutons situés sous la marque « (1) » rouge que j'ai placée sur la capture d'écran. Ils permettent de passer d'un mode d'édition à un autre. Qt Designer propose quatre modes d'édition :

      • Éditer les widgets : le mode par défaut, que vous utiliserez le plus souvent. Il permet d'insérer des widgets sur la fenêtre et de modifier leurs propriétés.

      • Éditer signaux/slots : permet de créer des connexions entre les signaux et les slots de vos widgets.

      • Éditer les copains : permet d'associer desQLabelavec leurs champs respectifs. Lorsque vous faites un layout de typeQFormLayout, ces associations sont automatiquement créées.

      • Éditer l'ordre des onglets : permet de modifier l'ordre de tabulation entre les champs de la fenêtre, pour ceux qui naviguent au clavier et passent d'un champ à l'autre en appuyant sur la touche Tab.

Nous ne verrons dans ce chapitre que les deux premiers modes (Éditer les widgets et Éditer signaux/slots). Les autres modes sont peu importants et je vous laisse les découvrir par vous-mêmes.

    1. Au centre de Qt Designer, vous avez la fenêtre que vous êtes en train de dessiner. Pour le moment, celle-ci est vide.

Si vous créez uneQMainWindow, vous aurez en plus une barre de menus et une barre d'outils. Leur édition se fait à la souris, c'est très intuitif. Si vous créez une QDialog, vous aurez probablement des boutons « OK » et « Annuler » déjà disposés.

    1. Widget Box : ce dock vous donne la possibilité de sélectionner un widget à placer sur la fenêtre. Vous pouvez constater qu'il y a un assez large choix ! Heureusement, ceux-ci sont organisés par groupes pour y voir plus clair.

Pour placer un de ces widgets sur la fenêtre, il suffit de faire un glisser-déplacer. Simple et intuitif.

    1. Property Editor : lorsqu'un widget est sélectionné sur la fenêtre principale, vous pouvez éditer ses propriétés. Vous noterez que les widgets possèdent en général beaucoup de propriétés, et que celles-ci sont organisées en fonction de la classe dans laquelle elles ont été définies. On peut ainsi modifier toutes les propriétés dont un widget hérite, en plus des propriétés qui lui sont propres.

Si aucun widget n'est sélectionné, ce sont les propriétés de la fenêtre que vous éditerez. Vous pourrez donc par exemple modifier son titre avec la propriété windowTitle, son icône avec windowIcon, etc.

    1. Object Inspector : affiche la liste des widgets placés sur la fenêtre, en fonction de leur relation de parenté, sous forme d'arbre. Cela peut être pratique si vous avez une fenêtre complexe et que vous commencez à vous perdre dedans.

    2. Éditeur de signaux/slots et éditeur d'action : ils sont séparés par des onglets. L'éditeur de signaux/slots est utile si vous avez associé des signaux et des slots, les connexions du widget sélectionné apparaissant ici. Nous verrons tout à l'heure comment réaliser des connexions dans Qt Designer.

L'éditeur d'actions permet de créer des QAction. C'est donc utile lorsque vous créez une QMainWindowavec des menus et une barre d'outils.

Voilà qui devrait suffire pour une présentation générale de Qt Designer. Maintenant, pratiquons un peu.

Placez des widgets sur la fenêtre

Placer des widgets sur la fenêtre est en fait très simple : vous prenez le widget que vous voulez dans la liste à gauche et vous le faites glisser où vous voulez sur la fenêtre.

Ce qui est très important à savoir, c'est qu'on peut placer ses widgets de deux manières différentes :

  • De manière absolue : vos widgets seront disposés au pixel près sur la fenêtre. C'est la méthode par défaut, la plus précise, mais la moins flexible aussi. Je vous avais parlé de ses défauts dans le chapitre sur les layouts.

  • Avec des layouts (recommandé pour les fenêtres complexes) : vous pouvez utiliser tous les layouts que vous connaissez. Verticaux, horizontaux, en grille, en formulaire… Grâce à cette technique, les widgets s'adapteront automatiquement à la taille de votre fenêtre.

Commençons par les placer de manière absolue, puis nous verrons comment utiliser les layouts dans Qt Designer.

Placez les widgets de manière absolue

Je vous propose, pour vous entraîner, de faire une petite fenêtre simple composée de 3 widgets :

  • QSlider;

  • QLabel;

  • QProgressBar.

Votre fenêtre devrait maintenant ressembler à peu près à la figure suivante.

Placement de widgets sur la fenêtre
Placement de widgets sur la fenêtre

Vous pouvez déplacer ces widgets comme bon vous semble sur la fenêtre.
Vous pouvez les agrandir ou les rétrécir.

Quelques raccourcis à connaître :

    • En maintenant la touche Ctrl appuyée, vous pouvez sélectionner plusieurs widgets en même temps.

    • Faites Suppr pour supprimer les widgets sélectionnés.

    • Si vous maintenez la touche Ctrl enfoncée lorsque vous déplacez un widget, celui-ci sera copié.

    • Vous pouvez faire un double-clic sur un widget pour modifier son nom (il vaut mieux donner un nom personnalisé plutôt que laisser le nom par défaut).

Sur certains widgets complexes, comme laQComboBox(liste déroulante), le double-clic vous permet d'éditer la liste des éléments contenus dans la liste déroulante.

  • Pensez aussi à faire un clic droit sur les widgets pour modifier certaines propriétés, comme la bulle d'aide (toolTip).

Utilisez les layouts

Pour le moment, nous n'utilisons aucun layout. Si vous essayez de redimensionner la fenêtre, vous verrez que les widgets ne s'adaptent pas à la nouvelle taille et qu'ils peuvent même disparaître si on réduit trop la taille de la fenêtre !

Il y a deux façons d'utiliser des layouts :

  • utiliser la barre d'outils en haut ;

  • glisser-déplacer des layouts depuis le dock de sélection de widgets (« Widget Box »).

Pour une fenêtre simple comme celle-là, nous n'aurons besoin que d'un layout principal.
Pour définir ce layout principal, le mieux est de passer par la barre d'outils (figure suivante).

Barre d'outils des layouts

Cliquez sur une zone vide de la fenêtre (en clair, c'est la fenêtre qui doit être sélectionnée et non un de ses widgets). Vous devriez alors voir les boutons de la barre d'outils des layouts s'activer.

Cliquez sur le bouton correspondant au layout vertical (le second) pour organiser automatiquement la fenêtre selon un layout vertical.
Vous devriez alors voir vos widgets s'organiser comme sur la figure suivante :

Layout vertical
Layout vertical

C'est le layout vertical qui les place ainsi afin qu'ils occupent toute la taille de la fenêtre. Bien sûr, vous pouvez réduire la taille de la fenêtre si vous le désirez.
Vous pouvez aussi demander à ce que la fenêtre soit réduite à la taille minimale acceptable, en cliquant sur le bouton tout à droite de la barre d'outils, intitulé « Adjust Size ».

Insérez des spacers

Vous trouvez que la fenêtre est un peu moche si on l'agrandit trop ?
Moi aussi. Les widgets sont trop espacés, cela ne me convient pas.

Pour changer la position des widgets tout en conservant le layout, on peut insérer un spacer. Il s'agit d'un widget invisible qui sert à créer de l'espace sur la fenêtre.

Le mieux est encore d'essayer pour comprendre ce que cela fait. Dans la Widget Box, vous devriez avoir une section « Spacers » :

Spacers

Prenez un « Vertical Spacer », et insérez-le tout en bas de la fenêtre :

Fenêtre avec spacer
Fenêtre avec spacer

Le spacer force les autres widgets à se coller tout en haut. Ils sont toujours organisés selon un layout, mais au moins, maintenant, nos widgets sont plus rapprochés les uns des autres.
Essayez de déplacer le spacer sur la fenêtre pour voir. Placez-le entre le libellé et la barre de progression. Vous devriez voir que la barre de progression se colle maintenant tout en bas.

Le comportement du spacer est assez logique mais il faut l'essayer pour bien le comprendre.

Éditez les propriétés des widgets

Il nous reste une chose très importante à voir : l'édition des propriétés des widgets.
Sélectionnez par exemple le libellé (QLabel). Regardez le dock intitulé « Property Editor ». Il affiche maintenant les propriétés duQLabel(figure suivante).

Éditeur de propriétés
Éditeur de propriétés

Ces propriétés sont organisées en fonction de la classe dans laquelle elles ont été définies et c'est une bonne chose. Je m'explique.
Vous savez peut-être qu'unQLabelhérite deQFrame, qui hérite deQWidget, qui hérite lui-même deQObject?

Chacune de ces classes définit des propriétés.QLabelhérite donc des propriétés deQFrame,QWidgetetQObject, mais a aussi des propriétés qui lui sont propres.

Sur ma capture d'écran, on peut voir une propriété deQObject:objectName. C'est le nom de l'objet qui sera créé dans le code. Je vous conseille de le personnaliser pour vous y retrouver dans le code source par la suite.

Si vous descendez un peu plus bas dans la liste, vous devriez vous rendre compte qu'un grand nombre de propriétés sont proposées parQWidget(notamment la police, le style de curseur de la souris, etc.). Descendez encore plus bas. Vous devriez arriver sur les propriétés héritées deQFrame, puis celles propres àQLabel.

Vous devriez modifier la propriététext, pour changer le texte affiché dans leQLabel. Mettez par exemple « 0 ». Amusez-vous à changer la police (propriétéfontissue deQWidget) ou encore à mettre une bordure (propriétéframeShapeissue deQFrame).

Vous remarquerez que, lorsque vous éditez une propriété, son nom s'affiche en gras pour être mis en valeur. Cela vous permet par la suite de repérer du premier coup d'œil les propriétés que vous avez modifiées.

Modifiez aussi les propriétés de laQProgressBarpour qu'elle affiche 0% par défaut (propriétévalue).

Vous pouvez aussi modifier les propriétés de la fenêtre. Cliquez sur une zone vide de la fenêtre afin qu'aucun widget ne soit sélectionné. Le dock « Property Editor » vous affichera alors les propriétés de la fenêtre (ici, notre fenêtre est unQWidget, donc vous aurez juste les propriétés deQWidget).

Essayez d'avoir une fenêtre qui, au final, ressemble grosso modo à la mienne :

Essayez de construire une fenêtre comme celle-ci !
Essayez de construire une fenêtre comme celle-ci !

Le libellé et la barre de progression doivent afficher 0 par défaut.

Bravo, vous savez maintenant insérer des widgets, les organiser selon un layout et personnaliser leurs propriétés dans Qt Designer !
Nous n'avons utilisé pour le moment que le mode « Edit Widgets ». Il nous reste à étudier le mode « Edit Signals/Slots »…

Configurez les signaux et les slots

Passez en mode « Edit Signals/Slots » en cliquant sur le second bouton de la barre d'outils (figure suivante).

Changement de mode

Dans ce mode, on ne peut pas ajouter, modifier, supprimer, ni déplacer de widgets. Par contre, si vous pointez sur les widgets de votre fenêtre, vous devriez les voir s'encadrer de rouge.

Vous pouvez, de manière très intuitive, associer les widgets entre eux pour créer des connexions simples entre leurs signaux et slots. Je vous propose par exemple d'associer leQSlideravec notreQProgressBar.

Pour cela, cliquez sur leQSlideret maintenez enfoncé le bouton gauche de la souris. Pointez sur laQProgressBaret relâchez le bouton. Une fenêtre apparaît alors pour que vous puissiez choisir le signal et le slot à connecter :

Choix des signaux et slots
Choix des signaux et slots
  • À gauche : les signaux disponibles dans leQSlider.

  • À droite : les slots compatibles disponibles dans laQProgressBar.

Sélectionnez un signal à gauche, par exemplesliderMoved(int). Ce signal est envoyé dès que l'on déplace un peu le slider.
Vous verrez que la liste des slots compatibles apparaît à droite.

Nous allons connectersliderMoved(int)duQSlideravecsetValue(int)de laQProgressBar.
Faites OK pour valider une fois le signal et le slot choisis. C'est bon, la connexion est créée  !

Connexion établie !
Connexion établie !

Faites de même pour associersliderMoved(int)du QSlider àsetNum(int)duQLabel.

Notez que vous pouvez aussi connecter un widget à la fenêtre. Dans ce cas, visez une zone vide de la fenêtre. La flèche devrait se transformer en symbole de masse (bien connu par ceux qui font de l'électricité ou de l'électronique).

Connexion à la masse
Connexion à la masse

Cela vous permet d'associer un signal du widget à un slot de la fenêtre, ce qui peut vous être utile si vous voulez créer un bouton « Fermer la fenêtre » par exemple.

Pour des connexions simples entre les signaux et les slots des widgets, Qt Designer est donc très intuitif et convient parfaitement.

Eh, mais si je veux créer un slot personnalisé pour faire des manipulations un peu plus complexes, comment je fais ?

Qt Designer ne peut pas vous aider pour cela. Si vous voulez créer un signal ou un slot personnalisé, il faudra le faire tout à l'heure dans le code source (en modifiant les fichiers.het.cppqui ont été créés en même temps que le.ui).
Comme vous pourrez le voir, néanmoins, c'est très simple à faire.

En y réfléchissant bien, c'est même la seule chose que vous aurez à coder ! En effet, tout le reste est automatiquement géré par Qt Designer. Vous n'avez plus qu'à vous concentrer sur la partie « réflexion » de votre code source.
Qt Designer vous permet donc de gagner du temps en vous épargnant les tâches répétitives et basiques qu'on fait à chaque fois que l'on crée une fenêtre.

Utilisez la fenêtre dans votre application

Il reste une dernière étape et non des moindres : apprendre à utiliser la fenêtre ainsi créée dans votre application.

Notre nouvel exemple

Je vous propose de créer une nouvelle fenêtre. On va créer une mini-calculatrice (figure suivante).

Mini-calculatrice

Essayez de reproduire à peu près la même fenêtre que moi, de type Widget.
Un layout principal horizontal suffira à organiser les widgets.

La fenêtre est constituée des widgets suivants, de gauche à droite :

Widget

Nom de l'objet

QSpinBox

nombre1

QComboBox

operation

QSpinBox

nombre2

QPushButton

boutonEgal

QLabel

resultat

Pensez à bien renommer les widgets afin que vous puissiez vous y retrouver dans votre code source par la suite.
Pour la liste déroulante du choix de l'opération, je l'ai déjà pré-remplie avec quatre valeurs :+,-,*et/.
Faites un double-clic sur la liste déroulante pour ajouter et supprimer des valeurs.

Il faudra donner un nom à la fenêtre lorsque vous la créerez dans Qt Creator (figure suivante). Je l'ai appeléeFenCalculatrice(de même que les fichiers qui seront créés).

Choix du nom de la classe

Utilisez la fenêtre dans notre application

Pour utiliser dans notre application la fenêtre créée à l'aide de Qt Designer, plusieurs méthodes s'offrent à nous. Le plus simple est encore de laisser Qt Creator nous guider !

Eh oui, souvenez-vous : Qt Creator a créé un fichier.uimais aussi des fichiers.cppet.hde classe ! Ce sont ces derniers fichiers qui vont appeler la fenêtre que nous avons créée.

En pratique, dans la déclaration de la classe générée par Qt Creator (fichierFenCalculatrice.h), on retrouve le code suivant :

#ifndef FENCALCULATRICE_H
#define FENCALCULATRICE_H

#include <QWidget>

namespace Ui {
    class FenCalculatrice;
}

class FenCalculatrice : public QWidget
{
    Q_OBJECT

public:
    explicit FenCalculatrice(QWidget *parent = 0);
     FenCalculatrice();

private:
    Ui::FenCalculatrice *ui;
};

#endif // FENCALCULATRICE_H

Le fichierFenCalculatrice.cpp, lui, contient le code suivant :

#include "FenCalculatrice.h"
#include "ui_FenCalculatrice.h"

FenCalculatrice::FenCalculatrice(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::FenCalculatrice)
{
    ui->setupUi(this);
}

FenCalculatrice:: FenCalculatrice()
{
    delete ui;
}

Comment marche tout ce bazar ?

Vous avez une classeFenCalculatricequi a été créée automatiquement par Qt Creator (fichiersFenCalculatrice.hetFenCalculatrice.cpp). Lorsque vous créez une nouvelle instance de cette classe, la fenêtre que vous avez dessinée tout à l'heure s'affiche !

Pourquoi ? Le fichier de la classe est tout petit et ne fait pas grand chose pourtant ?

Si, regardez bien : un fichier automatiquement généré par Qt Designer a été automatiquement inclus dans le.cpp:#include "ui_FenCalculatrice.h"

Par ailleurs le constructeur charge l'interface définie dans ce fichier auto-généré grâce àui->setupUi(this);. C'est cette ligne qui lance la construction de la fenêtre.

Bien sûr, la fenêtre est encore une coquille vide : elle ne fait rien. Utilisez la classeFenCalculatricepour compléter ses fonctionnalités et la rendre intelligente. Par exemple, dans le constructeur, pour modifier un élément de la fenêtre, vous pouvez faire ceci :

FenCalculatrice::FenCalculatrice(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::FenCalculatrice)
{
    ui->setupUi(this);

    ui->boutonEgal->setText("Egal");
}

Bon, en général, vous n'aurez pas besoin de personnaliser vos widgets vu que vous avez tout fait sous Qt Designer. Mais si vous avez besoin d'adapter leur contenu à l'exécution (pour afficher le nom de l'utilisateur par exemple), il faudra passer par là.

Maintenant ce qui est intéressant surtout, c'est d'effectuer une connexion :

FenCalculatrice::FenCalculatrice(QWidget *parent) :
    QWidget(parent),
    ui(new Ui::FenCalculatrice)
{
    ui->setupUi(this);

    connect(ui->boutonEgal, SIGNAL(clicked()), this, SLOT(calculerOperation()));
}

Ce code nous permet de faire en sorte que le slotcalculerOperation()de la fenêtre soit appelé à chaque fois que l'on clique sur le bouton. Bien sûr, c'est à vous d'écrire le slotcalculerOperation().

Il ne vous reste plus qu'à adapter votremainpour appeler la fenêtre comme une fenêtre classique :

#include <QApplication>
#include <QtWidgets>
#include "FenCalculatrice.h"

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

    FenCalculatrice fenetre;
    fenetre.show();

    return app.exec();
}

Personnalisez le code et utiliser les Auto-Connect

Les fenêtres créées avec Qt Designer bénéficient du système « Auto-Connect » de Qt. C'est un système qui crée les connexions tout seul.

Par quelle magie ?
Il vous suffit en fait de créer des slots en leur donnant un nom qui respecte une convention.

Prenons le widgetboutonEgalet son signalclicked(). Si vous créez un slot appeléon_boutonEgal_clicked()dans votre fenêtre, ce slot sera automatiquement appelé lors d'un clic sur le bouton.

La convention à respecter est représentée sur le schéma suivante.

Donnez un nom précis à votre slot et la connexion sera automatique !
Donnez un nom précis à votre slot et la connexion sera automatique !

Exercice (ne me dites pas que vous ne l'avez pas vu venir) : complétez le code de la calculatrice pour effectuer l'opération correspondant à l'élément sélectionné dans la liste déroulante.

En résumé

  • Qt Designer est un programme qui permet de construire rapidement ses fenêtres à la souris. Il nous évite l'écriture de nombreuses lignes de code.

  • Qt Designer est intégré à Qt Creator mais existe aussi sous forme de programme externe. Il est conseillé de l'utiliser dans Qt Creator car le fonctionnement est plus simple.

  • Qt Designer ne nous épargne pas une certaine réflexion : il est toujours nécessaire de rédiger des lignes de code pour faire fonctionner sa fenêtre après l'avoir dessinée.

  • Qt Designer crée automatiquement un fichier de code qui place les widgets sur la fenêtre. On travaille ensuite sur une classe qui hérite de ce code pour adapter la fenêtre à nos besoins.

Exemple de certificat de réussite
Exemple de certificat de réussite