Introduction aux interfaces graphiques avec Tkinter en Python

Widgets

Les widgets sont, dans l’esprit, similaires aux éléments en HTML. Tkinter propose différents types de widgets pour différents éléments. Ce sont des composants GUI standards qui offrent des contrôles à l’utilisateur comme des boutons, du texte, des menus et des zones de saisie.

Passons en revue ces widgets dans Tkinter, avec un exemple (Source).

• Button : un bouton possède un état marche/arrêt. Lorsqu’un utilisateur clique dessus, un événement est déclenché dans Tkinter.

  Syntaxe : button_widget = tk.Button(widget, option=placeholder) où widget est l’argument de la fenêtre/cadre parent, et option un paramètre pouvant prendre diverses valeurs : couleurs de premier plan et d’arrière-plan, police, commande (appel de fonction), image, hauteur et largeur du bouton.

• Canvas : Canvas sert à dessiner des formes dans votre interface et prend en charge plusieurs méthodes de dessin.

  Syntaxe : canvas_widget = tk.Canvas(widget, option=placeholder) où widget est la fenêtre/cadre parent, et option peut définir l’épaisseur de bordure, la couleur d’arrière-plan, la hauteur et la largeur du widget.

• Checkbutton : un bouton à cocher enregistre un état vrai/faux (coché/décoché). Il permet de sélectionner plusieurs options à la fois, ou aucune.

  Syntaxe : checkbutton_widget = tk.CheckButton(widget, option=placeholder) où widget est la fenêtre/cadre parent et option peut définir le titre, le texte, les couleurs d’arrière-plan et de premier plan au survol, la police, l’image, etc.

• Entry : Entry est utilisé pour créer des champs de saisie et récupérer du texte de l’utilisateur dans l’interface.

  Syntaxe : entry_widget = tk.Entry(widget, option=placeholder) où widget est la fenêtre/cadre parent et option peut définir l’épaisseur de bordure, la couleur d’arrière-plan, la largeur et la hauteur, etc.

• Frame : Frame sert de conteneur dans Tkinter pour regrouper et organiser correctement les widgets.

  Syntaxe : frame_widget = tk.Frame(widget, option=placeholder) où widget est la fenêtre/cadre parent et option peut définir l’épaisseur de bordure, la hauteur et la largeur du widget, ou encore highlightcolor (couleur quand le widget a le focus).

• Label : Label permet d’afficher une ligne de texte, une image, etc.

  Syntaxe : label_widget = tk.Label(widget, option=placeholder) où widget est la fenêtre/cadre parent et option peut définir la police, la couleur d’arrière-plan, l’image, la largeur et la hauteur.

Vous trouverez la liste complète des widgets dans la documentation officielle de Python.

Gestion de la géométrie

Tous les widgets Tkinter possèdent des propriétés de géométrie. Elles vous permettent d’organiser les widgets au sein des cadres parents ou de la zone du widget parent.

L’un des gestionnaires de géométrie, pack(), a déjà été abordé ici.

Pour cela, Tkinter met à votre disposition trois principaux gestionnaires :

• pack() : organise les widgets en blocs et occupe toute la largeur disponible. C’est la méthode classique pour afficher des widgets dans la fenêtre.
  
  
• grid() : organise les widgets sous forme de grille, comme un tableau. Vous l’explorerez plus en détail plus loin dans ce tutoriel.
  
  
• place() : positionne les widgets à des coordonnées précises, selon vos instructions, dans le widget parent.

Organisation de la mise en page et des widgets

Dans cette section, vous allez combiner géométrie et widgets pour découvrir la magie de Tkinter.

Pour organiser la mise en page dans la window, utilisez le widget Frame. Créons un petit programme pour voir son fonctionnement.

• Vous définirez deux cadres : un en haut et un en bas, à l’aide de pack. La classe Frame crée une division dans la fenêtre : une même fenêtre est dupliquée visuellement en deux zones (haut et bas).

• Enfin, créez quatre boutons dans la fenêtre, deux par cadre. Donnez-leur les noms et couleurs de votre choix via les paramètres.

import tkinter

# Let's create the Tkinter window.
window = tkinter.Tk()
window.title("GUI")

# You will first create a division with the help of Frame class and align them on TOP and BOTTOM with pack() method.
top_frame = tkinter.Frame(window).pack()
bottom_frame = tkinter.Frame(window).pack(side = "bottom")

# Once the frames are created then you are all set to add widgets in both the frames.
btn1 = tkinter.Button(top_frame, text = "Button1", fg = "red").pack() #'fg or foreground' is for coloring the contents (buttons)

btn2 = tkinter.Button(top_frame, text = "Button2", fg = "green").pack()

btn3 = tkinter.Button(bottom_frame, text = "Button3", fg = "purple").pack(side = "left") #'side' is used to left or right align the widgets

btn4 = tkinter.Button(bottom_frame, text = "Button4", fg = "orange").pack(side = "left")

window.mainloop()

Exécutons ce code et observons le résultat.

Grid

Comme Frame, la grille est un autre moyen d’organiser les widgets. Elle repose sur le principe de matrice lignes/colonnes. Établissons une analogie entre la classe grid et ce concept à l’aide du schéma ci-dessous.

Grid prend principalement deux paramètres : row et column. Comme dans la figure, imaginez que 00 correspond au premier bouton et 01 au deuxième. Pour placer deux boutons côte à côte, grid utilisera respectivement row=0, column=0 puis row=0, column=1.

Utilisons checkbutton pour comprendre le fonctionnement de grid. Vous allez définir deux cases à cocher avec du texte. Leur état sera défini par onvalue et offvalue, tandis que l’état courant sera suivi par IntVar(), stocké dans une variable. Lorsque offvalue=1 et onvalue=0, la case correspondante sera cochée.

Pour la classe grid, vous passerez le paramètre row : row=0 place le bouton sur la première ligne, row=1 sur la deuxième.

import tkinter
from tkinter import *
top = tkinter.Tk()
CheckVar1 = IntVar()
CheckVar2 = IntVar()
tkinter.Checkbutton(top, text = "Machine Learning",variable = CheckVar1,onvalue = 1, offvalue=0).grid(row=0,sticky=W)
tkinter.Checkbutton(top, text = "Deep Learning", variable = CheckVar2, onvalue = 0, offvalue =1).grid(row=1,sticky=W)
top.mainloop()

Exécutons ce code et regardons le rendu.

Voyons un autre exemple pour approfondir grid. Cette fois, vous passerez aussi le paramètre column en plus de row.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# You will create two text labels namely 'username' and 'password' and and two input labels for them

tkinter.Label(window, text = "Username").grid(row = 0) #'username' is placed on position 00 (row - 0 and column - 0)

# 'Entry' class is used to display the input-field for 'username' text label
tkinter.Entry(window).grid(row = 0, column = 1) # first input-field is placed on position 01 (row - 0 and column - 1)

tkinter.Label(window, text = "Password").grid(row = 1) #'password' is placed on position 10 (row - 1 and column - 0)

tkinter.Entry(window).grid(row = 1, column = 1) #second input-field is placed on position 11 (row - 1 and column - 1)

# 'Checkbutton' class is for creating a checkbutton which will take a 'columnspan' of width two (covers two columns)
tkinter.Checkbutton(window, text = "Keep Me Logged In").grid(columnspan = 2)                 

window.mainloop()

Voici le résultat attendu :

Impressionnant, n’est-ce pas ? C’est simple et très proche de ce que l’on ferait en HTML.

Fonctions de liaison (binding) ou commandes

Les fonctions de liaison/commande sont appelées lorsqu’un événement survient ou est déclenché.

Voyons un exemple pour comprendre ces fonctions de liaison.

Vous allez définir un bouton qui, au clic, appelle une fonction nommée DataCamp_Tutorial. Cette fonction créera un nouveau label avec le texte GUI with Tkinter!.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# creating a function called DataCamp_Tutorial()
def DataCamp_Tutorial():
    tkinter.Label(window, text = "GUI with Tkinter!").pack()

tkinter.Button(window, text = "Click Me!", command = DataCamp_Tutorial).pack()
window.mainloop()

Exécutons le code et observons la sortie.

Outre le clic de souris, vous pouvez déclencher des événements au déplacement de la souris, au survol, au défilement, etc.

Voyons maintenant la fonction bind, qui offre la même fonctionnalité.

Événement de clic souris via la méthode bind

La méthode bind propose une manière très simple d’implémenter les événements de clic. Voici trois fonctions prédéfinies exploitables directement avec bind.

Il existe trois types de clics : leftClick, middleClick et rightClick.

• Le paramètre <Button-1> de bind correspond au clic gauche : au clic gauche, bind appellera la fonction passée en second paramètre.
  
  
• <Button-2> pour le clic du milieu
  
  
• <Button-3> pour le clic droit

Vous allez maintenant appeler une fonction en fonction de l’événement déclenché.

• Exécutez le programme suivant et cliquez gauche, milieu, droit pour appeler la fonction correspondante.
  
  
• Chaque fonction créera un nouveau label avec le texte indiqué.

import tkinter
# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

#You will create three different functions for three different events
def left_click(event):
    tkinter.Label(window, text = "Left Click!").pack()

def middle_click(event):
    tkinter.Label(window, text = "Middle Click!").pack()

def right_click(event):
    tkinter.Label(window, text = "Right Click!").pack()

window.bind("<Button-1>", left_click)
window.bind("<Button-2>", middle_click)
window.bind("<Button-3>", right_click)

window.mainloop()

Source

Exécutons le code ci-dessus.

Boîtes d’alerte

Vous pouvez créer des boîtes d’alerte dans Tkinter avec la méthode messagebox. Vous pouvez également poser des questions via messagebox.

Ici, vous allez créer une simple boîte d’alerte et une question. Pour l’alerte, utilisez messagebox avec showinfo. Pour la question, utilisez askquestion et, selon la réponse, affichez un Label dans l’interface.

import tkinter
import tkinter.messagebox

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# Let's create a alert box with 'messagebox' function
tkinter.messagebox.showinfo("Alert Message", "This is just a alert message!")

# Let's also create a question for the user and based upon the response [Yes or No Question] display a message.
response = tkinter.messagebox.askquestion("Tricky Question", "Do you love Deep Learning?")

# A basic 'if/else' block where if user clicks on 'Yes' then it returns 1 else it returns 0. For each response you will display a message with the help of 'Label' method.
if response == 1:
    tkinter.Label(window, text = "Yes, offcourse I love Deep Learning!").pack()
else:
    tkinter.Label(window, text = "No, I don't love Deep Learning!").pack()

window.mainloop()

Exécutons rapidement ce code pour voir le résultat.

Affichage d’images

Si vous êtes arrivé jusqu’ici, ajouter des images et des icônes à la GUI sera un jeu d’enfant. Il suffit d’utiliser la méthode PhotoImage de Tkinter et de lui passer le file_path en paramètre.

Sans plus attendre, écrivons un code pour afficher une image dans l’interface.

import tkinter

# Let's create the Tkinter window
window = tkinter.Tk()
window.title("GUI")

# In order to display the image in a GUI, you will use the 'PhotoImage' method of Tkinter. It will an image from the directory (specified path) and store the image in a variable.
icon = tkinter.PhotoImage(file = "CNN.png")

# Finally, to display the image you will make use of the 'Label' method and pass the 'image' variriable as a parameter and use the pack() method to display inside the GUI.
label = tkinter.Label(window, image = icon)
label.pack()

window.mainloop()

Bravo si vous avez suivi jusqu’ici !

En bonus, vous allez créer une Calculator en mobilisant tout ce que vous avez appris. Finissons ce tutoriel en beauté.

Créer une calculatrice avec Tkinter

Toute application GUI comporte deux étapes.

• Créer l’interface utilisateur
  
  
• Ajouter les fonctionnalités à l’interface

Passons à la création de la calculatrice. La plupart du code est explicite, et certaines lignes sont commentées pour vous guider.

from tkinter import *

# Let's create the Tkinter window
window = Tk()

# Then, you will define the size of the window in width(312) and height(324) using the 'geometry' method
window.geometry("312x324")

# In order to prevent the window from getting resized you will call 'resizable' method on the window
window.resizable(0, 0)

#Finally, define the title of the window
window.title("Calcualtor")


# Let's now define the required functions for the Calculator to function properly.

# 1. First is the button click 'btn_click' function which will continuously update the input field whenever a number is entered or any button is pressed it will act as a button click update.
def btn_click(item):
    global expression
    expression = expression + str(item)
    input_text.set(expression)

# 2. Second is the button clear 'btn_clear' function clears the input field or previous calculations using the button "C"
def btn_clear():
    global expression
    expression = ""
    input_text.set("")

# 3. Third and the final function is button equal ("=") 'btn_equal' function which will calculate the expression present in input field. For example: User clicks button 2, + and 3 then clicks "=" will result in an output 5.
def btn_equal():
    global expression
    result = str(eval(expression)) # 'eval' function is used for evaluating the string expressions directly
    # you can also implement your own function to evalute the expression istead of 'eval' function
    input_text.set(result)
    expression = ""

expression = ""
# In order to get the instance of the input field 'StringVar()' is used
input_text = StringVar()

# Once all the functions are defined then comes the main section where you will start defining the structure of the calculator inside the GUI.

# The first thing is to create a frame for the input field
input_frame = Frame(window, width = 312, height = 50, bd = 0, highlightbackground = "black", highlightcolor = "black", highlightthickness = 1)
input_frame.pack(side = TOP)


# Then you will create an input field inside the 'Frame' that was created in the previous step. Here the digits or the output will be displayed as 'right' aligned
input_field = Entry(input_frame, font = ('arial', 18, 'bold'), textvariable = input_text, width = 50, bg = "#eee", bd = 0, justify = RIGHT)
input_field.grid(row = 0, column = 0)
input_field.pack(ipady = 10) # 'ipady' is an internal padding to increase the height of input field


# Once you have the input field defined then you need a separate frame which will incorporate all the buttons inside it below the 'input field'
btns_frame = Frame(window, width = 312, height = 272.5, bg = "grey")
btns_frame.pack()


# The first row will comprise of the buttons 'Clear (C)' and 'Divide (/)'
clear = Button(btns_frame, text = "C", fg = "black", width = 32, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_clear()).grid(row = 0, column = 0, columnspan = 3, padx = 1, pady = 1)
divide = Button(btns_frame, text = "", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("")).grid(row = 0, column = 3, padx = 1, pady = 1)


# The second row will comprise of the buttons '7', '8', '9' and 'Multiply (*)'
seven = Button(btns_frame, text = "7", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(7)).grid(row = 1, column = 0, padx = 1, pady = 1)
eight = Button(btns_frame, text = "8", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(8)).grid(row = 1, column = 1, padx = 1, pady = 1)
nine = Button(btns_frame, text = "9", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(9)).grid(row = 1, column = 2, padx = 1, pady = 1)
multiply = Button(btns_frame, text = "*", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("*")).grid(row = 1, column = 3, padx = 1, pady = 1)


# The third row will comprise of the buttons '4', '5', '6' and 'Subtract (-)'
four = Button(btns_frame, text = "4", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(4)).grid(row = 2, column = 0, padx = 1, pady = 1)
five = Button(btns_frame, text = "5", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(5)).grid(row = 2, column = 1, padx = 1, pady = 1)
six = Button(btns_frame, text = "6", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(6)).grid(row = 2, column = 2, padx = 1, pady = 1)
minus = Button(btns_frame, text = "-", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("-")).grid(row = 2, column = 3, padx = 1, pady = 1)


# The fourth row will comprise of the buttons '1', '2', '3' and 'Addition (+)'
one = Button(btns_frame, text = "1", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(1)).grid(row = 3, column = 0, padx = 1, pady = 1)
two = Button(btns_frame, text = "2", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(2)).grid(row = 3, column = 1, padx = 1, pady = 1)
three = Button(btns_frame, text = "3", fg = "black", width = 10, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(3)).grid(row = 3, column = 2, padx = 1, pady = 1)
plus = Button(btns_frame, text = "+", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click("+")).grid(row = 3, column = 3, padx = 1, pady = 1)


# Finally, the fifth row will comprise of the buttons '0', 'Decimal (.)', and 'Equal To (=)'
zero = Button(btns_frame, text = "0", fg = "black", width = 21, height = 3, bd = 0, bg = "#fff", cursor = "hand2", command = lambda: btn_click(0)).grid(row = 4, column = 0, columnspan = 2, padx = 1, pady = 1)
point = Button(btns_frame, text = ".", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_click(".")).grid(row = 4, column = 2, padx = 1, pady = 1)
equals = Button(btns_frame, text = "=", fg = "black", width = 10, height = 3, bd = 0, bg = "#eee", cursor = "hand2", command = lambda: btn_equal()).grid(row = 4, column = 3, padx = 1, pady = 1)


window.mainloop()

Conclusion

Félicitations pour avoir terminé ce tutoriel !

Avec ces acquis, vous êtes prêt à créer de petites applications GUI. Vous pourrez ensuite explorer davantage de méthodes pour le style et l’interaction avec les objets dans une interface.

Un bon exercice consiste à développer des applications comme une calculatrice : cela renforcera votre confiance et vous donnera une vision plus globale de tout ce qu’il est possible de faire avec Tkinter.

Il reste encore beaucoup à voir, notamment la notion de classes dans Tkinter ; vous pouvez vous référer à cette documentation.

N’hésitez pas à poser vos questions sur ce tutoriel dans l’espace commentaires ci-dessous.