Cours 3 : Interfaces graphiques en

Python

Interfaces – p.1
 De quoi s’agit-il ?
Une interface graphique est un outil permettant d’interagir
avec un programme informatique.

OInterfaces – p.2
 De quoi s’agit-il ?
Une interface graphique est un outil permettant d’interagir
avec un programme informatique.

C’est un objet très complexe qui est à l’interface de

nombreux aspects

OInterfaces – p.2
 De quoi s’agit-il ?
Une interface graphique est un outil permettant d’interagir
avec un programme informatique.

C’est un objet très complexe qui est à l’interface de

nombreux aspects

La plupart des langages disposent de bibliothèques pour

prendre en charge une partie de cette complexité

OInterfaces – p.2
 De quoi s’agit-il ?
Une interface graphique est un outil permettant d’interagir
avec un programme informatique.

C’est un objet très complexe qui est à l’interface de

nombreux aspects

La plupart des langages disposent de bibliothèques pour

prendre en charge une partie de cette complexité
Le programmeur doit simplement penser aux éléments
graphiques à mettre en place (cadre, menu, boutons)

OInterfaces – p.2
 De quoi s’agit-il ?
Une interface graphique est un outil permettant d’interagir
avec un programme informatique.

C’est un objet très complexe qui est à l’interface de

nombreux aspects

La plupart des langages disposent de bibliothèques pour

prendre en charge une partie de cette complexité
Le programmeur doit simplement penser aux éléments
graphiques à mettre en place (cadre, menu, boutons)
Il doit également penser au fond de son programme
c’est-à-dire les traitements qu’il doit faire

Interfaces – p.2
 En Python

La bibliothèque la plus simple pour créer des interfaces est

TKinter

OInterfaces – p.3
 En Python

La bibliothèque la plus simple pour créer des interfaces est

TKinter

Une autre bibliothèque classique est wxPython (repose sur

wxWidgets)
La bibliothèque wxWidgets est également disponible en
C/C++

OInterfaces – p.3
 En Python

La bibliothèque la plus simple pour créer des interfaces est

TKinter

Une autre bibliothèque classique est wxPython (repose sur

wxWidgets)
La bibliothèque wxWidgets est également disponible en
C/C++

Il en existe bien d’autres : pyQT, pyGTK, ...

OInterfaces – p.3
 En Python

La bibliothèque la plus simple pour créer des interfaces est

TKinter

Une autre bibliothèque classique est wxPython (repose sur

wxWidgets)
La bibliothèque wxWidgets est également disponible en
C/C++

Il en existe bien d’autres : pyQT, pyGTK, ...

Dans ce cours on utilisera TKinter

Interfaces – p.3
Premier contact

kinter.py

Interfaces – p.4
Programmes pilotés par les événements

Programmation classique

Initialisation

OInterfaces – p.5
Programmes pilotés par les événements

Programmation classique

Initialisation
Boucle principale

OInterfaces – p.5
Programmes pilotés par les événements

Programmation classique

Initialisation
Boucle principale
Terminaison

OInterfaces – p.5
Programmes pilotés par les événements

Programmation classique Programmation événements

Initialisation

Activite
Initialisation Evenements Recepteur Messages centrale
Materiel du
d’evenements
Boucle principale programme

Terminaison

Terminaison

Interfaces – p.5
Deux exemples

calculette.py

clicks.py

Interfaces – p.6
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque

OInterfaces – p.7
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque
Canvas : Zone graphique

OInterfaces – p.7
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque
Canvas : Zone graphique
Checkbutton : Case à cocher

OInterfaces – p.7
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque
Canvas : Zone graphique
Checkbutton : Case à cocher
Entry : Zone de texte

OInterfaces – p.7
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque
Canvas : Zone graphique
Checkbutton : Case à cocher
Entry : Zone de texte
Frame : Cadre pour placer d’autre widgets

OInterfaces – p.7
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque
Canvas : Zone graphique
Checkbutton : Case à cocher
Entry : Zone de texte
Frame : Cadre pour placer d’autre widgets
Label : Texte quelconque (image)

OInterfaces – p.7
Quelques classes de widgets Tkinter

Button : Bouton standard exécute une fonction

quelconque
Canvas : Zone graphique
Checkbutton : Case à cocher
Entry : Zone de texte
Frame : Cadre pour placer d’autre widgets
Label : Texte quelconque (image)
Menu : Un simple menu déroulant

Interfaces – p.7
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

OInterfaces – p.8
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

Message : Similaire à Label, permet d’adapter la forme
du texte

OInterfaces – p.8
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

Message : Similaire à Label, permet d’adapter la forme
du texte
Radiobutton : Bouton radio classique (choix multiple)

OInterfaces – p.8
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

Message : Similaire à Label, permet d’adapter la forme
du texte
Radiobutton : Bouton radio classique (choix multiple)
Scale : Curseur pour modifier la valeur d’une variable

OInterfaces – p.8
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

Message : Similaire à Label, permet d’adapter la forme
du texte
Radiobutton : Bouton radio classique (choix multiple)
Scale : Curseur pour modifier la valeur d’une variable
Scrollbar : Assenceur. A associer à d’autres widget
(Canvas, Entry, Listbox, Text)

OInterfaces – p.8
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

Message : Similaire à Label, permet d’adapter la forme
du texte
Radiobutton : Bouton radio classique (choix multiple)
Scale : Curseur pour modifier la valeur d’une variable
Scrollbar : Assenceur. A associer à d’autres widget
(Canvas, Entry, Listbox, Text)
Text : Affichage de texte mis en page

OInterfaces – p.8
Quelques classes de widgets Tkinter - 2

MenuButton : Bouton menu

Message : Similaire à Label, permet d’adapter la forme
du texte
Radiobutton : Bouton radio classique (choix multiple)
Scale : Curseur pour modifier la valeur d’une variable
Scrollbar : Assenceur. A associer à d’autres widget
(Canvas, Entry, Listbox, Text)
Text : Affichage de texte mis en page
Toplevel : Nouvelle fenêtre

Interfaces – p.8
 Placement des widget
Première option simple pack

OInterfaces – p.9
 Placement des widget
Première option simple pack

Option plus élaborée : grid

OInterfaces – p.9
 Placement des widget
Première option simple pack

Option plus élaborée : grid

fen = Tk()

text1=Label(fen,text = "Premier champ :")

text2=Label(fen,text = "Second :")
ent1=Entry(fen) ; ent2=Entry(fen)

text1.grid(row = 0)
text2.grid(row = 1)
ent1.grid(row = 0, column = 1)
ent2.grid(row = 1, column = 1)
Interfaces – p.9
Affichage d’images

image.py

Interfaces – p.10
 Économie de variables
Il n’est pas toujours nécessaire de définir des variables
pour chaque widget

OInterfaces – p.11
 Économie de variables
Il n’est pas toujours nécessaire de définir des variables
pour chaque widget

Par exemple :

txt = label(fen, text = "Bonjour")

txt.pack(side = LEFT)

OInterfaces – p.11
 Économie de variables
Il n’est pas toujours nécessaire de définir des variables
pour chaque widget

Par exemple :

txt = label(fen, text = "Bonjour")

txt.pack(side = LEFT)

Peut être remplacé par :

label(fen, text = "Bonjour").pack(side = LEFT)

Interfaces – p.11
Animation

anim.py

Interfaces – p.12