Interface utilisateur graphique (GUI) en Python

Environnement graphique
Interface utilisateur graphique (GUI) en Python
interface « texte »
ou « en ligne de commande »
interface graphique
Cours_9_4
© L. Tichit, 26/06/2015
page 1/13
Environnement graphique
Interface utilisateur graphique (GUI) en Python
•
Ce cours
présentation de quelques généralités sur les interfaces graphiques


•
construction progressive d’une interface : Edigraph
(explication et textes sources sur le site du cours)
Références (également sur le site du cours)

Tkinter reference : a GUI for Python – John Shipman

An introduction to Tkinter – Fredrik Lundh

Python Library Reference, la section 25
Cours_9_4
© L. Tichit, 26/06/2015
page 2/13
Environnement graphique
Interface utilisateur graphique (GUI) en Python
• l’auteur de Python n’a pas écrit une bibliothèque graphique spécifique
• Python utilise des bibliothèques préexistantes (écrites en C, C++, Tcl, …)
livrées avec une API (couche de fonctions-relais) Python
• les plus connues :
 tkinter, au-dessus de Tk, la bibliothèque graphique de Tcl/Tk
 PyQt, utilisant Qt (ex. KDE)
 PyGTK, bâtie sur GTK (The GimpToolkit, ex. Gnome)
• Tkinter, très complète, semble la préférée du monde « officiel » Python
• attention, l’accès n’est pas immédiat
 les bibliothèques graphiques sont des usines à gaz : beaucoup de
classes, ayant beaucoup de méthodes, avec beaucoup d’arguments, etc.
 la doc la plus complète est celle de Tcl/Tk, or Tcl n’est pas facile à lire
 beaucoup d’exemples sur Tkinter (et les autres API) utilisent
Python objet : choisir de faire de l'objet (ou pas)
Cours_9_4
© L. Tichit, 26/06/2015
page 3/13
Environnement graphique
Concepts communs et jargon
• widget (window+gadget), on dit aussi composant graphique
• l’interface d’une application : une fenêtre ou cadre d’application
(frame) contenant de nombreux autres composants
• le cadre de l’application existe et est visible aussi longtemps que
l’application tourne : pour l’utilisateur, le cadre « est » l’application
• d’autres cadres de même niveau (i.e. non inclus dans le cadre
d’application) apparaissent et disparaissent : les boîtes de dialogue
• les composants sont cibles d’actions de l’utilisateur (souris, clavier)
• ces actions du monde extérieur sont représentées dans le programme
par des événements :
 événements élémentaires ; ex. clic avec la souris
 événements élaborés, ou commandes ; ex. choix d’un item dans un menu
Cours_9_4
© L. Tichit, 26/06/2015
page 4/13
Environnement graphique
Le plus petit programme avec interface graphique
from tkinter import Tk
application = Tk()
# création d'un objet de type
# fenêtre d'application Tk
application.mainloop()
# l'application vit sa vie
print("C'est tout !")
ceci apparaît
ceci ne s’affiche pas… !
Cours_9_4
© L. Tichit, 26/06/2015
page 5/13
Environnement graphique
Programmation événementielle
• la boucle principale (la plus extérieure) du programme nous échappe :
l’essentiel se passe à l’intérieur de application.mainloop()
• programmation événementielle : structure générale d’un programme :
définitions de variables globales, fonctions, etc.
application = Tk()
mise en place de chaque composant
en indiquant quels événements le concernent
et comment il y répond (i.e. quelles fonctions appelle-t-il)
application.mainloop()
• pratiquement, il s’agit d’écrire le programme sous forme de bouts
de code « accrochés » aux gestionnaires d’événements
• la structure du programme en est modifiée
Cours_9_4
© L. Tichit, 26/06/2015
page 6/13
Environnement graphique
Interface graphique = arborescence de widgets
• les widgets d’une application ont une structure hiérarchique qui traduit
 l’inclusion des uns dans les autres
 le contrôle de la durée de vie
• création d’un widget
 variable = unWidget ( parent, paramètres-à-mot-clé )
exemple
boutonGo = Button(application,
text = "Vas-y", command = bosser, autres paramètres)
signification





Cours_9_4
Button(...) : un appel du constructeur de la classe Button
la valeur de la variable boutonGo est un objet Button
ce bouton est inclus dans application
la destruction de application détruira ce bouton
les autres paramètres fixent les propriétés du bouton
© L. Tichit, 26/06/2015
page 7/13
Environnement graphique
Gestionnaires de disposition
• certains widgets (Tk, Frame, …) sont destinés à en contenir d’autres :
on les appelle alors conteneurs
• un gestionnaire de disposition (layout manager, geometry manager, …)
est associé à chaque conteneur ; il gère :
 la taille et la disposition initiale des composants contenus
 la taille et la disposition de ces composants lors des changements ultérieurs
• Important : tant qu’un composant n’est pas associé à un tel gestionnaire,
il n’est pas visible
• trois sortes de gestionnaires :
 place : placement absolu, fait « à la main » par le programmeur (rare)
 pack : placement contre les bords du containeur
 grid : placement dans une grille (implicite)
Cours_9_4
© L. Tichit, 26/06/2015
page 8/13
Environnement graphique
Gestionnaires de disposition, résumé :
composant.grid(option = valeur, ... )
row = n° de ligne
column = n° de colonne
rowspan = nombre de lignes occupées
columnspan = nombre de colonnes occupées
sticky = somme de N, E, W ou S : placement du widget dans la case
composant.pack(option = valeur, ... )
side = un parmi TOP, LEFT, BOTTOM et RIGHT
expand = booléen
fill = un parmi NONE, X, Y et BOTH
l’un et l’autre :
padx = espace à laisser à l’extérieur des bords est et ouest (points)
pady = espace à laisser à l’extérieur des bords nord et sud (points)
ipadx = espace à laisser à l’intérieur des bords est et ouest (points)
ipady = espace à laisser à l’intérieur des bords nord et sud (points)
Cours_9_4
© L. Tichit, 26/06/2015
page 9/13
Environnement graphique
Evénements
• événement : signalement d’un phénomène du monde extérieur
affectant le programme
• c’est la boucle principale (mainloop) qui les détecte et les dispatche
• un événement a généralement une cible, qui est un composant :
 pour un événement souris, le composant sous le curseur
 pour un événement clavier, le composant qui a le focus
• plusieurs événements basiques peuvent être réunis pour former
un événement élaboré ou commande (ex : presser un bouton)
• réaction à une commande :
 une fonction est indiquée lors de la création du composant
 elle sera appelée, sans arguments, lorsque la commande sera actionnée
• réaction à un événement basique :
 on lie (bind) le couple (composant, événement) à une fonction
 qui sera appelée lorsque l’événement se produira
 avec pour argument les circonstances de l’événement en question
Cours_9_4
© L. Tichit, 26/06/2015
page 10/13
Environnement graphique
Quelques widgets
• Étiquette
Label(maître, text=texte, autres paramètres)
• Bouton
Button(maître, text=texte, command=fonction, autres paramètres )
• Case à cocher
Checkbutton(maître, text=texte, command=fonction, autres paramètres)
doit être associée à une IntVar dont la valeur correspond à
l’état de la case à cocher
• Boutons-radio
Radiobutton()
associés à une même IntVar ou StringVar qui les synchronize
voir les exemples simpleCheckbutton
Cours_9_4
© L. Tichit, 26/06/2015
page 11/13
Environnement graphique
Un widget très spécial : Canvas
• un widget Canvas se présente comme un panneau,
sur lequel on peut dessiner : canvas.create_rectangle( …),
canvas.create_oval(…), canvas.create_text(…), etc.
• il maintient la liste d’objets graphiques dessinés, dont il est le seul accès
• cette liste traduit l’ordre d’affichage (fin de la liste = devant de la scène)
• chaque objet graphique a un « object id » (un entier) qui l’identifie
• de plus, chaque objet graphique peut avoir un ou plusieurs tags
(chaînes de caractères) permettant de le référencer dans certaines
opérations
Cours_9_4
© L. Tichit, 26/06/2015
page 12/13
Environnement graphique
A propos de la configuration des widgets
• lors de la création ; ex. :
etiquette = Label(application, text = "Texte initial", ... )
• plus tard, par la méthode config ; ex. :
etiquette.config(text = "Nouveau texte")
• obtention de la valeur d’un paramètre :
texte = etiquette.cget("text")
• en plus de cela, pour un objet d’un canvas : lors de la création ; ex.
id = canevas.create_rectangle(20, 20, 80, 80, fill='red', ... )
• plus tard, par la méthode itemconfigure ; ex. :
canevas.itemconfigure(id, fill='blue')
• obtention de la valeur d’un paramètre :
couleur = canevas.itemcget(id, 'fill')
Cours_9_4
© L. Tichit, 26/06/2015
page 13/13