Python, créer une interface simple pour une application

La réalisation d’une petite interface pour une application en python se fait très facilement et sans avoir à installer quoi que ce soit avec la bibliothèque Tkinter.Si vous avez commencé à suivre les différents petits articles que j’ai mis en ligne dans la catégorie Python, vous avez peut-être envie de commencer à faire un visuel plus sympa pour interagir avec votre script.

Vous avez certainement entendu parler de Pygame, qui est une bibliothèque extrêmement complète pour la réalisation d’interface détaillée (notamment dans le cadre de jeux 2D qui commence à être sophistiqué, voici plusieurs exemples) mais ce n’est pas le sujet.

Bien que simple, Tkinter vous permettra d’incorporer énormément de choses dans votre interface, je trouve que dans le cadre d’une interface pour un petit logiciel développé sous python, Tkinter largement suffisant.

Nous allons voir comment créer simplement une première interface, ce ne sera pas énorme, un menu pour quitter et à propos, un bouton et … c’est tout. Commençons.

Importer la bibliothèque Tkinter

Tout d’abord, pas besoin d’installation, Tkinter est inclus de base avec python, il est compatible avec Python 2 et 3, cependant, il y a quelques petits changements à prendre en compte. Pour introduire Tkinter, je ne rentrerai pas dans les détails mais pour être sur d’une compatibilité (et si les fonctions appelées ne passent pas par des noms de fonctions différents, cela sera suffisant).

Commencer par créer votre fichier : intro-tkinter.py et placer dedans :

#!/usr/bin/python3
#coding: utf8
try:
  import tkinter as Tk
except:
  import Tkinter as Tk

Dans un premier temps nous essayons d’importer tkinter pour une utilisation en python 3, si cela échoue, je passe en python 2 (pour faire simple).

Pour voir si vous n’avez pas de soucis, vous pouvez essayer de lancer le script (qui fera rien pour l’instant si il n’y a pas d’erreur en faisant : python ./intro-tkinter.pypour tester en python 2.x et faire python3 ./intro-tkinter.py pour le test en python 3.

Création de notre fenêtre

Nous allons créer notre première fenêtre qui contiendra une simple phrase. Pour cela, nous allons créer notre objet et lui attribuer quelques paramètres :

#!/usr/bin/python3
#coding: utf8
try:
     import tkinter as Tk
except:
     import Tkinter as Tk

fenetre = Tk.Tk()
fenetre.geometry("200x100")
fenetre.mainloop()

Nous reconnaissons la première partie pour l’importation de la bibliothèque ensuite nous créons notre objet qui représente notre fenêtre et nous appliquons une taille.

La dernière ligne est la plus importante, il s’agit de notre boucle qui fera apparaître notre fenêtre.

Ajout d’un titre dans la fenêtre Tkinter

Nous allons commencer à ajouter quelques éléments à notre fenêtre, vous allez rapidement comprendre qu’on vient ajouter ces éléments (Widget) à un autre élément.

Nous allons commencer à insérer un titre pour notre fenêtre :

#!/usr/bin/python3
#coding: utf8
try:
     import tkinter as Tk
except:
     import Tkinter as Tk

fenetre = Tk.Tk()
fenetre.geometry("200x100")
fenetre.title('Mon titre')
fenetre.mainloop()

J’ai tout simplement ajouter la le titre avec cette ligne : fenetre.title('Mon titre')

Python, ajouter un titre Tkinter
Python, ajouter un titre Tkinter

Ajout d’un texte dans la fenêtre Tkinter

Bon, il ne s’agit toujours pas de quelque-chose d’exceptionnelle, nous allons ajouter un texte dans notre fenêtre.

Je procède volontairement par étapes pour que vous saisissiez chaque points, ces points sont les bases d’une petite interface.

Pour cela, nous allons utiliser le widget Label :

#!/usr/bin/python3
#coding: utf8
try:
     import tkinter as Tk
except:
     import Tkinter as Tk

fenetre = Tk.Tk()
fenetre.geometry("200x100")
fenetre.title('Mon titre')

contenu = Tk.Frame(fenetre)
contenu.config(bg="green",padx=5, pady=5)
contenu.pack()

message_information = Tk.Label(contenu, text="Cliquer pour sortir")
message_information.config(bg="white", padx=10, pady=10)
message_information.pack()

fenetre.mainloop()

Voilà que cela se complique, j’ai introduit deux widgets, le premier est la Frame et le second et le Label.

Pourquoi avoir fait cela, tout simplement pour bien comprendre, comment on insère un widget dans un autre avec la mise en place de marge et d’une couleur de fond.

Nous commençons par ajouter une frame dans notre fenêtre avec contenu = Tk.Frame(fenetre), je crée ma frame contenu qui est relative à ma fenêtre.

Je configure ma frame avec contenu.config(bg="green",padx=5, pady=5) et ensuite, je place ma frame avec contenu.pack()(nous verrons que l’on peut placer des options pour placer précisément notre widget).

Puis j’effectue la même chose pour mon label qui sera le texte affiché, nous rajoutons donc le texte à afficher lorsque que nous créons notre widget Label.

Python ajouter un label et une frame a tkinter
Python ajouter un label et une frame à tkinter

Ajout d’un menu et d’un bouton à Tkinter

D’accord mais je clique sur quoi ? mais j’y viens justement, nous allons ajouter un menu avec un onglet pour pouvoir quitter (et oui, cela manque, depuis tout de suite vous passer par la petite croix pour sortir) et un onglet à propos.

Nous allons également mettre en place un bouton (dans un premier temps, il nous permettra de quitter).

Voilà le petit script (je sais, il y a de la redondance) :

#!/usr/bin/python3
#coding: utf8
try:
     import tkinter as Tk
except:
     import Tkinter as Tk

fenetre = Tk.Tk()
fenetre.geometry("200x100")
fenetre.title('Mon titre')

barre_menu = Tk.Menu(fenetre)
menu_fichier = Tk.Menu(barre_menu)
menu_fichier.add_command(label="Quitter",command=fenetre.quit)
barre_menu.add_cascade(label="Fichier", menu=menu_fichier)
fenetre.config(menu=barre_menu)

contenu = Tk.Frame(fenetre)
contenu.config(bg="green",padx=5, pady=5)
contenu.pack()

message_information = Tk.Label(contenu, text="Cliquer pour sortir")
message_information.config(bg="white", padx=10, pady=10)
message_information.pack()

bouton_quitter = Tk.Button(contenu, text="Ici", command=fenetre.quit)
bouton_quitter.pack(side="right")

fenetre.mainloop()

Le menu dans Tkinter

Attention, là, il y a eu de la ligne d’ajouter, commençons par le menu, nous créons notre barre de menu (barre_menu = Tk.Menu(fenetre)).

Ensuite, nous plaçons notre onglet, en créant un second menu (pour l’instant, il ne s’agit que d’un objet) qui lui est imbriqué dans la barre de menu (menu_fichier = Tk.Menu(barre_menu)

Nous ajoutons, une ligne (qui sera nommé « Quitter« ) dans l’onglet qui correspondra à une commande, dans notre cas, on quitte la fenêtre principale : menu_fichier.add_command(label="Quitter",command=fenetre.quit)

Maintenant, on lie tous les éléments entre eux : barre_menu.add_cascade(label="Fichier", menu=menu_fichier)

Et enfin, on place notre menu, en le configurant dans la fenêtre : fenetre.config(menu=barre_menu)

Voilà nous verrons plus loin des ajouts un peu plus complexe mais qui restent dans la même philosophie.

Le bouton dans Tkinter

Le code pour le bouton en question, si vous avez suivi le Label et le menu, il n’y a rien de compliquer :

bouton_quitter = Tk.Button(contenu, text="Ici", command=fenetre.quit)
bouton_quitter.pack(side="right")

Il y a simplement le placement du bouton qui se fait avec side.

Python, le bouton et le menu dans tkinter
Python, le bouton et le menu dans tkinter

Ajout d’une zone de saisie, son traitement et l’affichage d’une seconde fenêtre

On se rapproche de la fin de cet article, nous allons ajouter une zone de saisie, afficher ce texte dans un seconde fenêtre. En passant, nous rajouterons un menu.

#!/usr/bin/python3
#coding: utf8
try:
     import tkinter as Tk
except:
     import Tkinter as Tk

def a_propos():
  fenetre_propos = Tk.Toplevel()
  fenetre_propos.geometry("300x300")
  fenetre_propos.title('A propos')
  texte_propos = Tk.Label(fenetre_propos,text="Voici une petite fenêtre qui s'ouvre par-dessus,\n pour la fermer cliquer sur le bouton qui suit,\n cela ne fermera pas la principale")
  texte_propos.pack()
  fermer_propos = Tk.Button(fenetre_propos,text="Fermer", command=fenetre_propos.destroy)
  fermer_propos.pack()
def affichage_saisie():
  fenetre_saisie = Tk.Toplevel()
  fenetre_saisie.geometry("300x300")
  fenetre_saisie.title('La saisie')
  texte_saisie = Tk.Label(fenetre_saisie,text="Le texte saisie est : \n"+valeur.get())
  texte_saisie.pack()
  fermer_saisie = Tk.Button(fenetre_saisie,text="Fermer", command=fenetre_saisie.destroy)
  fermer_saisie.pack()

fenetre = Tk.Tk()
fenetre.geometry("200x100")
fenetre.title('Mon titre')

barre_menu = Tk.Menu(fenetre)
menu_fichier = Tk.Menu(barre_menu)
menu_fichier.add_command(label="Quitter",command=fenetre.quit)
barre_menu.add_cascade(label="Fichier", menu=menu_fichier)
menu_propos = Tk.Menu(barre_menu)
menu_propos.add_command(label="A Propos",command=a_propos)
barre_menu.add_cascade(label="A Propos", menu=menu_propos)

fenetre.config(menu=barre_menu)

contenu = Tk.Frame(fenetre)
contenu.config(bg="green",padx=5, pady=5)
contenu.pack()

message_information = Tk.Label(contenu, text="Saisir un texte et valider")
message_information.config(bg="white", padx=10, pady=10)
message_information.pack()

valeur = Tk.StringVar()
valeur.set('')
entree = Tk.Entry(contenu,textvariable=valeur,width=5)
entree.pack(side="left")

bouton_quitter = Tk.Button(contenu, text="Valider", command=affichage_saisie)
bouton_quitter.pack(side="right")

fenetre.mainloop()

Mais que se passe-t-il, plein de nouvelle chose ? en réalité pas tout à fait, j’ai créé deux fonctions, je n’expliquerai que la fonction affichage_saisie :

def affichage_saisie():
        # Création d'une fenêtre que dira secondaire et choix de la taille de cette fenêtre ainsi que le titre
  fenetre_saisie = Tk.Toplevel()
  fenetre_saisie.geometry("300x300")
  fenetre_saisie.title('La saisie')
        # Un widget Label afin d'afficher la valeur qui a été saisie, '\n' est simplement un retour à la ligne
  texte_saisie = Tk.Label(fenetre_saisie,text="Le texte saisie est : \n"+valeur.get())
  texte_saisie.pack()
        # On ferme cette seconde fenêtre, cela n'a aucune incidence sur la fenêtre principale
  fermer_saisie = Tk.Button(fenetre_saisie,text="Fermer", command=fenetre_saisie.destroy)
  fermer_saisie.pack()

Alors, j’ai placé des commentaires pour comprendre les différents éléments, il est à noter la manière de récupérer la saisie dans l’entrée s’appelant ‘valeur

J’ai rajouté un élément au menu, cela suit la même logique que le point précédent sur l’intégration d’un menu.

Le bouton sur la page principale appel désormais la fonction pour l’affichage de la saisie. Vous noterez que j’ai déclaré la variable valeur de cette manière : valeur = Tk.StringVar(), celle-ci es un objet sur lequel, il y a des fonctions que je peux utiliser, notamment obtenir la valeur.

Après tout le reste est facilement compréhensible.

Je vous laisse découvrir le rendu sur votre poste.

Conclusion

En espérant que ce petit article vous sera utile, maintenant, allez fouiner un peu, vous avez les bases pour vous faire une petite interface.

Laisser un commentaire