D.3 Réaliser des interfaces graphiques avec Tkinter

1Situer

Le convertisseur de devises écrit pour un bureau de change de Tanger fonctionne, mais dans la console : l'employé tape des chiffres sur un écran noir. Le patron veut une vraie fenêtre, avec une zone pour le montant, une liste de devises et un bouton « Convertir ». Avec Tkinter, livré avec Python, quelques dizaines de lignes suffisent.

2Comprendre

Construire une fenêtre Tkinter étape par étape

tk.Tk() crée la fenêtre principale, vide. title() lui donne un titre.

1 / 6

Tkinter est la bibliothèque graphique livrée avec Python : rien à installer. D’autres existent (wxPython, PyQt, Tix), mais Tkinter suffit pour apprendre et pour de petites applications.

Les étapes d’une application Tkinter

Créer la fenêtre principale : fenetre = tk.Tk().
Créer les widgets en leur donnant leur parent : tk.Button(fenetre, text="OK").
Les placer avec un gestionnaire de géométrie.
Relier les actions à des fonctions (événements).
Lancer la boucle principale : fenetre.mainloop().

Exemple simple

La plus petite fenêtre possible

Quatre étapes : créer la fenêtre, ajouter des widgets, les placer, lancer la boucle.

import tkinter as tk
fenetre = tk.Tk()                         # 1. la fenêtre
fenetre.title("Bonjour")
etiquette = tk.Label(fenetre, text="Salam !")   # 2. un widget
etiquette.pack(padx=20, pady=20)          # 3. le placer
fenetre.mainloop()                        # 4. attendre les clics

Ce qui se passe

Sans mainloop(), la fenêtre s’ouvre et se ferme aussitôt.
mainloop() attend les actions de l’utilisateur jusqu’à la fermeture.

Les principaux widgets

Widget	Rôle
`Label`	afficher un texte ou une image
`Entry`	saisir une ligne de texte
`Button`	déclencher une action
`Checkbutton` / `Radiobutton`	case à cocher / choix unique
`Listbox`	liste d’éléments à sélectionner
`Canvas`	dessiner (formes, graphiques)
`Scale` / `Spinbox`	choisir une valeur numérique
`Frame` / `PanedWindow`	regrouper et organiser d’autres widgets
`Menu`	barre de menus
`messagebox`	fenêtres d’alerte et de confirmation

Exemple simple

Un formulaire de connexion

Label pour le texte, Entry pour la saisie, Button pour l’action.

tk.Label(f, text="Identifiant").pack()
champ = tk.Entry(f)
champ.pack()
tk.Label(f, text="Mot de passe").pack()
tk.Entry(f, show="*").pack()
tk.Button(f, text="Se connecter").pack()

Ce qui se passe

show=”*” masque le mot de passe.
champ.get() lira plus tard ce que l’utilisateur a tapé.

Placer les widgets

pack() empile les widgets (de haut en bas, ou côte à côte avec side="left") ;
grid(row=..., column=...) les range dans un tableau ;
place(x=..., y=...) les positionne au pixel près (rarement utile).

On ne mélange pas pack et grid dans un même conteneur.

Exemple simple

Aligner un formulaire avec grid

grid place les widgets dans un tableau de lignes et de colonnes.

tk.Label(f, text="Nom").grid(row=0, column=0, sticky="e")
tk.Entry(f).grid(row=0, column=1)
tk.Label(f, text="Ville").grid(row=1, column=0, sticky="e")
tk.Entry(f).grid(row=1, column=1)

Ce qui se passe

Les étiquettes sont dans la colonne 0, les champs dans la colonne 1.
sticky=“e” colle l’étiquette à droite de sa case.
Ne mélangez pas pack et grid dans le même conteneur.

Options et événements

Chaque widget a des options (text, font, bg, width…) qu’on modifie avec .config(...). Un bouton appelle la fonction donnée dans command. Pour les autres événements (touche, clic, survol), on utilise widget.bind("<Return>", fonction).

Exemple simple

Un bouton qui compte les clics

command indique la fonction à appeler quand on clique.

clics = 0
def cliquer():
    global clics
    clics += 1
    etiquette.config(text=f"Clics : {clics}")

etiquette = tk.Label(f, text="Clics : 0")
etiquette.pack()
tk.Button(f, text="+1", command=cliquer).pack()

Ce qui se passe

command=cliquer, sans parenthèses : on donne la fonction, on ne l’appelle pas.
config(text=…) met à jour le texte affiché.

Une interface orientée objet

On écrit souvent l’application comme une classe qui hérite de tk.Tk : les widgets deviennent des attributs et les actions des méthodes. C’est ce que fait le convertisseur de l’exercice 1.

Exemple simple

La même application, rangée dans une classe

Les widgets et le compteur deviennent des attributs : plus besoin de global.

class Compteur(tk.Tk):
    def __init__(self):
        super().__init__()
        self.clics = 0
        self.etiquette = tk.Label(self, text="Clics : 0")
        self.etiquette.pack()
        tk.Button(self, text="+1", command=self.cliquer).pack()
    def cliquer(self):
        self.clics += 1
        self.etiquette.config(text=f"Clics : {self.clics}")

Compteur().mainloop()

Ce qui se passe

La fenêtre est un objet qui hérite de tk.Tk.
self.clics remplace la variable globale.
Chaque méthode correspond à une action de l’utilisateur.

Exemple simple

Le tableau de bord d'une voiture

Des cadrans qui affichent (Label), des boutons sur lesquels on appuie (Button), un volant qu'on règle (Scale). Une interface graphique assemble des widgets, chacun avec son rôle.

Exemple simple

Bonjour en fenêtre

La plus petite application Tkinter : une fenêtre, un texte, et la boucle qui attend les clics.

import tkinter as tk

fenetre = tk.Tk()
fenetre.title("Bonjour")
tk.Label(fenetre, text="Salam !").pack()
fenetre.mainloop()

3Manipuler

Tkinter ne s'exécute pas dans le navigateur. Pour vous entraîner, classez chaque widget selon son rôle principal, puis cliquez sur « Vérifier ». Le code complet du convertisseur est dans la partie Pratiquer, à lancer sur votre ordinateur.

Label : un texte ou une image

Entry : une zone de saisie d'une ligne

Button : un bouton cliquable

Checkbutton : une case à cocher

Radiobutton : un choix unique parmi plusieurs

Frame : un cadre qui regroupe d'autres widgets

messagebox : une fenêtre d'alerte

Menu : une barre de menus avec des commandes

Scale : un curseur pour choisir une valeur

PanedWindow : des panneaux redimensionnables

Canvas : une zone de dessin

Spinbox : un nombre avec des flèches + et -

4Pratiquer

Exercice 1 · Le convertisseur de devises

Recopiez ce programme dans un fichier convertisseur.py sur votre ordinateur et lancez-le avec python convertisseur.py. Ajoutez ensuite la devise GBP (taux 12.6).

Voir le corrigé

import tkinter as tk
from tkinter import messagebox

class Convertisseur(tk.Tk):
    TAUX = {"EUR": 10.8, "USD": 9.9}      # 1 devise = x DH

    def __init__(self):
        super().__init__()
        self.title("Bureau de change")
        self.geometry("320x200")

        tk.Label(self, text="Montant en DH :").pack(pady=(12, 0))
        self.montant = tk.Entry(self, justify="center")
        self.montant.pack()

        self.devise = tk.StringVar(value="EUR")
        cadre = tk.Frame(self)
        cadre.pack(pady=6)
        for code in self.TAUX:
            tk.Radiobutton(cadre, text=code, value=code,
                           variable=self.devise).pack(side="left")

        tk.Button(self, text="Convertir", command=self.convertir).pack()
        self.resultat = tk.Label(self, text="", font=("Arial", 14))
        self.resultat.pack(pady=10)

    def convertir(self):
        try:
            dh = float(self.montant.get())
        except ValueError:
            messagebox.showerror("Erreur", "Saisissez un nombre")
            return
        taux = self.TAUX[self.devise.get()]
        self.resultat.config(text=f"{dh / taux:.2f} {self.devise.get()}")

if __name__ == "__main__":
    Convertisseur().mainloop()

Exercice 2 · Pack ou grid ?

Réécrivez la partie saisie du convertisseur avec grid : l'étiquette en ligne 0 colonne 0, la zone de saisie en ligne 0 colonne 1, le bouton en ligne 1 sur deux colonnes.

Voir le corrigé

tk.Label(self, text="Montant :").grid(row=0, column=0, padx=5, pady=5)
self.montant = tk.Entry(self)
self.montant.grid(row=0, column=1, padx=5, pady=5)
tk.Button(self, text="Convertir", command=self.convertir) \
    .grid(row=1, column=0, columnspan=2, pady=5)

Exercice 3 · Réagir à la touche Entrée

Faites en sorte que la conversion se lance aussi quand l'utilisateur appuie sur Entrée dans la zone de saisie.

Voir un indice

La méthode bind associe un événement ("<Return>") à une fonction qui reçoit l'événement en paramètre.

Voir le corrigé

self.montant.bind("<Return>", lambda evenement: self.convertir())

Réaliser des interfaces graphiques avec Tkinter

1Situer

2Comprendre

Les étapes d’une application Tkinter

Les principaux widgets

Placer les widgets

Options et événements

Une interface orientée objet

Le tableau de bord d'une voiture

Bonjour en fenêtre

3Manipuler

4Pratiquer

Exercice 1 · Le convertisseur de devises

Exercice 2 · Pack ou grid ?

Exercice 3 · Réagir à la touche Entrée

5Vérifier