Skip to Content

Atelier Programmation C++ avec Qt

Préambule

Le but de cet atelier est de montrer les facilités apportées à la programmation d’une interface graphique utilisateur (GUI) par un tool-kit tel que Qt.

« code less, create more » nous dit Trolltech, la société norvégienne créatrice et distributrice de cet outil (Trolltech : http://www.trolltech.com/qt).

Prérequis

Connaissances :

Pour suivre l’atelier, quelques connaissances de la programmation objet (quelque soit le langage) seraient utiles, mais pas absolument indispensables.

Ceux qui souhaiteraient en savoir davantage sur le C++ peuvent lire un des nombreux livres existant sur le sujet.

Installation :

Pour exécuter les démonstrations, il faut avoir au préalable installé Qt 4.x.x version Open Source pour Linux. (à partir des sources : temps de compilation relativement long, ou à partir de paquets rpm - voir http://www.trolltech.com/qt).

N’oubliez pas d’ajouter les lignes suivantes :

PATH=/usr/local/Trolltech/Qt-4.2.1/bin :$PATH
export PATH

à votre fichier (caché) profile (ou login , ou bash_profile selon votre distrbution) afin de pouvoir exécuter les commandes de compilation des programmes de démonstration.

Présentation de l’atelier

L’atelier comportera plusieurs étapes successives, de la plus simple à la plus compliquée. Chacun pourra compiler, s’il le désire, les programmes correspondants et voir le résultat de leur exécution.

Première étape : le projet demo1

Dans cette première étape on crée une application très simple et on découvre les outils fournis par Qt pour gérer les projets.

Le listing du fichier main.cpp

Le projet demo1 de cette première étape comporte un seul fichier main.cpp placé dans le répertoire demo1 (le nom du projet = le nom du répertoire contenant les fichiers du projet = le nom du fichier exécutable qui sera créé lors de la compilation)

Listing du fichier main.cpp  :

(les numéros de lignes ont été rajoutés pour faciliter les commentaires, mais ils ne font pas partie du listing)

1 #include

2

3 class DemoWindow : public QMainWindow

4 {

5 public:

6    DemoWindow();  //constructeur

7    QAction *exitAct;

8    QMenu *fileMenu;

9 };

10

11 DemoWindow::DemoWindow()  //constructeur

12 {

13    exitAct = new QAction(tr("E&xit"), this);

14    exitAct->setShortcut(tr("Ctrl+Q"));

15    exitAct->setStatusTip(tr("Exit the application"));

16    connect(exitAct, SIGNAL(triggered()), this, SLOT(close()));

17

18    fileMenu = menuBar()->addMenu(tr("&File"));

19    fileMenu->addAction(exitAct);

20

21    statusBar()->showMessage(tr("Ready"));

22 }

23

24

25 int main(int argc, char *argv[])

26 {

27    QApplication app(argc, argv);

28    DemoWindow mainWin;

29    mainWin.show();

30    return app.exec();

31 }

Commentaires :

Ligne 1 : on incorpore la bibliothèque QtGui à notre projet.

Lignes 3 à 9 : déclaration de la classe DemoWindow dérivée de QMainWindow, elle hérite de ce fait de toutes les propriétés de QmainWindow (barre de titre, barre de menus,.barre de statut, barre d’outils etc...). Elle contient uniquement son constructeur, un pointeur sur une instance de la classe QAction et et un pointeur sur une instance de la classe Qmenu. (tous les objets - instances - dont le nom commence par Q sont des objets définis par Qt et qui se trouvent dans les bibliothèques Qt auxquelles on fait appel dans les instructions #include).

Lignes 11 à 22 : le constructeur de la classe DemoWindow.

On crée ligne 13 l’objet exitAct (qui pourra être utilisé dans un menu et une barre d’outils), ligne 14 on définit ses touches de raccourcis et ligne 15 le message qui apparaîtra dans la ligne de statut lorsque la ligne de menu correspondante sera sélectionnée ou survolée par la souris.

Puis, pour que cette Qaction soit utilisable, on utilise ligne 16 le mécanisme SIGNAL/SLOT propre à Qt (Ce mécanisme est décrit en détails dans l’Assistant de Qt) : le signal « triggered » est émis par l’objet exitAct lorsque l’utilisateur clique sur la commande « Exit », ou bien s’il frappe « Ctrl+Q » au clavier. A la réception de ce signal, notre application sait qu’il faut l’associer à une fonction membre très précise qui est le slot « close », et l’exécution de cette fonction provoquera la fermeture de l’application.

Ligne 18 on ajoute le menu « File » à la barre de menu et ligne 19 on ajoute l’action « exitAct » au menu « File ».

Enfin, on termine en affichant le message « Ready » dans la barre de statut (ligne 21).

Lignes 25 à 31 : la fonction main.

Tout programme C ou C++ doit contenir une fonction main : c’est elle qui est exécutée en premier, et elle doit être placée dans le fichier appelé obligatoirement main.cpp pour que le compilateur sache la trouver (c’est la raison pour laquelle le fichier unique de notre projet demo1 s’appelle main.cpp et non pas demo1.cpp par exemple).

Cette fonction contient les quatre lignes de code suivantes :

ligne 27 création d’une instance app de QApplication

ligne 28 création d’une instance mainWin de notre classe DemoWindow

ligne 29 affichage de mainWin

ligne 30 exécution de l’instance app, avec retour d’un code indiquant si tout s’est bien passé !

Fichier de projet et fichier Makefile

Qt fournit l’outil « qmake » qui permet de créer facilement le fichier de projet et le fichier Makefile.

Ouvrir une console et se placer dans le répertoire demo1.

Exécuter la commande qmake -project  : le fichier de projet demo1.pro est créé en fonction des fichiers contenus dans le répertoire du projet. Examiner le contenu de ce ficher.

Exécuter ensuite la commande qmake  : le fichier Makefile est créé en fonction des éléments contenus dans demo1.pro.

Compilation :

Exécuter la commande make  : le fichier exécutable demo1 est créé.

Exécution :

Exécuter la commande demo1  : l’application qui vient d’être créée est lancée. Il s’agit de l’affichage d’une simple fenêtre avec menus et barre de statut, qui peut être agrandie, réduite, mise en icône, et bien entendu fermée de diverses façons.

Deuxième étape

Pour cette deuxième étape, on va enrichir notre application en la dotant d’un éditeur de textes.

Le listing du fichier main.cpp modifié

Voici ci-après le listing du fichier main.cpp modifié (on peut soit modifier le fichier main.cpp du répertoire demo1 soit utiliser le fichier se trouvant dans le répertoire demo2 qui contient les modifications) :

#include

class DemoWindow : public QMainWindow

{

public:

   DemoWindow();  //constructeur

   QAction *exitAct;

   QMenu *fileMenu;

   QTextEdit *editeur;  //demo 2

};

DemoWindow::DemoWindow()  //constructeur

{

   exitAct = new QAction(tr("E&xit"), this);

   exitAct->setShortcut(tr("Ctrl+Q"));

   exitAct->setStatusTip(tr("Exit the application"));

   connect(exitAct, SIGNAL(triggered()), this, SLOT(close()));

   fileMenu = menuBar()->addMenu(tr("&File"));

   fileMenu->addAction(exitAct);

   editeur=new QTextEdit;  //demo 2

   setCentralWidget(editeur);  //demo 2

   resize(400, 300); //demo 2

   statusBar()->showMessage(tr("Ready"));

}

int main(int argc, char *argv[])

{

   QApplication app(argc, argv);

   DemoWindow mainWin;

   mainWin.show();

   return app.exec();

}

Commentaires :

Dans la déclaration de la classe DemoWindow on déclare la variable editeur qui est un pointeur sur un objet QtextEdit en ajoutant la ligne :

QTextEdit *editeur ;

Puis dans le constructeur de DemoWindow on crée l’éditeur en ajoutant la ligne :

editeur=new QtextEdit ;

et on lui donne le statut de Widget central :

setCentralWidget(editeur) ;

enfin, pour voir un peu mieux ce que l’on fait, on impose les dimensions de la fenêtre (dimensions qu’on pourra modifier comme on veut lors de l’exécution) :

resize(400, 300) ;

Exécution :

Si vous avez modifié directement le fichier du répertoire demo1, il suffit de l’enregistrer et d’exécuter make . (le fichier de projet demo1.pro et le fichier Makefile sont inchangés)

Si vous avez choisi d’utiliser le répertoire demo2 contenant le fichier déjà modifier, il faut exécuter la séquence complète des commandes :

qmake -project
qmake
make

pour créer le fichier de projet demo2.pro et le fichier Makefile correspondant.

Lancez l’exécution de la nouvelle application : grace à l’ajout de seulement quatre lignes, notre application est devenue un éditeur de textes doté des propriétés classiques des éditeurs de textes (essayez un click droit de la souris pour voir).

Troisième étape : le projet demo3

Les projets demo 1 et 2 ne comportaient qu’un seul fichier, appelé obligatoirement main.cpp. Pour des projets plus importants, il est nécessaire de diviser les listings entre plusieurs fichiers. C’est ce que nous allons faire dans cette 3ème étape, même si la taille du fichier ne le justifie pas.

Les fichiers du projet, leur listing et les commentaires

Le fichier d’en-tête demowindow.h

Ce fichier regroupe les déclarations des classes utilisées dans le projet et les prototypes des fonctions (Il ne peut en aucun cas contenir le corps des fonctions).

#include

class QAction;

class QMenu;

class QTextEdit;

class DemoWindow : public QMainWindow

{

public:

   DemoWindow();  //constructeur

   QAction *exitAct;

   QMenu *fileMenu;

   QTextEdit *editeur;  //demo 2

};

Commentaires :

La classe DemoWindow étant dérivée de QmainWindow, on doit placer dans notre fichier d’en-tête la première instruction #include

Nous déclarons à l’avance les classes Qaction, Qmenu et QtextEdit afin de pouvoir utiliser des références à des objets de ce type dans notre classe DemoWindow.

La déclaration de la classe DemoWindow est inchangée.

Le fihier source demowindow.cpp

#include

#include "demowindow.h"

DemoWindow::DemoWindow()  //constructeur

{

   exitAct = new QAction(tr("E&xit"), this);

   exitAct->setShortcut(tr("Ctrl+Q"));

   exitAct->setStatusTip(tr("Exit the application"));

   connect(exitAct, SIGNAL(triggered()), this, SLOT(close()));

   fileMenu = menuBar()->addMenu(tr("&File"));

   fileMenu->addAction(exitAct);

   editeur=new QTextEdit;  //demo 2

   setCentralWidget(editeur);  //demo 2

   resize(400, 300); //demo 2

   statusBar()->showMessage(tr("Ready"));

}

Commentaires :

Les deux premières lignes :

#include  :

incorpore la bibliothèque QtGui dans laquelle le compilateur trouvera tout ce qui dépend deQt, y compris les classes que nous avons prédéclarées (QAction etc...)

#include "demowindow.h" : incorpore les déclarations contenues dans notre ficher d’en-tête.

Ensuite on trouve le constructeur de DemoWindow, inchangé.

Le ficher source main.cpp

#include

#include "demowindow.h"

int main(int argc, char *argv[])

{

   QApplication app(argc, argv);

   DemoWindow mainWin;

   mainWin.show();

   return app.exec();

}

Commentaires :

Les deux premières lignes :

#include  : incorpore la déclaration de QApplication
#include "demowindow.h" : incorpore les déclarations contenues dans

notre ficher d’en-tête.

Ensuite on retrouve le corps de la fonction main, inchangé.

Compilation et exécution

Ouvrir une console et se placer dans le répertoire demo3.

Exécuter la commande qmake -project  : le fichier de projet demo3.pro est créé en fonction des fichiers contenus dans le répertoire du projet. Examiner le conteu de demo3.pro.

Exécuter ensuite la commande qmake  : le fichier Makefile est créé en fonction des éléments contenus dans demo3.pro.

Exécuter la commande make  : le fichier exécutable demo3 est créé.

Exécuter la commande demo3  : l’application qui vient d’être créée est lancée.

Suites possibles

On peut envisager de réaliser d’autres ateliers pour aller plus loin :

  •  créer un dialogue avec Qt Designer et voir comment on peut l’utiliser dans notre application ;
  •  utiliser Qt Linguist pour traduire les textes des menus et des messages ;
  •  etc...