• 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

Compilez votre première fenêtre Qt

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

Bonne nouvelle, votre patience et votre persévérance vont maintenant payer.
Dans ce chapitre, nous réaliserons notre premier programme utilisant Qt et nous verrons comment ouvrir notre première fenêtre !

Nous allons changer d'IDE et passer de Code::Blocks à Qt Creator, qui permet de réaliser des programmes Qt beaucoup plus facilement. Je vais donc vous présenter dans ce chapitre comment utiliser Qt Creator.

Présentation de Qt Creator

Qt Creator, que nous avons installé au chapitre précédent en même temps que Qt, est l'IDE idéal pour programmer des projets Qt. Il va nous épargner des configurations fastidieuses et nous permettre de commencer à programmer en un rien de temps.

Voici la fenêtre principale du programme, que nous avons déjà vue (figure suivante).

Qt Creator
Qt Creator

Création d'un projet Qt vide

Je vous propose de créer un nouveau projet en allant dans le menuFichier > Nouveau fichier ou projet. On vous propose plusieurs choix selon le type de projet que vous souhaitez créer : application graphique pour ordinateur, application pour mobile, etc. Cependant, pour nous qui débutons, il est préférable de commencer avec un projet vide. Cela nous fera moins de fichiers à découvrir d'un seul coup.

Choisissez donc les optionsAutre projetpuisProjet Qt vide

Nouveau projet Qt Creator
Nouveau projet Qt Creator

Un assistant s'ouvre alors pour vous demander le nom du projet et l'emplacement où vous souhaitez l'enregistrer :

Nouveau projet (choix du nom)
Nouveau projet (choix du nom)

Comme vous le voyez, je l'ai appelé « test », mais vous lui donner le nom que vous voulez.

On vous demande ensuite quels "Kits" de compilation de Qt vous voulez utiliser. Pour le moment, contentez-vous de laisser les cases cochées comme elles sont. ;)

Nouveau projet (choix des kits)
Nouveau projet (choix des kits)

Enfin, la fenêtre suivante vous demande quelques informations dont vous avez peut-être moins l'habitude : vous pouvez lier votre projet à un gestionnaire de version.

On peut associer le projet à un gestionnaire de version (comme SVN, Git). C'est un outil très utile, notamment si on travaille à plusieurs sur un code source… Mais ce n'est pas le sujet de ce chapitre.
Pour le moment, cliquez simplement sur « Suivant ».

Nouveau projet (choix d'un gestionnaire de version)
Nouveau projet (choix d'un gestionnaire de version)

Ouf ! Notre projet vide est créé :

Notre projet vide dans Qt Creator
Notre projet vide dans Qt Creator

Le projet est constitué seulement d'un fichier.pro. Ce fichier, propre à Qt, sert à configurer le projet au moment de la compilation.

Ajout d'un fichier main.cpp

Il nous faut au moins un fichier main.cpppour commencer à programmer !
Pour l'ajouter, retournez dans le menuFichier > Nouveau fichier ou projetet sélectionnez cette foisC++ > Fichier source C++pour ajouter un fichier .cpp(figure suivante).

Ajout de fichier source
Ajout de fichier source

On vous demande ensuite le nom du fichier à créer, indiquez main.cpp(figure suivante).

Ajout de fichier source (suite)
Ajout de fichier source (suite)

Le fichier main.cppvide a été ajouté au projet :

Ouverture du fichier vide
Ouverture du fichier vide

C'est dans ce fichier que nous écrirons nos premières lignes de code C++ utilisant Qt.

Pour compiler le programme, il vous suffira de cliquer sur la flèche verte dans la colonne de gauche, ou bien d'utiliser le raccourci clavier Ctrl + R.

Codons notre première fenêtre !

Ok, c'est parti !

Le code minimal d'un projet Qt

Saisissez le code suivant dans le fichier main.cpp:

#include <QApplication>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    return app.exec();
}

C'est le code minimal d'une application utilisant Qt !

Comme vous pouvez le constater, ce qui est génial, c'est que c'est vraiment très court.
D'autres bibliothèques vous demandent beaucoup plus de lignes de code avant de pouvoir commencer à programmer, tandis qu'avec Qt, c'est vraiment très simple et rapide.

Analysons ce code pas à pas !

Includes un jour, includes toujours
#include <QApplication>

C'est le seul include dont vous avez besoin au départ. Vous pouvez oublier iostreamet compagnie, avec Qt on ne s'en sert plus.
Vous noterez qu'on ne met pas l'extension « .h », c'est voulu. Faites exactement comme moi.

Cet include vous permet d'accéder à la classe QApplication, qui est la classe de base de tout programme Qt.

QApplication, la classe de base
QApplication app(argc, argv);

La première ligne du main()crée un nouvel objet de type QApplication. On a fait cela tout au long des derniers chapitres, vous ne devriez pas être surpris.

Cet objet est appelé app(mais vous pouvez l'appeler comme vous voulez). Le constructeur de QApplicationexige que vous lui passiez les arguments du programme, c'est-à-dire les paramètres argcet argvque reçoit la fonction main. Cela permet de démarrer le programme avec certaines options précises, mais on ne s'en servira pas ici.

Lancement de l'application
return app.exec();

Cette ligne fait 2 choses :

  1. Elle appelle la méthode execde notre objet app. Cette méthode démarre notre programme et lance donc l'affichage des fenêtres. Si vous ne le faites pas, il ne se passera rien.

  2. Elle renvoie le résultat de app.exec()pour dire si le programme s'est bien déroulé ou pas. Le returnprovoque la fin de la fonction main, donc du programme.

C'est un peu du condensé en fait ! Ce que vous devez vous dire, c'est qu'en gros, tout notre programme s'exécute réellement à partir de ce moment-là. La méthode execest gérée par Qt : tant qu'elle s'exécute, notre programme est ouvert. Dès que la  méthode  exec  est terminée, notre programme s'arrête.

Affichage d'un widget

Dans la plupart des bibliothèques GUI, dont Qt fait partie, tous les éléments d'une fenêtre sont appelés des widgets. Les boutons, les cases à cocher, les images… tout cela, ce sont des widgets. La fenêtre elle-même est considérée comme un widget.

Pour provoquer l'affichage d'une fenêtre, il suffit de demander à afficher n'importe quel widget. Ici par exemple, nous allons afficher un bouton.

Voici le code complet que j'aimerais que vous utilisiez. Il fait appel au code de base de tout à l'heure mais y ajoute quelques lignes :

#include <QApplication>
#include <QPushButton>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QPushButton bouton("Salut les Zéros, la forme ?");
    bouton.show();
 
    return app.exec();
}

Les lignes ajoutées ont été surlignées pour que vous puissiez bien les repérer.
On voit entre autres :

#include <QPushButton>

Cette ligne vous permet de créer des objets de typeQPushButton, c'est-à-dire des boutons (vous noterez d'ailleurs que, dans Qt, toutes les classes commencent par un « Q » !).

QPushButton bouton("Salut les Zéros, la forme ?");

Cela crée un nouvel objet de type QPushButtonque nous appelons tout simplement bouton, mais nous aurions très bien pu l'appeler autrement. Le constructeur attend un paramètre : le texte qui sera affiché sur le bouton.

Malheureusement, le fait de créer un bouton ne suffit pas pour qu'il soit affiché. Il faut appeler sa méthode show:

bouton.show();

Et voilà !
Cette ligne commande l'affichage d'un bouton. Comme un bouton ne peut pas « flotter » comme cela sur votre écran, Qt l'insère automatiquement dans une fenêtre. On a en quelque sorte créé une « fenêtre-bouton ».

Bien entendu, dans un vrai programme plus complexe, on crée d'abord une fenêtre et on y insère ensuite plusieurs widgets, mais là nous n'en sommes qu'au commencement.

Exécutez le code

Notre code est prêt, si on le testait ?

Pour pouvoir compiler notre fenêtre, il faut d'abord effectuer une toute petite configuration de Qt. On va devoir lui dire en effet qu'on veut utiliser le module "QtWidgets" qui nous permet d'afficher des fenêtres (je vous rappelle que Qt et une très grosse bibliothèque qui ne sert pas qu'à construire des fenêtres !).

Ouvrez le fichier .pro de votre projet. Il devrait contenir la liste des fichiers de votre projet :

SOURCES += \
    main.cpp

Ajoutez-y une ligneQT += widgetspour demander à Qt de charger le module QtWidgets :

QT += widgets

SOURCES += \
    main.cpp

Ensuite, pour que Qt prenne en compte la modification de ce fichier .pro, il faut exécuter un petit utilitaire appelé qmake. Faites un clic droit sur le nom de votre projet et cliquez sur "Exécuter qmake" :

Exécutez qmake pour prendre en compte les modifications du .pro
Exécutez qmake pour prendre en compte les modifications du .pro

Parfait. On peut maintenant compiler notre programme en cliquant sur "Exécuter" (la flèche verte).

Le bouton permettant de compiler et exécuter
Le bouton permettant de compiler et exécuter

Le programme se lance alors… Coucou petite fenêtre, fais risette à la caméra !

Notre première fenêtre

Le bouton prend la taille du texte qui se trouve à l'intérieur et la fenêtre qui est automatiquement créée prend la taille du bouton. Cela donne donc une toute petite fenêtre

Mais… vous pouvez la redimensionner (figure suivante), voire même l'afficher en plein écran ! Rien ne vous en empêche et le bouton s'adapte automatiquement à la taille de la fenêtre (ce qui peut donner un très gros bouton).

Notre première fenêtre agrandie

Diffusez le programme

Pour tester le programme avec Qt Creator, un clic sur la flèche verte suffit. C'est très simple.
Cependant, si vous récupérez l'exécutable qui a été généré et que vous l'envoyez à un ami, celui-ci ne pourra probablement pas lancer votre programme ! En effet, il a besoin d'une série de fichiers DLL.

Les programmes Qt ont besoin de ces fichiers DLL avec eux pour fonctionner.
Quand vous exécutez votre programme depuis Qt Creator, la position des DLL est « connue », donc votre programme se lance sans erreur.

Mais essayez de faire un double-clic sur l'exécutable dans l'explorateur, pour voir ! Qt Creator a dû créer un dossier à côté du dossier de votre projet. Dans mon cas, il s'appelle : "build-test-Desktop_Qt_5_1_0_MinGW_32bit-Debug" (joli nom n'est-ce pas :D ). A l'intérieur, dans un sous-dossier, vous y trouverez l'exécutable.

Le programme que nous venons de créer dans l'explorateur
Le programme que nous venons de créer dans l'explorateur

Lancez le programme. Ou plutôt, essayez.

Le programme refuse de se lancer sans ses DLL
Le programme refuse de se lancer sans ses DLL

En effet, sans ses quelques DLL compagnons, notre programme est perdu. Il a besoin de ces fichiers qui contiennent de quoi le guider.

Pour pouvoir lancer l'exécutable depuis l'explorateur (et aussi pour qu'il marche chez vos amis et clients), il faut placer les DLL qui manquent dans le même dossier que l'exécutable. À vous de les chercher, vous les avez sur votre disque (chez moi je les ai trouvées dans le dossierC:\Qt\5.1.0\mingw48_32\bin). Selon le cas vous risquez d'avoir besoin de joindre pas mal de DLL avec votre exécutable. Essayez de lancer l'exécutable et ajoutez à chaque fois la DLL qui manque à côté de l'exécutable. A la fin, le programme devrait enfin se lancer. :)

Vous pouvez maintenant lancer le programme depuis l'explorateur !

Lorsque vous envoyez votre programme à un ami ou que vous le mettez en ligne pour téléchargement, pensez donc à joindre les DLL, elles sont indispensables.

En résumé

  • Qt Creator est un IDE conçu spécialement pour développer des projets avec Qt.

  • Qt Creator nous simplifie le processus de compilation, qui est habituellement un peu délicat avec Qt.

  • Tous les éléments d'une fenêtre sont appelés widgets.

  • Les widgets sont représentés par des objets dans le code. Ainsi,QPushButtoncorrespond par exemple à un bouton.

  • Lorsque vous diffusez un programme créé avec Qt, pensez à joindre les DLL de Qt pour qu'il puisse fonctionner.

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