Mettre en place un système de navigation entre différentes fenêtres avec Tkinter et Python3

Dans cet article, je partage un code qui montre comment créer un système de navigation fluide entre différentes fenêtres dans une application Desktop en utilisant Tkinter et Python3

Dans le développement d'applications desktop, la navigation entre plusieurs fenêtres est une fonctionnalité essentielle pour offrir une expérience fluide et intuitive. Dans cet article, je prends un exemple qui fait intervenir 2 fenêtres, mais la même approche peut être utilisée pour plusieurs.

Création d'un système de navigation avec Tkinter

Il faut commencer par créer deux classes distinctes, une pour chaque fenêtre qu'on souhaite afficher. Ces classes sont conçues pour hériter de la classe tkinter.Frame qui fournit une structure pour organiser les éléments de l'interface utilisateur de chaque fenêtre.

import tkinter as tk


class Demo1:
    def __init__(self, master):
        self.master = master # Représente l'instance de la fenêtre principale
        self.frame = tk.Frame(self.master)
        self.HelloButton = tk.Button(
            self.frame,
            text="Salut!",
            width=25,
            command=self.new_window,
        )
        self.HelloButton.pack()
        self.frame.pack()

    def new_window(self):
        # Sera définie plus bas
        ...


class Demo2:
    def __init__(self, master):
        self.master = master
        self.frame = tk.Frame(self.master)
        self.quitButton = tk.Button(
            self.frame, text="Quitter", width=25, command=self.close_windows
        )
        self.quitButton.pack()
        self.frame.pack()

    def close_windows(self):
        # Sera définie plus bas
        ...

Navigation fluide entre les fenêtres

Une fois que les classes représentant les fenêtres ont été définies, il faut utiliser les méthodes new_window() et close_windows() pour gérer les transitions entre elles. Par exemple, en appuyant sur le bouton "Salut" dans la première fenêtre, nous cachons son frame et affichons la seconde fenêtre qui contient le bouton "Quitter"

def new_window(self):
    self.frame.pack_forget()  # Cache la frame actuelle
    self.app = Demo2(self.master)  # Affiche la nouvelle frame

def close_windows(self):
    self.frame.pack_forget()  # Cache la frame actuelle
    self.master.quit()  # Quitte l'application

En conclusion, pour parvenir à faire une telle transition, il est important de mieux organiser son code et pour le faire, je vous invite à regarder cette vidéo qui explique en détail comment organiser son code pour une application de type GUI: https://youtu.be/NOcwXmXr0ho?feature=shared

Et enfin, il serait aussi plus judicieux d'utiliser cette lib pour avoir plus de widget à utiliser: https://github.com/TomSchimansky/CustomTkinter

Et ci-dessous, le code complet de la petite application

import tkinter as tk


class Demo1:
    def __init__(self, master):
        self.master = master # Représente l'instance de la fenêtre principale
        self.frame = tk.Frame(self.master)
        self.HelloButton = tk.Button(
            self.frame,
            text="Salut!",
            width=25,
            command=self.new_window,
        )
        self.HelloButton.pack()
        self.frame.pack()

    def new_window(self):
        self.frame.pack_forget()  # Cache la frame actuelle
        self.app = Demo2(self.master)  # Affiche la nouvelle frame


class Demo2:
    def __init__(self, master):
        self.master = master
        self.frame = tk.Frame(self.master)
        self.quitButton = tk.Button(
            self.frame, text="Quitter", width=25, command=self.close_windows
        )
        self.quitButton.pack()
        self.frame.pack()

    def close_windows(self):
        self.frame.pack_forget()  # Cache la frame actuelle
        self.master.quit()  # Quitte l'application


def main():
    root = tk.Tk()
    root.geometry("300x200")  # Dimensionne la fenêtre principale à 300x200 pixels
    Demo1(root)
    root.mainloop()


if __name__ == "__main__":
    main()