Création
d’applications
visuelles avec
PyQt5
1
By Maher Kouraichi
Basics of
PYTHON3
A quick reminder of python
Based on Python 3 Cheat Sheet
2
At [Link]
Base types
3
Identifiers
Diacritics = les
Accents
4
Variables assignment and statement Blocks
5
Boolean
Logic
6
Display and Input operations
7
Conversions
8
Modules/Names Imports
9
Conditional Statement
10
Exceptions on Errors
11
Conditional Loop Statement
12
Integer sequences
13
Iterative Loop Statement
14
Iterative Loop Statement Cont’d
15
Container types
16
Generic Operations on Containers
17
Sequence Containers Indexing
18
Operations
on Lists
19
Operations on dictionaries and sets
20
Operataions
on files
21
Operations
on strings
22
Function
definition and
call
23
Les classes
• Les classes sont le fondements de la
programmation orientée objets POO.
• Ça permet de modéliser des objets qu'on
peut, alors, manipuler dans un programme.
• Une classe définit le fonctionnement
général que vont avoir les ojets instanciés de
cette classe.
• Par exemple on veut modéliser une voiture
(car): il faut
savoir quelles sont les propriétés qui vont la repre
senter et qu'est ce qu'on veut implémenter
comme fonctionnalités de la voiture.
• Une classe peut hériter d'une autre, elle peut
étendre les fonctionnalités d'une autre etc...
24
Création de la classe Car
Constructor
class Car:
attributes def __init__(self,make,ref,year,price):
[Link] = make
[Link] = ref
[Link] = year
. Methods
Le constructeur sert à .
initialiser les attributs des def FillTank(self,fill):
objets (instances de [Link] += fill
classes)
Les méthodes servent à def Drive(self,km):
modéliser le #here we can add an assertion to be sure
fonctionnement des objets. #that the existing fuel level is sufficient
#for the demanded distance
[Link] += km
25
Création et utilisation d’objets
#create an object from a class : instanciating
myCar = Car("Hyundai","I20","2013",40)
#Accessing attribute values
Hyundai
print([Link])
I20
print([Link])
2013
print([Link])
#Creating other cars
anotherCar = Car("Ford","Fiesta","2016",38)
yetAnotherCar = Car("Renault","Clio","2017",39)
26
Méthodes Magiques
def __str__(self):
s = """voici les attributs de la Voiture:
Marque :{}
Reference:{}
An: {}
Réservoire: {}
Couleur: {}""".format([Link],[Link],[Link]
,[Link],[Link])
return s
def __repr__(self):#used when carInstance + enter
s = """Marque :{}
Reference:{}
An: {}
Réservoire: {}
Couleur: {}""".format([Link],[Link],[Link]
,[Link],[Link])
return s 27
L’héritage: inheritance
28
PyQt5:
interface
graphique
Créer une interface graphique en Python
est très simple, il suffit de faire le design
(Drag-and-Drop) puis programmer la
logique de fonctionnement de
l’application…
29
Introduction à PyQt
• PyQt = Py + Qt
= Python (langage de programmation) + Qt (un IDE extrêmement complet principalement pour des interfaces graphiques)
• PyQt sert de couche de liaison entre ces deux mondes et apporte Qt à
l'environnement Python
• Qt est une bibliothèque multiplateforme, reconnue avant tout pour ses fonctionnalités d'aide à la conception
d'interfaces graphiques.
• Mais Qt peut faire beaucoup plus :
• l'accès aux bases de données SQL,
• un navigateur web complet réutilisable,
• un système d'aide,
• des fonctionnalités multimédia.
• Depuis quelque temps, elle propose de nouvelles fonctionnalités plus intégrées et de plus haut niveau, comme:
• l'accès à des outils de cartographie et de localisation,
• à la communication sans fil (NFC, Bluetooth),
• à des graphiques et de la visualisation de données, etc.
30
Autres bibliothèques de développement d'interfaces
graphiques
• Tkinter:
• livré par défaut avec Python
• Possède peu de composants graphiques de base (boutons, zones de texte, etc.). En outre, => il faut recourir à
des extensions pour disposer de composants graphiques et des functionalities très utilisés (boîtes de
dialogue)… ça a été corrigé avec les années.
• wxPython :
• correspond à une couche de liaison vers une bibliothèque C++ (semblable à PyQt)
• Contient assez de composants graphiques
• le développement de quelques branches est très lent par moments
• Quelques problèmes de compatibilités
• PySide:
• Très semblable à PyQt pour ne pas dire identique.
• Adoptée et développée par Qt
31
Outils de développent
Qt Designer permet de On peut convertir ces Qt Linguist est utilisé pyqtdeploy facilite le
créer des interfaces interfaces en code pour les traductions en déploiement
graphiques en utilisant avec l'outil pyuic. collaboration avec d'applications PyQt, en
le glisser-déposer. d'autres outils prenant en compte des
(pylupdate et lrelease). dépendances non-
Python.
32
Developpement de GUI en utilisant PyQt5
• La création d’une GUI peut se réaliser par deux méthodes :
• Ecrire le code qui lui correspond en utilisant le Python et la bibliotheque
PyQt.
• Créer les objets graphiques (zone de texte, case à cocher, bouton
radio, bouton poussoir, menu, …) directement sur une fenêtre en
utilisant un outil de conception et de création d’interfaces
graphiques (un éditeur graphique tel que Qt Designer ou Qt Creator)
qui contient un éditeur d’interface utilisateur glisser et déposer (drag and
drop).
• Ceci créera un fichier « .ui » qui sera converti en fichier « .py »
• Cette dernière méthode permet juste de créer l’interface graphique, il
faut alors la convertir en Python (code qu’on aurait écrit en utilisant la
première méthode) et ajouter la logique de fonctionnement de l’interface.
33
Installation
Pour Installer PyQt5 sur Thonny:
• Ouvrir thonny / Menu tools / Manage
packages
• Taper le nom du package à installer
(PyQt5, pyqt5-tools ou bien
PyQt5Designer)
• Cliquer sur install
• La version PyQt6 existe déjà et peut
être utilisée à la place de PyQt5
34
Développement d'une
application avec des widgets
Nous allons voir :
• les éléments de base d'une interface graphique basée sur
Qt Widgets ;
• la gestion des événements avec les signaux et slots ;
• la conception des fenêtres à la souris (sans rien avoir à
coder) avec Qt Designer ;
• l'internationalisation d'une application ;
• l'accès à une base de données.
Pour illustrer ces concepts, nous allons construire pas à pas
une application de gestion de livres dans une bibliothèque.
Nous appellerons cette application BiblioApp
35
Premier programme en
PyQt5
Ouvrir un nouveau script Python, taper ce code puis
exécuter:
import sys
from [Link] import
Qapplication, QMainWindow, QLabel
app = QApplication([Link])
mainWindow = QMainWindow()
QLabel("Bonjour le monde!",mainWindow)
[Link]()
app.exec_()
36
Tous les éléments sont des Composition d'une GUI :
widgets dans une les Widgets
QMainWindow
• Une application GUI est composée de plusieurs
composants qui communiquent entre eux.
• Ils peuvent être graphiques, c'est-à-dire visibles à
l'écran, ou non graphiques
• Parmi les composants graphiques d'une application
donnée, on aura en général une fenêtre principale
(MainWindow) et plusieurs fenêtres secondaires
(typiquement, des fenêtres de dialogue)
• Le programmeur a pour rôle de créer ces fenêtres,
selon un assemblage de divers composants
graphiques appelés widgets.
widgets == windows gadgets
37
Exemples de widgets
38
Principe de programmation d’une GUI: la P.O.O
• La programmation d’une GUI se base les principes de la POO.
• chaque élément de l'interface utilisateur est un objet : il a ses
attributs et ses méthodes, définis par la classe dont il est
l'instance.
• PyQt fournit les composants sous forme d'un ensemble de
classes. L’instanciation d’un composant doit fournir les
arguments requis par les constructeurs.
• Vu la complexité interne des composants, PyQt utilise la
technique de l'héritage de façon poussée : les classes à
utiliser font partie d'une hiérarchie de classes parfois
imposante ;
39
QWidget est parent à tous les Widgets
• Par exemple, la plupart des éléments affichés (champs de texte, boutons, etc.) héritent d'une classe
abstraite appelée QWidget qui intègre toute la stratégie de positionnement et de dimensionnement
d'un élément.
• La classe QWidget sait juste qu'elle doit dessiner quelque chose dans une zone rectangulaire sur
l'écran ; ce qu’il faut dessiner exactement est défini dans les classes enfants de QWidget.
Héritage
40
Event-Driven Programming: Programmation
événementielle
A l’exécution d’une application de type GUI :
1. Initialisation de l’application et démarrage
2. Elle se met en attente de l’action de l’utilisateur et
réagit aux événements (clic de souris, utilisation du
clavier…)
c’est la boucle d’évènements qui entre en fct
Elle attend un évènement (signal) et le dirige
vers la fct de traitement (slot) adéquat.
Les évènements peuvent être: les widgets de PyQt gèrent par eux-
mêmes la majorité des événements
de bas niveau:
liés aux actions de l'utilisateur (clics…) ou redimensionnement d'une fenêtre, Le programmeur peut dès lors se
sont émis en interne à l’application (fin d'une affichage et parcours de menus, concentrer sur les événement
tâche, réception d'un message, échéance changement de couleur quand le curseur
d'un certain intervalle de temps, etc.) passe au-dessus d’un élément,
spécifiques à l'application et les
infobulles, etc.). traitements qui leur sont associés.
41
Signaux et slots de PyQt
• Le grand avantage du mécanisme signaux/slots
est qu'il permet une indépendance entre les
• PyQt définit un mécanisme original et puissant : les signaux et les slots. composants.
• Le composant qui émet le signal n'a pas besoin de
• Lorsqu'un événement se produit, un signal est émis, identifiant:
connaître le ou les composant(s) qui lui sont
• l'événement,
connectés : il émet son signal et ne se soucie pas
• le composant où il s’est produit et de ce qu’il en advient.
• d'éventuels paramètres associés.
• Le programmeur peut connecter ce signal à une méthode spéciale appelée slot. Cette méthode s'exécutera alors à
chaque fois que le signal est émis.
• Un signal ne doit pas forcément être connecté à un slot (typiquement, si le traitement de PyQt est suffisant).
• Si nécessaire, le même signal peut être connecté à plusieurs slots, qui s'exécuteront tous à l'émission du
signal.
42
Créer une première
application
43
First app…
Fenetre principale:
Titre de la fenètre QMainWindow
principale: attribut
de QMainwindow
Zone de texte pour
introduire des
Label contenant données: QLineEdit
le mot “Titre”:
QLabel
Bouton
contenant “Ok”:
QpushButton
44
Fenêtre principale : la classe QMainWindow
• La majorité des applications PyQt contiennent au minimum une
fenêtre, appelée fenêtre principale. mainWindow
• Elle apparaît au démarrage et constitue le point d'entrée
qui donne accès à toutes les fonctions de l'application.
• Le contenu de cette fenêtre et son comportement seront définis
par le programmeur dans une classe Python qui hérite de la
classe QMainWindow.
• QMainWindow définit un agencement standard pouvant
accueillir:
• une barre de menus (Menu Bar),
• des barres d'outils (Tollbars),
• des dock widgets et
• une zone centrale (central widget) qui va contenir les éléments spécifiques à
l'application.
• Tous ces éléments périphériques sont optionnels, mais, s'ils
sont définis, ils seront placés par PyQt selon le format standard
suivant. 45
Utilisation de la classe QMainWindow
• Pour notre application, la première chose à faire sera de créer un widget
central, qui est en général un objet conteneur passif destiné à accueillir les
éléments spécifiques à l'application (libellés, champs de saisie texte, listes,
boutons, etc.).
• Ce widget central est en quelque sorte la grande plaque Lego rectangulaire
sur laquelle nous allons placer nos briques.
• En termes PyQt, ce widget sera le parent de tous les éléments visibles
de la fenêtre, hors éléments standards mentionnés (barre de menus et
consorts).
• La fenêtre principale de notre application de bibliothèque sera créée par
instanciation de la classe MainWindowBiblio (qu’on va créer) qui hérite de
QMainWindow.
• L’avantage d’utiliser l’heritage c’est de pouvoir personaliser notre
application.
• Pour travailler dans les règles de l’art, nous allons écrire la classe
MainWindowBiblio, dans le fichier « main_window_biblio.py »
46
Code préliminaire (en vrac): BAD CODE
import sys
from [Link] import QApplication, QMainWindow, QLabel, QPushButton, QLineEdit,
QWidget
app = QApplication([Link])
mainWindow = QMainWindow()
[Link](300,150)
[Link]("BiblioApp")
[Link] = QWidget()
[Link]([Link])
label = QLabel("Titre",[Link])
lineEditTitre = QLineEdit([Link])
[Link](80,0)
pushButtonOK = QPushButton("OK",[Link])
[Link](20,40)
[Link]()
app.exec_() 47
Création de la classe MainWindowBiblio import des classes PyQt qu'on
utilise.
MainWindowBiblio comme classe
fille de QMainWindow
appel au constructeur parent, via
la fonction super
Dimensionnement de la fenêtre
principale définition du titre à afficher pour
la fenêtre
création d'un widget central
appelé centralWidget, instance Définit le widget donné comme
de QWidget étant le widget central de la
fenêtre principale.
Création d’un label (instance de
QLabel), champ de saisie
Déplacement de widgets (instance de QLineEdit)
et d’un bouton (instance de
QPushButton)
48
Création de la classe MainWindowBiblio
• Chaque constructeur attend un argument indiquant un objet parent.
• [Link] = QWidget(self)
• [Link] = QLabel("Titre",[Link])
• [Link] = QLineEdit([Link])
• [Link] = QPushButton("OK",[Link])
• Ceci permet à PyQt d'enregistrer les relations de parenté entre composants et définir ainsi
une arborescence.
• Nous voyons ainsi que, par construction, le widget central ([Link]) est enfant de
la fenêtre principale (self) et les trois autres éléments sont enfants de ce widget central.
• La hiérarchie des composants de notre fenêtre MainWindowBiblio est illustrée sur la figure
suivante.
• Ces relations sont importantes pour plusieurs raisons, notamment pour le positionnement des
composants puisque les coordonnées de n'importe quel composant sont relatives à son
parent, avec (0,0) correspondant au coin supérieur gauche du parent.
49
Le Programme principal
• Une fois la classe modélisant la fenètre
principale réalisée, nous passons à créer
le programme principale.
• Ce sera fait dans le fichier start_app.py
• Outre la fenêtre principale définie plus
haut (MainWindowBiblio), ce
programme utilise une instance de
Qapplication.
• Qapplication est un objet discret mais
essentiel de PyQt : il gère notamment
l'initialisation du moteur graphique et
la gestion des événements.
• Le programmeur n’a en général pas à se
soucier de cet objet si ce n'est
l'instancier et l'exécuter.
50
• Importer la classe MainWindowBiblio (4) et l'instancier (6)
• Notons que la création d'une fenêtre n'implique pas son
affichage : elle est simplement chargée en mémoire et
initialisée ; pour la faire apparaître à l'écran, il faut invoquer
À la fermeture de la fenêtre, la méthode exec_ la méthode show() : (7)
renvoie un nombre appelé code de retour: rc = • On crée une instance de QApplication (5) et on passe au
• zéro si l'application s'est terminée de constructeur QApplication les arguments éventuels fournis au
façon normale ou démarrage ([Link]).
• un nombre négatif identifiant le type d'erreur • on démarre l'application en invoquant la méthode exec_() (8)
dans le cas contraire. • l'appel à la méthode exec_() est essentiel : il donne vie à
Le programme principal peut alors se terminer ; l'application en lançant la boucle d'événements qui va réagir
la bonne pratique est de transmettre ce code à à toutes les actions de l'utilisateur.
l'environnement d'exécution via [Link](rc). • Cette méthode ne rend pas directement la main à l'appelant:
elle n'est interrompue qu'à la clôture de l'application, quand
l'utilisateur ferme la fenêtre principale.
51
Utilisation de Qt
Designer
pour créer l’interface utilisateur, on peut utiliser un outil
purement visuel et ne pas programmer une seule ligne de
code. Mais le fonctionnement est à programmer…
52
Qt Designer
Utilisation de Qt Designer pour créer la GUI
• On peut, aussi, créer l’interface en utilisant l’outil visuel Qt
Designer
• Il permet d’utiliser le “Drag-n-Drop” pour construire la fenêtre
principale en plaçant les widgets. [Link]
• On n’aura plus à créer les widgets à travers leurs classes.
• Une fois le placement et la mise en forme terminée,
1. Veiller à bien nommer les widgets et leurs donner leurs formes finales
2. Enregistrer la “User Interface” sous un fichier d’extension “.ui”
pyuic5
3. convertir cette interface en script Python en utilisant l’utilitaire pyuic5 en
ligne de commande
4. Intégrer le script Python généré dans le projet
5. Utiliser les widgets par leurs noms donnés lors de la phase de conception [Link]
pour programmer la logique de fonctionnement de l’application.
53
Construction de la fenêtre BiblioApp
• Les étapes à voir dans cette partie:
1. Création du fichier .ui
2. Placement des éléments principaux
3. Placement des widgets restants
4. Ajout des menus
5. Mise en page (layouts)
6. Prévisualisation et rectification
7. Attribution des noms aux widgets
8. Génération du code
54
Création du fichier .ui
55
Placement des éléments principaux
• Par éléments principaux, on veut
dire:
• tous ce qui est conteneurs : Widgets
pouvant contenir d’autres. Ils servent TreeView
à regrouper des éléments par
fonction, appartenance ou autre
critère.
• Les widgets en dehors des
conteneurs
• Pour notre cas, on placera la GroupBox
TreeView, le GroupBox et trois
boutons.
• Double cliquer sur les widgets pour
modifier le texte associé.
• On n’a pas à se soucier des
positions pour l’instant
56
Placement des widgets restants
• Maintenant, c’est le tour du reste des
widgets: les placer et modifier le texte
associé:
• sept Label : libellés fixes ; après double-
clic, on saisit respectivement Titre,
Auteur(s), Genre, Éditeur, Année de
parution, Résumé et Prix ;
• trois LineEdit : champs de texte pour la
saisie du titre, des auteurs et de l'éditeur ;
• Un textEdit: pour le résumé du livre
• une ComboBox : liste déroulante pour la
saisie du genre ;
• un DateEdit : bouton fléché pour la saisie
de l'année de parution ;
• une DoubleSpinBox : bouton fléché pour
la saisie du prix.
57
Placement des widgets restants : paramétrage
1. Éditer la liste de choix du combo par
double clic (1)
(2)
2. Attribuer un nom à la fenêtre principale
dans Property Editor et on modifie la
propriété : windowTitle : BiblioApp
3. Paramétrer le DateEdit dans Property
Editor pour qu’il affiche seulement les
années: displayFormat : yyyy
4. Édite les propriétés du DoubleSpinBox
(4)
pour que:
• Suffix: DT,
• maximum: 9999.99,
• Alignement-Horizontal: alignRight
5. Tous les QLabel alignés sur la droite
(3)
58
Ajout des menus
• Ajouter le menu principal en cliquant sur “Type Here”
et écrire “&File” puis
• dans la liste déroulante ajouter “&Open”, “&Save”.
• Ajouter un séparateur puis “&Quit”.
• Le caractère “&” sert à designer le caractère à utilizer
comme raccourcis en appuyant sur “Alt”
59
Mise en page (layouts)
• Il s’agit de mettre en page les différents éléments
de l’interface
• Cette action fera que les widgets prennent leurs
emplacements les uns par rapport aux autres:
leurs tailles varient suivant la taille de la fenêtre.
• Commencer par les widgets qu’on desire qu’ils
gardent leurs tailles initiales => ajouter des
espaceurs (spacer)
• De cette façon, c’est les espaceurs qui
absorbent la variation de taille de la fenêtre et
non le widget.
60
Mise en page (layouts)
• Rattacher les « spacers » avec les widgets
dont on veut garder la taille en utilisant les
« Horizontal Layout »
• On utilisera un « Vertical Layout » pour
garder la taille d’un widget en hauteur
61
Mise en page (layouts)
• Mettre les widgets des conteneurs
en page en sélectionnant le
“Layout” approprié suivant leurs
dispositions.
• Pour le “GroupBox”, les widgets seront
disposés en grille puisqu’on a plusieurs
éléments en lignes et en colonnes.
• Cliquer dans un espace vide du
GroupBox et choisir “GridLayout”
• Pour le MainWindow (fenêtre
principale) l’agencement sera
vertical => “VerticalLayout”
62
Prévisualisation et rectification
• Maintenant, on peut voir le résultat de
l’interface qu’on vient de réaliser
comme elle va apparaitre lors de la
programmation
• Cliquer sur « Preview » dans le menu
« Form »
63
Attribution des noms aux widgets
• Pour pouvoir programmer la
logique de fonctionnement de
l’application, il faut que les
widgets soient correctement
nommés.
• Les noms doivent être significatifs
(renseigner la function du widget)
et renseignent sur la nature du
widget.
• Exp: le widget PushButton qu’on
utilise pour créer un nouveau livre
sera naturellement appelé
“btnNewBook”
• LineEdit auteur txtAuthor etc…
64
Génération du code
• Il s’agit de convertir le fichier [Link]
en un script Python à utiliser dans le
projet.
• PyQt fournit un compilateur de fichier .ui
appelé pyuic5
• Le fichier généré n'est, bien sûr, pas
destiné à être édité par le programmeur,
sous peine de perdre tout ce qui a été
modifié à la génération suivante.
• Le code généré sera intégré dans notre
programme via héritage ou composition.
65