Créez votre première application graphique Python : premiers pas avec Tkinter

Créer des projets de programmation, c’est génial. Mais s’il avait une interface graphique ? Encore mieux ! Créer une application GUI présente de nombreux avantages. Vous vous retrouvez avec quelque chose que même les amis non-technophiles peuvent apprécier. C'est pourquoi nous allons créer une application Python GUI et apprendre la bibliothèque Tkinter dans le processus.

Ce que nous faisons

Pour ce tutoriel, j'ai décidé de créer une application de liste de tâches. C'est un projet classique qui n'est pas trop difficile et qui, en même temps, enseigne beaucoup de concepts de programmation. De plus, si vous aimez le produit final, vous pouvez également l’utiliser pour vous-même.

Il existe une version console d'une application de liste de tâches Python. Il aborde de nombreuses bases qu’il est bon de connaître. Je vous recommande donc de le consulter d'abord car cela vous aidera à mieux comprendre ce guide. Cependant, ce n'est pas absolument nécessaire car je vais vous guider à travers le code et vous expliquer ce qui se passe, afin que vous sachiez ce qui se passe sans grande connaissance préalable.

Je vous recommande également de faire un rappel sur les bases de Python au cas où vous ne connaissez pas le langage. Sans cela, il vous sera difficile de suivre ce guide.

Configuration de Tkinter

L’avantage de Tkinter est qu’il est fourni avec votre installation Python. Il n’est donc pas nécessaire d’installer quoi que ce soit. Vérifions cela en important le module tkinter et en vérifiant sa version.

        import tkinter as tk
print(tk.TkVersion)
    

Vous devriez obtenir le numéro de version sur votre console. Pour moi, c'est 8,6. Si vous obtenez une erreur, cela signifie que votre installation Python ne l'a peut-être pas. Vous devrez peut-être réinstaller Python ou, sous Linux, installer le package correct pour tkinter en fonction de votre distribution.

Création de la fenêtre principale

Si cela a fonctionné pour vous, créons maintenant la fenêtre principale. Nous allons configurer la fenêtre avec une taille et un titre appropriés.

        import tkinter as tk

root = tk.Tk()
root.title("To-Do List App")
root.geometry("400x500")

root.resizable(False, False)

root.mainloop()
    

Qu'avons-nous fait ?

• Nous importons Tkinter et l'alias tk pour plus de commodité.

• root = tk.Tk() crée la fenêtre principale de l'application

• Nous définissons le titre de la fenêtre en utilisant root.title()

• root.geometry("400x500") définit la taille de la fenêtre
• root.resizable(False, False) empêche les utilisateurs de redimensionner la fenêtre. Le premier paramètre contrôle le redimensionnement horizontal, le second contrôle vertical.

• Enfin, root.mainloop() démarre la boucle d’événements. C’est crucial ! Sans cela, votre fenêtre apparaîtrait et se fermerait immédiatement.

Lorsque vous exécutez ce code, vous verrez une fenêtre vide intitulée « Application de liste de tâches ». Il est vide pour l'instant, mais à l'étape suivante, nous commencerons à le remplir avec des widgets.

Une application de liste de tâches nécessite de nombreux widgets : un champ de saisie, des boutons pour gérer les tâches et un champ pour les afficher. Commençons par les ajouter. Écrivez ces lignes après le root.resizable(False, False) doubler.

        task_entry = tk.Entry(root, width=35, font=("Arial", 12))
task_entry.pack(pady=10)
    

Nous créons un Entry widget pour les saisies de texte sur une seule ligne. Nous lui donnons une largeur, une police et un peu de remplissage vertical. Ensuite, nous ajoutons un bouton.

        add_button = tk.Button(root, text="Add Task", width=20, font=("Arial", 10))
add_button.pack(pady=5)
    

Encore une fois, nous lui donnons une largeur, une police, un remplissage vertical et une étiquette de texte. Ce bouton fonctionnera comme bouton d’ajout de tâches. Après cela, nous créons une listbox pour afficher les tâches.

        task_listbox = tk.Listbox(root, width=50, height=15, font=("Arial", 10))
task_listbox.pack(pady=10)
    

Comme les widgets précédents, nous lui fournissons certaines propriétés, notamment sa hauteur. Nous utilisons le pack() gestionnaire de géométrie pour positionner les widgets dans l'ordre dans lequel ils sont ajoutés. Tkinter propose également grid() pour un contrôle plus précis. Pour ce tutoriel, nous nous en tiendrons à pack() puisque c'est plus simple pour les débutants.

Lorsque vous exécutez ce code, vous verrez un champ de texte vide en haut, un bouton « Ajouter une tâche » en dessous et une grande liste vide en bas.

Cela ressemble plus à une application de tâches à faire maintenant.

Gestion des événements

Actuellement, notre application ne dispose que d'une interface utilisateur. Il n'y a aucune fonctionnalité. Rendons notre application interactive. Nous allons créer une fonction pour ajouter des tâches à la listbox. Ajoutez cet extrait de code après le root.resizable(False, False) doubler.

        def add_task():
   task = task_entry.get()
   if task:
       task_listbox.insert(tk.END, task)
       task_entry.delete(0, tk.END)
   else:
       print("Please enter a task!")
    

Tout d’abord, nous récupérons le texte dans le champ de saisie. Nous vérifions ensuite si le champ est vide ou sans condition. S'il n'est pas vide, nous insérons le texte, qui correspond à la tâche, dans la liste et effaçons le champ de saisie. Sinon, nous imprimons un simple message à la console indiquant qu'aucune tâche n'est entrée. La prochaine chose à faire est de le connecter au bouton.

        add_button = tk.Button(root, text="Add Task", width=20, font=("Arial", 10), command=add_task)
    

Nous passons un nouvel argument, le add_task() fonction. Cela indique au bouton d'appeler la fonction lorsqu'il est cliqué. Notez que nous ne donnons pas les parenthèses lors du passage de l'argument.

Essayons ceci. Écrivez quelque chose dans le champ de saisie et cliquez sur le bouton « Ajouter une tâche » pour voir si la tâche est ajoutée ou non. Essayez ensuite d'ajouter une tâche alors que le champ de saisie est vide.

Génial. Cela fonctionne comme prévu. Vous pouvez maintenant ajouter des tâches.

Travailler sur l'interface utilisateur

Ajoutons plus de fonctionnalités pour rendre notre application de liste de tâches vraiment utile. Nous ajouterons la possibilité de supprimer des tâches, d'effacer toutes les tâches et de marquer les tâches comme terminées. Ajoutons une fonction pour supprimer une tâche. Ajoutez ce code après le add_task() fonction.

        def delete_task():
   try:
       selected_index = task_listbox.curselection()(0)
       task_listbox.delete(selected_index)
   except IndexError:
       print("Please select a task to delete!")
    

Ici, curselection()(0) obtient le premier (et le seul) élément sélectionné à partir d'un tuple d'index d'éléments sélectionnés. Nous supprimons ensuite l'élément à cet index. Nous utilisons également try/except pour une meilleure gestion des erreurs. Après cela, ajoutons une fonction pour effacer toutes les tâches dans la liste.

        def clear_all_tasks():
   task_listbox.delete(0, tk.END)
    

Cette fonction supprime toutes les tâches du début à la fin. Maintenant, ajoutons une fonction qui marquera une tâche comme terminée.

        def mark_complete():
   try:
       selected_index = task_listbox.curselection()(0)
       task = task_listbox.get(selected_index)
       
       
       if not task.startswith("✓ "):
           
           task_listbox.delete(selected_index)
           task_listbox.insert(selected_index, "✓ " + task)
           task_listbox.itemconfig(selected_index, fg="gray")
   except IndexError:
       print("Please select a task to mark as complete!")
    

Il se passe beaucoup de choses ici. Tout d'abord, nous récupérons la tâche sélectionnée, comme nous l'avions fait précédemment pour la supprimer. Ensuite, nous utilisons des conditions pour vérifier si le texte de la tâche répond à une exigence spécifique. Autrement dit, s'il commence par la coche ✓ suivie d'un espace.

Si ce n'est pas le cas, alors ce n'est pas terminé. Nous supprimons la tâche de la liste et l'insérons à nouveau avec la coche et un espace. Pour plus de clarté visuelle, nous colorons également son premier plan en gris. Si aucune tâche n'est sélectionnée, nous imprimons un message utile. Puisqu'il n'y a pas d'option d'édition directe, nous supprimons d'abord la tâche et la réinsérons à la même position avec le marquage.

Nous devons encore lier ces fonctionnalités à certains boutons. Commençons par créer un cadre dans lequel nous placerons les nouveaux boutons. Ajoutez ceci juste avant root.mainloop().

        button_frame = tk.Frame(root)
button_frame.pack(pady=10)
    

Frame est un widget conteneur qui regroupe d’autres widgets. À l’intérieur de ce cadre, nous plaçons trois nouveaux boutons : un bouton Supprimer, un bouton Effacer et un bouton Marquer comme terminé.

        mark_button = tk.Button(button_frame, text="Mark Complete", width=15, 
                       font=("Arial", 10), command=mark_complete)
mark_button.grid(row=0, column=0, padx=5)
delete_button = tk.Button(button_frame, text="Delete Task", width=15, 
                         font=("Arial", 10), command=delete_task)
delete_button.grid(row=0, column=1, padx=5)
clear_button = tk.Button(button_frame, text="Clear All", width=15, 
                        font=("Arial", 10), command=clear_all_tasks)
clear_button.grid(row=0, column=2, padx=5)
    

Contrairement à avant, nous avons utilisé grid() ici. Cela nous donne un alignement horizontal précis des boutons. Le row et column les paramètres déterminent où nous voulons placer le widget spécifique dans la disposition de la grille. Nous ajoutons également un remplissage horizontal à chaque bouton et à ses fonctionnalités respectives.

Notre application fonctionne désormais comme une véritable application de tâches.

Un peu de polissage final

L'application fonctionne bien. Mais ça a l'air ennuyeux. Embellissons-le pour lui donner un aspect plus professionnel. Ajoutez cette ligne après root.resizable(False, False) doubler.

        root.config(bg="#f0f0f0") 
    

Il crée un agréable fond gris clair pour toute la fenêtre. Ensuite, créons une section d'en-tête. Ajoutez ce code après le mark_complete() fonction.

        header_frame = tk.Frame(root, bg="#4a7c9e")
header_frame.pack(fill=tk.X)
header_label = tk.Label(header_frame, text="📝 My To-Do List", 
                       font=("Arial", 18, "bold"), 
                       bg="#4a7c9e", fg="white")
header_label.pack(pady=15)
    

Avec fill=tk.X, nous étirons le cadre horizontalement sur la fenêtre. Nous avons ajouté un widget d'étiquette avec quelques propriétés. Travaillons ensuite sur la section de saisie.

        input_frame = tk.Frame(root, bg="#f0f0f0")
input_frame.pack(pady=20)
task_entry = tk.Entry(input_frame, width=35, font=("Arial", 13), 
                     bd=2, relief=tk.GROOVE)
task_entry.pack(side=tk.LEFT, padx=10, ipady=5)
task_entry.bind('', lambda event: add_task())
add_button = tk.Button(input_frame, text="Add Task", width=12, 
                      font=("Arial", 11, "bold"),
                      bg="#5cb85c", fg="white", 
                      activebackground="#4cae4c",
                      bd=0, cursor="hand2",
                      command=add_task)
add_button.pack(side=tk.LEFT)
    

Nous avons ajouté une bordure au champ de saisie et lui avons donné un GROOVE effet. Nous avons également ajouté du style au bouton. Ensuite, la section listbox.

        list_frame = tk.Frame(root, bg="#f0f0f0")
list_frame.pack(pady=10, padx=20)
scrollbar = tk.Scrollbar(list_frame, orient=tk.VERTICAL)
task_listbox = tk.Listbox(list_frame, width=55, height=14, 
                         font=("Arial", 11),
                         bd=2, relief=tk.SUNKEN,
                         selectmode=tk.SINGLE,
                         activestyle='none',
                         bg="white",
                         selectbackground="#d4e6f1",
                         selectforeground="black",
                         yscrollcommand=scrollbar.set)
scrollbar.config(command=task_listbox.yview)
task_listbox.pack(side=tk.LEFT, fill=tk.BOTH, expand=True)
scrollbar.pack(side=tk.RIGHT, fill=tk.Y)
    

Dans le cadre de la listbox, nous avons un nouveau Scrollbar widget. Si la listbox devient grande, elle défilera verticalement. Nous avons également ajouté quelques propriétés au Listbox widget, définissant ses couleurs, son style de bordure et son comportement de défilement. Travaillons maintenant sur les boutons restants.

        button_frame = tk.Frame(root, bg="#f0f0f0")
button_frame.pack(pady=20)
mark_button = tk.Button(button_frame, text="✓ Mark Complete", width=15, 
                       font=("Arial", 10, "bold"),
                       bg="#5bc0de", fg="white",
                       activebackground="#46b8da",
                       bd=0, cursor="hand2",
                       command=mark_complete)
mark_button.grid(row=0, column=0, padx=8)
delete_button = tk.Button(button_frame, text="✕ Delete Task", width=15, 
                         font=("Arial", 10, "bold"),
                         bg="#d9534f", fg="white",
                         activebackground="#c9302c",
                         bd=0, cursor="hand2",
                         command=delete_task)
delete_button.grid(row=0, column=1, padx=8)
clear_button = tk.Button(button_frame, text="Clear All", width=15, 
                        font=("Arial", 10, "bold"),
                        bg="#f0ad4e", fg="white",
                        activebackground="#ec971f",
                        bd=0, cursor="hand2",
                        command=clear_all_tasks)
clear_button.grid(row=0, column=2, padx=8)
    

Nous utilisons des couleurs et d'autres styles qui correspondent à l'action de chaque bouton pour les faire ressortir visuellement. Enfin, ajoutons une section de pied de page.

        footer_label = tk.Label(root, text="Select a task and use buttons to manage it", 
                       font=("Arial", 9, "italic"),
                       bg="#f0f0f0", fg="#666666")
footer_label.pack(side=tk.BOTTOM, pady=10)
    

Nous avons utilisé un Label widget ici sous forme de section de texte. Lorsque vous exécutez la version actuelle, une belle application de tâches devrait vous être présentée.

L’interface semble désormais beaucoup plus soignée et professionnelle. J'ai le code complet disponible sur mon référentiel GitHub pour votre commodité, alors n'hésitez pas à le consulter.

---

Vous pouvez ajouter bien d'autres choses à l'application existante, telles que les opérations sur les fichiers, les boîtes de dialogue de messages et l'intégration de bases de données, entre autres. Si vous êtes intéressé par d'autres projets Tkinter, vous pouvez également créer un suivi des dépenses. Consultez également la documentation Tkinter pour en savoir plus.