Interface graphique en
python : Qt Désigner
+PyQt5
Mme yosra kochbati
Lycée Pilote Bizerte
Présentation de l’interface graphique(GUI)
• Les interfaces graphique (ou Interfaces homme-machines) sont appelées
GUI(Graphical User Interface)
• Elles permettent à l’utilisateur d’interagir avec un programme
informatique, grâce aux différents objets graphiques (zone de texte, case à
coucher, bouton radio, bouton poussoir ,,,)
• Ces objets graphiques sont généralement actionnées avec un dispositif de
pointage,l e plus souvent la souris
Présentation de Qt Designer
Qt Designer est un générateur d’interface
graphique, il permet de créer vos fenêtres
visuellement (widgets) et modifier ses
propriétés (nom, taille, couleur…..)….
Notion de widget
Le widget est un composant d’interface graphique (label, zone de texte, bouton
radio, case à cocher , bouton poussoir, liste déroulante, barre de
défilement,,,,,,,,,)
La programmation événementielle
La programmation événementielle est une programmation
basée sur l’événements,
Les modules(fonctions) définies par un code, seront
appelés et exécutés suite à un événement déclenché par
l’utilisateur, par exemple: le clic sur un bouton
Présentation de l’interface de Qt Designer
La fenêtre principale de Qt Designer fournit une barre de menus
La fenêtre principale fournit également une barre d'outils qui affiche les
options couramment utilisées. Elle comprend également d’autres composantes
qui fournissent un ensemble de fonctionnalités et d'outils :
Boîte de widgets
Inspecteur d'objets
Éditeur de propriétés
Navigateur de ressources
Éditeur d'actions
Éditeur de signal / slot
Création d’une fenêtre principale avec Qt Designer
Pour créer une fenêtre principale pour une application : Menu fichier / Nouveau /
Main Window / Créer
Création d’une fenêtre principale avec Qt Designer
Modification des propriétés du fenêtre
principale avec Qt Designer
On peut modifier les propriétés du fenêtre principale à partir de l’éditeur de
propriétés comme exemple :
Changer le nom de l’objet
Ajouter un titre pour la fenêtre
Changer la taille du fenêtre
Changer le font et la couleur
Ajouter une icône pour la fenêtre
Etc …
Modification des propriétés du fenêtre principale
avec Qt Designer
Prévisualisation du fenêtre avec Qt Designer Pour pré-visualiser une
fenêtre pour une application : Menu Formulaire/Prévisualisation
Ajout des Widgets dans la fenêtre avec Qt Designer
• On peut ajouter des Widgets (Label, Line Edit, Push
Button, Radio Button, Check Box, Combo Box, List
Widget, Table Widget, etc…) directement sur une fenêtre
avec le mécanisme glisser et déposer à partir de la boîte
de widgets
Ajout des Widgets dans la fenêtre avec Qt Designer
Modification des propriétés des widgets
avec Qt Designer
On peut modifier les propriétés des widgets à partir de l’éditeur de propriétés
comme exemple :
Changer le nom de l’objet (widget)
Changer le texte de l’objet
Changer la taille de l’objet (largeur et hauteur)
Changer le font, la couleur, …
Etc …
N.B:
Le fichier créé par Qt Designer (l’interface graphique) possède
l’extension “.ui” (User Interface),
Après avoir réalisé l’interface graphique de votre application
(Nom_Fichier.ui), on doit passer à la partie programmation
(écriture du code) (Nom_Fichier.py), pour cela il faut lancer un
éditeur Python (thonny) et écrire le code correspondant à votre
application.
Il faut mettre les deux fichiers Nom_Fichier.ui et Nom_Fichier.py
dans le même répertoire
N.B. : Pour écrire le code correspondant à notre
application (Nom_Fichier.py) on va utiliser l’éditeur Thonny
et bien sûre il faut installer les packages PyQt5 et PyQt5-
tools
TP 1: Calcul Plus Grand Commun Diviseur avec
interface graphique Qt Designer + PyQt5
Pour calculer le Plus Grand Commun Diviseur des 2 entiers positifs non nuls A et
B on peut utiliser la méthode de différence.
Méthode : Remplacer A par A-B si A>B
Remplacer B par B-A si B>A
On recommence jusqu’à A=B et le PGCD est A ou B.
Exemples : PGCD (24,18) = PGCD (6,18)
= PGCD (6,12)
= PGCD (6,6) = 6
PGCD (27,90) = PGCD (27, 63)
= PGCD (27, 36)
= PGCD (27, 9)
= PGCD (18,9)
= PGCD (9,9) = 9
Pour calculer le PGCD des deux entiers positifs non nuls A et B , on se
propose de concevoir une interface graphique contenant les éléments suivant :
Un label contenant le texte : "Plus Grand commun diviseur"
Un label demandant la saisie de A : "Taper A :"
Un label demandant la saisie de B : "Taper B :"
Deux zones de texte permettant la saisie de A et B
Un bouton intitulé "PGCD"
Un label pour afficher le PGCD
Travail demandé :
1) Concevoir une interface graphique comme illustrée ci-dessus et l’enregistrer, dans votre dossier de
travail, sous le nom "InterfacePGCD".
2) Créer un programme Python et l’enregistrer dans votre dossier de travail, sous le nom "PGCD"
3) Développer dans votre programme "PGCD", une fonction calcul_pgcd(A,B) qui permet de
calculer le PGCD des deux entiers A et B.
4) Dans le programme "PGCD" :
Ajouter les instructions permettant d’appeler l’interface graphique intitulée "InterfacePGCD" en
exploitant l’annexe ci-après.
Développer un module "Play", qui s’exécute suite à un clic sur le bouton "PGCD" permettant de
récupérer les deux entiers A et B saisis, puis d’exploiter la fonction "calcul_pgcd" afin d’afficher le
plus grand commun diviseur de A et B
Exemples
Annexe :
from [Link] import loadUi
from [Link] import QApplication
…………………..
…………………..
app=QApplication([])
windows=loadUi("Nom_interface.ui")
[Link]()
windows.Nom_Bouton.[Link](Nom_Module)
app.exec_()