Aller au menu - Aller au contenu

Icône La fenêtre principale

Par Avatar Mathieu Nebra (M@teo21) et Avatar Matthieu Schaller (Nanoc)
Mise à jour : 27/05/2011
Creative Commons BY-NC-SA
75 639 visites depuis 7 jours, dont 770 sur ce chapitre classé 5/786
Intéressons-nous maintenant à la fenêtre principale de vos applications.
Pour le moment, nous avons créé des fenêtres plutôt basiques en héritant de QWidget. C'est en effet largement suffisant pour de petites applications, mais au bout d'un moment on a besoin de plus d'outils.

La classe QMainWindow a été spécialement créée pour gérer la fenêtre principale de votre application quand celle-ci est complexe. Parmi les fonctionnalités offertes par QMainWindow, on trouve :

  • Les menus
  • La barre d'outils
  • Les docks
  • La barre d'état

A la fin de ce chapitre, vous pourrez vraiment faire tout ce que vous voulez de votre fenêtre principale !
Retour en haut
Sommaire du chapitre :
Icône du chapitre
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Présentation de QMainWindow

La classe QMainWindow hérite directement de QWidget. C'est un widget généralement utilisé une seule fois par programme, et qui sert uniquement à créer la fenêtre principale de l'application.

Certaines applications simples n'ont pas besoin de recourir à la QMainWindow. On va supposer ici que vous vous attaquez à un programme complexe et d'envergure. :D


Structure de la QMainWindow



Avant toute chose, il me semble indispensable de vous présenter l'organisation d'une QMainWindow.
Commençons par analyser le schéma ci-dessous :

Layout de la QMainWindow
Schéma honteusement recopié de la doc de QMainWindow :-°


Une fenêtre principale peut être constituée de tout cela. Et j'ai bien dit peut, car rien ne vous oblige à utiliser à chaque fois chacun de ces éléments.

Détaillons les éléments :

  • Menu Bar : c'est la barre de menus. C'est là que vous allez pouvoir créer votre menu Fichier, Edition, Affichage, Aide, etc.
  • Toolbars : les barres d'outils. Dans un éditeur de texte, on a par exemple des icônes pour créer un nouveau fichier, pour enregistrer, etc.
  • Dock Widgets : plus complexes et plus rarement utilisés, ces docks sont des conteneurs que l'on place autour de la fenêtre principale. Ils peuvent contenir des outils, par exemple les différents types de pinceaux que l'on peut utiliser quand on fait un logiciel de dessin.
  • Central Widget : c'est le coeur de la fenêtre, là où il y aura le contenu proprement dit.
  • Status Bar : la barre d'état. Elle affiche en général l'état du programme (Prêt / Enregistrement en cours, etc.).


Exemple de QMainWindow



Pour imaginer ces éléments en pratique, je vous propose de prendre pour exemple le programme Qt Designer :

Qt Designer et MainWindow


Vous repérez en haut la barre de menus : File, Edit, Form...

En dessous, on a la barre d'outils, avec les icônes pour créer un nouveau projet, ouvrir un projet, enregistrer, annuler...

Autour (sur la gauche et la droite), on a les fameux docks. Ils servent ici à sélectionner le widget que l'on veut utiliser, ou à éditer les propriétés du widget par exemple.

Au centre, dans la partie grise où il n'y a rien, c'est la zone centrale. Lorsqu'un document est ouvert, cette zone l'affiche. La zone centrale peut afficher un ou plusieurs documents à la fois, comme on le verra plus loin.

Enfin, en bas il y a normalement la barre de statut, mais Qt Designer n'en utilise pas vraiment visiblement (en tout cas rien n'est affiché en bas).

Je vous propose de passer en revue chacune de ces sections dans ce chapitre. Nous commencerons par parler du "Central Widget", car c'est quand même lui le plus important et c'est le seul véritablement indispensable. :-°


Le code de base



Pour suivre ce chapitre, il va falloir créer un projet en même temps que moi. Nous allons créer notre propre classe de fenêtre principale qui héritera de QMainWindow, car c'est comme cela qu'on fait dans 99,99 % des cas.

Notre projet contiendra 3 fichiers :

  • main.cpp : la fonction main().
  • FenPrincipale.h : définition de notre classe FenPrincipale, qui héritera de QMainWindow.
  • FenPrincipale.cpp : implémentation des méthodes de la fenêtre principale.


main.cpp



Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#include <QApplication>
#include <QtGui>
#include "FenPrincipale.h"

int main(int argc, char *argv[])
{
    QApplication app(argc, argv);

    FenPrincipale fenetre;
    fenetre.show();

    return app.exec();
}


FenPrincipale.h



Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
#ifndef HEADER_FENPRINCIPALE
#define HEADER_FENPRINCIPALE

#include <QtGui>

class FenPrincipale : public QMainWindow
{
	public:
		FenPrincipale();

	private:

};


#endif



FenPrincipale.cpp



Code : C++
1
2
3
4
5
6
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{

}


Résultat



Si tout va bien, ce code devrait avoir pour effet d'afficher une fenêtre vide, toute bête :

QMainWindow vide


Si c'est ce qui s'affiche chez vous, c'est bon, nous pouvons commencer. :)
Retour en haut

La zone centrale (SDI et MDI)

La zone centrale de la fenêtre principale est prévue pour contenir un et un seul widget.
C'est comme pour les onglets. On y insère un QWidget (ou une de ses classes filles) et on s'en sert comme conteneur pour mettre d'autres widgets à l'intérieur si besoin est.

Nous allons refaire la manipulation ici pour s'assurer que tout le monde comprenne comment cela fonctionne.


Sachez tout d'abord qu'on distingue 2 types de QMainWindow :

  • Les SDI (Single Document Interface) : elles ne peuvent afficher qu'un document à la fois. C'est le cas de Bloc-Notes par exemple :

    Programme SDI : bloc-notes


  • Les MDI (Multiple Document Interface) : elles peuvent afficher plusieurs documents à la fois. Elles affichent des sous-fenêtres dans la zone centrale. C'est le cas par exemple de Qt Designer :

    Programme MDI : Qt Designer



Définition de la zone centrale (type SDI)



On utilise la méthode setCentralWidget() de la QMainWindow pour indiquer quel widget contiendra la zone centrale. Faisons cela dans le constructeur de FenPrincipale :

Code : C++
1
2
3
4
5
6
7
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QWidget *zoneCentrale = new QWidget;
    setCentralWidget(zoneCentrale);
}


Visuellement, ça ne change rien pour le moment. Par contre ce qui est intéressant, c'est qu'on a maintenant un QWidget qui sert de conteneur pour les autres widgets de la zone centrale de la fenêtre.

On peut donc y insérer des widgets au milieu :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QWidget *zoneCentrale = new QWidget;

    QLineEdit *nom = new QLineEdit;
    QLineEdit *prenom = new QLineEdit;
    QLineEdit *age = new QLineEdit;
 
    QFormLayout *layout = new QFormLayout;
    layout->addRow("Votre nom", nom);
    layout->addRow("Votre prénom", prenom);
    layout->addRow("Votre âge", age);
 
    zoneCentrale->setLayout(layout);

    setCentralWidget(zoneCentrale);
}


Vous noterez que j'ai repris le code du chapitre sur les layouts. J'ai un poil dans la main aujourd'hui, pas envie d'inventer de nouveaux exemples surtout que ça fait exactement la même chose. :-°

Layout dans une QMainWindow


Bon, je reconnais qu'on ne fait rien de bien excitant pour le moment. Mais maintenant vous savez au moins comment définir un widget central pour une QMainWindow, et ça mine de rien c'est important. :)


Définition de la zone centrale (type MDI)



Les choses se compliquent un peu (mais pas trop :-° ) si vous voulez créer un programme MDI... par exemple un éditeur de texte qui peut gérer plusieurs documents à la fois.
Nous allons utiliser pour cela une QMdiArea, qui est une sorte de gros widget conteneur capable d'afficher plusieurs sous-fenêtres.

On peut se servir du QMdiArea comme de widget conteneur pour la zone centrale :

Code : C++
1
2
3
4
5
6
7
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QMdiArea *zoneCentrale = new QMdiArea;
    setCentralWidget(zoneCentrale);
}


La fenêtre est maintenant prête à accepter des sous-fenêtres :

QMdiArea


Si le fond gris par défaut ne vous plaît pas, vous pouvez changer le fond (en mettant une autre couleur ou une image) en appelant setBackground().


On crée ces sous-fenêtres en appelant la méthode addSubWindow() du QMdiArea. Cette méthode attend en paramètre le widget que la sous-fenêtre doit afficher à l'intérieur.
Là encore, vous pouvez créer un QWidget générique qui contiendra d'autres widgets, eux-mêmes organisés selon un layout.

On va faire plus simple dans notre exemple : on va faire en sorte que les sous-fenêtres contiennent juste un QTextEdit (pour notre éditeur de texte) :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QMdiArea *zoneCentrale = new QMdiArea;

    QTextEdit *zoneTexte1 = new QTextEdit;
    QTextEdit *zoneTexte2 = new QTextEdit;

    QMdiSubWindow *sousFenetre1 = zoneCentrale->addSubWindow(zoneTexte1);
    QMdiSubWindow *sousFenetre2 = zoneCentrale->addSubWindow(zoneTexte2);

    setCentralWidget(zoneCentrale);
}


Résultat, on a une fenêtre principale qui contient plusieurs sous-fenêtres à l'intérieur :

MDI Subwindows


Ces fenêtres peuvent êtres réduites ou agrandies à l'intérieur même de la fenêtre principale.
On peut leur définir un titre et une icône avec les bonnes vieilles méthodes setWindowTitle, setWindowIcon, etc.

C'est quand même dingue tout ce qu'on peut faire en quelques lignes de code avec Qt ! :o

Sur cet exemple, j'ai créé des "fenêtres-zones_de_texte", un peu comme j'avais fait des "fenêtres-boutons" dans les premiers chapitres sur Qt.
Bien sûr, dans la pratique, les sous-fenêtres seront peut-être un peu plus complexes. On n'utilisera pas un QTextEdit directement mais plutôt un QWidget qui contiendra un layout qui contiendra des widgets. Bref, vous m'avez compris. ;)


Vous remarquerez que addSubWindow() renvoie un pointeur sur une QMdiSubWindow : ce pointeur représente la sous-fenêtre qui a été créée. Ça peut être une bonne idée de garder ce pointeur pour la suite. Vous pourrez ainsi supprimer la fenêtre en appelant removeSubWindow().
Sinon, sachez que vous pouvez retrouver à tout moment la liste des sous-fenêtres créées en appelant subWindowList(). Cette méthode renvoie la liste des QMdiSubWindow contenues dans la QMdiArea.


...

Ça va vous vous y retrouvez ? :p
Allez un petit schéma pour être sûr que vous avez compris :

Schéma des sous-fenêtres


On a donc une zone centrale QMdiArea qui contient plusieurs sous-fenêtres, représentées par des QMdiSubWindow. Chacune de ces sous-fenêtres est indépendante et peut contenir ses propres widgets.


Notons que ce type de fenêtre MDI est de moins en moins utilisée. On a plutôt tendance aujourd'hui à recourir aux onglets lorsque plusieurs documents sont ouverts.
Ça tombe bien, les QMdiArea de Qt peuvent changer de mode d'affichage en une seule ligne grâce à setViewMode(). Par exemple, avec ce code :

Code : C++
1
zoneCentrale->setViewMode(QMdiArea::TabbedView);


... les sous-fenêtres seront organisées sous forme d'onglets :

MDI avec onglets


Ça ne revient pas au même qu'un QTabWidget ça ? :euh:


Si, en effet, on peut faire pareil avec un QTabWidget. L'avantage là c'est que Qt gère chaque onglet comme une fenêtre, et vous pouvez proposer à l'utilisateur de passer en un clic du mode de vue MDI classique au mode onglets. :)
Retour en haut

Les menus

La QMainWindow peut afficher une barre de menus, comme par exemple : Fichier, Edition, Affichage, Aide...
Comment fait-on pour les créer ?


Créer un menu pour la fenêtre principale



La barre de menus est accessible depuis la méthode menuBar(). Cette méthode renvoie un pointeur sur un QMenuBar, qui vous propose une méthode addMenu(). Cette méthode renvoie un pointeur sur le QMenu créé.

Puisqu'un petit code vaut tous les discours du monde, voici comment faire :

Code : C++
1
2
3
4
5
6
7
8
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QMenu *menuFichier = menuBar()->addMenu("&Fichier");
    QMenu *menuEdition = menuBar()->addMenu("&Edition");
    QMenu *menuAffichage = menuBar()->addMenu("&Affichage");
}


Avec ça, nous avons créé 3 menus dont nous gardons les pointeurs (menuFichier, menuEdition, menuAffichage). Vous noterez qu'on utilise ici aussi le symbole & pour définir des raccourcis clavier (les lettres F, E et A seront donc des raccourcis vers leurs menus respectifs).

Nous avons maintenant 3 menus sur notre fenêtre :

Menus


Mais... ces menus n'affichent rien ! En effet, ils ne contiennent pour le moment aucun élément.


Création d'actions pour les menus



Un élément de menu est représenté par une action. C'est la classe QAction qui gère ça.

Pourquoi avoir créé une classe QAction au lieu de... je sais pas moi... QSubMenu pour dire "sous-menu" ?


En fait, les QAction sont des éléments de menu génériques. Ils peuvent être utilisés à la fois pour les menus et pour la barre d'outils.
Par exemple, imaginons l'élément "Nouveau" qui permet de créer un nouveau document. On peut en général y accéder depuis 2 endroits différents :

  • Le menu Fichier / Nouveau.
  • Le bouton de la barre d'outils "Nouveau", généralement représenté par une icône de document vide.

Une seule QAction peut servir à définir ces 2 éléments à la fois.
Les développeurs de Qt se sont en effet rendus compte que les actions des menus étaient souvent dupliquées dans la barre d'outils, d'où la création de la classe QAction que nous réutiliserons lorsque nous créerons la barre d'outils.

Pour créer une action vous avez 2 possibilités :

  • Soit vous la créez d'abord, puis vous créez l'élément de menu qui correspond.
  • Soit vous créez l'élément de menu directement, et celui-ci vous renvoie un pointeur vers la QAction créée automatiquement.

Nous allons tester ces 2 possibilités.

Créer une QAction, puis créer l'élément de menu



Nous allons tout d'abord créer une QAction, puis nous l'ajouterons au menu "Fichier" :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QMenu *menuFichier = menuBar()->addMenu("&Fichier");

    QAction *actionQuitter = new QAction("&Quitter", this);
    menuFichier->addAction(actionQuitter);

    QMenu *menuEdition = menuBar()->addMenu("&Edition");
    QMenu *menuAffichage = menuBar()->addMenu("&Affichage");


}


Dans l'exemple de code ci-dessus, nous créons d'abord une QAction correspondant à l'action "Quitter". Nous définissons en second paramètre de son constructeur un pointeur sur la fenêtre principale (this), qui servira de parent à l'action.
Puis, nous ajoutons l'action au menu "Fichier".

Résultat, l'élément de menu est créé :

Menus



Créer l'élément de menu et récupérer la QAction



Il y a une autre façon de faire.
Parfois, vous trouverez que créer une QAction avant de générer l'élément de menu est un peu lourd. Dans ce cas, vous pouvez passer par une des versions surchargées de la méthode addAction :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    QMenu *menuFichier = menuBar()->addMenu("&Fichier");

    QAction *actionQuitter = menuFichier->addAction("&Quitter");

    QMenu *menuEdition = menuBar()->addMenu("&Edition");
    QMenu *menuAffichage = menuBar()->addMenu("&Affichage");

    connect(actionQuitter, SIGNAL(triggered()), qApp, SLOT(quit()));
}


Le résultat est strictement le même :

Menus



Les sous-menus



Les sous-menus sont gérés par la classe QMenu.

Imaginons que nous voulions créer un sous-menu "Fichiers récents" au menu "Fichier". Ce sous-menu affichera une liste de fichiers récemment ouverts par le programme (des fichiers bidons pour cet exemple).

Au lieu d'appeler addAction() de la QMenuBar, appelez cette fois addMenu() qui renvoie un pointeur vers un QMenu :

Code : C++
1
2
3
4
QMenu *fichiersRecents = menuFichier->addMenu("Fichiers &récents");
fichiersRecents->addAction("Fichier bidon 1.txt");
fichiersRecents->addAction("Fichier bidon 2.txt");
fichiersRecents->addAction("Fichier bidon 3.txt");


Vous voyez que j'ajoute ensuite de nouvelles actions pour peupler le sous-menu "Fichiers récents". Résultat :

Sous-menus


Je n'ai pas récupéré de pointeur vers les QAction créées à chaque fois. J'aurais dû le faire si je voulais ensuite connecter les signaux des actions à des slots, mais je ne l'ai pas fait ici pour simplifier le code.

Vous pouvez créer des menus contextuels personnalisés de la même façon, avec des QMenu. Un menu contextuel est un menu qui s'affiche lorsqu'on fait un clic droit sur un widget. C'est un petit peu plus complexe. Je vous laisse lire la doc de QWidget à propos des menus contextuels pour savoir comment faire ça si vous en avez besoin.


Manipulations plus avancées des QAction



Une QAction est au minimum constituée d'un texte descriptif. Mais ce serait dommage de la limiter à ça.
Voyons un peu ce qu'on peut faire avec les QAction...


Connecter les signaux et les slots



Le premier rôle d'une QAction est de générer des signaux, que l'on aura connectés à des slots.
La QAction propose plusieurs signaux intéressants. Le plus utilisé d'entre eux est triggered() qui indique que l'action a été choisie par l'utilisateur.

On peut connecter notre action "Quitter" au slot quit() de l'application :

Code : C++
1
connect(actionQuitter, SIGNAL(triggered()), qApp, SLOT(quit()));


Désormais, un clic sur "Fichier / Quitter" fermera l'application. :)

Vous avez aussi un évènement hovered() qui s'active lorsqu'on passe la souris sur l'action. A tester !


Ajouter un raccourci



On peut définir un raccourci clavier pour l'action. On passe pour cela par la méthode addShortcut().

Cette méthode peut être utilisée de plusieurs manières différentes. La technique la plus simple est de lui envoyer une QKeySequence représentant le raccourci clavier :

Code : C++
1
actionQuitter->setShortcut(QKeySequence("Ctrl+Q"));


Voilà, il suffit d'écrire dans le constructeur de la QKeySequence le raccourci approprié, Qt se chargera de comprendre le raccourci tout seul.

Menu et raccourci


Vous pouvez faire le raccourci clavier Ctrl + Q n'importe où dans la fenêtre maintenant, cela activera l'action "Quitter" !

Sachez que QKeySequence accepte d'autres syntaxes :

Code : C++
1
actionQuitter->setShortcut(QKeySequence(Qt::CTRL + Qt::Key_Q));


... créera le même raccourci "Ctrl + Q", sauf que cette fois nous sommes passés par des symboles pour le définir.

Vous pouvez aussi utiliser une séquence prédéfinie, qui s'adapte en fonction des habitudes de l'OS.
Par exemple, la séquence prédéfinie QKeySequence::HelpContents est faite pour représenter un raccourci clavier qui amène à l'aide.

Code : C++
1
actionQuitter->setShortcut(QKeySequence(QKeySequence::HelpContents));


Sous Windows, ce sera la touche F1, sous Mac OS X, ce sera le raccourci "Ctrl + ?".

Pour avoir la liste des séquences prédéfinies, c'est dans la doc. ;)


Ajouter une icône



Chaque action peut avoir une icône.
Lorsque l'action est associée à un menu, l'icône est affichée à gauche de l'élément de menu. Mais, souvenez-vous, une action peut aussi être associée à une barre d'outils comme on le verra plus tard. L'icône peut donc aussi être réutilisée dans la barre d'outils.

Pour ajouter une icône, appelez setIcon() et envoyez-lui un QIcon :

Code : C++
1
actionQuitter->setIcon(QIcon("quitter.png"));


Résultat :

Icône dans un menu



Pouvoir cocher une action



Lorsqu'une action peut avoir 2 états (activée, désactivée), vous pouvez la rendre "cochable" grâce à setCheckable().
Imaginons par exemple le menu Edition / Gras :

Code : C++
1
actionGras->setCheckable(true);


Le menu a maintenant 2 états et peut être précédé d'une case à cocher :

Menu cochable


On vérifiera dans le code si l'action est cochée avec isChecked().

Bouton gras coché
Lorsque l'action est utilisée sur une barre d'outils, le bouton reste enfoncé lorsque l'action est "cochée". C'est ce que vous avez l'habitude de voir dans un traitement de texte par exemple (cf image ci-contre ;) ).


Ah, puisqu'on parle de barre d'outils, il serait temps d'apprendre à en créer une !
Retour en haut

La barre d'outils

La barre d'outils est généralement constituée d'icônes et située sous les menus.
Avec Qt, la barre d'outils utilise des actions pour construire chacun des éléments de la barre. Étant donné que vous avez appris à manipuler des actions juste avant, vous devriez donc être capables de créer une barre d'outils très rapidement. ;)

Pour ajouter une barre d'outils, vous devez tout d'abord appeler la méthode addToolBar() de la QMainWindow. Il faudra donner un nom à la barre d'outils, même si celui-ci ne s'affiche pas.
Vous récupérez un pointeur vers la QToolBar :

Code : C++
1
QToolBar *toolBarFichier = addToolBar("Fichier");


Maintenant que nous avons notre QToolBar, nous pouvons commencer !


Ajouter une action



Le plus simple est d'ajouter une action à la QToolBar. On utilise comme pour les menus une méthode appelée addAction() qui prend comme paramètre une QAction.
Le gros intérêt que vous devriez saisir maintenant, c'est que vous pouvez réutiliser ici vos QAction créées pour les menus !

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    // Création des menus
    QMenu *menuFichier = menuBar()->addMenu("&Fichier");
    QAction *actionQuitter = menuFichier->addAction("&Quitter");
    actionQuitter->setShortcut(QKeySequence("Ctrl+Q"));
    actionQuitter->setIcon(QIcon("quitter.png"));
    
    QMenu *menuEdition = menuBar()->addMenu("&Edition");
    QMenu *menuAffichage = menuBar()->addMenu("&Affichage");

    // Création de la barre d'outils
    QToolBar *toolBarFichier = addToolBar("Fichier");
    toolBarFichier->addAction(actionQuitter);

    connect(actionQuitter, SIGNAL(triggered()), qApp, SLOT(quit()));
}


Dans ce code, on voit qu'on crée d'abord une QAction pour un menu (ligne 7), puis plus loin on réutilise cette action pour l'ajouter à la barre d'outils (ligne 16).

Barre outils


Comme l'action est la même que celle utilisée pour le menu "Quitter", on retrouve :

  • Son icône : ici affichée dans la barre d'outils.
  • Son texte : ici affiché lorsqu'on pointe sur l'icône.
  • Son action : elle est toujours connectée au slot quit() de l'application, ce qui a pour effet de mettre fin au programme.

Et voilà comment Qt fait d'une pierre deux coups grâce aux QAction ! :D


Ajouter un widget



Les barres d'outils contiennent le plus souvent des QAction, mais il arrivera que vous ayez besoin d'insérer des éléments plus complexes.
La QToolBar gère justement tous types de widgets.

Vous pouvez ajouter des widgets avec la méthode addWidget(), comme vous le faisiez avec les layouts :

Code : C++
1
2
QFontComboBox *choixPolice = new QFontComboBox;
toolBarFichier->addWidget(choixPolice);


Ici, on insère une liste déroulante (plus précisément une QFontComboBox, une liste déroulante spécialisée dans le choix d'une police).
Le widget s'insère alors dans la barre d'outils :

Barre outils widget


... et vous pouvez l'utiliser comme n'importe quel widget normal, gérer ses signaux, ses slots, etc.

Barre outils widget


La méthode addWidget() crée une QAction automatiquement. Elle renvoie un pointeur vers cette QAction créée. Ici, on n'a pas récupéré le pointeur, mais vous pouvez le faire si vous avez besoin d'effectuer des opérations ensuite sur la QAction.


Ajouter un séparateur



Si votre barre d'outils commence à comporter trop d'éléments, ça peut être une bonne idée de les séparer. C'est pour cela que Qt propose des separators (séparateurs).
Cela vous permettra par exemple de regrouper les boutons "Annuler" et "Rétablir", pour ne pas les confondre avec les boutons "Gras", "Italique", "Souligné".

Il suffit simplement d'appeler la méthode addSeparator() au moment où vous voulez insérer un séparateur :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    // Création des menus
    QMenu *menuFichier = menuBar()->addMenu("&Fichier");
    QAction *actionQuitter = menuFichier->addAction("&Quitter");
    actionQuitter->setShortcut(QKeySequence("Ctrl+Q"));
    actionQuitter->setIcon(QIcon("quitter.png"));

    QMenu *menuEdition = menuBar()->addMenu("&Edition");
    QMenu *menuAffichage = menuBar()->addMenu("&Affichage");

    // Création de la barre d'outils
    QToolBar *toolBarFichier = addToolBar("Fichier");
    toolBarFichier->addAction(actionQuitter);
    toolBarFichier->addSeparator();
    QFontComboBox *choixPolice = new QFontComboBox;
    toolBarFichier->addWidget(choixPolice);

    connect(actionQuitter, SIGNAL(triggered()), qApp, SLOT(quit()));
}


Barre outils break
Notez le séparateur entre le bouton Quitter et la liste déroulante


Vous pouvez aussi insérer un séparateur à une position précise grâce à insertSeparator().

Plus d'options pour la barre d'outils



Par défaut, la barre d'outils est déplaçable. Vous pouvez la placer en haut, sur les côtés ou en bas, et vous pouvez même en faire une mini-fenêtre indépendante :

Barre outils déplaçable


Si vous souhaitez éviter que la barre d'outils soit déplaçable, modifiez sa propriété movable.
Si vous souhaitez juste éviter qu'on puisse créer une mini-fenêtre indépendante, modifiez sa propriété floatable.
Retour en haut

Les docks

Les docks sont des mini-fenêtres que l'on peut généralement déplacer à notre guise dans la fenêtre principale.
Vous avez l'habitude d'en voir dans des programmes complexes comme Photoshop ou votre IDE (Code::Blocks en utilise un pour afficher la liste des fichiers du projet par exemple).


Créer un QDockWidget



Créez un QDockWidget et affectez-lui un titre pour commencer. Indiquez que la fenêtre principale (this) est son widget parent en second paramètre :

Code : C++
1
QDockWidget *dock = new QDockWidget("Palette", this);


Puis, placez ce dock sur la fenêtre principale à l'aide de la méthode addDockWidget() :

Code : C++
1
addDockWidget(Qt::LeftDockWidgetArea, dock);


Comme vous pouvez le voir, le premier paramètre permet d'indiquer à quel endroit le dock doit être placé. On peut le mettre en haut, en bas, à gauche ou à droite. On peut même faire flotter le dock comme une mini-fenêtre.

Par défaut, l'utilisateur a le droit de déplacer le dock. Si vous ne souhaitez pas qu'il puisse le faire, faites appel à la méthode setFeatures() du QDockWidget. Vous pouvez tout personnaliser à partir de là.

De manière générale, évitez d'empêcher à l'utilisateur de réorganiser les docks. La puissance des docks c'est justement que l'on peut les réorganiser selon ses préférences. Ce serait dommage de perdre en fonctionnalités.


Peupler le QDockWidget



Notre QDockWidget est créé mais il ne contient rien.
Pour le peupler en widgets, il faut d'abord créer un widget conteneur et indiquer que ce widget gère le contenu du QDockWidget.

Code : C++
1
2
QWidget *contenuDock = new QWidget;
dock->setWidget(contenuDock);


Après, il n'y a plus qu'à placer des widgets et / ou des layouts dans contenuDock, comme si c'était une fenêtre.
Je mets quelques widgets au pif, ne faites pas spécialement attention au détail de ce code :

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
QPushButton *crayon = new QPushButton("Crayon");
QPushButton *pinceau = new QPushButton("Pinceau");
QPushButton *feutre = new QPushButton("Feutre");
QLabel *labelEpaisseur = new QLabel("Epaisseur :");
QSpinBox *epaisseur = new QSpinBox;

QVBoxLayout *dockLayout = new QVBoxLayout;
dockLayout->addWidget(crayon);
dockLayout->addWidget(pinceau);
dockLayout->addWidget(feutre);
dockLayout->addWidget(labelEpaisseur);
dockLayout->addWidget(epaisseur);

contenuDock->setLayout(dockLayout);


Code complet



Voici un code complet qui utilise des menus, une barre d'outils et un dock. Il est un peu long mais ne vous laissez pas impressionner, il n'y a rien de nouveau ni de compliqué.

Code : C++
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
#include "FenPrincipale.h"

FenPrincipale::FenPrincipale()
{
    // Création des menus
    QMenu *menuFichier = menuBar()->addMenu("&Fichier");

    QAction *actionQuitter = menuFichier->addAction("&Quitter");
    actionQuitter->setShortcut(QKeySequence("Ctrl+Q"));
    actionQuitter->setIcon(QIcon("quitter.png"));

    QMenu *menuEdition = menuBar()->addMenu("&Edition");
    QMenu *menuAffichage = menuBar()->addMenu("&Affichage");

    // Création de la barre d'outils
    QToolBar *toolBarFichier = addToolBar("Fichier");
    toolBarFichier->addAction(actionQuitter);
    toolBarFichier->addSeparator();
    QFontComboBox *choixPolice = new QFontComboBox;
    toolBarFichier->addWidget(choixPolice);

    // Création des docks
    QDockWidget *dock = new QDockWidget("Palette", this);
    addDockWidget(Qt::LeftDockWidgetArea, dock);

    QWidget *contenuDock = new QWidget;
    dock->setWidget(contenuDock);

    QPushButton *crayon = new QPushButton("Crayon");
    QPushButton *pinceau = new QPushButton("Pinceau");
    QPushButton *feutre = new QPushButton("Feutre");
    QLabel *labelEpaisseur = new QLabel("Epaisseur :");
    QSpinBox *epaisseur = new QSpinBox;

    QVBoxLayout *dockLayout = new QVBoxLayout;
    dockLayout->addWidget(crayon);
    dockLayout->addWidget(pinceau);
    dockLayout->addWidget(feutre);
    dockLayout->addWidget(labelEpaisseur);
    dockLayout->addWidget(epaisseur);

    contenuDock->setLayout(dockLayout);

    // Création de la zone centrale
    QWidget *zoneCentrale = new QWidget;
    setCentralWidget(zoneCentrale);

    connect(actionQuitter, SIGNAL(triggered()), qApp, SLOT(quit()));
}


J'ai volontairement mis des commentaires pour séparer les différentes sections de la génération de la fenêtre.

Voilà le résultat :

Dock


Le dock est placé à gauche comme nous l'avons demandé, mais nous pouvons le changer de côté.

D'autre part, nous pouvons faire sortir le dock et nous en servir comme d'une mini-fenêtre indépendante :

Dock flottant


Bien sûr, cet exemple est à améliorer : il vaudrait mieux afficher des icônes sur les boutons plutôt que du texte, c'est plus intuitif et plus habituel. ;)
Retour en haut

La barre d'état

La barre d'état est une petite barre affichée en bas de la fenêtre. Elle indique ce qu'est en train de faire l'application.

Par exemple, un navigateur web comme Firefox affiche le message "Terminé" lorsque la page web a été chargée. Lorsque la page est en cours de chargement, une barre de progression apparaît à cet emplacement.

La barre d'état est automatiquement créée et retournée par la méthode statusBar() de la QMainWindow.
Celle-ci renvoie un pointeur vers une QStatusBar que vous devez conserver :

Code : C++
1
QStatusBar *barreEtat = statusBar();


Notre barre d'état est créée ! :)

Maintenant, que peut-on faire dedans ?
Il faut savoir qu'une barre d'état peut afficher 3 types de messages différents :

  • Un message temporaire : il est affiché brièvement par-dessus tous les messages normaux.
  • Un message normal : il est affiché tout le temps, sauf quand un message temporaire est affiché.
  • Un message permanent : il est affiché tout le temps, même quand un message temporaire est affiché.


Les messages temporaires



C'est le plus simple : appelez la méthode showMessage() et indiquez le message à afficher. Par exemple :

Code : C++
1
barreEtat->showMessage("Prêt");


Barre de statut


Vous pouvez indiquer en second paramètre la durée d'affichage du message en millisecondes, avant qu'il disparaisse. Exemple :

Code : C++
1
barreEtat->showMessage("Le fichier a été sauvegardé", 2000);


Ce message restera affiché 2 secondes.


Les messages normaux et permanents



Pour les messages normaux et permanents, c'est un peu plus compliqué : il faut utiliser des widgets. Vous pouvez placer a priori n'importe quel widget dans cette zone, les plus courants étant les QLabel et les QProgressBar.

Utilisez :

  • addWidget() : pour afficher un widget normal.
  • addPermanentWidget() : pour afficher un widget permanent.


Exemple de widget normal affiché en barre d'état :

Code : C++
1
2
QProgressBar *progression = new QProgressBar;
barreEtat->addWidget(progression);


Voilà, avec ça vous pouvez faire tout ce que vous voulez. :)


Les status tips des QAction



Les QAction disposent d'une propriété dont je ne vous ai pas parlé jusqu'ici : statusTip.
Elle permet d'indiquer un message qui doit s'afficher dans la barre d'état lorsqu'on pointe sur une action. Cela permet de donner de plus amples indications sur le rôle d'un élément de menu par exemple.

Mettons en place un statusTip sur l'action "Quitter" :

Code : C++
1
actionQuitter->setStatusTip("Quitte le programme");


Et voici ce que fait le statusTip, lorsqu'on pointe sur l'élément de menu :

Status tip


Vous pouvez voir que la barre d'état affiche le statusTip lorsque la souris pointe sur l'action. :)
Retour en haut

Q.C.M.

Est-ce qu'une QMainWindow doit forcément comporter une barre d'état ?
Lequel de ces éléments de la fenêtre principale peut être extrait pour former une mini-fenêtre ?
Quelle méthode de la QMainWindow permet d'indiquer le widget qui sera affiché au centre de la fenêtre ?
Que signifie MDI ?
Quelle classe désigne un sous-menu ?
Une QAction peut-elle être associée à une barre d'outils ?

Statistiques de réponses au QCM

Retour en haut
Pfiou ! Ce n'est pas la fenêtre principale pour rien : c'est fou tout ce qu'on peut mettre dedans. A tel point qu'on se demande des fois s'il reste de la place pour afficher le widget central. o_O

La QMainWindow offre beaucoup de possibilités, mais ne vous sentez pas obligés de toutes les utiliser. Au contraire, ne faites appel qu'à ce qui vous sert, et ne surchargez pas inutilement la fenêtre principale. Sinon, vos utilisateurs mettront du temps avant d'arriver à la maîtriser, ce qui n'est jamais très bon.


Exercice : créer un éditeur de texte



Je crois que l'exercice de ce chapitre est tout trouvé : je vous propose de faire un éditeur de texte (en mode MDI, of course :-° ).
En effet, un éditeur de texte contient un peu tout ce qu'on vient d'apprendre :

  • Des menus
  • Une barre d'outils
  • Une barre d'état
  • Un mode multi-documents (MDI)

Et vous pouvez même ajouter des docks si vous leur trouvez une utilité. ^^

Bien que classique, c'est un très bon exercice. Il faudra bien vous organiser. Pour ce qui est de l'écriture des fichiers, utilisez QFile.
Bon courage !
Chapitre précédent Sommaire Chapitre suivant
Retour en haut

Partager

Retour en haut
39 commentaires pour "La fenêtre principale"
Note moyenne : 3.85 / 4 (1749 votes)
Pseudo Commentaire
Hors ligne CYR200 # Posté le 25/02/2011 à 14:43:37
Avatar

 Bonjour a tous et a toutes,

tout d'abord je voudrais remercier Mathéo pour son tutor QT,
Merci a toi qui me permet agréablement d'aborder cette Librairie.

Voilà en suivant le tutor, un TP "création d'un Bloc Note" j'ais
utilisé les QMdiSubWindow, mais lorsque je voulais récupérer les
QTextEdit pour y enregistrer le texte saisie, Bonne Galère :-(
"Peut etre pas encore au point sur la doc QT" et rien sur internet
mais bon voici un bout de code pour ce qui sont ou seront dans mon cas.

void MainWindow::WriteFileUnder()
{
/////////////////////////////////////////////////////////////
// RESTE UN BUG PLANTE SI JE NE RAJOUTE PAS DE QMdiSubWindow
/////////////////////////////////////////////////////////////
QString ContenueFichier, FileName;
sousFenetre1 = zoneCentrale->currentSubWindow();
QWidget *Content = sousFenetre1->widget();
QTextEdit *test = qobject_cast<QTextEdit*>(Content);
ContenueFichier = test->document()->toPlainText();
FileName = QFileDialog::getSaveFileName (this,"Save File","","Text Files (*.txt);;*.*");
FichierOpenTxt *FichierW = new FichierOpenTxt();
FichierW->Ecrire(FileName,ContenueFichier);
}
Hors ligne CYR200 # Posté le 25/02/2011 à 14:52:38
Avatar

 oups je suis rester un peu obsure,
sousFenetre1 : est un de mes attribue caster comme un QMdiSubWindow

zoneCentrale : est un de mes attribue caster comme un QMdiArea

FichierOpenTxt est une class pour la lecture et ecriture de fichier (je sais elle mal nomée ;-) )
Hors ligne AlexF # Posté le 09/06/2011 à 11:13:16
Avatar

 Une question qui me tarabuste sur ce tuto, mais qui n'a l'air de gêner personne alors je dois sans doute raconter nimporte quoi mais, Si on crée des pointeurs à tour de bras comme par exemple:
QMenu *menuAffichage = menuBar()->addMenu("&Affichage");
et on ne les delete jamais!!!
Pourquoi??
Hors ligne François.S # Posté le 22/06/2011 à 14:23:28

Avis : Très bon

Il a déjà expliquer que tout les widgets contenus dans un autre (ou dans QMainWindow), sont détruit automatiquement par la fenêtre.
Pas besoin de se casser la tête avec des delete.

A part ça, super tuto, je met direct 20/20 à l'auteur. :-°
Hors ligne saidox # Posté le 11/09/2011 à 04:44:50

Salut tout le monde:
voila j'ai un peut changer le code de matéo mais j'ai un probleme voila les 3 ligne que j'ai modifer:
QFontComboBox *choixPolice=new QFontComboBox;
QAction *actionChoixPolice = toolBarFichier->addWidget(choixPolice);
actionChoixPolice->setStatusTip("Choisir la police qui vous convient");
le probleme c'est que quand je passe la souris sur le QFontComboBox le message "Choisir la police qui vous convient" qui devrai s'afficher en dessous dans la barre d'états ne s'affiche pas,je ne sais pas pourquoi.merci d'avance.
finalement je remercie M@teo21 pour ce tutorial et je donne 20/20.

Voir tous les commentaires