Document du 26/03/04 - Retrouvez la version la plus récente sur
http://www.up.univ-mrs.fr/wcppCentre Informatique pour
les Lettres et les Sciences
Humaines
Apprendre à programmer en C++ avec Qt
TD 1 : Première rencontre avec
KDevelop et Qt Designer
1 - Créer un programme sans savoir programmer ?.................................................................2
La complexité des interfaces graphiques.........................................................................2
Aides à la création d'applications ...................................................................................2
Notre environnement de travail ......................................................................................3
2 - Préparatifs ........................................................................................................................3
Notion de projet .............................................................................................................3
Création du projet .........................................................................................................3
Création du fichier "user interface" ................................................................................5
3 - Création du programme ....................................................................................................5
Première version : affichage d'un message ......................................................................6
Deuxième version : affichage numérique de la position d'un curseur...............................7
Troisième version : introduction d'un quadrant ..............................................................9
4 - Interrompre et reprendre le travail sur un projet ................................................................9
Contenu du dossier projet..............................................................................................9
Reprendre le travail .......................................................................................................9
5 - Exercice...........................................................................................................................9
Les documents décrivant les TD mêlent des considérations générales qui vous aident à
comprendre la logique des actions décrites et des instructions qui exigent que vous fassiez
quelque chose. Pour vous permettre de distinguer facilement ces deux types d'informations (et,
éventuellement, de bien repérer où vous en êtes), les instructions sont suivies d'une "case à
cocher" vierge. Si vous travaillez avec une version imprimée du TD, vous pouvez donc cocher
ces cases à mesure que vous effectuez les actions requises.
Lorsqu'une commande doit être exécutée, elle est surlignée en mauve, alors que les indications
relatives à l'endroit où elle se trouve sont surlignées en bleu. Par exemple :
Choisissez la commande Quitter dans le menu Fichier .
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 2/9
J-L Péris - 26/03/04
Comme tous les suivants, ce premier TD a pour _object_if de vous permettre de créer un petit
programme illustrant l'utilisation concrète des notions introduites dans la Leçon
correspondante.
1 - Créer un programme sans savoir programmer ?
Nous avons, dans la Leçon 1, donné de la création d'un programme une de_script_ion qui est
résumée dans le tableau suivant :
Nom de l'opération Produit Responsable _object_if
Rédaction Texte source Programmeur
(être humain)
Décrire la procédure à suivre pour parvenir
au résultat souhaité
Compilation Code objet Compilateur
(programme)
Traduire le texte source en une suite
d'instructions exécutables par le
processeur visé.
Edition de liens Programme
exécutable
_link_er
(programme)
Greffer sur le code objet tout ce qui lui
manque pour devenir un programme
exécutable dans le contexte visé.
Les deux dernières opérations (compilation et édition de liens) sont effectuées par des
programmes, et il nous suffira donc d'apprendre à lancer ceux-ci. La rédaction du texte source,
en revanche, semble poser un problème actuellement insurmontable : c'est vous qui devriez en
être responsable, et la Leçon 1 n'a pas même commencé à vous présenter le moindre rudiment
de C++, langage dans lequel ce texte doit être écrit.
La complexité des interfaces graphiques
Pour comprendre pourquoi ce problème ne se pose pas réellement, il vous faut réaliser que les
"petits" programmes que nous allons créer au cours des différents TD sont en fait d'une
complexité monstrueuse. A l'exception du TD2, ils se présentent en effet sous la forme de
fenêtres affichées à l'écran et laissent à l'utilisateur différentes possibilités d'interaction, telles
que le déplacement de la fenêtre en question sur l'écran, l'utilisation simultanée d'un autre
programme, le choix arbitraire de l'ordre d'utilisation des éléments proposés dans la fenêtre
(boutons, menus, etc.), ou la copie d'une information présentée dans la fenêtre en vue d'un
collage dans un document géré par une autre application. De plus, ces programmes respectent
les choix visuels généraux faits par l'utilisateur (couleur des fenêtres, taille de la police utilisée
dans les menus, etc.).
Même en s'en tenant aux quelques fonctionnalités citées ci-dessus, la réalisation du moindre
programme exigerait des efforts considérables (et quelques années d'études préalables) si nous
devions assurer nous-mêmes intégralement la rédaction du texte source.
Aides à la création d'applications
Pour contourner cette difficulté, les programmeurs utilisent différents types d'artifices :
- Les librairies d'interface graphique sont des collections de séquences de code exécutable qui
assurent non seulement la représentation à l'écran des éléments d'interface communément
utilisés (fenêtres, boutons, zones d'édition, etc.), mais également le fonctionnement
élémentaire de ces éléments (déroulement des menus, détection du fait que l'utilisateur clique
sur un bouton, etc.). Un programmeur disposant d'une telle librairie n'a donc pas à rédiger
cette partie du programme : il lui suffit, pour pouvoir disposer des fragments de code
contenus dans la librairie en question, de préciser au _link_er que celle-ci doit être liée (c'est-àdire
incluse dans le programme exécutable).
- Les éditeurs d'interfaces se présentent comme des sortes de logiciel de dessin permettant de
disposer à l'aide de la souris les différents éléments composant, par exemple, une fenêtre de
dialogue. Ce qui les rend précieux est leur capacité à générer le texte source correspondant
au dessin réalisé par le programmeur (ce texte source fait habituellement appel à une librairie
graphique). Un programmeur disposant d'un éditeur d'interface n'a donc pas à rédiger la
partie du programme qui crée une fenêtre et y dispose les divers boutons, zones d'édition et
autres menus nécessaires. Il lui suffit de compiler le texte généré par l'éditeur d'interface et
d'indiquer au _link_er que le code objet correspondant doit être lié.
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 3/9
J-L Péris - 26/03/04
- Les générateurs d'applications sont des logiciels capables, à des degrés divers, de créer des
portions de texte source correspondant à des parties du programme allant au-delà de la
gestion des éléments de l'interface utilisateur. Dans sa version la plus rudimentaire, ce type
d'outils n'est pas à proprement parler un générateur d'applications, mais un simple dispositif
de choix entre différents squelettes d'applications préfabriqués1 assurant certaines
fonctionnalités standard élémentaires. Le rôle du programmeur est ensuite d'habiller ce
squelette, pour donner au programme les caractéristiques qui justifient son existence.
Notre environnement de travail
Le compilateur et le _link_er que nous allons utiliser sont ceux inclus dans l'environnement de
développement KDevelop. En plus de ces programmes, nous allons utiliser Qt Designer 3.1, qui
est à la fois un éditeur d'interfaces (utilisant la librairie Qt) et un petit générateur
d'applications2. C'est l'utilisation de Qt Designer qui va vous permettre de réaliser ce premier
TD sans pratiquement écrire vous mêmes la moindre ligne de C++.
2 - Préparatifs
La procédure décrite ci-dessous suppose que KDevelop et la librairie Qt soient disponibles.
Cette condition est normalement remplie sur les machines mises à votre disposition par le
Centre Informatique pour les Lettres et les Sciences Humaines.
Notion de projet
A la différence d'autres activités utilisant un ordinateur (le traitement de textes, par exemple),
la création d'un programme implique la mise en oeuvre de plusieurs programmes différents
(éditeurs, compilateur, _link_er, etc.) travaillant sur un ensemble de fichiers (textes sources,
librairies, etc.). L'objet sur lequel nous allons travailler n'est donc pas un simple fichier (comme
celui représentant le document en cours de rédaction, dans le cas du traitement de texte) mais
un projet. Concrètement, un projet se présente comme une collection de fichiers
habituellement regroupés dans un dossier portant le même nom que le projet. L'un de ces
fichiers porte l'extension .kdevprj et permet à KDevelop de "savoir quoi faire" des différents
autres fichiers du projet. C'est l'ouverture de ce fichier qui correspond à l'ouverture du projet.
Si vous souhaitez modifier une lettre que vous avez écrite avec OpenOffice, par exemple, vous
allez ouvrir le fichier maLettre.doc dans lequel vous avez sauvé votre texte. Si vous souhaitez
modifier un programme que vous avez créé avec KDevelop, il n'est en revanche pas question
d'ouvrir le fichier monProgramme qui contient ce programme. Cette ouverture déclencherait
en effet l'exécution du programme en question, ce qui ne vous donnerait aucun moyen de le
modifier. Pour améliorer un programme, il faut au contraire ouvrir le projet qui a débouché
sur sa création, modifier le texte source, puis relancer le compilateur et le _link_er pour
fabriquer un nouveau fichier monProgramme (remarquez qu'il n'est donc pas nécessaire de
disposer du fichier contenant l'ancienne version).
Création du projet
Lancez KDevelop (Démarrer / Applications /
Développement / Environnements de développement) .
Dans KDevelop, sélectionnez la commande "New" du
menu "Project" .
Dans le dialogue qui s'ouvre alors (cf. ci-contre),
sélectionnez l'option "KDE Mini", puis cliquez sur le
bouton "Next" .
Un projet "KDE Mini" présente une architecture
agréablement simple. En contrepartie de cette
simplicité, quelques manoeuvres préalables vont
être nécessaires pour que notre programme se
présente à l'écran sous la forme d'un dialogue…
Le dialogue "Nouveau projet"
1 Ce qu'on appelle, en anglais, "an application _frame_work".
2 Qt Designer et la librairie Qt sont des produits développés par la société Trolltech.
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 4/9
J-L Péris - 26/03/04
Dans la fenêtre suivante, tapez "TD01" dans la zone
d'édition "Project name:" .
Décochez toutes les options proposées, à l'exception de
"generates source and headers", puis cliquez sur le
bouton "Create" .
Après quelques instants de traitement, le texte de_script_if
qui apparaît progressivement devrait se conclure par le
mot "READY". Cliquez alors sur le bouton "Exit" .
Repérez l'explorateur d'arborescences et activez-en l'onglet
"Classes" (cf. image ci-contre) .
Si l'explorateur d'arborescences n'est pas visible, sélectionnez
la commande "Tree Tools View" du menu "Views" et, dans le
sous-menu qui apparaît alors, choisissez "All Tree Tools View".
Double-cliquez sur l'entrée TD01 .
Le fichier qui s'ouvre alors contient, après quelques lignes introductives, le texte reproduit cidessous
(cadre de gauche) :
#include
#include
/** TD01 is the _base_ class of the project */
class TD01 : public QWidget
{
Q__object_
public:
/** construtor */
TD01(QWidget* parent=0, const char *name=0);
/** destructor */
~TD01();
};
#include
#include
#include "dialogue.h"
/** TD01 is the _base_ class of the project */
class TD01 : public dialogue
{
Q__object_
public:
/** construtor */
TD01( );
/** destructor */
~TD01();
};
Modifiez-le pour qu'il devienne celui présenté dans le cadre de droite .
Cliquez avec le bouton droit sur n'importe quelle partie du texte que vous venez de modifier et,
dans le menu local qui apparaît alors, choisissez "Switch Header/Source" .
Le fichier qui s'ouvre alors contient, après quelques lignes introductives, le texte suivant :
#include "td01.h"
TD01::TD01(QWidget *parent, const char *name) : QWidget(parent, name)
{
}
TD01::~TD01()
{
}
Modifiez-le pour qu'il devienne :
#include "td01.h"
TD01::TD01( )
{
}
TD01::~TD01()
{
}
Ces modifications conduisent notre programme à utiliser comme fenêtre principale le
dialogue que nous allons maintenant créer. (La fenêtre principale d'un programme est celle
qui s'ouvre automatiquement lorsqu'on lance le programme.)
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 5/9
J-L Péris - 26/03/04
Création du fichier "user interface"
Dans le menu "File", choisissez la commande "New" .
Dans le dialogue qui s'ouvre alors, choisissez l'option
"Qt Designer File (*.ui)" et, dans la zone d'édition
"Filename:", tapez "dialogue.ui" .
Cliquez ensuite sur le bouton "OK" .
A la question "Do you want to load it as ASCII file?",
répondez en cliquant sur le bouton "No" .
Si KDevelop ne "sait pas" déjà avec quel logiciel vous
voulez éditer les fichiers .ui, il vous propose le dialogue
représenté ci-contre. Désignez alors Qt Designer ,
cochez la case "Remember application association for this
type of file" et cliquez sur le bouton "OK" .
Lors de la prochaine création d'un projet sur cette
machine (et sous cette session), la création d'un .ui
déclenchera directement l'ouverture de Qt Designer.
La création du fichier .ui à partir de KDevelop permet
d'obtenir que ce fichier soit intégré au projet, c'est à
dire d'automatiser la prise en compte du travail
effectué avec Qt Designer lors de la compilation du
programme.
Bien que Qt Designer s'ouvre alors, il n'a pas encore
"compris" ce que nous souhaitons faire.
Un premier dialogue est proposé (cf. ci-contre),
dans lequel il faut indiquer que c'est un
"Dialog" que nous voulons créer , puis
cliquer sur le bouton "OK" .
Qt Designer procède ensuite à la création d'un
dialogue vide, mais ce dialogue n'a pas encore
de lien avec le fichier .ui que nous avons créé
avec KDevelop.
Dans le menu "File" de Qt Designer, choisissez
la commande "Save as…" .
Naviguez jusqu'au dossier td01/td01 (dans
votre dossier personnel) et désignez le fichier
dialogue.ui qui doit déjà s'y trouver .
C'est le fichier (vide) que KDevelop à créé.
Donnez votre accord pour l'écrasement de ce
fichier .
3 - Création du programme
Pour limiter le nombre des fenêtres proposées et rendre moins intimidante notre première
rencontre avec Qt Designer, utilisez la commande Views du menu Window pour désélectionner
toutes les propositions, à l'exception de "Property Editor/Signal Handler" .
La scène qui vous est offerte devrait alors ressembler plus ou moins à l'image suivante :
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 6/9
J-L Péris - 26/03/04
L'interface utilisateur de Qt Designer
La fenêtre actuellement intitulée "Form1" est une représentation de l'interface que le
programme que nous allons créer proposera à ses utilisateurs. C'est donc dans cette fenêtre
que nous allons disposer les différents éléments d'interface que nous souhaitons utiliser.
Les éléments composant une interface graphique (boutons, menus, zones d'éditions, etc.) sont
appelés des widgets. Les utilisateurs de Windows les appellent aussi parfois des contrôles.
Lorsque l'un des widgets présents dans notre projet d'interface est sélectionné, la fenêtre
"Properties/Signal Handlers" affiche des données le concernant, ce qui va nous permettre de
donner à notre interface les caractéristiques exactes que nous souhaitons.
Dans l'onglet "Properties", repérez la ligne intitulée "name" et cliquez dans la colonne "Value",
de façon à pouvoir remplacer le texte "Form1" par "dialogue" .
C'est en effet ainsi que nous avons "promis" de nommer notre dialogue de _base_. Ne pas tenir
cette promesse créerait une erreur de compilation
Repérez ensuite la ligne intitulée "caption" et cliquez dans la colonne "Value", de façon à
pouvoir remplacer le texte "Form1" par "TD01" .
Première version : affichage d'un message
Dans le menu "Tools", ouvrez la rubrique "Display" et sélectionnez l'outil "Text Label" .
Vous pouvez maintenant positionner un widget de type
"étiquette" dans la partie centrale de notre futur
dialogue .
Dans l'onglet "Properties", repérez la ligne intitulée
"text" et cliquez dans la colonne "Value", de façon à
pouvoir remplacer "textLabel1" par un message de
votre cru (cf. exemple ci-contre) .
Le texte que vous avez tapé devrait maintenant apparaître dans la fenêtre "TD01", en lieu et
place du texte originel. Ajustez, si nécessaire, la taille de l'étiquette, de façon à ce que votre
message apparaisse intégralement .
Il est maintenant temps de générer le programme correspondant aux spécifications que nous
venons de donner. Comme cette tâche est du ressort de KDevelop et non de Qt Designer, il
nous faut faire en sorte que les informations collectées par ce dernier soient rendues
disponibles pour le compilateur. Il suffit pour cela d'enregistrer le résultat de vos efforts (Menu
File, commande Save) .
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 7/9
J-L Péris - 26/03/04
Avant de compiler un programme, il ne faut pas oublier de sauvegarder les modifications faites
à son interface à l'aide de Qt Designer.
Tout en maintenant la touche [Alt] enfoncée, appuyez sur la
touche [Tab] autant de fois que nécessaire pour que l'on vous
propose de retourner à KDevelop, puis lâchez tout .
Vous devez donc vous retrouver face à KDevelop :
L'interface utilisateur de KDevelop
La compilation de tous les fichiers source et l'édition des liens peuvent être déclenchés par une
commande unique : dans le menu Build, choisissez la commande "Make" (ou, si vous êtes
paresseux, contentez-vous d'appuyer sur la touche F8) .
Après quelques instants de traitement, la fabrication de notre programme s'achève et KDevelop
nous annonce son succès. Pour essayer le programme qui vient d'être créé, choisissez la
commande "Start" dans le menu "Debug" .
Deuxième version : affichage numérique de la position d'un curseur
Maintenant que nous avons une bonne idée du processus général de création d'un programme,
nous pouvons envisager de donner à notre projet des fonctionnalités un peu plus attrayantes
que le simple affichage d'un message, aussi encourageant soit-il.
Tout en maintenant la touche [Alt] enfoncée, appuyez sur la
touche [Tab] autant de fois que nécessaire pour que l'on vous
propose de retourner à Qt Designer, puis lâchez tout .
Si vous avez refermé Qt Designer, vous ne pouvez évidemment pas y retourner
par [Alt][Tab]. Vous pouvez rétablir la situation de la façon suivante : dans
l'onglet "Files of project" de l'explorateur d'arborescences (cf. ci-contre), doublecliquez
sur le fichier dialogue.ui. Non seulement KDevelop relance Qt Designer
mais, pour une fois, celui-ci "comprend" quel est le fichier qui nous intéresse…
N'utilisez cette procédure que si vous avez refermé Qt Designer, sous peine de
vous retrouver avec plusieurs instances de ce programme en mémoire.
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 8/9
J-L Péris - 26/03/04
Dans le menu "Tools" de Qt Designer, ouvrez la catégorie
"Input" et choisissez l'outil "Slider" .
Vous pouvez maintenant positionner un widget de type "slider"
dans la partie gauche de notre dialogue .
Après avoir créé un widget, vous pouvez évidemment en changer la taille et la position, ou
même le supprimer (il suffit pour cela de sélectionner le widget et d'appuyer sur la touche
"d'effacement à droite" du clavier).
Les "sliders" permettent à l'utilisateur d'un programme d'effectuer certains réglages, un peu
comme un potentiomètre linéaire peut permettre à l'utilisateur d'un amplificateur d'ajuster le
volume sonore. Du point de vue du programmeur, un slider se caractérise par une valeur
entière, qui indique dans quelle position l'utilisateur a placé le curseur.
L'_object_if de notre deuxième version du projet est simplement
d'afficher cette valeur. Pour cela, nous devons introduire un
second widget dans notre interface.
Dans le menu "Tools" de Qt Designer, ouvrez la catégorie
"Display" et sélectionnez l'outil "LCDNumber" .
Positionnez un widget de ce type au-dessous du message
affiché dans notre projet d'interface, qui doit maintenant
ressembler à l'image présentée ci-contre .
Il nous reste maintenant à exprimer l'idée que, lorsque le slider est déplacé, il doit signaler au
LCDNumber que la valeur à afficher n'est plus la même.
Dans le menu "Tools", sélectionnez la commande "Connect Signal/Slots" .
Amenez le curseur de la souris (qui est
maintenant une croix plutôt qu'une flèche)
sur le slider, enfoncez le bouton gauche et,
et, tout en maintenant ce bouton enfoncé,
faites glisser la souris vers le LCDNumber.
Lorsque vous relâchez le bouton de la
souris dans le LCDNumber , le dialogue
de connexion signal/slot apparaît (cf. cicontre).
Ce dialogue propose un tableau décrivant
les connexions existant entre les différents
éléments de notre interface. La connexion
que nous venons de créer figure sur la
dernière ligne, où un petit drapeau rouge et
blanc signale qu'elle n'est encore que
partiellement spécifiée.
Le dialogue de connexion signal/slot
La première colonne indique que le widget nommé "slider1" doit envoyer une information (c'est
lui le sender, c'est à dire l'émetteur), alors que la troisième colonne indique que c'est le widget
nommé LCDNumber1 qui recevra cette information (c'est lui le receiver, c'est à dire le
récepteur).
La deuxième colonne devrait indiquer à la fois quand l'émission doit avoir lieu et quelle
information doit être émise. Cliquez sur le texte et, dans le menu qui apparaît
alors, choisissez l'option "valueChanged(int)" .
Nous souhaitons, en effet, que le slider signale tout changement de la valeur correspondant à
la position de son curseur.
La quatrième colonne devrait, pour sa part, indiquer ce que le LCDNumber est censé faire du
message qu'il va recevoir. Cliquez sur le texte et, dans le menu qui apparaît alors,
choisissez l'option "display(int)" .
Nous souhaitons, en effet, que le LCDNumber affiche (en anglais : to display) la valeur reçue.
KDevelop – Qt 3.2 TD01 : KDevelop et Qt Designer 9/9
J-L Péris - 26/03/04
Le petit drapeau rouge et blanc est maintenant remplacé par une marque verte qui indique que
notre connexion est en état de marche. Nous pouvons donc cliquer sur le bouton "OK" pour
refermer le dialogue d'établissement d'une connexion .
En vous inspirant des instructions suivies lors de la mise au point de la première version,
générez et essayez cette seconde version de notre programme.
Troisième version : introduction d'un quadrant
Modifiez notre projet d'interface pour qu'il ressemble à
l'image ci-contre .
Le widget situé à droite de la fenêtre est de type "dial" et est
proposé sous la rubrique "Input" du menu "Tools".
Pour améliorer la lisibilité, vous pouvez modifier la propriété
"font" du widget affichant votre texte, ainsi que les propriétés
"numDigits" et "segment_style_" du LCDNumber.
Créez une connexion pour que les mouvements du curseur se traduisent non seulement par
l'affichage de la valeur numérique correspondant à sa nouvelle position, mais aussi par un
déplacement de l'aiguille du quadrant .
Le "slot" du dial qui permet de fixer la position de l'aiguille s'appelle "setValue(int)".
En vous inspirant des instructions suivies lors de la mise au point de la première version,
générez et essayez cette troisième version de notre programme. Que se passe-t-il lorsque
vous utilisez la souris pour déplacer directement l'aiguille du quadrant ?
4 - Interrompre et reprendre le travail sur un projet
Refermez KDevelop et Qt Designer .
Contenu du dossier projet
Retrouvez votre dossier projet et ouvrez-le .
Dans ce dossier figure un sous-dossier qui porte le même nom (TD01, en l'occurrence). Ce
sous-dossier contient lui-même un fichier nommé TD01, qui est le programme créé par le
compilateur. Double-cliquez sur ce fichier et vérifiez que votre programme fonctionne.
Reprendre le travail
Pour reprendre un projet interrompu, le plus simple est de remonter dans le dossier projet et
de double-cliquer sur le fichier TD01.kdevprj qui s'y trouve .
Attention, l'exécutable et le fichier .kdevprj ne sont pas au même niveau dans l'arborescence !
Cette action a pour effet d'ouvrir le projet avec KDevelop et, comme nous l'avons vu, un doubleclic
sur le fichier portant l'extension .ui (onglet Files de l'explorateur d'arborescences)
ordonne à QT Designer de reprendre le travail sur notre projet d'interface.
5 - Exercice
La troisième version de notre programme n'a pas, nous l'avons vu, un fonctionnement très
satisfaisant lorsque l'utilisateur manipule directement l'aiguille du quadrant : ni la valeur
affichée par le LCDNum ni le curseur du slider ne suivent le mouvement, ce qui provoque un
saut de l'aiguille fort disgracieux lorsqu'on déplace ensuite le curseur du slider.
Corrigez ces problèmes .
