05 INTERFACES GRAPHIQUES AVEC

PYTHON
QU'EST-CE QU'UNE INTERFACE GRAPHIQUE ?

 Une interface graphique utilisateur (GUI) est une interface visuelle permettant aux
utilisateurs d'interagir avec un programme via des composants visuels comme des
boutons, des menus, ou des champs de saisie, au lieu d'une ligne de commande.

 Caractéristiques principales :

 Interactive : Les utilisateurs peuvent interagir avec les éléments (cliquer, saisir, etc.).

 Visuelle : Conçue pour être intuitive, avec des éléments organisés de manière
ergonomique.

 Multiplateforme : Fonctionne sur différents systèmes d'exploitation.

 Facilité d'utilisation : Permet de rendre les programmes accessibles à tous.

 Utilisation professionnelle : Souvent requise pour des projets logiciels.

2
POURQUOI UTILISER DES INTERFACES GRAPHIQUES ?

 Amélioration de l'expérience utilisateur :

> Accessibilité : Pas besoin de connaissances techniques pour utiliser un programme.

> Esthétique : Un logiciel bien conçu est agréable à utiliser.

> Intégration :Les interfaces graphiques peuvent être combinées avec des
fonctionnalités complexes en arrière-plan, rendant les programmes plus puissants.

 Applications courantes :

> Applications de gestion : Logiciels d'inventaire.

> Applications éducatives : Simulateurs d’apprentissage.

> Applications de visualisation : Analyse de données avec des graphiques interactifs.

 Exemple : Imaginez une calculatrice :

> Sans GUI : Vous devez taper chaque opération en ligne de commande.

> Avec GUI : Vous cliquez sur les boutons avec une interface claire.

3
LES BIBLIOTHÈQUES GUI EN PYTHON

 Quelles options existent ?

> Tkinter :Bibliothèque standard de Python. Simple et rapide pour des projets
légers.Intégré, donc aucune installation supplémentaire.
> PyQt / PySide :Plus avancé, utilisé pour des applications complexes. Permet de
créer des interfaces modernes et professionnelles.
> Kivy :Multi-plateforme : Fonctionne sur PC, mobile et tablettes. Idéal pour les projets
modernes avec des animations.
> wxPython :Permet de créer des interfaces natives qui s’adaptent au système
d’exploitation.
 Pourquoi choisir Tkinter ?
> Intégré directement avec Python.
> Facile à apprendre, idéal pour débuter.
> Suffisant pour des outils internes ou des prototypes.

Complexité des interfaces

Bibliothèque Facilité d'apprentissage Support multi-plateforme
possibles

Tkinter Facile Moyenne Oui

PyQt Moyenne Élevée Oui

Kivy Moyenne Moyenne à élevée Oui

4
PRÉSENTATION DE TKINTER

 Tkinter est une bibliothèque standard pour la création d'interfaces graphiques avec
Python. Elle repose sur Tk, une bibliothèque graphique externe qui permet de gérer
des fenêtres et des widgets.
 Caractéristiques principales :
> Widgets variés : Boutons, labels, champs de texte, menus, etc.
> Compatibilité multiplateforme : Fonctionne sur Windows, macOS et Linux.
> Facile à prendre en main : Parfait pour les débutants.
 Avantages :
> Intégré dans Python, aucune installation requise.
> Suffisant pour des applications simples ou moyennement complexes.
> Documentation et exemples abondants.
 Inconvénients :
> Moins moderne visuellement comparé à PyQt ou Kivy.
> Pas conçu pour des interfaces riches avec animations ou design complexe.

5
INSTALLATION ET PREMIÈRE FENÊTRE

 kinter est inclus dans Python 3. Si vous ne l’avez pas : pip install tk

6
CRÉER UNE FENÊTRE AVEC TKINTER

 Importer la bibliothèque :

> from tkinter import Tk

 Créer la fenêtre principale (root) :

> root = Tk()

 Ajouter des paramètres (taille, titre, etc.) :

> root.title("Première fenêtre")

> root.geometry("400x300")

 Lancer l'application avec une boucle principale :

> root.mainloop()

7
CRÉER UNE FENÊTRE AVEC TKINTER

 Une fenêtre s'affiche avec une largeur de 400 pixels et une hauteur de 300 pixels. Elle
reste ouverte jusqu'à ce que l'utilisateur la ferme manuellement.

8
WIDGETS DANS TKINTER

 Un widget est un composant graphique qui constitue l'interface utilisateur. Tkinter fournit de
nombreux widgets pour différents besoins.
 Catégories principales :
> Affichage statique :
+ Label : Affiche du texte ou des images.
> Interaction utilisateur :
+ Button : Permet de déclencher des actions.
+ Entry : Saisie de texte.
> Choix parmi plusieurs options :
+ Radiobutton : Boutons radio.
+ Checkbutton : Cases à cocher.
> Conteneurs :
+ Frame : Organisation des widgets.
+ Canvas : Dessin ou graphiques.

9
BOUTON (BUTTON) - DÉFINITION

 Le widget Button permet de créer un bouton interactif dans une interface graphique.
Lorsqu'un utilisateur clique sur le bouton, une action associée est exécutée.
 Caractéristiques principales :
 Interactivité : Chaque bouton peut être relié à une fonction Python qui s'exécute au clic
grâce à l'attribut command.
 Personnalisation :
> text : Définit le texte visible sur le bouton.
> font : Permet de changer la taille, la famille et le style de la police.
> bg (background) et fg (foreground) : Couleurs d'arrière-plan et du texte.
> width et height : Dimensions du bouton.
 Accessibilité :Prise en charge des raccourcis clavier ou des options spécifiques pour
faciliter l'accès.
 Utilisations courantes :
> Boutons d'action : Soumettre un formulaire, annuler une opération.
> Navigation : Passer d'une page ou fenêtre à une autre.
> Actions spécifiques : Par exemple, exécuter un calcul ou afficher une alerte.

10
BOUTON (BUTTON) - DÉFINITION

 Une fenêtre s’affiche avec un bouton interactif. Lorsque vous cliquez sur le bouton,
"Bouton cliqué !" s'affiche dans la console.

11
LABEL (LABEL)

 Le widget Label est utilisé pour afficher du texte ou des images dans une interface
graphique. Contrairement au bouton, il est non interactif et sert principalement à
transmettre des informations visuelles.
 Caractéristiques principales :
 Affichage de contenu statique :Texte descriptif ou titres d'une interface.
 Affichage d'images (avec des formats pris en charge comme PNG, GIF).
 Personnalisation :
> text : Contenu texte du label.
> font : Taille, type et style de la police.
> bg et fg : Couleurs d'arrière-plan et du texte.
 Alignement :Texte centré par défaut. Peut être aligné à gauche ou à droite grâce à
l’attribut anchor.
 Utilisations courantes :
> Titres ou descriptions : Par exemple, "Bienvenue" ou "Saisissez vos informations".
> Feedback visuel : Afficher des messages d'erreur ou des instructions.
> Élément décoratif : Ajouter des images ou des informations statiques.

12
LABEL (LABEL)

 Un label s’affiche dans une fenêtre avec un texte personnalisé en bleu sur un arrière-
plan gris clair.

13
ZONE DE SAISIE (ENTRY)

 Le widget Entry permet à l’utilisateur de saisir une ligne de texte. Il est souvent utilisé
pour des champs comme "Nom", "Email", ou "Mot de passe".
 Caractéristiques principales :
 Saisie de texte simple :
> L'utilisateur peut entrer une ligne de texte.
> Le contenu saisi peut être récupéré à l'aide de la méthode .get().
 Personnalisation :
> width : Définit la largeur de la zone en nombre de caractères.
> show : Masque le texte pour des champs comme le mot de passe (exemple :
show="*").
 Validation et interaction :
> Associer des événements pour valider le contenu saisi (par exemple, appuyer sur
"Entrée").
> Peut être lié à une variable Tkinter via textvariable.

14
ZONE DE SAISIE (ENTRY)

 Une fenêtre s’affiche

avec une zone de texte
et un bouton. Lorsque
vous cliquez sur
"Valider", le nom saisi est
affiché dans la console.

15
ZONE DE TEXTE (TEXT)

 Le widget Text permet de créer une zone de texte multiligne où l'utilisateur peut saisir et
modifier plusieurs lignes de texte.

 Caractéristiques principales :

> Saisie de texte multiligne :Permet l’édition de textes longs.

> Idéal pour des commentaires ou des descriptions détaillées.

 Personnalisation :

> width et height : Définissent la taille du widget en nombre de caractères et de lignes.

> font : Permet de configurer le style et la taille du texte.

> wrap : Définit si le texte est automatiquement renvoyé à la ligne (char, word, ou none).

 Interactions avancées :

> Récupération du texte : Utilisez .get("1.0", "end-1c") pour récupérer tout le contenu.

> Insertion de texte : Utilisez .insert(index, "texte") pour insérer du contenu à une position
spécifique.

16
ZONE DE TEXTE (TEXT)

 Une fenêtre avec une zone de texte et un bouton.Le texte saisi est affiché dans la
console lorsqu'on clique sur le bouton.

17
BOUTONS RADIO (RADIOBUTTON)

 Les Radiobuttons permettent de sélectionner une option parmi plusieurs.

Contrairement aux cases à cocher, une seule option peut être active à la fois.

 Caractéristiques principales :

 Options exclusives :Les boutons radio sont reliés à une variable commune. Lorsqu'un
bouton est sélectionné, les autres sont désactivés.

 Personnalisation :

> text : Définit le texte affiché à côté du bouton.

> value : Spécifie la valeur associée à chaque bouton.

> variable : Liée à une variable pour suivre le choix sélectionné.

 Accessibilité :Peut être utilisé avec des raccourcis clavier pour faciliter la navigation.

18
BOUTONS RADIO (RADIOBUTTON)

 Une fenêtre avec trois

options sous forme de
boutons radio. La sélection
de l’utilisateur est affichée
dans la console lorsqu’on
clique sur "Afficher le
choix".

19
CASES À COCHER (CHECKBUTTON)

 Les Checkbuttons permettent de sélectionner ou désélectionner plusieurs options

indépendantes.

 Caractéristiques principales :

> Sélection multiple :Chaque case à cocher est reliée à une variable distincte.

> L’utilisateur peut cocher plusieurs cases simultanément.

 Personnalisation :

> text : Définit le texte affiché à côté de la case.

> variable : Liée à une variable (par exemple, IntVar) pour suivre l'état de la case
(cochée ou non).

 Interactivité :Permet d'ajouter des fonctionnalités dynamiques selon l’état des cases.

20
CASES À COCHER (CHECKBUTTON)

 Une fenêtre avec deux cases à

cocher et un bouton. Lorsque
vous cliquez sur le bouton,
l’état des cases (cochée ou
non) est affiché dans la
console.

21
LISTES DÉROULANTES (OPTIONMENU)

 Le widget OptionMenu permet à l’utilisateur de sélectionner une option parmi plusieurs

dans une liste déroulante.

 Caractéristiques principales :

 Interface compacte :Affiche la valeur sélectionnée et permet d’ouvrir une liste

déroulante avec un clic.

 Personnalisation :

> textvariable : Variable associée qui stocke l’option choisie.

> Options dynamiques : Vous pouvez passer une liste ou un tuple comme choix.

 Interaction :Ajoutez une fonction pour gérer les changements de sélection en utilisant
.trace() sur la variable associée.

22
LISTES DÉROULANTES (OPTIONMENU)

 options : Liste des choix affichés.

 selection : Variable qui stocke l'option sélectionnée.
 OptionMenu : Widget pour afficher la liste déroulante.
 Résultat attendu :Une liste déroulante avec trois options. La sélection de l’utilisateur est
affichée.

23
BOÎTES DE DIALOGUE (MESSAGEBOX)

 Le module messagebox de Tkinter permet d’afficher des fenêtres pop-up pour

communiquer avec l'utilisateur. Ces fenêtres peuvent contenir des messages
d’information, d’avertissement ou des demandes de confirmation.

 Caractéristiques principales :

 Types de messages disponibles :

> showinfo : Message informatif.

> showwarning : Avertissement.

> showerror : Erreur.

> askyesno : Confirmation (Oui ou Non).

> askokcancel : Validation (OK ou Annuler).

 Simple à utiliser :Pas besoin de créer un widget ; les fenêtres apparaissent

automatiquement.

 Interaction :Renvoie une réponse booléenne ou textuelle en fonction du type de boîte.

24
BOÎTES DE DIALOGUE (MESSAGEBOX)

25
INTRODUCTION À .PACK() DANS TKINTER

 .pack() est un gestionnaire de placement dans Tkinter. Il permet de placer les widgets
dans la fenêtre et de les rendre visibles.

 Rôle essentiel :

 Sans un gestionnaire comme .pack(), les widgets créés ne seront pas affichés dans
l'interface graphique.

 Caractéristiques de .pack() :

> Simple et automatique :Place les widgets dans la fenêtre selon l'ordre de création.
Idéal pour débuter sans gérer de positions précises.

> Organisation par empilement :Les widgets sont empilés les uns sur les autres
(par défaut, de haut en bas).

> Option minimaliste :Contrairement à .grid() ou .place(), .pack() ne demande pas

de configuration supplémentaire.

26
INTRODUCTION À .PACK() DANS TKINTER

 Les deux labels sont affichés l'un sous l'autre dans la fenêtre.

27