Téléchargement
Votre première application graphique avec Python et Glade
Ce guide vous aidera à créer pas à pas votre première application graphique.
Nous allons utiliser le langage de programme Python et l'API graphique GTK, en utilisant le logiciel Glade pour créer facilement les interfaces graphiques.
C'est de la programmation évènementielle: Notre programme va passer son temps à attendre des évènements (tels qu'un clic de l'utilisateur sur un bouton), et réagira en conséquence en exécutant certaines parties du code.
Pourquoi Python+GTK+Glade ?
- Python est un langage propre, portable et facile à apprendre.
- GTK est une librairie graphique bien conçue, dont l'API est saine et portable.
- Glade permet de créer rapidement des interfaces graphiques à la souris, tout en séparant bien l'interface graphique du code du programme. La maintenance des programmes est simplifiée.
Installation des logiciels nécessaires
Sous Debian: sudo aptitude install python-glade2 glade-3
Création de l'interface graphique avec Glade
Nous allons créer une interface minimale: Un bouton et un label. Cliquer sur le bouton changera le texte du label.
Lancez Glade3 (Sous Ubuntu: Menu Applications > Programmation > Concepteur d'interface Glade)
et choisissez comme format du projet "libglade":
L'interface de Glade
Glade est composé de 4 zones:
- (A): Cette zone contient les widgets (éléments graphiques) disponibles prêts à être utilisés (boutons, cases à cocher, etc.)
- (B) est la fenêtre de travail, où vous placez widgets.
- (C) montre la hiérarchie des widgets.
- (D) vous permet de modifier les caractéristiques d'un widget.
Création de l'interface
Création de la fenêtre
Cliquez sur l'icône Windows (Fenêtre) puis cliquez dans la zone de travail. Cela va créer une fenêtre.
Comme vous pouvez le voir, Glade a automatiquement donné un nom à notre fenêtre: window1.
Vous pourrez le changer, mais pour le moment, gardons 'window1'
Notre fenêtre doit réagir quand on la ferme: On va donc dans l'onglet "Signals", et on clic pour ajouter l'évènement 'delete' dans la ligne 'delete-event'.
(delete-event correspond à une demande de fermeture de la fenêtre.)
Par défaut, les fenêtres sont créées invisibles.
Allez dans l'onglet "Common", et mettez l'attribut "Visible" à "Yes" afin que notre fenêtre soit visible.
Dans une fenêtre, il y a plusieurs manières d'arranger les éléments: côte à côte, l'un au dessus de l'autre, en grille...
Nous allons les mettre les uns au dessus des autres: Cliquez sur le conteneur vertical (Vertical Box) et cliquez dans la fenêtre: C'est maintenant ce conteneur qui sera en charge d'arranger les widgets dans la fenêtre.
Choisissez le nombre d'éléments à mettre: Mettez 2 (Nous allons mettre 1 bouton et 1 label.)
Ajout du bouton
Ajoutons un bouton: Cliquez sur le bouton et cliquez dans la fenêtre de travail pour ajouter ce bouton.
Changez le texte du bouton:
Enfin notre bouton devra réagir quand on clic dessus: Dans l'onglet "Signals", ajoutez "on_button1_clicked" dans l'évènement "clicked".
Ajout du label
De la même manière, ajoutez le label: cliquez sur l'outil "label" et cliquez dans la fenêtre de travail pour créer le label.
Changez le texte du label:
Résumé
Vous pouvez voir la hiérarchie des widgets que nous avons créés:
Nos deux widgets (bouton et label) sont dans le conteneur vertical vbox1 qui lui-même est contenu dans la fenêtre.
La plupart des interfaces graphiques sont conçues de cette manière: une hiérarchie de widgets imbriqués les uns dans les autres.
Enregistrer
Enregistrez le tout dans moninterface.glade:
Veillez à toujours enregistrer au format "libglade".
Création du programme
Le programme suivant va charger l'interface que nous venons de créer.
#!/usr/bin/python
# -*- coding: iso-8859-1 -*-
import pygtk
pygtk.require("2.0")
import gtk
import gtk.glade
class monprogramme:
def __init__(self):
self.widgets = gtk.glade.XML('moninterface.glade',"window1")
events = { 'on_button1_clicked': self.monclic,
'delete': self.delete }
self.widgets.signal_autoconnect(events)
def delete(self, source=None, event=None):
gtk.main_quit()
def monclic(self, source=None, event=None):
self.widgets.get_widget('label1').set_text('Vous avez cliqué !')
return True
if __name__ == '__main__':
app = monprogramme()
gtk.main()
Explications du programme
- (1) On charge le fichier glade (gtk.glade.XML('moninterface.glade'), et dans ce fichier on sélectionne notre fenêtre ('window1').
- (2) A chaque évènement défini dans l'interface, on attache (signal_autoconnect) une méthode qui sera appelée:
- Sur l'évènement 'on_button1_clicked' (qu'on a placé sur le bouton), c'est la méthodeself.monclic qui sera appellée. On modifie alors le label (...get_widget('label1').set_text(...))
- Sur l'évènement 'delete' de la fenêtre, on appellera la méthode delete() qui réagira à la fermeture de la fenêtre en quittant (gtk.main_quit())
- (3) Enfin le main appelle notre classe.
Lancez le programme
Lancez le programme: python monprogramme.py
La fenêtre s'affiche:
Cliquez le bouton: Le label est modifié !
Bravo !
Vous avez réalisé votre première application graphique.
Aller plus loin
Vous pouvez maintenant ajouter tous les widgets que vous voulez, et les imbriquer de la manière dont vous voulez.
Libre à vous ensuite de définir des évènements sur certains de ces widgets, et de programmer le code qui va réagir à ces évènements (clics sur différents boutons, cases cochées, etc.)
Quelques astuces
Autoconnect... automatique
A chaque fois que vous ajoutez un évènement à votre interface, vous devez modifier le dictionnaire 'events' pour y ajouter le nom de l'évènement et le nom de votre méthode. C'est fastidieux.
On peut faire mieux: Ajoutez la méthode autoConnect ci-dessous, et vous n'avez plus qu'à nommer vos méthodes gtk_*.
Par exemple, il suffit de créer une méthode nommée gtk_on_button1_clicked pour qu'elle prenne automatiquement en compte l'évènement on_button1_clicked.
Notre programme devient:
#!/usr/bin/python
# -*- coding: iso-8859-1 -*-
import pygtk
pygtk.require("2.0")
import gtk
import gtk.glade
class monprogramme:
def __init__(self):
self.widgets = gtk.glade.XML('moninterface.glade',"window1")
self.autoConnect()
def autoConnect(self):
eventHandlers = {}
for (itemName,value) in self.__class__.__dict__.items():
if callable(value) and itemName.startswith('gtk_'):
eventHandlers[itemName[4:]] = getattr(self,itemName)
self.widgets.signal_autoconnect(eventHandlers)
def gtk_delete(self, source=None, event=None):
gtk.main_quit()
def gtk_on_button1_clicked(self, source=None, event=None):
self.widgets.get_widget('label1').set_text('Vous avez cliqué !')
return True
if __name__ == '__main__':
app = monprogramme()
gtk.main()
Accéder plus facilement aux widgets
Ajoutez simplement cette méthode à votre classe:
def __getitem__(self, key):
return self.widgets.get_widget(key)
Et vos widgets seront plus facilement accessibles.
Par exemple au lieu de faire:
self.widgets.get_widget('label1').set_text('Vous avez cliqué !')
on fait simplement:
self['label1'].set_text('Vous avez cliqué !')