Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à...

24

Transcript of Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à...

Page 1: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Interface graphiqueen Python

4V748

Service Public de l'Enseignement Supérieur

03/02/2016

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 1 / 17

Page 2: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Introduction

Dé�nition

Une interface graphique, c'est

:

une interface

un dispositif destiné à permettre les interactionsentre programme et utilisateur,

graphique

qui présente des informations de façon visuelleet reçoit des messages via une souris (ou autre pointeur).

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 2 / 17

Page 3: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Introduction

Pourquoi faire ?

Plusieurs raisons pour écrire des programmes graphiques :

utilisation agréable

résultats plus immédiatement parlants

mise en évidence de l'e�et d'un paramètre, ...

accessible aux personnes peu familières avec les ordinateurs

Mais aussi des inconvénients :

répétition d'une même séquence d'actions

apprentissage peu générique

di�cile à adapter à un besoin particulier

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 3 / 17

Page 4: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Introduction

Modes de fonctionnement

Non interactif Interactif en terminal Interactif graphique

NB On trouve des programmes mixtes :interactif avec lecture de données dans un �chier,graphique avec paramètres lors du lancement, etc.

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 4 / 17

Page 5: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture d'un programme graphique

Au lancement du programme :

construction de l'interface

boucle d'attente

Dans la boucle :

chaque action de l'utilisateur appelle une fonctionI réglage d'un paramètre (valeur, choix binaire / multiple, ...)I lecture de données (�chier, réseau, capteur, ...)I traitement (calculs, ...)I écriture de résultats (�chier, réseau, a�chage, ...)

une fonction appelée peut modi�er l'a�chage

une fonction permet de quitter le programme

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 5 / 17

Page 6: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Élements d'une interface

Bouton avec texte Curseur

Bouton radio Liste déroulante

Menu Espace dessinable

etc.

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 6 / 17

Page 7: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Rassurez-vous...

... nous n'allons pas programmer le dessin de ces objets,ni leur comportement lorsqu'on interagit avec eux !

Nous utiliserons :

une bibliothèque graphiqueadaptée à notre langage de programmation

le gestionnaire graphique du systèmepour une meilleure intégration (thème, langue,...)

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 7 / 17

Page 8: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : ce qu'on veut

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 9: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : séparation interface - traitements

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 10: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : création de l'interface

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 11: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : création de l'interface

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 12: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : création de l'interface

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 13: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : interface �nie en attente

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 14: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : interaction

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 15: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Architecture en couches : interaction

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 8 / 17

Page 16: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Architecture

Bibliothèques graphiques

PyGTK

PyQt

Tkinter

wxPython

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 9 / 17

Page 17: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Caractéristiques de Tkinter

Libre, gratuite

Portable : Unix, Windows, Mac...

Bibliothèque Orientée ObjetsI Un élément graphique ("Widget") = une instance d'une classeI Hiérarchie d'objetsI On peut dériver ses propres objets

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 10 / 17

Page 18: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Pourquoi les Objets ?Deux programmes qui font la même chose

mul2_noObj.py

def affiche_double(x): # 1 argument

print 2*x

nb=int(raw_input("Donnez un nombre : "))affiche_double(nb)

> python mul2_noObj.py

Donnez un nombre : 8

16

mul2_Obj.py

class Calcul(object):

def __init__(self):self.x=0 # x : attribut

def set_x(self,valeur):self.x=valeur

def affiche_double(self): # 0 argument :

print 2*self.x # x est membre

val=Calcul()nb=int(raw_input("Donnez un nombre : "))val.set_x(nb)val.affiche_double()

> python mul2_Obj.py

Donnez un nombre : 8

16

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 11 / 17

Page 19: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Fonction Callback

Attribution d'une fonction (ici rayTrace) : nom sans argument

Les objets permettent de :

donner une valeur à un attribut membreself.x=valeur

appeler une fonction sans argument qui travaille sur ce membreval.affiche_double()

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 12 / 17

Page 20: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Hiérarchie de classes de Tkinter (extrait)

source : http://knipknap.github.io/exscript/api/class-tree.html

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 13 / 17

Page 21: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Le programme Tkinter minimal

hello4V748.py

from Tkinter import *

class HelloWorld():def __init__(self):

self.fenetre = Tk()self.w = Label(self.fenetre, text="Hello, 4V748 world!")self.w.pack()self.fenetre.mainloop()

hello=HelloWorld()

> python hello4V748.py

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 14 / 17

Page 22: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Construire son interface

Principe : les éléments sont ajoutés un à un avec la méthode pack()

4V748_3Butt.py

from Tkinter import *

class Boutons():def __init__(self):

self.fenetre = Tk()self.fenetre.title(':-)')self.zone=Frame(self.fenetre)self.boutG=Button(self.zone,text="Gauche")self.boutH=Button(self.zone,text="Haut")self.boutB=Button(self.zone,text="Bas")self.boutG.pack(side=LEFT)self.boutH.pack(side=TOP)self.boutB.pack()self.zone.pack()self.fenetre.mainloop()

bt=Boutons()

> python 4V748_3Butt.py

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 15 / 17

Page 23: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

Callback avec paramètres

Principe : on utilise les attributs membres

4V748_QuitButton.py ...

import os, sysfrom Tkinter import *

class AuRevoir():

def __init__(self):self.nam='inconnu'self.creeInterface()

def creeInterface(self):self.fenetre = Tk()self.zt = Entry(self.fenetre)self.zt.pack(side=TOP)self.bf = Button(self.fenetre,

text='Fetch', command=self.fetch)self.bf.pack(side=LEFT)self.bq = Button(self.fenetre,

text="Quitter", command=self.bye)self.bq.pack(side=RIGHT)self.fenetre.mainloop()

... 4V748_QuitButton.py

def fetch(self):self.nam=self.zt.get()print 'Texte: <%s>' % self.nam

def bye(self):print 'goodbye, '+self.nam+'.'sys.exit()

ciao=AuRevoir()

> python 4V748_QuitButton.pyTexte: <Bob>goodbye, Bob.

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 16 / 17

Page 24: Interface graphique en PythonUne interface graphique, c'est: une interface un dispositif destiné à permettre les interactions entre programme et utilisateur , graphique qui présente

Tkinter

4V748 (Ens Sup Pub) 4V748 : Python Graphique 03/02/2016 17 / 17