Aller au menu - Aller au contenu

Icône Compiler votre première fenêtre Qt

Par Avatar Mathieu Nebra (M@teo21) et Avatar Matthieu Schaller (Nanoc)
Mise à jour : 27/05/2011
Difficulté : Facile Facile Creative Commons BY-NC-SA
75 639 visites depuis 7 jours, dont 1 600 sur ce chapitre classé 5/786
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 comment utiliser Qt Creator dans ce chapitre.

Let's go !
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Présentation de Qt Creator

Qt Creator, que nous avons installé dans le 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 :

Image utilisateur


Création d'un projet Qt vide



Je vous propose de créer un nouveau projet en allant dans le menu Fichier / 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 options Autre projet puis Projet Qt vide :

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 (suite)


Comme vous le voyez, je l'ai appelé "test", mais vous pouvez l'appeler comme vous voulez. :)

La fenêtre suivante vous demande quelques informations dont vous avez peut-être moins l'habitude :

Nouveau projet (suite)


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, faites simplement "Suivant".

Pour cette dernière fenêtre, Qt Creator propose de configurer la compilation. Là encore, laissez ce qu'on vous propose par défaut, cela conviendra très bien.

Nouveau projet (suite)


Ouf ! Notre projet vide est créé :

Projet vide Qt Creator


Le projet est constitué seulement d'un fichier .pro. Ce fichier, propre à Qt, sert à configurer le projet au moment de la compilation. Qt Creator modifie automatiquement ce fichier en fonction des besoins, ce qui fait que nous n'aurons pas beaucoup à le modifier dans la pratique.

Ajout d'un fichier main.cpp



Il nous faut au moins un fichier main.cpp pour commencer à programmer !
Pour l'ajouter, retournez dans le menu Fichier / Nouveau fichier ou projet et sélectionnez cette fois C++ / Fichier source C++ pour ajouter un fichier .cpp :

Ajout de fichier source


On vous demande ensuite le nom du fichier à créer, indiquez main.cpp :

Ajout de fichier source (suite)


Le fichier main.cpp vide a été ajouté au projet. Vous pouvez double-cliquer sur son nom pour l'ouvrir :

Projet Qt vide avec main


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 le colonne à gauche, ou bien d'utiliser le raccourci clavier Ctrl + R.
Retour en haut

Codons notre première fenêtre !

Ok on est parti !

Le code minimal d'un projet Qt



Rentrez le code suivant dans le fichier main.cpp :

Code : C++
1
2
3
4
5
6
7
8
#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
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



Code : C++
1
#include <QApplication>


C'est le seul include que vous avez besoin de faire au départ. Vous pouvez oublier iostream et 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



Code : C++
1
QApplication app(argc, argv);


La première ligne du main crée un nouvel objet de type QApplication. On a fait ça tout le 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 QApplication exige que vous lui passiez les arguments du programme, c'est-à-dire les paramètres argc et argv que 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



Code : C++
1
return app.exec();


Cette ligne fait 2 choses :
  1. Elle appelle la méthode exec de 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 retourne le résultat de app.exec() pour dire si le programme s'est bien déroulé ou pas. Le return provoque la fin de la fonction main, donc du programme.

C'est un peu du condensé en fait :p
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 exec est 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 ça 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 utilise le code de base de tout à l'heure mais y ajoute quelques lignes :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
#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 bien que vous puissiez les repérer.
On voit entre autres :

Code : C++
1
#include <QPushButton>


Cette ligne va vous permettre de créer des objets de type QPushButton, c'est-à-dire des boutons (vous noterez que sous Qt toutes les classes commencent par un "Q" d'ailleurs !).

Code : C++
1
QPushButton bouton("Salut les Zéros, la forme ?");


Cela crée un nouvel objet de type QPushButton que nous appelons tout simplement bouton, mais on aurait 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 :

Code : C++
1
bouton.show();


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

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à on commence simplement ;)

Notre code est prêt, il ne reste plus qu'à compiler et exécuter le programme ! Il suffit pour cela de cliquer sur le bouton en forme de flèche verte à gauche de Qt Creator.

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. Ca donne donc une toute petite fenêtre ;)

Mais... vous pouvez la redimensionner, 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
Retour en haut

Un peu de théorie : Qt et la compilation

La bibliothèque Qt est tellement importante qu'elle apporte quelques ajouts au langage C++, en particulier le mécanisme des signaux et slots dont on reparlera un peu plus loin.

Pour ajouter ces fonctionnalités au langage C++, la compilation sort du schéma classique. On va en profiter ici pour revoir (ou voir pour certains :p ) comment la compilation fonctionne d'habitude dans les grandes lignes, puis nous découvrirons comment sont compilés les programmes Qt.

Vous n'êtes pas obligés de connaître tout cela car Qt Creator effectue tout le travail pour nous, mais il peut être intéressant pour votre culture de savoir comment la compilation fonctionne en coulisses. ;)



La compilation "normale", sans Qt



Savez-vous vraiment ce qui se passe lorsque vous cliquez sur "Compiler" dans votre IDE habituel (Code::Blocks, Visual Studio...) ?
Il y a en fait 2 grosses étapes :

  1. L'IDE regarde la liste des fichiers de votre projet (.cpp et .h) et génère un fichier appelé Makefile qui contient la liste des fichiers à compiler pour le compilateur.
  2. Ensuite, l'IDE appelle le compilateur (via le programme make). L'utilitaire make recherche un fichier Makefile et l'utilise pour savoir quoi compiler et avec quelles options.


Schématiquement ça donne ça :

Compilation et makefile


En fait, le gros avantage de l'IDE c'est qu'il écrit le fichier Makefile pour vous. On peut écrire le Makefile à la main, mais c'est honnêtement pas très pratique ni toujours très simple, surtout pour de gros projets. En effet, le fichier Makefile est parfois très gros.

Voici un aperçu (raccourci) d'un fichier Makefile pour vous donner une idée :

Code : Autre
1
2
3
4
5
6
7

all: $(PROG)
 
$(PROG): $(OBJS)
     $(CC) $(CFLAGS) $(LDFLAGS) $(LDLIBS) -o $(PROG) $(OBJS)
 
.c.o:
     $(CC) $(CFLAGS) -c $*.c


Qu'un IDE génère le Makefile pour nous n'est donc pas du luxe ^^


La compilation particulière avec Qt



Le problème survient quand vous utilisez des bibliothèques importantes comme Qt. Il faut configurer votre IDE pour qu'il puisse écrire le Makefile correctement, c'est-à-dire indiquer l'emplacement des fichiers .a (ou .lib), des headers de la bibliothèque, etc.

On pourrait en théorie configurer votre IDE pour que ça marche en cliquant sur "Compiler"... mais ce serait un peu long et compliqué (il faudrait une explication par IDE, et parfois par version d'IDE). J'ai à la place choisi de vous montrer une technique universelle : passer par la ligne de commande ! :D

:euh:

Bah pourquoi tout le monde est parti ?
Je vous rassure, ce n'est pas aussi infaisable que ce que vous pouvez croire, ce sera même plus simple que de configurer notre IDE, c'est vous dire ^^

Qt est livré avec un petit programme en ligne de commande appelé "qmake". Ce programme est capable de générer un fichier Makefile à partir d'un fichier spécifique à Qt : le .pro.
Le .pro (qui s'appelle en général nomDeVotreProjet.pro) est un fichier texte court et simple à écrire qui donne la liste de vos fichiers .cpp et .h, ainsi que les options à envoyer à Qt.

Sous Linux, la commande n'est pas qmake mais qmake-qt4.


Ca se passe donc comme ça avec Qt :
Compilation avec qmake


... Je suis obligé d'écrire moi-même le .pro ? Je ne sais pas faire ! Et puis faire la liste des fichiers du projet ça peut être long non ? :euh:


Rassurez-vous, Qt peut vous générer un .pro automatiquement ! Si on utilise d'abord qmake avec l'option -project dans le dossier de notre projet, qmake va analyser les fichiers du dossier et générer un fichier .pro basique (mais suffisant pour nous pour le moment).

Compilation avec qmake


En résumé, pour compiler avec Qt il y a 3 commandes très simples à taper en console. Dans l'ordre :

  1. qmake -project
  2. qmake
  3. make (sous Linux) ou mingw32-make (sous Windows)


Normalement, il n'est nécessaire de taper les 2 premières commandes (qmake -project et qmake) que la première fois pour générer le Makefile. Ensuite, vous n'aurez plus besoin que de relancer make pour recompiler votre projet.

Il faudra en fait relancer les commandes qmake -project et qmake à chaque fois que votre projet évoluera, c'est-à-dire à chaque fois que de nouveaux fichiers .cpp et .h seront ajoutés ou supprimés. Tant que la liste des fichiers de votre projet ne change pas, il n'est pas nécessaire de retaper ces 2 premières commandes.


Bien entendu, si vous utilisez Qt Creator, tout cela est fait automatiquement pour vous de façon transparente, vous n'avez pas à vous en préoccuper ! Cependant, connaître le fonctionnement de la compilation ne peut être qu'un "plus" pour vous. ;)
Retour en haut

Diffuser 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 double-cliquer sur l'exécutable depuis l'explorateur pour voir ! Rendez-vous dans le sous-dossier "release" de votre projet pour y trouver l'exécutable :

Le programme Test.exe
Le programme Test.exe. Double-cliquez dessus.


Exécution sans les DLL
Miséricorde ! Ca ne marche pas !


En effet, sans quelques DLL à côté 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 / clients), il faut placer les DLL qui manquent dans le même dossier que l'exécutable. A vous de les chercher, vous les avez sur votre disque (chez moi je les ai trouvés dans le dossier C:\Qt\2010.05\mingw\bin et C:\Qt\2010.05\bin). En tout, vous devriez avoir eu besoin de mettre 3 DLL :

Programme Qt et ses DLL


Vous pouvez lancer le programme depuis l'explorateur maintenant !

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.
Retour en haut

Q.C.M.

Quelle est le nom de la classe que toute application Qt doit instancier ?
Quelle méthode de la classe QPushButton permet de provoquer l'affichage du bouton ?
De quel(s) fichier(s) a besoin make pour savoir comment faire son travail ?
Dans quel ordre les commandes doivent-elles être tapées ?
Notez que make et mingw32-make sont équivalents.

Statistiques de réponses au QCM

Retour en haut
Nous y sommes enfin arrivés, champagne ! :D

Vous l'avez vu, le code nécessaire pour ouvrir une fenêtre toute simple constituée d'un bouton est ridicule. Quelques lignes à peine, et rien de bien compliqué à comprendre au final.
C'est ce qui fait la force de Qt : "un code simple est un beau code" dit-on. Qt s'efforce de respecter ce dicton à la lettre, vous vous en rendrez compte dans les prochains chapitres.

Dans les prochains chapitres, nous allons voir comment changer l'apparence du bouton, comment faire une fenêtre un peu plus complexe. Nous découvrirons aussi le mécanisme des signaux et des slots, un des principes les plus importants de Qt qui permet de gérer les évènements : un clic sur un bouton pourra par exemple provoquer l'ouverture d'une nouvelle fenêtre ou sa fermeture !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
251 commentaires pour "Compiler votre première fenêtre Qt"
Note moyenne : 3.85 / 4 (1749 votes)
Pseudo Commentaire
Hors ligne kev024 # Posté le 13/04/2012 à 14:24:34

Études : AFORP

 Citation : matthis14
Quand je compile tout dans debug avec les bons .dll Ca m'ouvre mon test.exe dans Qt simulator le texte sur un nokia !!!!!Comment je dois faire pour que ca ouvre une fenetre nrormale??
Sinon merci pour ce tuto qui est génial


J'ai exactement le même problème...

Que faire ?

Merci
Mon twitter
 
Hors ligne cb750kz # Posté le 23/04/2012 à 17:52:27

Vous avez copié les dll depuis le répertoire simulator. Il faut le faire depuis le répertoire desktop
Hors ligne IsraGab # Posté le 02/05/2012 à 21:43:07

Avis : Très bon

Merci beaucoup pour ce cours.
une Question juste:
Vers la fin, tu commence a parler des *.dll, comment sait on quelle *.dll manque a l'executable?
Merci
Hors ligne Aerendil97 # Posté le 12/05/2012 à 04:24:12
Avatar

Avis : Très bon

Eh bien moi, il m'a fallu QtCored4.dll,QtGuid4.dll, et mingwm10.dll.
Et pour savoir quels *.dll rajouter, j'ai essayer d'exécuter et récupéré 1 à 1 les *.dll.
Vive les maths et vive les ordis !!!
En somme, vive les sciences exactes!!! :soleil:

«Les ordinateurs sont comme les dieux de l’Ancien Testament : avec beaucoup de règles, et sans pitié.», Joseph Campbell
 
Hors ligne nat97 # Posté le 18/05/2012 à 19:13:02

Avis : Très bon

Quand je compile ce qu'il faut pour le 1er bouton Qt refuse(mon ordi perso datant des années 1990 :euh: )et me dit qu'il manque des fichiers
Pourquoi ???

Voir tous les commentaires