Bonjour et bienvenue dans mon tutoriel de création de zAide, un logiciel d’aide à la programmation.
Vous trouverez dans ce tutoriel des informations détaillées qui vous permettront presque de commencer dans la programmation avec Qt.

Pour bien réussir (et pour comprendre surtout) dans la programmation avec Qt, il vaut mieux que vous ayez un minimum de connaissances en programmation en C ou en C++.

Ce cours sera divisé en 5 parties :
• Les outils
• Commençons avec Qt
• Créer zAide
• Approfondissement
• Annexes

Vous êtes prêts ? Alors c’est parti !



Qt

Qt est une bibliothèque multi-plateforme (adapté à tout système d’exploitation) qui vous permettra par la suite de créer des fenêtres comme celle-ci :



Il a été développé par la société Trolltech et permet de faire énormément de programmes, de l’éditeur de texte jusqu’au logiciel de dessin, voire même de faire un IDE (un IDE est un programme permettant de coder vos fichiers contenant le code source de votre programme, ça ne vous rappelle rien ?) ou encore un navigateur Web.

Qt est un logiciel libre si vous faîtes des programmes libres (non payants). Dans le cadre de ce tutoriel, vous pouvez donc le télécharger sans aucun problème. Il est en anglais mais ça ne devrait poser aucun problème pour vous

Télécharger Qt :

Pour télécharger Qt, allez à cette adresse : http://trolltech.com/downloads/opensource#qt-open-source-edition puis dans la partie "Qt Open Source Edition for C++ Developers – Desktop", téléchargez le .exe si vous êtes sous Windows ou le .dmg si vous êtes sous Mac.

Maintenant, il n’y a plus qu’à l’installer !

Note : il faut que vous soyez connectés pour pouvoir installer Qt.

Ouvrez le fichier d’installation et cliquez sur Next jusqu’à ce que vous arriviez ici :



Cochez Download and install minimal MinGW installation : c’est le compilateur qui vous permettra par la suite de compiler vos programmes pour en faire un exécutable : une petite bestiole qui vous ouvre un truc quand vous le chatouillez en lui faisant un double-clique dessus, une fenêtre dans le cas précis.

De nouveau next puis choisissez un miroir pour télécharger MinGW et encore et toujours next.
Patientez un petit peu durant l’installation puis laissez Qt s’installer.
Ouh ! C’est enfin fini ! Ce n’est pas trop tôt !

Vous pouvez regarder les Exemples et les démos si ça vous tente, histoire d’avoir un aperçu des capacités de Qt…

Passons maintenant à l’IDE

Petit entracte avant de passer à cela : IDE veut dire Environnement de Développement. Un IDE combine la gestion du texte (car votre code, c’est du texte) avec la compilation et le débogage (recherche des erreurs).

C’est bien beau d’avoir Qt mais si on n’a pas de logiciel nous permettant de coder, il n’y a pas beaucoup d’intérêt, n’est-ce pas ?

Au menu, nous avons de meilleur le Visual C++ Express Edition à la sauce Qt ou le Code::Blocks farci au Qt, vous préférez quoi ?

Selon moi, Visual et Code::Blocks sont les meilleurs IDE du moment : j’ai testé Dev++ et ces deux là et j’ai préféré Visual, bien que Code::Blocks soit extrêmement près de Visual.

Visual C++ Express Edition

Visual est un IDE créé par Microsoft. La version express est gratuite et en français.
Voici une capture d’écran qui vous dira plus long :



Croyez-moi, vous ne serez pas déçus par ce logiciel : c’est celui avec lequel je code mes programmes.
Son seul défaut est qu’il a besoin d’une clé d’activation pour que vous puissiez l’utiliser (tout ce que vous devez faire, c’est enregistrer gratuitement le logiciel sur Internet, récupérer la clé d’activation et la rentrer dans le menu "?" (Aide).

Vous êtes tentés ?
Vous pouvez le télécharger ici : http://msdn.microsoft.com/fr-fr/express/aa975050.aspx
L’installation étant simple, je n’ai pas besoin de vous en faire des centaines de lignes ^^

Toutefois, à la fin de l’installation, il faut inscrire votre programme : cliquez sur le lien qu’ils vous donnent, connectez-vous avec votre compte Windows Live ID (équivalent du compte Hotmail ou MSN), créez-en un si vous n’en avez pas, puis répondez au questionnaire et, enfin, récupérez la clé d’activation que vous placerez dans le menu "?" puis dans "Inscrire le produit".

Pour créer un projet, allez dans Fichier/Nouveau/Projet ou dans la page d’accueil de Visual : dans Créer, cliquez sur Projet, choisissez ensuite dans la rubrique Win32 "Application Console", tapez le nom de votre projet et indiquez son futur emplacement.

Vous arrivez ici :



Allez dans la rubrique Paramètres de l’application (à gauche) :



Faîtes comme moi : cochez Application console et Projet vide.



Pour commencer le cours, vous devrez créer des fichiers. Pour ça, faîtes un clic droit sur le nom de votre projet ("Rien" dans mon cas) puis Ajouter/Nouvel élément…



Vous arrivez à une fenêtre similaire à celle-ci.

Pour commencer, créez un Fichier C++ (.cpp) et nommez-le, en bas dans la zone où il a écrit < Entrez le nom >, main. Vous n’avez plus qu’à cliquer sur le bouton Ajouter !

Code::Blocks

Code::Blocks est un IDE libre, tout comme Visual C++ Express Edition, il est très facile à manier après deux ou trois utilisations et il est très bon en termes de capacités mais il a un problème par rapport à Visual qui risque de vous détourner de lui : il est en anglais. Personnellement, s’il était en Français, je m’en servirais plus souvent car il a une belle interface et car il est très maniable mais je n’aime pas trop l’anglais car je ne suis pas encore très avancé dans la matière. Comme point positif par rapport à Visual, Code::Blocks marche sur Windows, Linux 32-bit, Linux 64-bit et Mac OS X et qu’il n’a pas besoin de clé d’activation.
Malgré cela, Code::Blocks risque de surpasser Visual un jour…

Pour télécharger cet IDE, allez sur ce lien : http://www.codeblocks.org/downloads.shtml puis dans Download the binary release et prenez codeblocks-8.02mingw-setup.exe ou la version suivante si elle est sortie pour Windows ou choisissez un autre téléchargement si vous êtes sur une autre plateforme que Windows.

Pour l’installation, ne vous embêtez pas, laissez tout par défaut et passez à la suite : la création d’un projet !



Sur le coup, ça saute aux yeux : Create a new project



Vous arrivez ici : choisissez Console Application, puis cliquez sur le bouton Go.



Cliquez sur Next, choisissez C++ dans la page suivante puis vous arrivez là (voir la capture d’écran ci-dessus). Tapez le nom de votre projet, l’emplacement où il sera sauvegardé puis Next.
La page suivante est inutile pour nous : nous avons déjà un compilateur : MinGW de Qt, ça vous dit quelque chose ? Cochez donc n’importe quelle case et cliquez sur Finish !

Pour créer un nouveau fichier : allez dans le menu File/New/File :



Ce n’est pas trop dur, si ?
Après, choisissez C/C++ source et créez un fichier C++ avec le nom main comme pour Visual. Gentiment, il va nous créer un code minimal mais pas d’chance, on ne fait pas réellement du C++ au sens propre du terme, bien qu’on s’en serve quand même beaucoup. Supprimez donc ce code minimal.

Voilà, nous en avons terminé avec cette première partie !
Nous en arrivons donc à la pratique avec les bases puis la réalisation de zAide.
Toutefois, ce tutoriel ne suffira pas à vous faire tout savoir sur Qt mais rassurez-vous, vous ressortirez de ce tutoriel avec des connaissances non négligeables

La partie 1 étant finie, nous passons donc logiquement à la partie 2
Mais quels sont les objectifs de la partie 2 au juste ? Et bien c’est d’apprendre suffisamment de choses pour pouvoir se servir de Qt sans avoir besoin de se creuser trop la tête lors de la création d’un projet.

Voici le premier objectif de cette partie :



C’est bon, vous avez fini d’admirer cette superbe capture d’écran ? Alors on peut y aller…

Tout d’abord, comme dans tous les autres langages de code, il y a un code minimal pour créer une fenêtre avec Qt. Le voici :

Code:

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

Je vous l’expliquerai plus tard. Pour le moment, regardez le code suivant :

Code:

#include <QApplication> #include <QPushButton>   int main(int argc, char *argv[]) { QApplication app(argc, argv);   QPushButton bouton("Voici votre première fenêtre !"); bouton.show();   return app.exec(); }

Créez un nouveau projet à partir de votre IDE, créez un fichier main comme je vous l’ai dit dans la partie 1 et copiez ce code dans le main créé. C’est bon ? Alors passons aux explications

Code:

#include <QApplication> #include <QPushButton>

Alors ici, nous avons les includes :
• "QApplication" : c’est la base de tout programme créé avec Qt. Il sert à permettre à votre fenêtre de s’ouvrir en quelques sortes.
• "QPushButton" : c’est l’include qui permet à votre compilateur (je vous en ai parlé précédemment) de savoir que vous utiliser des boutons dans votre fenêtre. Et oui, le texte "Voici votre première fenêtre !" est en fait le texte d’un bouton (comme Annuler, Oui, Non ou OK par exemple) cliquable : vous pouvez cliquez sur ce bouton.

Après ça, la suite avec les choses qu’on ne voit pas lorsqu’on exécute notre programme :
• "int main(int argc, char *argv[])" : vous avez sûrement déjà vu ce code dans vos cours de C ou de C++, ce n’est donc pas nécessaire que je vous l’explique encore.
• "QApplication app(argc, argv);" : c’est justement le code reprennant l’include "QApplication". Il faut absolument y penser si vous voulez pouvoir ouvrir votre fenêtre sans que le compilateur ne pète un câble et vous envoie des messages comme Error 1 ou Error 2. En bref, cebout de code demande à ce que vous mettiez les informations contenues dans le argc et le arg donnés plus tôt.
• "return app.exec();" : c’est le code pour ouvrir votre fenêtre. Vous devez sûrement l’avoir comprit avec le "exec", non ? En fait, ce code, à l’aide de return et de exec, permet de pouvoir démarrer et de mettre fin à votre programme en clôturant votre code.

Et on finit par ce qui est visible :
• "QPushButton bouton("Voici votre première fenêtre !");" : C’est ici que nous créons le bouton en lui ajoutant du texte entre parenthèses. N’oubliez pas le point-virgule sinon votre compilateur ne va pas se gêner !
• "bouton.show();" : créer votre bouton ne suffira pas pour l’afficher à l’écran. Il faudra donc faire en sorte qu’il soit présent dans votre fenêtre. Dans le cas présent, il prendra la place entière de votre fenêtre même si vous redimensionnez la fenêtre en question.

Bon, je sens que vous en avez un peu assez du baratin et que vous voulez voir des résultats. Et bien c’est parti !

Sauvegardez toutes les modifications que vous avez pu effectuer dans le code que je vous ai donné et allez à l’emplacement de votre projet (lorsque que vous l’avez créé, vous avez donné un emplacement : allez-y).



Pour moi, ça donne ça par exemple (et ça ne vous avancera pas à grand-chose de savoir que je m’appelle Louis ) et ça donnera un truc dans le genre pour ceux qui utilisent Vista ou Xp.



Cliquez sur un espace vide du cadre où est affiché le chemin de votre projet de manière à obtenir la même chose que moi (capture ci-dessus). Copiez ce qui est surligné. Allez ensuite dans le menu Démarrer/Tous les programmes/Qt by Trolltech v.x.y.z (Open Source) puis cliquez sur Qt x.y.z Command Prompt.

Note : les lettres x, y et z remplacent des chiffres : vous n’êtes pas forcément dans la même version que moi.

Une console (fenêtre uniquement en noir et blanc pour Windows) s’est ouverte. Tapez cd chemindevotreprojet dedans et appuyez sur la touche Enter de votre clavier pour valider. Pour moi, ça donne ça :



Tapez ensuite qmake -project, qmake puis make. Dans l’ordre, ça me donne ça :



Regardez à nouveau votre emplacement de projet. Des fichiers et des dossiers sont apparus !
Allez dans le dossier nommé release et ajoutez les fichiers mingwm10.dll, QtCore4.dll et QtGui4.dll qui se trouvent par défaut ici dans C:\MinGW\bin et C:\Qt\4.3.2\bin.

Vous pouvez maintenant double cliquez sur votre exécutable et voici ce que vous obtenez :



C’est tout de même long de créer une fenêtre, non ?
Ne vous inquiétez pas, ce n’est pas la mort non plus et vous allez aller de plus en plus vite avec l’habitude…

Maintenant que nous en avons finit avec cette première fenêtre, nous pouvons passer à l’étape d’au-dessus, les fenêtres avec menus comme vous avez sûrement l’habitude d’en voir.
Nous allons donc créer d’ici peu ce genre de fenêtres mais tout d’abord, nous allons voir les Signaux et les Slots afin de nous préparer à cette étape.

Mais qu’est-ce que c’est que les Signaux ? Et les Slots ?
Et bien c’est très simple : quand vous cliquez dans un menu sur Quitter, vous émettez un Signal en cliquant qui appelle un événement qui déclenche la fermeture de l’application : le Slot.

En résumé :
On clique sur un menu puis sur Quitter, un Signal est envoyé à un Slot qui ferme le programme.
Pas trop dur ?

Les Signaux et les Slots ne s’arrêtent pas qu’ici, ne vous inquiétez pas
Il y a énormément de possibilités d’utilisation de ces petites bestioles, vous n’aurez pas finit de les utiliser dans vos programmes !

Pour suivre les exercices, nous aurons besoin de se servir de trois fichiers et donc plus d’un seul comme dans l’étape précédente (que nous avions nommé main.cpp).

Nous aurons besoin de ces fichiers :
• main.cpp
• FenPrincipale.cpp
• FenPrincipale.h

Vous vous demandez sûrement ce que c’est que le fichier à l’extension .h non ?
Et bien c’est un fichier où nous définirons plus tard nos Slots (et de temps à autre nos pointeurs si une petite flemme nous prend lors de l’écriture d’un fichier à l’extension .cpp) de manière à ce qu’ils fonctionnent sans que le compilateur hurle à la mort
En bref, nous y définissons les prototypes de nos fonctions pour que le compilateur ne vous sorte pas un message dans le genre :
FenPrincipale.cpp:74: error: no `void FenPrincipale::ouvrirAbout()' member function declared in class `FenPrincipale'.

Mais comment pouvons-nous le créer ce fichier ?
Tout d’abord, nous allons nommer ce fichier FenPrincipale.h (n’écrivez pas le .h lorsque vous irez créer votre fichier, ce serait inutile).
Nous le créons de la même manière que le main.cpp, la seule différence étant que vous devez choisir de créer un fichier .h et non .cpp comme par exemple dans ces deux captures d’écran :


Capture d’écran sous Code::Blocks : choisissez C/C++ header puis continuez comme le main.cpp


Capture d’écran sous Visual : choisissez Fichier d’en-tête (.h) et continuez comme pour le main.cpp

Maintenant que vous avez créé votre header (fichier .h), vous pouvez créer encore un fichier : le FenPrincipale.cpp et c’est finit pour la création des fichiers



Nous arrivons donc à l’étape ci-dessus (sous Visual)…

Il faut maintenant garnir nos fichiers de manière à créer de superbes fenêtres utilisant les signaux et les slots.

Dans le main.cpp nous mettons donc le code suivant :

Code:

#include <QApplication> #include <QTranslator> #include <QLocale> #include <QLibraryInfo> #include "FenPrincipale.h" int main(int argc, char *argv[]) {    QApplication app(argc, argv);     QString locale = QLocale::system().name();    QTranslator translator; translator.load(QString("qt_") + locale, QLibraryInfo::location(QLibraryInfo::TranslationsPath));    app.installTranslator(&translator);        FenPrincipale fenetre;    fenetre.show();    return app.exec(); }

Ah, il y a des nouveautés dans ce code !
Bien vu, au milieu du code se trouve de quoi traduire votre programme. Je sais, vous créez des programmes en français mais Qt est en anglais je vous rappelle donc lorsque vous allez créer une fenêtre avec les boutons prédéfinis Oui et Non, vous allez avoir un problème : il y aura écrit Yes et No. C’est donc pour cela que nous rajoutons ces quelques lignes ainsi que les trois includes suivants :

Code:

#include <QTranslator> #include <QLocale> #include <QLibraryInfo>

Je vous conseille vivement de prendre l’habitude de mettre ceci dans vos codes : c’est plus agréable de créer des fenêtres tout en français ou tout en anglais et non avec un bouillon de culture mélangeant le français et l’anglais.

On a aussi un autre bout de code qui est très important :

Code:

FenPrincipale fenetre;

En soi, c’est plutôt logique : dans l’étape précédente (avec la création de votre première fenêtre) nous avons créé un bouton qui constituait seul la fenêtre. Ici nous avons plusieurs éléments donc nous utilisons la technique ci-dessus pour pouvoir y mettre nos Widgets (éléments).

Notez aussi que j’ai rajouté une include désignant le fichier FenPrincipale.h car le compilateur ne peut pas inventer que votre programme se sert de ce fichier

Attaquons maintenant à notre FenPrincipale.cpp : nous y mettrons pour commencer un bouton ne prenant pas toute la place de la fenêtre. Ce bouton quittera le programme (ou l’application comme vous voulez) dès que l’utilisateur cliquera dessus.
Voici son code que nous verrons ensemble tout de suite après…

Code:

#ifndef HEADER_FENPRINCIPALE #define HEADER_FENPRINCIPALE #include <QtGui> #include <QObject> class FenPrincipale : public QMainWindow {    Q_OBJECT        public:       FenPrincipale();    public slots:       void ouvrirApropos();    private:        }; #endif

Passons aux explications

Code:

#ifndef HEADER_FENPRINCIPALE #define HEADER_FENPRINCIPALE

Le ifndef permet d’empêcher les inclusions multiples, c’est à dire qu’il permet d’empêcher que le fichier .h soit définit dans un autre fichier .h de manière à éviter que votre compilateur n’ait à chercher où est définit ce fichier.

Petit exemple :
• Le fichier FenPrincipale1.h est inclus dans le fichier FenPrincipale2.h
• Le fichier FenPrincipale2.h est inclus dans le fichier FenPrincipale3.h
• Le fichier FenPrincipale3.h est inclus dans le fichier FenPrincipale1.h

Le compilateur s’emmêle les pinceaux dans la compilation :
Le premier header est inclus dans le second qui est inclus dans le troisième qui est inclus dans le premier qui est inclus dans le second etc…

Et le define sert justement à définir le fichier.

Après cela, nous avons public où se trouve FenPrincipale() qui y est défini, private slots et private dans lesquels vous mettrez vos fonctions par la suite.

Il ne reste plus que le main.cpp que voici :

Code:

#include "FenPrincipale.h" FenPrincipale::FenPrincipale() {    setFixedSize(400, 200);    setWindowTitle("Les signaux et les slots");        QPushButton *boutonQuitter = new QPushButton("Quitter", this);    boutonQuitter->setGeometry(50, 75, 300, 50);    connect(boutonQuitter, SIGNAL(clicked()), qApp, SLOT(quit())); }

Des explications s’imposent…
Pour le plus simple :
• On a commencé par inclure FenPrincipale.h dans le fichier pour que le compilateur ne s’emmêle pas les pattes.
• Puis dans le FenPrincipale.h nous avons fait en sorte que la fenêtre ne soit pas redimensionnable avec setFixedSize(400, 200) : la fenêtre sera donc de dimensions 400x200.
• Juste après, nous avons donné un nom à notre fenêtre comme nous l’avons fait précédemment.
• Nous avons aussi créé un bouton se nommant Quitter. N’oubliez pas le this entre les parenthèses de manière à ce que votre bouton se situe dans la fenêtre et de manière à ce que le compilateur n’en profite pas pour y aller dur sur les insultes
• Nous utilisons la méthode setGeometry pour donner toutes les dimensions du bouton Quitter. C’est fait de la manière suivante : boutonQuitter->setGeometry(abscisse, ordonnée, largeur, hauteur). Autrement dit, nous mettons boutonQuitter-> pour dire que setGeometry s’applique à ce bouton puis nous utilisons les paramètres de cette méthode.

Pour finir, nous passons au signal :

Code:

connect(boutonQuitter, SIGNAL(clicked()), qApp, SLOT(quit()));

Dans l’ordre :
• connect permet d’établir la connexion entre le signal et son slot. Ce n’est pas exactement ça mais c’est la façon la plus simple de comprendre ce que c’est avec Qt.
• A l’intérieur des parenthèses se trouve boutonQuitter qui est le pointeur associé à son bouton Quitter qui va émettre le signal.
• SIGNAL(clicked()) est le type de déclanchement du signal : il aura lieu ici si l’utilisateur clique sur le bouton. Dans le cas des menus, ce ne serait pas clicked() qui est propre aux boutons mais triggered() qui est propre aux menus.
• qApp : c’est un pointeur créé automatiquement par Qt. Il sert aux slots prédéfinis comme celui que nous utilisons. Si on créait notre slot, on utiliserait this et non qApp.
• SLOT(quit()) : c’est le slot qui sera utilisé si l’utilisateur déclenche le signal. quit() est prédéfinit par Qt, ce n’est donc pas nécessaire d’expliquer au compilateur comment quitter une application.

Juste avant de compiler, retirez le "void ouvrirApropos" du header FenPrincipale.h de manière à éviter une erreur de compilation. Je vous préviendrai quand vous devrez le remettre
Vous n’avez plus qu’à compiler comme je vous l’ais appris et, après avoir double-cliqué sur l’exécutable, une fenêtre apparaît sous vos yeux ébahis :



Essayez de cliquer sur le bouton Quitter.
Que se passe-t-il ? Et bien votre fenêtre s’est fermée !

Récapitulons à l’aide d’un de mes schémas :



C’est bon, vous avez tout compris ? Si votre réponse est non, vous pouvez toujours relire le tutoriel, ça ne pourra que vous aider

Note : c’est exactement la même chose pour ouvrir le A propos de Qt : remplacez quit() par aboutQt() et c’est tout. Vous pouvez le faire tous seuls, non ?

Attaquons maintenant une partie plus difficile des signaux et des slots : les slots personnalisés (c’est nous qui allons les créer).

Remettez dans le fichier .h le "void ouvrirApropos()". Le void ne devrait pas vous être étranger si vous vous souvenez bien de vos cours en C…