Tuto Python & Tkinter : personnaliser les widgets

Table des matières

Introduction :

Tout en ayant les bases dans la première partie pour produire une interface graphique avec tkinter sur Python, il est aussi possible de personnaliser son apparence et ses fonctions. Le module tkinter contient un ensemble d’options et de méthodes caractérisant ses widgets qu’on introduira dans ce tutoriel.

Afin de manier l’ensemble des options et des fonctions disponibles sur tkinter, il est indispensable de les pratiquer sur des exemples d’interfaces graphiques.

Dans ce guide, on va présenter des méthodes d’emplacement et d’organisation des widgets, ainsi que les différentes options partagées entre la plupart des widgets qui permettent de personnaliser l’apparence de votre application.

Personnaliser l’emplacement et l’organisation des widgets :

La méthode pack() :

La méthode pack() sert à placer et organiser les widgets en blocs dans un widget parent.

Options :

Cette méthode contient des options de personnalisation telles que :

side: cette option permet de définir l’emplacement du widget, avec les valeurs : TOP (en haut), BOTTOM (en bas), RIGHT (à droite), LEFT (à gauche).
expand: cette option permet de développer le widget pour remplir tout l’espace disponible du widget parent avec la valeur True.
fill: Cette option permet au widget de remplir l’espace supplémentaire sur le widget parent avec les valeurs : NONE (dimension par défaut), X (remplir horizontalement), Y (remplir verticalement), BOTH (remplir horizontalement et verticalement).

Exemple 1 :

Syntaxe :

from tkinter import *

from tkinter import *
fenetre = Tk()
# Placer de boutons dans la fenêtre principale :
bouton1 = Button (fenetre, text = "Haut")
bouton2 = Button (fenetre, text = "Gauche")
bouton3 = Button (fenetre, text = "Droite")
bouton4 = Button (fenetre, text = "Bas")
bouton1.pack(side = TOP)
bouton2.pack(side = LEFT)
bouton3.pack(side = RIGHT)
bouton4.pack(side = BOTTOM)
# Affichage de la fenêtre créée :
fenetre.mainloop()

Résultat d’exécution :

Exemple 2 :

Syntaxe :

from tkinter import *
fenetre = Tk()
# Ajout d’un bouton :
bouton1 = Button (fenetre, text = "Cliquez ici")
bouton1.pack(fill = X)
# Affichage de la fenêtre créée :
fenetre.mainloop()

Résultat d’exécution :

La méthode grid() :

La méthode grid() permet d’organiser et placer des widgets comme étant des cases de tableau.

Options :

Cette méthode contient des options de personnalisation telles que :

column: cette option permet de placer le widget dans une colonne en utilisant des entiers en commençant par la colonne à gauche, et ayant la valeur 0 par défaut.
row: cette option permet de placer le widget dans une ligne précisée par un entier.
columnspan: cette option permet de définir le nombre de colonnes occupées par le widget.
rowspan: cette option permet de définir le nombre de lignes occupées par le widget.
ipadx, ipady: cette option permet de définir le nombre de pixels remplissant le widget à l’intérieur de ses bordures.
padx, pady: cette option permet de définir le nombre de pixels remplissant le widget à l’extérieur de ses bordures.
sticky: cette option permet de répartir l’emplacement du widget dans une case, avec les valeurs : N (en haut), E (à droite), S (en bas), W (à gauche), NE, NW, SE, et SW.

Exemple :

Syntaxe :

from tkinter import *
fenetre = Tk()
# Affichage de boutons sous forme d'un tableau :
cpt = 0
for i in range (3) :
for j in range (3) :
cpt = cpt + 1
Button (fenetre, text = "bouton " + str(cpt)).grid(row = i, column = j)
# Affichage de la fenêtre créée :
fenetre.mainloop()

Résultat d’exécution :

La méthode place() :

La méthode place() permet d’organiser et placer des widgets en une position spécifique dans le widget parent.

Options :

Cette méthode contient des options de personnalisation telles que :

x, y: ces options permettent de définir la position horizontale (x) et verticale (y) du widget en pixels.
relx, rely: ces options permettent de définir la position horizontale (x) et verticale (y) du widget par rapport aux dimensions du widget parent (valeur comprise entre 0 et 1).
height: cette option permet de définir la hauteur du widget en pixels.
width: cette option permet de définir la largeur du widget en pixels.
reheight: cette option permet de définir la hauteur du widget par rapport à la hauteur du widget parent (valeur comprise entre 0 et 1).
rewidth: cette option permet de définir la largeur du widget par rapport à la largeur du widget parent (valeur comprise entre 0 et 1).
bordermode: cette option permet de référencer les autres options, soit à l’intérieur du widget parent (INSIDE) ou à l’extérieur (OUTSIDE).
anchor: cette option permet de référencer les autres options sur l’emplacement du widget, avec les valeurs : N (en haut), E (à droite), S (en bas), W (à gauche), NE, NW, SE, et SW.

Exemple :

Syntaxe :

from tkinter import *
fenetre = Tk()
texte1 = Label(fenetre, text = "Nom d'utilisateur : ")
texte1.place(x = 20, y = 20)
entrée1 = Entry(fenetre)
entrée1.place(x = 150, y = 20)
texte2 = Label(fenetre,text = "Mot de passe : ")
texte2.place(x = 20, y = 60)
entrée2 = Entry(fenetre)
entrée2.place(x = 150, y = 60)
bouton1 = Button(fenetre,text = "Se connecter")
bouton1.place(x = 150, y = 100)
fenetre.mainloop()

Résultat d’exécution :

Personnaliser les widgets :

Personnaliser l’apparence :

Les couleurs :

Les options de couleurs sont définies par leur nom en anglais tel que « white » , « red », « blue », « yellow » etc…, ou bien, par leurs valeurs hexadécimales comme « #87CEEB » pour le bleu ciel par exemple.

Options :

Les options qui traitent la couleur d’un widget sont :

bg oubackground : cette option permet de personnaliser la couleur de l’arrière-plan du widget.
fg ouforeground : cette option permet de personnaliser la couleur du premier plan d’un widget tel qu’un texte.
activebackground : cette option permet de personnaliser la couleur du premier plan lorsque le widget est activé.
activeforeground : cette option permet de personnaliser la couleur de l’arrière-plan lorsque le widget est activé.
disabledforeground : cette option permet de personnaliser la couleur de l’arrière-plan lorsque le widget est désactivé.
highlightbackground cette option permet de personnaliser la couleur de l’arrière-plan lorsque le widget est sous focus.
highlightcolor :cette option permet de personnaliser la couleur du premier plan lorsque le widget est sous focus.
selectbackground cette option permet de personnaliser la couleur de l’arrière-plan des éléments sélectionnés du widget.
selectforeground cette option permet de personnaliser la couleur du premier plan des éléments sélectionnés du widget.

Les dimensions :

On peut définir les dimensions en pixels en entrant directement des nombres entiers, ou bien, on peut les représenter suivi d’unités tel que : pour centimètre, pour millimètre, pour pouce.

Options :

Ainsi, Les options qui traitent les dimensions d’un widget sont :

height: cette option permet de définir la hauteur du widget.
width: cette option permet de définir la largeur du widget.
borderwidth: cette option permet de personnaliser la taille de la bordure du widget.
selectborderwidth: cette option permet de personnaliser la taille de la bordure tridimensionnel du widget.
highlightthickness: cette option permet de l’épaisseur la largeur du widget lorsqu’il est sous focus.
padx: cette option permet de définir un espace supplémentaire autour du widget en horizontal.
pady: cette option permet de définir un espace supplémentaire autour du widget en vertical.
Justify : cette option permet de personnaliser l’alignement d’un texte avec les valeurs LEFT (à gauche), CENTER (au centre), RIGHT (à droite).

La police du texte :

On peut définir la police d’un texte en utilisant l’option font, qui a comme arguments :

family: pour déterminer la police du texte en chaine de caractères.
size: pour définir la taille du texte.
weight: pour définir le texte en gras « weight = bold ».
slant: pour définir le texte en italique « slant = italic ».
underline: pour souligner le texte « underline = 1 ».

On peut réduire la forme de cette option sous la forme (‘’, , ‘ ..)

Les styles du relief :

Les styles de reliefs définissent une représentation 3D aux bordures d’un widget, il existe cinq styles de reliefs : FLAT, SUNKEN, RIDGE, GROOVE, RAISED.

Exemple :

On va présenter dans l’exemple suivant les différents types de style de relief :

Syntaxe :

from tkinter import *
fenetre = Tk()
bouton1 = Button(fenetre, text = "FLAT", relief = FLAT)
bouton2 = Button(fenetre, text = "SUNKEN", relief = SUNKEN)
bouton3 = Button(fenetre, text = "RIDGE", relief = RIDGE)
bouton4 = Button(fenetre, text = "GROOVE", relief = GROOVE)
bouton5 = Button(fenetre, text = "RAISED", relief = RAISED)
bouton1.pack()
bouton2.pack()
bouton3.pack()
bouton4.pack()
bouton5.pack()
fenetre.mainloop()

Résultat d’exécution :

Exemple :

Syntaxe :

from tkinter import *
fenetre = Tk()
texte1 = Label (fenetre, text = "Ceci est un Label", bg = '#87CEEB', fg = 'yellow', font = ("Bahnschrift", 20), relief = SUNKEN)
texte1.pack()
fenetre.mainloop()

Résultat d’exécution :

Les images matricielles « bitmap » :

Les images « bitmap » représentent des images pixelisées contenu dans le module tkinter telle que : , , , , , , , , , .

Exemple :

On va présenter dans l’exemple suivant l’ensemble des bitmaps disponibles sur tkinter :

Syntaxe :

from tkinter import *
fenetre = Tk()
bouton1 = Button(fenetre, bitmap = "error")
bouton2 = Button(fenetre, bitmap = "hourglass")
bouton3 = Button(fenetre, bitmap = "info")
bouton4 = Button(fenetre, bitmap = "questhead")
bouton5 = Button(fenetre, bitmap = "question")
bouton6 = Button(fenetre, bitmap = "warning")
bouton6 = Button(fenetre, bitmap = "gray75")
bouton7 = Button(fenetre, bitmap = "gray50")
bouton8 = Button(fenetre, bitmap = "gray25")
bouton9 = Button(fenetre, bitmap = "gray12")
bouton1.pack()
bouton2.pack()
bouton3.pack()
bouton4.pack()
bouton5.pack()
bouton6.pack()
bouton7.pack()
bouton8.pack()
bouton9.pack()
fenetre.mainloop()

Résultat d’exécution :

Le style du curseur :

On peut modifier l’apparence du curseur en définissant le mot-clé cursor par une des valeurs suivantes 'circle', 'tcross', 'arrow', 'mouse', 'cross', 'target', 'star', 'plus', 'clock', 'sizing', 'heart', ‘dot’, 'fleur' etc…

Exemple :

Syntaxe :

from tkinter import *
fenetre = Tk()
bouton1 = Button(fenetre, cursor = "tcross")
bouton2 = Button(fenetre, cursor = "heart")
bouton1.pack(fill = X)
bouton2.pack(fill = X)
fenetre.mainloop()

Insérer une image dans un widget :

L’option image sert à insérer une image dans un widget, en plaçant l’image dans le dossier de l’application, et en l’appelant par son nom avec la classe PhotoImage(file = ) comme il est montré dans l’exemple suivant :

Exemple :

Syntaxe :

from tkinter import *
fenetre = Tk()
logo = PhotoImage(file = "logo.png")
bouton1 = Button(fenetre, image = logo)
bouton1.pack()
fenetre.mainloop()

Résultat d’exécution :

Définir la commande d’un widget :

Afin qu’un widget tel qu’un bouton ait une fonction qui sera appelée quand il est cliqué, on le personnalise par l’option command suivie du nom de la fonction déjà définie qui exécutera une tâche précise, on verra dans la partie suivante un exemple illustrant ce procédé.

Afficher des boites de message :

En important le module messagebox sur tkinter, on peut introduire à la commande d’un widget l’affichage d’une boite de message dans votre application.

Ce module comporte plusieurs caractéristiques qu’on peut insérer dans une fonction tels que showinfo(), showwarning(), showerror(), askquestion(), askokcancel(), askyesno(), askretrycancel().

Exemple :

Syntaxe :

from tkinter import *
from tkinter import messagebox
def msg_bouton1():
messagebox.showinfo("titre du message", "contenu du message")
fenetre = Tk()
bouton1 = Button (fenetre, text = "Ok", bg = 'grey', fg = 'black', font = ("Bahnschrift", 20), command = msg_bouton1)
bouton1.pack()
fenetre.mainloop()

Résultat d’exécution :

Conclusion :

Afin de construire et réaliser une application, il est nécessaire d’assimiler les concepts et les éléments du module tkinter, et en le pratiquant dans des applications de différentes fonctions, vous serez capable de réaliser une interface graphique complète avec un design attirant et simple qui vous sera utile pour répondre à un besoin défini.

En espérant que ce tutoriel vous serait utile pour apprendre les bases de la réalisation d’une application en utilisant tkinter sur Python. Merci pour votre attention ! Et Bonne chance à vous !

Article publié le 10 Octobre 2020par Ismail BOUZIANE