Création d’une boite de dialogue

Nous allons voir comment créer une boite de dialogue en utilisant Designer, un outil disponible dans la distribution de Qt et qui permet de créer facilement une interface graphique.

Nous allons créer une boite de dialogue qui permet à un utilisateur de saisir son nom et son prénom.

La boite de dialogue

Création de l’interface avec Designer

Designer est un outil qui permet de concevoir graphiquement des interfaces. Il permet de créer des fenêtres, des boites de dialogue ou de simples widgets. Il sauve votre travail dans des fichiers avec l’extension *.ui. Il s’agit d’un fichier XML. Ainsi, Designer n’est pas lié à un langage de programmation particulier. Nous verrons par la suite que PySide2 fournit un utilitaire pour générer du code Python à partir d’un fichier *.ui.

Qt Designer est installé avec la distribution de Qt. Sous Windows, le programme s’appelle designer.exe.

Création du projet dans Designer

À l’ouverture de Designer, choisissez le template Dialog with Buttons Bottom.

Pour créer la boite de dialogue, vous pouvez :

1. Ajouter par glisser/déposer un form layout au dessus de la barre de boutons.

2. Ajouter par glisser/déposer des widgets Label et Line Edit pour les champs.

3. Avec l’inspecteur d’objet (en haut à doite), renommer les widgets Line Edit en nom et prenom.

4. Sélectionner la widget Dialog qui représente la boite de dialogue et choisir dans le menu Formulaire > Mettre en page verticalement.

La boite de dialogue dans Designer

Vous pouvez sauver la boite de dialogue dans le fichier infodialog.ui.

Génération du code Python avec pyside2-uic

Grâce à l’outil pyside2-uic, nous allons pouvoir générer le code Python à partir du fichier infodialog.ui. pyside2-uic est un outil en ligne de commandes :

$ pyside2-uic infodialog.ui -o infodialog_ui.py

La ligne de commande ci-dessus génère le fichier infodialog_ui.py avec le code Python nécessaire pour créer la boite de dialogue.

Note

Il est possible de voir directement la boite de dialogue grâce à la commande :

$ pyside2-uic --preview infodialog.ui

Implémentation de la boite de dialogue

Si vous éditez le fichier infodialog_ui.py, vous constaterez qu’il contient la déclaration de la classe Ui_Dialog. Cette classe n’hérite d’aucune widget Qt et elle dispose de la méthode setupUi. Cette méthode attend en paramètre l’objet qui correspond réellement à la boite de dialogue, c’est-à-dire un objet de type QDialog.

pyside2-uic ne génère donc pas directement des classes qui correspondent aux interfaces graphiques. Il génère des classes utilitaires qui permettent de construire les interfaces graphiques grâce à la méthode setupUi. Notez que la classe Ui_Dialog définit en attributs toutes les widgets que nous avons ajoutées avec Designer. Ainsi, elle définit les attributs nom et prenom qui correspondent aux widgets contenant les données saisies par l’utilisateur.

Avertissement

Il ne faut pas modifier le fichier généré par Designer. Nous allons implémenter le reste de l’application dans nos propres fichiers. Ainsi, il est plus facile de régénérer les fichiers *.ui si nous avons besoin de modifier ultérieurement les interfaces graphiques.

Créons le fichier infodialog.py. Nous allons pouvoir implémenter notre boite de dialogue dans ce fichier.

infodialog.py : l’implémentation de la boite de dialogue

from PySide2.QtCore import Slot
from PySide2.QtWidgets import QDialog
import infodialog_ui

class InfoDialog(QDialog):

    def __init__(self, parent=None):
        super().__init__(parent)
        self.ui = infodialog_ui.Ui_Dialog()
        self.ui.setupUi(self)

    @Slot()
    def accept(self):
        self.prenom = self.ui.prenom.text()
        self.nom = self.ui.nom.text()
        super().accept()

La classe InfoDialog hérite de QDialog. Pour son constructeur, elle appelle le constructeur de sa superclasse. Ensuite elle crée un objet de type Ui_Dialog afin d’appeler la méthode setupUi en se passant en paramètre. Ainsi les widgets et les layouts définis ave Designer sont ajoutés dans notre boite de dialogue.

On redéfinit également la méthode accept qui est héritée de QDialog. Par défaut, cette méthode signale que l’utilisateur a accepté (généralement en cliquant sur un bouton Ok) et positionne le résultat de la boite de dialoque à QDialog.Accepted. La redéfinition de cette méthode permet juste de récupérer les valeurs saisies pour les ajouter comme attributs de la boite de dialogue.

Note

Le template que nous avons utilisé dans Designer associe le signal triggered du bouton Ok au slot accept de la boite de dialogue. De même, il associe le signal triggered du bouton Cancel au slot reject de la boite de dialogue

Implémentation de l’application

Il ne reste plus qu’à créer le programme qui affiche la boite dialogue. Pour un programme simple, nous pouvons directement appeler la méthode exec_ pour afficher la boite de dialogue et lancer la boucle d’événements. L’application s’arrêtera après la fermeture de la boite de dialogue. Cela donne la possibilité au programme de connaître le résultat de la boite de dialogue et, si l’utilisateur a accepté, de récupérer et d’afficher les informations sur le prénom et le nom.

Le programme principal

from PySide2.QtWidgets import QApplication, QDialog
from infodialog import InfoDialog

if __name__ == "__main__":
    app = QApplication([])
    dlg = InfoDialog()
    dlg.exec_()
    if (dlg.result() == QDialog.Accepted):
        print(f"Bonjour {dlg.prenom} {dlg.nom}")