Chapitre 8 Interface graphique Table des matières Table des matières 1 1 Présentation 2 1.1 Interface graphique............................. 2 1.2 Schéma général du programme...................... 2 1.3 Lectures complémentaires......................... 3 2 Les widgets 4 2.1 Le widget principal............................. 4 2.2 Les widgets secondaires.......................... 4 2.3 Création d un widget............................ 4 2.4 Méthodes.................................. 4 3 La classe Tk() 5 3.1 Créer une fenêtre.............................. 5 3.2 Méthodes graphiques............................ 5 4 La classe Button() 6 4.1 Création................................... 6 4.2 Exemple................................... 6 5 La classe Label() 7 5.1 Création................................... 7 5.2 Afficher un texte statique......................... 7 5.3 Afficher un texte modifiable........................ 7 6 La classe Entry() 9 6.1 Création................................... 9 6.2 Exemple................................... 9 7 Placement des widgets 11 7.1 La méthode pack()............................. 11 7.2 La méthode grid()............................. 11 8 Exercices 12
1. Présentation 1.1 Interface graphique Jusqu à présent, nous avons écrit des programmes avec les deux caractéristique suivantes : 1) les interactions (entrées et sorties) entre l utilisateur et le programme sont effectuées par l intermédiaire de la console en mode texte. 2) l exécution du programme se fait de manière séquentielle (les instructions sont exécutées les unes après les autres dans l ordre prévu par le code). Avec un programme utilisant une interface graphique, le fonctionnement est complètement différent, les deux caractéristiques ci-dessus sont modifiées : 1) les interactions se font en mode graphique (l utilisateur clique sur des boutons, des zones de texte de type formulaire sont prévues,...) 2) lorsque le programme est lancé, il se met en attente d événements (actions de l utilisateur via la souris ou le clavier sur l interface) dans une boucle sans fin. Chaque événement reçu par le programme est traité par un gestionnaire qui exécute le code associé à l événement. La conception d une interface graphique consiste donc à associer l exécution de fonctions avec des événements. Pour utiliser une interface graphique (GUI, Graphical User Interfaces), il est nécessaire de faire appel à une bibliothèque extérieure. Celle utilisée ici sera tkinter (abréviation de tk interaction), mais d autres choix sont possibles. 1.2 Schéma général du programme Un programme en langage Python utilisant l interface graphique basée sur tkinter est construit de la manière suivante : 1) Création d une fenêtre principale, objet de la classe Tk(). 2) Cette fenêtre principale permet l affichage de widgets (abréviation de window gadget) : ce sont des éléments graphiques comme des boutons, une animation graphique, des images, du texte,... 3) Des événements peuvent ensuite être associés aux widgets. 4) Lorsque l habillage graphique est complet et que les événements ont été définis, le gestionnaire d événements (mainloop) est lancé : le programme réalise l affiche des widgets puis se met en attente de sollicitations provenant des périphériques (clavier, souris, horloge,...) Forme générale du programme : Interface graphique 2/12
Syntaxe from tkinter import * # importation du module tkinter # étape 1 : création de la fenêtre principale Fenetre = Tk() # étape 2... construction des widgets... # étape 3... construction des événements... # étape 4, mise en attente d'événements Fenetre.mainloop() 1.3 Lectures complémentaires Ce document est une introduction au module tkinter. Pour poursuivre la découverte du module tkinter, on lira attentivement : LE site indispensable : http ://tkinter.fdex.eu/index.html Le livre de Gérard Swinnen, chapitre 8 page 79 Des exemples sur le site de F. Sincere (voir la page des liens) Interface graphique 3/12
2. Les widgets Un programme basé sur une interface graphique est structuré à l aide de widgets. On distingue deux types de widgets : un widget de haut niveau (la classe Tk()) 15 classes de widgets secondaires. 2.1 Le widget principal Il est décrit au paragraphe suivant. Ce widget principal constitue la fenêtre principale dans laquelle tous les éléments suivants seront intégrés. 2.2 Les widgets secondaires Parmi les 15 classes de widgets proposés par tkinter, nous commencerons par utiliser les trois suivantes qui seront décrites (partiellement) dans ce document. Un widget de la classe Button() est un bouton cliquable avec du texte Un widget de la classe Label() est une zone de texte ou une image dans la fenêtre Un widget de la classe Entry() permet à l utilisateur d écrire du texte (zone de saisie) La liste complète se trouve page 94 dans le livre de G.Swinnen. 2.3 Création d un widget La création d un widget se fait en deux temps Déclaration du widget à partir de sa classe en précisant les options (taille, couleurs, poisionnement,...) Affichage du widget (plusieurs méthodes possibles) dans la fenêtre graphique parent 2.4 Méthodes Un widget est un objet (représentant d une classe). Il existe pour chaque classe une famille de méthodes à utiliser avec les objets de la classe. Pour utiliser une méthode, il faut utiliser la notation pointée : nomobjet.nomméthode() Interface graphique 4/12
3. La classe Tk() La classe Tk() permet de construire une fenêtre graphique. Il s agit de l objet de plus haut niveau de l application qui va contenir tous les éléments suivants. Cette fenêtre principale s affiche directement à l écran et va intégrer les éléments graphiques (widgets) qui seront définis plus tard. 3.1 Créer une fenêtre Deux étapes sont nécessaires : définir la fenêtre puis l afficher. Syntaxe from tkinter import * # importation du module tkinter Fen = Tk() # création d'une fenêtre dont le nom est Fen Fen.mainloop() # affichage de la fenêtre et mise en attente d'événement 3.2 Méthodes graphiques Parmi les méthodes qui s appliquent à tout objet de la classe Tk : destroy() : pour fermer la fenêtre title() : affiche un titre dans la barre supérieure geometry() : précise les dimesnsions en pixels mainloop() : affiche la fenêtre et lance le gestionnaire d événements resizable(width=false) : empêche le redimensionnement de la fenêtre resizable(height=false) Interface graphique 5/12
4. La classe Button() Un widget de la classe Button permet d afficher un bouton. Un clic gauche avec la souris sur l objet bouton permet de déclencher une action. 4.1 Création Pour créer un widget de la classe Button(), il faut écrire : Syntaxe # déclaration d'un widget dont le nom est w w = Button(parent, option1 = valeur1, option2 = valeur2,...) # le widget est placé dans son conteneur w.pack() Options : bg : couleur de fond (background) bd : couleur du cadre height et width : padx et pady : espace autour du texte en pixels text : texte à afficher sur le bouton font : police et taille des carcatères command : fonction à exécuter lors d un clic. Attention, la fonction s écrit sans parenthèse et donc sans paramètre ici! 4.2 Exemple Le programme suivant affiche une fenêtre avec un unique bouton. Lorsque l on clic sur le bouton, l heure s affiche dans la console. Exemple from tkinter import * import time def Affiche_heure(): timenow = time.localtime() print('il est',timenow[3], 'heures', timenow[4], 'minutes et', \ timenow[5], 'secondes') Fen = Tk() Bouton = Button(Fen, text="quelle heure est-il?", \ command = Affiche_heure, padx = 20, pady = 20, \ font = ('Helvetia',40)) Bouton.pack() Fen.mainloop() Interface graphique 6/12
5. La classe Label() Un widget de la classe Label() permet d afficher un texte ou une image. 5.1 Création Pour créer un widget de la classe Label(), il faut écrire : Syntaxe # déclaration d'un widget dont le nom est w w = Label(parent, option = valeur) # le widget est placé dans son conteneur w.pack() Quelques options : bg : couleur de fond (background) bd : couleur du cadre text : permet de préciser le texte à afficher textvariable : permet de modifier le texte affiché 5.2 Afficher un texte statique Dans cet exemple, un simple texte, statique, est affiché dans la fenêtre. Exemple # fenêtre principale Fenetre = Tk() # création du widget Label Message = Label (Fenetre, bg='blue', text = 'salut') Message.pack() Fenetre.mainloop() 5.3 Afficher un texte modifiable Pour pouvoir modifier le texte écrit dans un widget de la classe Label, il faut utiliser un objet de la classe StringVar() avec l option textvariable. Deux méthodes sont utilisées avec les objets de la classe Label : la méthode set() permet de modifier le texte affiché dans le widget. la méthode get() permet de lire le texte affiché dans le widget et de le placer dans une variable. Interface graphique 7/12
Exemple from tkinter import * def compte(): k = nombre.get() k = int(k)+1 nombre.set(str(k)) # construction de la fenêtre principale Fenetre = Tk() # construction du widget de la classe Label() nombre = StringVar() nombre.set(str(0)) Compte = Label(Fenetre, bg ='yellow', bd = 3, textvariable = nombre) Compte.pack() # construction du widget de la classe Button() Bouton = Button(Fenetre, text="appuyer", command=compte) Bouton.pack() # mainloop Fenetre.mainloop() Dans cet exemple, lorsqu on appuye sur le bouton, le fonction compte() est appelée. Cette fonction lit la valeur écrite dans le widget et ajoute 1. Ce programme permet donc d afficher le nombre de clics sur le bouton. Interface graphique 8/12
6. La classe Entry() Un widget de la classe Entry() permet de construire une zone de saisie. Il permet une interaction avec l utilisateur du programme 6.1 Création Pour créer un widget de la classe Entry(), il faut écrire : Syntaxe # déclaration d'un widget dont le nom est w w = Entry(parent, option1 = valeur1, option2 = valeur2,...) # le widget est placé dans son conteneur w.pack(options) # ou bien : w.grid(options) Quelques options : bg : couleur de fond (background) width : largeur en nombre de caractères textvariable : texte inscrit dans la zone de saisie font : police et taille des carcatères La méthode focus_set() permet de placer le curseur sur le widget Entry (il est alors possible d écrire immédiatement dans cette zone de saisie sans avoir à cliquer sur celle-ci) 6.2 Exemple Le programme suivant permet de tester la parité d un nombre entier. Un widget de la classe Entry() permet à l utilisateur d écrire un nombre entier. Ce nombre entier est placé dans la variable Nbre (objet de la classe StringVar). Un widget de la classe Button() déclenche la fonction Parite() Un widget de la classe Label() permet d afficher le résultat du test de parité. Interface graphique 9/12
Exemple from tkinter import * def Parite(): a =int(nbre.get()) Nbre.set('') if a%2 == 0: Resultat.set(str(a)+' est un nombre pair') else: Resultat.set(str(a)+' est un nombre impair') # Création de la fenêtre principale Mafenetre = Tk() Mafenetre.title('Pair ou impair?') # Création d'un widget Entry (champ de saisie) Nbre = StringVar() Champ1 = Entry(Mafenetre, textvariable=nbre, bg='bisque', width=5) Champ1.grid(row=1, column=1, padx=12, pady=5) Champ1.focus_set() # Création d'un widget Button Bouton = Button(Mafenetre, text='tester', command = Parite) Bouton.grid(row=1, column=2, padx=12, pady=5) # Création d'un widget Label Resultat = StringVar() Label1 = Label(Mafenetre, textvariable=resultat, width=30) Label1.grid(row=2, column=1, padx=2, pady=5) Mafenetre.mainloop() Interface graphique 10/12
7. Placement des widgets Plusieurs solutions existent pour disposer les widgets dans la fenêtre principale 7.1 La méthode pack() C est une méthode assez grossière mais facile à utiliser. La syntaxe est la suivante : Syntaxe w.pack(options) # w est le nom du widget Les options : side avec l une des valeurs suivantes (en majuscules) : TOP, BOTTOM, LEFT, RIGHT pour pousser le widget vers un coté de la fenêtre. padx et pady pour réserver un petit espace (exprimé en pixels) autour du widget Exemple w.pack(side = TOP, padx = 4, pady = 2) 7.2 La méthode grid() Avec cette méthode, on utilise une grille virtuelle intégrée à la fenêtre principale. On précise la ligne et la colonne où il faut placer chaque widget. Syntaxe w1.grid(row = 0, column = 0) w2.grid(row = 1, column = 0) w3.grid(row = 0, column = 1) Cette méthode est bien documentée dans le livre de G.Swinnen, page 95 (pdf 115) Interface graphique 11/12
8. Exercices Exercice 1 Ecrire un programme qui affiche l heure dans la fenêtre graphique lorsqu on appuye sur un bouton (on pourra utiliser les exemples donnés dans le cours) Exercice 2 Ecrire un programme avec une zone de saisie dans laquelle on inscrit son année de naissance. Après avoir appuyé sur un bouton, l age est affiché. Exercice 3 Ecrire un programme avec une zone de saisie dans laquelle on inscrit un nombre entier. Après avoir appuyé sur un bouton, l écriture en base 16 de ce nombre est affichée. Exercice 4 Ecrire un programme avec deux zones de saisie dans lesquelles on inscrit deux nombres. Après avoir appuyé sur un bouton, la somme des deux nombres est affichée. Exercice 5 Écrire un programme de calcul mental Version 1 : Dans une fenêtre graphique, deux nombres entre 2 et 12 sont affichés. Une zone de saisie permet d écrire le produit de ces deux nombres. Si le résultat est correct, un nouveau calcul est proposé et la zone de saisie est vidée Sinon seule la zone de saisie est vidée, en attente d un nouveau résultat. Version 2 : Ajouter un score : un point par bonne réponse Ajouter le temps écoulé depuis le début de la partie (actualisé après chaque réponse donnée par l utilisateur) Le jeu s arrête lorsque 30 secondes sont écoulées Interface graphique 12/12