Les principaux widgets

Quelques rappels sur l'ouverture d'une fenêtre

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13

#include <QApplication>
#include <QWidget>


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

    QWidget fenetre;
    fenetre.show();

    return app.exec();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

#include <QApplication>
#include <QPushButton>
 
int main(int argc, char *argv[])
{
    QApplication app(argc, argv);
 
    QPushButton bouton("Salut les Zéros, la forme ?");
    bouton.show();
 
    return app.exec();
}

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

#include <QApplication>
#include <QWidget>
#include <QPushButton>


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

    QWidget fenetre;
    QPushButton bouton("Salut les Zéros, la forme ?", &fenetre);
    fenetre.show();

    return app.exec();
}

Quelques classes particulières pour les fenêtres

• QMainWindow : c'est un widget spécial qui permet de créer la fenêtre principale de l'application. Une fenêtre principale peut contenir des menus, une barre d'outils, une barre d'état, etc.
• QDialog : c'est une classe de base utilisée par toutes les classes de boîtes de dialogue qu'on a vues il y a quelques chapitres. On peut aussi s'en servir directement pour ouvrir des boîtes de dialogue personnalisées.

Une fenêtre avec QWidget

• Celles qui valent pour tous les types de widgets et pour les fenêtres
• Celles qui n'ont de sens que pour les fenêtres

Les propriétés utilisables pour tous les types de widgets, y compris les fenêtres

• cursor : curseur de la souris à afficher lors du survol du widget. La méthode setCursor attend que vous lui envoyiez un objet de type QCursor. Certains curseurs classiques (comme le sablier) sont prédéfinis dans une énumération. La doc vous fait un lien vers cette énumération.
• enabled : indique si le widget est activé, si on peut le modifier. Un widget désactivé est généralement grisé. Si vous appliquez setEnabled(false) à toute la fenêtre, c'est toute la fenêtre qui deviendra inutilisable.
• height : hauteur du widget.
• size : dimensions du widget. Vous devrez indiquer la largeur et la hauteur.
• visible : contrôle la visibilité du widget.
• width : largeur.

1

maFenetre.setWidth(200);

Les propriétés utilisables uniquement sur les fenêtres

• windowFlags : une série d'options contrôlant le comportement de la fenêtre. Il faut consulter l'énumération Qt::WindowType pour savoir les différents types disponibles. Vous pouvez aussi consulter l'exemple Window Flags du programme "Qt Examples and Demos".
  
  Par exemple pour afficher une fenêtre de type "Outil" avec une petite croix et pas de possibilité d'agrandissement ou de réduction :
  
  Code : C++

  1	fenetre.setWindowFlags(Qt::Tool);

  
  
  
  
  Une fenêtre de type "Tool"
  
  
  C'est par là aussi qu'on passe pour que la fenêtre reste par-dessus toutes les autres fenêtres du système (avec le flag Qt::WindowStaysOnTopHint).
  
  
• windowIcon : l'icône de la fenêtre. Il faut envoyer un objet de type QIcon, qui lui-même accepte un nom de fichier à charger. Cela donne le code suivant pour charger le fichier icone.png situé dans le même dossier que l'application :
  
  Code : C++

  1	fenetre.setWindowIcon(QIcon("icone.png"));

  
  
  
  
  Une icône pour la fenêtre
  
  
  
• windowOpacity : contrôle la transparence de la fenêtre (ne fonctionne pas sur tous les OS). La valeur à envoyer est un nombre décimal compris entre 0 (transparent) et 1 (complètement opaque).
  Ici, avec la valeur 0.8 :
  
  Code : C++

  1	fenetre.setWindowOpacity(0.8);

  
  
  
  
  Une fenêtre transparente
  
  
  
• windowTitle : le titre de la fenêtre, affiché en haut.
  
  Code : C++

  1	fenetre.setWindowTitle("Le Programme du Zéro v0.0");

  
  
  
  
  
  Une fenêtre avec un titre
  
  

Une fenêtre avec QDialog

Quelle est la différence avec une fenêtre créée à partir d'un QWidget ?

• Valider
• Annuler

• Modales : on ne peut pas accéder aux autres fenêtres de l'application lorsqu'elles sont ouvertes.
• Non modales : on peut toujours accéder aux autres fenêtres.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;
        QPushButton *bouton = new QPushButton("Ouvrir la fenêtre", &fenetre);


    QDialog secondeFenetre (&fenetre);
        QVBoxLayout *layout = new QVBoxLayout;
        QLabel *image = new QLabel(&secondeFenetre);
        image->setPixmap(QPixmap("icone.png"));
        layout->addWidget(image);
        secondeFenetre.setLayout(layout);


    QWidget::connect(bouton, SIGNAL(clicked()), &secondeFenetre, SLOT(exec()));
    fenetre.show();

    return app.exec();
}

• Ligne 12 : la création de la QDialog. Rien de bien extraordinaire à première vue, mais si vous regardez bien vous devriez voir que j'ai mentionné dans le constructeur l'adresse de la fenêtre parente. Cela permet à la QDialog de savoir quelle est la fenêtre qui l'a appelée. Entre autres choses, la QDialog se placera automatiquement de manière centrée par rapport à sa fenêtre mère.
• Ligne 20 : je connecte le clic sur le bouton à la méthode exec() de la QDialog pour ouvrir la boîte de dialogue (de manière modale).

• QPushButton : un bouton classique, que vous avez déjà largement eu l'occasion de manipuler.
• QRadioButton : un bouton "radio", pour un choix à faire parmi une liste.
• QCheckBox : une case à cocher (on considère que c'est un bouton en GUI Design).

QPushButton : un bouton

Les signaux du bouton

Les boutons à 2 états

1
2

QPushButton *bouton = new QPushButton("Bouton", &fenetre);
bouton->setCheckable(true);

A gauche un bouton normal, à droite un bouton pressé

QCheckBox : une case à cocher

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15

#include <QApplication>
#include <QWidget>
#include <QCheckBox>


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

    QWidget fenetre;
    QCheckBox *checkbox = new QCheckBox("J'aime les frites", &fenetre);
    fenetre.show();

    return app.exec();
}

QRadioButton : les boutons radio

 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

#include <QApplication>
#include <QtGui>


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

    QWidget fenetre;
    QGroupBox *groupbox = new QGroupBox("Votre plat préféré", &fenetre);

    QRadioButton *steacks = new QRadioButton("Les steacks");
    QRadioButton *hamburgers = new QRadioButton("Les hamburgers");
    QRadioButton *nuggets = new QRadioButton("Les nuggets");

    steacks->setChecked(true);

    QVBoxLayout *vbox = new QVBoxLayout;
    vbox->addWidget(steacks);
    vbox->addWidget(hamburgers);
    vbox->addWidget(nuggets);

    groupbox->setLayout(vbox);
    groupbox->move(5, 5);

    fenetre.show();

    return app.exec();
}

J'en profite pour signaler que vous pouvez inclure QtGui pour automatiquement inclure tous les widgets : #include <QtGui>
C'est un peu bourrin mais ça marche.
Cela vous évite d'avoir à rajouter un nouveau widget à la liste des includes à chaque fois. Attention par contre, la compilation sera un peu plus longue.

• QLabel : le plus important, un widget permettant d'afficher du texte ou une image.
• QProgressBar : une barre de progression.

QLabel : afficher du texte ou une image

• Du texte simple,
• Du texte enrichi (gras, italique, souligné, coloré, avec des liens...),
• Une image,
• Et même une image animée !

Afficher un texte simple

1

label->setText("Bonjour les Zéros !");

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;

    QLabel *label = new QLabel("Bonjour les Zéros !", &fenetre);
    label->move(30, 20);

    fenetre.show();

    return app.exec();
}

Afficher un texte enrichi

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;

    QLabel *label = new QLabel("Bonjour les <strong>Zéros</strong> !<br />Etes-vous allés sur le <a href=\"http://www.siteduzero.com\">Site du Zéro</a> aujourd'hui ?", &fenetre);
    label->move(30, 20);

    fenetre.show();

    return app.exec();
}

Afficher une image

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;

    QLabel *label = new QLabel(&fenetre);
    label->setPixmap(QPixmap("icone.png"));
    label->move(30, 20);

    fenetre.show();

    return app.exec();
}

QProgressBar : une barre de progression

• maximum : la valeur maximale que peut prendre la barre de progression.
• minimum : la valeur minimale que peut prendre la barre de progression.
• value : la valeur actuelle de la barre de progression.

• QLineEdit : champ de texte à une seule ligne.
• QTextEdit : champ de texte à plusieurs lignes pouvant afficher du texte mis en forme.
• QSpinBox : champ de texte adapté à la saisie de nombre entiers.
• QDoubleSpinBox : champ de texte adapté à la saisie de nombre décimaux.
• QSlider : un curseur qui permet de sélectionner une valeur.
• QComboBox : une liste déroulante.

QLineEdit : champ de texte à une seule ligne

• text : permet de récupérer / modifier le texte contenu dans le champ.
• alignment : l'alignement du texte à l'intérieur.
• echoMode : type d'affichage du texte. Il faudra utiliser l'énumération EchoMode pour indiquer le type d'affichage. Par défaut les lettres entrées s'affichent, mais on peut aussi faire en sorte que les lettres soient masquées pour les mots de passe.
  
  Code : C++

  1	lineEdit->setEchoMode(QLineEdit::Password);

  
  
  
  
  
  
  
• inputMask : permet de définir un masque de saisie, pour obliger l'utilisateur à rentrer une chaîne précise (par exemple un numéro de téléphone ne doit pas contenir de lettres). Vous pouvez aussi jeter un oeil aux validators qui sont un autre moyen de valider la saisie de l'utilisateur.
• maxLength : le nombre de caractères maximum qui peuvent être entrés.
• readOnly : le contenu du champ de texte ne peut être modifié. Cette propriété ressemble à enabled (définie dans QWidget), mais avec readOnly on peut quand même copier-coller le contenu du QLineEdit, tandis qu'avec enabled le champ est complètement grisé et on ne peut pas récupérer son contenu.

QTextEdit : champ de texte à plusieurs lignes

QSpinBox : champ de texte de saisie d'entiers

• accelerated : permet d'autoriser la spinbox a accélérer la vitesse d'augmentation du nombre si on appuie longtemps sur le bouton.
• minimum : valeur minimale que peut prendre la spinbox.
• maximum : valeur maximale que peut prendre la spinbox.
• singleStep : pas d'incrémentation (par défaut de 1). Si vous voulez que les boutons fassent augmenter la spinbox de 100 en 100, c'est cette propriété qu'il faut modifier !
• value : valeur contenue dans la spinbox.
• prefix : texte à afficher avant le nombre.
• suffix : texte à afficher après le nombre.

QDoubleSpinBox : champ de texte de saisie de nombres décimaux

QSlider : un curseur pour sélectionner une valeur

QComboBox : une liste déroulante

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;

    QComboBox *liste = new QComboBox(&fenetre);
    liste->addItem("Paris");
    liste->addItem("Londres");
    liste->addItem("Singapour");
    liste->addItem("Tokyo");
    liste->move(30, 20);

    fenetre.show();

    return app.exec();
}

• count : nombre d'éléments dans la liste déroulante.
• currentItem : numéro d'indice de l'élément actuellement sélectionné. Les indices commencent à 0. Ainsi, si currentItem renvoie 2, c'est que "Singapour" a été sélectionné dans l'exemple précédent.
• currentText : texte correspondant à l'élément sélectionné. Si on a sélectionné "Singapour", cette propriété contient donc "Singapour".
• editable : indique si le widget autorise l'ajout de valeurs personnalisées ou non. Par défaut, l'ajout de nouvelles valeurs est interdit.
  Si le widget est éditable, l'utilisateur pourra rentrer de nouvelles valeurs dans la liste déroulante. Elle se comportera donc aussi comme un champ de texte. L'ajout d'une nouvelle valeur se fait par appui sur la touche "Entrée". Les nouvelles valeurs sont placées par défaut à la fin de la liste.

• QFrame : un widget pouvant avoir une bordure.
• QGroupBox : un widget (que nous avons déjà utilisé) adapté à la gestion des groupes de cases à cocher et de boutons radio.
• QTabWidget : un widget gérant plusieurs pages d'onglets.

QFrame : une bordure

• frameShape : le type de bordure. Il faut utiliser une énumération définie par QFrame pour sélectionner la bordure. Consultez la doc pour avoir la liste des types de bordure.
  De manière générale je recommande d'utiliser QFrame::StyledPanel (comme sur ma capture d'écran) car cela crée une bordure dans un style adapté à votre OS. Notez aussi QFrame::HLine et QFrame::VLine, un peu particuliers, qui ne créent pas un rectangle mais juste une ligne horizontale ou verticale. Très utile pour séparer les éléments dans sa fenêtre.
• frameShadow : l'ombre de la bordure. Par défaut il n'y en a pas, mais vous pouvez définir une ombre qui donne l'impression que le widget est surélevé ou enfoncé.
  Regardez les énumérations définies par QFrame pour avoir la liste des possibilités.
• lineWidth : l'épaisseur de la ligne de la bordure.
• midLineWidth : l'épaisseur de la ligne intermédiaire (utilisé uniquement pour certaines bordure complexes avec une ombre).

1
2
3

QFrame *frame = new QFrame(&fenetre);
frame->setFrameShape(QFrame::StyledPanel);
frame->setGeometry(30, 20, 120, 90);

 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

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;


    QFrame *frame = new QFrame(&fenetre);
    frame->setFrameShape(QFrame::StyledPanel);
    frame->setGeometry(30, 20, 120, 90);


    QLineEdit *lineEdit = new QLineEdit("Entrez votre nom");
    QPushButton *bouton1 = new QPushButton("Cliquez ici");
    QPushButton *bouton2 = new QPushButton("Ou là...");

    QVBoxLayout *vbox = new QVBoxLayout;
    vbox->addWidget(lineEdit);
    vbox->addWidget(bouton1);
    vbox->addWidget(bouton2);

    frame->setLayout(vbox);


    fenetre.show();

    return app.exec();
}

QGroupBox : un groupe de widgets

1

QGroupBox *groupBox = new QGroupBox("Titre du QGroupBox", &fenetre);

1

groupBox->setCheckable(true);

QTabWidget : des pages d'onglets

1. Créer un QTabWidget.
2. Créer un QWidget pour chacune des pages (chacun des onglets) du QTabWidget, sans leur indiquer de widget parent.
3. Placer des widgets enfants dans chacun de ces QWidget pour peupler le contenu de chaque page. Utiliser un layout pour positionner les widgets de préférence.
4. Appeler plusieurs fois addTab() pour créer les pages d'onglets en indiquant l'adresse du QWidget qui contient la page à chaque fois.

 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
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66

#include <QApplication>
#include <QtGui>

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

    QWidget fenetre;

    // 1 : Créer le QTabWidget
    QTabWidget *onglets = new QTabWidget(&fenetre);
    onglets->setGeometry(30, 20, 240, 160);

    // 2 : Créer les pages, en utilisant un widget parent pour contenir chacune des pages
    QWidget *page1 = new QWidget;
    QWidget *page2 = new QWidget;
    QLabel *page3 = new QLabel; // Comme un QLabel est aussi un QWidget (il en hérite), on peut aussi s'en servir de page


    // 3 : Créer le contenu des pages de widgets

        // Page 1

        QLineEdit *lineEdit = new QLineEdit("Entrez votre nom");
        QPushButton *bouton1 = new QPushButton("Cliquez ici");
        QPushButton *bouton2 = new QPushButton("Ou là...");

        QVBoxLayout *vbox1 = new QVBoxLayout;
        vbox1->addWidget(lineEdit);
        vbox1->addWidget(bouton1);
        vbox1->addWidget(bouton2);

        page1->setLayout(vbox1);


        // Page 2

        QProgressBar *progress = new QProgressBar;
        progress->setValue(50);
        QSlider *slider = new QSlider(Qt::Horizontal);
        QPushButton *bouton3 = new QPushButton("Valider");

        QVBoxLayout *vbox2 = new QVBoxLayout;
        vbox2->addWidget(progress);
        vbox2->addWidget(slider);
        vbox2->addWidget(bouton3);

        page2->setLayout(vbox2);


        // Page 3 (je ne vais afficher qu'une image ici, pas besoin de layout)

        page3->setPixmap(QPixmap("icone.png"));
        page3->setAlignment(Qt::AlignCenter);


    // 4 : ajouter les onglets au QTabWidget, en indiquant la page qu'ils contiennent
    onglets->addTab(page1, "Coordonnées");
    onglets->addTab(page2, "Progression");
    onglets->addTab(page3, "Image");


    fenetre.show();

    return app.exec();
}

1. Je crée d'abord le QTabWidget que je positionne ici de manière absolue sur la fenêtre (mais je pourrais aussi utiliser un layout).
2. Ensuite, je crée les pages pour chacun de mes onglets. Ces pages sont matérialisées par des QWidget.
   Vous noterez que pour la dernière page je n'utilise pas un QWidget mais un QLabel. Ca revient au même et c'est compatible car QLabel hérite de QWidget. Sur la dernière page, je me contenterai d'afficher une image.
3. Je crée ensuite le contenu de chacune de ces pages que je dispose à l'aide de layouts verticaux (sauf pour la page 3 qui n'est constituée que d'un widget). Là il n'y a rien de nouveau.
4. Enfin, j'ajoute les onglets avec la méthode addTab(). Je dois indiquer le libellé de l'onglet ainsi qu'un pointeur vers le "widget-page" de cette page.

Page 1


Page 2


Page 3