B201A Informatique

appliquée

Séance 4
Interface
graphique et
évènements

Sébastien Combéfis, Quentin Lurkin 2017–2018

Ce(tte) œuvre est mise à disposition selon les termes de la Licence Creative Commons
Attribution – Pas d’Utilisation Commerciale – Pas de Modification 4.0 International.
Rappels

Définition d’une classe

Définition d’une classe (variable d’instance et constructeur)

Définition d’un constructeur et instanciation d’un objet
Définition de méthode et appel

Concepts de programmation orientée objet

Représentation d’un objet avec str

Surcharge d’opérateur
Égalité des objets (==) et des identités
( is ) Accesseur et mutateur

3
Objectifs

Interface graphique

Construction d’une interface graphique avec Kivy

Widgets graphiques
Fichier KV

Programmation évènementielle

Boucle d’évènement
Action et gestionnaire d’évènements
Canvas et dessin

4
Interface
graphique
Librairie Kivy

Framework open-source pour créer des interfaces utilisateur

Application desktop ou mobile, jeux...

Plusieurs avantages offerts par la librairie

Multi-plateforme (Linux, Windows, OS X, Android, iOS)

Framework stable, API documentée...
Moteur graphique basé sur OpenGL ES 2 (utilisation du
GPU)

Kivy est disponible sur GitHub

https:// [Link]/kivy/kivy

6
 Graphical User Interface (1)

Utilisation de la librairie graphique Kivy pour les

GUI
Importation de [Link] et [Link].*

Création d’une fenêtre en définissant une classe

Méthode build permet de construire l’interface

1 from k i v y . app import App

2 from k i v y . u i x . l a b e l import Label
3
4 c l a s s H e l l o App ( App ) :
5 def b u i l d ( s e l f ) :
6 return Label ( t e x t = ’ H e l l o World ! ’ , f o n t _ s i z e = ’ 100 s p ’ )
7
8 H e l l o App ( ) . r u n ( )

7
Graphical User Interface
(2)

8
Widget

Interface graphique construite à partir de widgets

Composants tels que label, bouton, fenêtre, liste, case à
cocher...

Widgets placés les uns dans les autres

Chaque composant a un composant parent

9
Hiérarchie de Widget

Liens entre les composants d’une fenêtre comme un

arbre
Hiérarchie des relations de filiation des widgets

Un composant possède un parent et une liste de fils

L’organisation visuelle dépend du type de parent

10
Composants de base (1)

Un label est une zone de texte non modifiable

Permet d’afficher du texte pour information à l’utilisateur

Une zone de texte permet à l’utilisateur d’entrer un

texte
Permet de récupérer une information de l’utilisateur

Un bouton peut être cliqué

Permet de réagir à une action de l’utilisateur

11
 Composants de base (2)

1 from kivy. app import App

2 from kivy. c o n fi g import Config
3 from kivy. u i x . b o x l a y o u t import Box Layout
4 from kivy. u i x . b u tt o n import Button
5 from kivy. u i x . l a b e l import Label
6 from kivy. u i x . t e x ti n p u t import TextInput
7
8 c l a s s L o g i n App ( App ) :
9 def b u i l d ( s e l f ) :
10 s e l f . ti t l e = ’ Se c o n n e c t e r ’
11 box = Box Layout ( o r i e n t a ti o n = ’ h o r i z o n t a l ’ )
12 b o x . a d d _ w i d g e t ( Label ( t e x t = ’ P i n code ’ ) )
13 b o x . a d d _ w i d g e t ( TextInp u t ( ) )
14 b o x . a d d _ w i d g e t ( Button ( t e x t = ’ E n t r e r ’ ) )
15 return box
16
17 # C o n fi g u r a ti o n de l a t a i l l e de l a f e n ê t r e
18 Con f ig . s e t ( ’ g r a p h i c s ’ , ’ w i d t h ’ , ’ 350 ’ )
19 Con f ig . s e t ( ’ g r a p h i c s ’ , ’ h e i g h t ’ , ’ 50 ’ )
20
21 # Lanc e me nt de l ’ i n t e r f a c e graphique
22 L o g i n App ( ) . r u n ( )

12
 BoxLayout

Un box layout n’a aucun rendu graphique

Uniquement utilisé pour y stocker d’autres composants

Ajout d’un composant à l’aide de la méthode

add_widget

Les composants sont ajoutés l’un à la suite de

l’autre Organisation horizontale ou verticale des
composants
1 box = Box Layout ( o r i e n t a ti o n = ’ h o r i z o n t a l ’ )
2 box. a d d _ w i d g e t ( Label ( t e x t = ’ P i n code ’ ) )
3 box. a d d _ w i d g e t ( TextInp u t ( ) )
4 box. a d d _ w i d g e t ( Button ( t e x t = ’ E n t r e r ’ ) )

13
Gestionnaire de mise en
page

Plusieurs composants de gestion de mise en page

BoxLayout aligne horizontalement ou verticalement

GridLayout organise sous forme de lignes et colonnes
FloatLayout permet un positionnement absolu

On peut combiner plusieurs conteneurs

Pour créer une mise en page complexe

14
GridLayout
(1)
Organisation des composants fils sous forme d’une grille

Choix fixe du nombre de lignes (rows) et colonnes ( cols )

Composants fils ajoutés de haut en bas, de gauche à
droite

15
 GridLayout
(2)
1 c l a s s G r i d Game App ( App ) :
2 def b u i l d ( s e l f ) :
3 s e l f . ti t l e = ’ G r i d Game ’
4 g r i d = Grid Layout ( rows=3 , c o l s = 4)
5 f o r i in range ( 1 2 ) :
6 g r i d . a d d _ w i d g e t ( Button ( t e x t = s t r ( i + 1)))
7 return g r i d

16
FloatLayout
(1)
Organisation des composants fils de manière libre

Précision de la coordonnée de positionnement (pos)

La coordonnée (0, 0) est le coin inférieur gauche

17
 FloatLayout
(2)
1 c l a s s F r e e PosApp ( App ) :
2 def b u i l d ( s e l f ) :
3 s e l f . ti t l e = ’ F r e e P o s i ti o n i n g ’
4 box = F l o a t Layout ( s i z e = ( 2 0 0 , 1 5 0 ) )
5 b o x . a d d _ w i d g e t ( Button ( t e x t = ’A ’ , s i z e _ h i n t = ( 0 . 3 , 0 . 2 ) , pos
=(0 , 0 ) ) )
6 b o x . a d d _ w i d g e t ( Button ( t e x t = ’ B ’ , s i z e _ h i n t = ( 0 . 3 , 0 . 2 ) , pos
=(50 , 8 0 ) ) )
7 return box

18
 Application graphique

Code d’une application graphique placé dans une

classe
La classe doit être « de type » App

Lancement de l’application par la méthode run

Possibilité de décrire l’interface avec le langage KV

Langage balisé de description d’interfaces graphiques
1 from k i v y . app import App
2
3 c l a s s L o g i n App ( App ) :
4 pass
5
6 L o g i n App ( ) . r u n ( )

19
 Langage KV

Fichier .kv qui porte le même nom que

l’application
Donc [Link] dans notre exemple

Liste des composants avec leurs propriétés

Label, champ texte, layout, onglets...
1 Box Layout :
2 o r i e n t a ti o n : ’ h o r i z o n t a l ’
3 Label :
4 t e x t : ’ P i n code ’
5 TextInput
6 Button :
7 t e x t : ’ Entrer ’

20
Programmation
évènementielle
Boucle d’évènement

Des évènements sont produits par l’utilisateur

Il faut associer les évènements à un
gestionnaire

mainloop()

Initialisation

Réception Fonctionnalités
évènements du programme

Terminaison

22
Gestionnaire d’évènement (1)

Pour traiter un évènement, il faut lui associer un

gestionnaire
Une portion de code à exécuter lorsque l’évènement se produit

Intervention de trois éléments

La source de l’évènement (un widget)

L’évènement à proprement parler (clic, pression de touche...)
Le gestionnaire d’évènements (le code à exécuter)

Informations complémentaires selon l’évènement

Coordonnées pour un clic de souris, touche pour une
pression...
23
 Gestionnaire d’évènement (2)

Associer une fonction à une action d’un

composant
Via la méthode bind du widget
1 c l a s s Q u i t A p p ( App ) :
2 def b u i l d ( s e l f ) :
3 s e l f . ti t l e = ’ Q u i t me ’
4 box = Anchor Layout ( a n c h o r _ x = ’ c e n t e r ’ , a n c h o r _ y = ’ c e n t e r ’ )
5 q u i t = Button ( t e x t = ’ Q u i tt e r ’ , s i z e _ h i n t = ( 0 . 7 , 0 . 3 ) )
6 q u i t . bind ( on_press= s e l f . _ q u i t )
7 box. add_widget( q u i t )
8 return box
9
10 def _ q u i t ( s e l f , source ) :
11 sy s . exit (0)

24
Gestionnaire d’évènement (3)

Exécution de la fonction associée lors de

l’évènement
Ici, lors du clic sur le bouton quitter

25
 Application graphique (2)

Bind du gestionnaire d’évènements à partir du fichier

KV
Accès à l’application courante depuis le fichier KV
1 c l a s s Q u i t A p p ( App ) :
2 def _ q u i t ( s e l f , s o u r c e ) :
3 print ( source )
4 sy s . exit (0)
5
6 QuitApp ( ) . run ( )

1 # : import App k i v y . app . App

2
3 Anchor Layout :
4 anchor_x: ’ center ’
5 anchor_y: ’ center ’
6 Button :
7 t e x t : ’ Quit ’
8 size_hint: (0.7 ,0.3)
9 o n _ p r e s s : App . g e t _ r u n n i n g _ a p p ( ) . _ q u i t ( s e l f )

26
Composant personnalisé (1)

Création d’un composant personnalisé à partir d’autres

Très utile pour faire des applications avec un code
modulaire

Il suffit de définir une nouvelle classe, de type BoxLayout

Exemple avec un programme qui permet de calculer l’âge

27
 Composant personnalisé (2)

Définition de deux classes vides

Contenu du composant personnalisé défini dans le fichier KV

1 c l a s s Age C a l c u l a t o r F o r m ( Box Layout ) :

2 pass
3
4 c l a s s Age C a l c u l a t o r A p p ( App ) :
5 pass

6 Age C a l c u l a t o r F o r m :
7 o r i e n t a ti o n : ’ v e r ti c a l ’
8 Box Layout :
9 o r i e n t a ti o n : ’ h o r i z o n t a l ’
10 Label :
11 t e x t : ’ Année de n a i s s a n c e ’
12 TextInp u t :
13 m u l ti l i n e : False
14 Label

28
 Définition de propriétés (1)

Référencer les composants définis dans le fichier KV

En utilisant des propriétés dans la classe

Propriétés de type objet pour référencer un widget

Une pour la zone de texte, une pour le label

1 c l a s s Age C a l c u l a t o r F o r m ( Box Layout ) :

2 birthye a r_ input = ObjectProperty ( )
3 age_label = ObjectProperty ( )

29
 Définition de propriétés (2)

Attachement des propriétés dans le fichier KV

Identification des widgets avec une propriété id

1 Age C a l c u l a t o r F o r m :
2 birthyear_input : birthyear
3 a g e _ l a b e l : age
4 o r i e n t a ti o n : ’ v e r ti c a l ’
5 Box Layout :
6 o r i e n t a ti o n : ’ h o r i z o n t a l ’
7 Label :
8 t e x t : ’ Année de n a i s s a n c e ’
9 TextInp u t :
10 i d : birthyear
11 m u l ti l i n e : False
12 Label :
13 i d : age

30
 Calcul de
l’âge

Utilisation des propriétés pour accéder aux widgets

Lire la valeur de la zone texte, et écrire dans le label

Gestionnaire d’évènements pour la frappe sur ENTER

Accès direct au composant personnalisé avec root

1 on_text_validate : r o o t . _compute ( s e l f )

31
 Dessin
(1)
Un canvas est un propriété dans laquelle on peut
dessiner
Des propriétés permettent de dessiner des objets
graphiques
1 class Draw Form ( Box Layout ) :
2 pass
3
4 c l a s s Draw App ( App ) :
5 pass

1 Draw Form :
2 canvas:
3 Color:
4 rg b : [ 1 , 1 , 1]
5 Rectangle :
6 p o s : ( 0 , 0)
7 s ize : s e l f . size
8 Color:
9 rgb : [ 0 . 7 ,
10 0 . 2 , 0]
11 Rectangle :
12 p o s : ( 5 0 , 200)
s i z e : (400 ,
150) 32
Dessin
(2)
Dessin d’un rectangle blanc qui couvre tout et d’un petit
rouge
Des propriétés permettent de dessiner des objets graphiques

33
Transformation (1)

Application de transformations aux dessins réalisés

Rotation, translation et mise à l’échelle

Une transformation est définie pour tous les dessins futurs

Si plusieurs, sont appliquées dans l’ordre inverse de
l’apparition

34
 Transformation (2)

1 Draw Form :
2 canvas:
3 Color:
4 rg b : [ 1 , 1 , 1]
5 Rectangle :
6 p o s : ( 0 , 0)
7 s ize : s e l f . size
8 Color:
9 rgb : [ 0 . 7 ,
10 0 . 2 , 0]
11 Rectangle :
12 p o s : ( 5 0 , 200)
13 s i z e : (400 ,
14 150)
15 Tr a n s l
16 ate :
17 x : 200
18 y: 0
19 Rotate :
20 o
21 rigi
22 n :
23 (450
24 ,
25 200)
26 a
27 ngle
28 : -
45
a x i s : ( 0 , 0 , 1) 35
Scale :
Transformation (3)

36
Crédits

[Link]
[Link]

37