Créez une application en python grâce à Glade3
Un article de Wikipatate.
|
| L'application du siècle qui tue |
Glade permet de créer facilement ( = graphiquement ^^) des interfaces utilisant la bibliothèque graphique Gtk+. Vous placez des widgets par glisser/déposer dans votre application, et Glade se charge de créer un fichier XML décrivant votre interface graphique, fichier qui sera ensuite interprété lors de l'exécution. Glade permet de passer un minimum de temps sur la conception graphique et l'ergonomie de votre appplication et vous concentrer sur le plus drôle : la programmation des fonctionnalités. Mais bon, assez de blabla, passons à la pratique...
Voici un petit "hello world" utilisant Glade et pygtk. Nous créerons d'abord une interface grace à Glade 3, puis nous verrons comment lier cette interface avec votre programme en python.
Sommaire |
Obtenir Glade
Vous devez tout d'abord... obtenir Glade :
apt-get install glade-gnome-3
...devrait suffire si vous êtes sous debian sinon utilisez votre gestionnaire de paquets favori ou rendez-vous là (Linux/BSD), ou ici (win32).
Notez que Glade3 n'est pas encore disponible dans les dépots stable et testing de debian, mais moyennant quelques adaptations, ce tutoriel peut servir pour Glade2, la grosse différence se trouvant dans la config de la barre de menu qui sous glade2 se fait dans une fenêtre dédiée ce qui à mon avis était plus pratique, mais bon... Vous pouvez toujours ajouter des dépôts non officiels à votre /etc/apt/sources.list.
Création graphique
Dans la palette section "niveaux supérieurs" sélectionnez [Fenêtre]. Dans l'éditeur de propriété donnez lui un nom qui vous permettra d'y faire référence dans votre programme (sans espace, ne commençant pas par un chiffre etc...) Ici mainWindow conviendra. Le titre qui apparaîtra sur la fenêtre importe peu, car il n'en n'est plus fait référence dans le programme. Dans l'onglet "Commun" choisissez "visible : Oui" ( sous Glade 2 la fenêtre est visible par défaut. J'ai du perdre une heure avant de comprendre lorsque je suis passé sous Glade 3. arf...). Laissez les autres propriétés telles quelle, ou potassez la doc de pygtk si vous désirez mieux comprendre de quoi il retourne (il faudra bien que vous y passiez tôt ou tard gnark gnark gnark... )
Une fenêtre vide apparaît que vous allez ensuite pouvoir remplir, et ce toujours de la même manière : vous sélectionnez un widget dans la palette, cliquez dans un espace libre (gris) de votre application et le cas échéant configurez le widget. Commencez par ajouter une "boite verticale" à trois « cases » (cliquez sur [boite verticale] (section "conteneurs"), puis dans votre fenêtre, répondez 3 à la question posée). Dans la case du haut insérez une [barre de menu] (sect. "conteneurs"). Vous constaterez que cette barre propose déjà quelques boutons, mais nous la configurerons plus tard.
Dans la deuxième case placez une [étiquette] que vous nommerez label. Dans le champ "étiquette" de l'éditeur de propriété entrez "Bonjour le monde". Dans l'onglet "Regroupement" sélectionnez "Développer : Non ". Cet onglet contrôle la disposition des widgets dans leurs conteneurs respectifs. c'est à mon avis l'un des aspects les plus ardus de pygtk et de Glade et je vous invite a jouer avec cet onglet pour l'appréhender correctement.
Dans la troisième case, vous placerez une "boîte à boutons horizontale" (sect. Conteneurs). Choisissez trois boutons. Placez d'abord deux "boutons à deux états" ( cette fois-ci je vous laisse chercher :p ) nommés grasBtn et italBtn avec pour le premier une étiquette "Gras". Pour le deuxième bouton, nous allons cette fois utiliser un bouton standard fourni par la bibliothèque Gtk+. Selectionnez ce bouton et dans l'éditeur de propriété sélectionnez "De base" pour le champ "Type d'édition". Le champ "Bouton de base" doit alors s'activer, et parmi les butons proposés choisissez "Italique". cétipabossa?
En troisième position, mettez un "bouton de couleur" nommé couleurBtn
Et voili, votre interface est finie d'un point de vue graphique. Yapuka la faire fonctionner. Tiens,c'est le moment idéal de sauvegarder votre travail... Enregistrez-le pour ce tutoriel dans le dossier ou vous allez créer le programme. Ce n'est bien sûr pas obligatoire, d'ailleurs ces fichiers se trouvent souvent /usr/share/MonApplication/glade sous Linux
Création des "handlers"
- Un article/tuto complet concernant les signaux sous pygtk est en cours de rédaction. Patience...
Votre application n'est pour l'instant qu'une boite creuse. Les boutons s'activent désespérément dans le vide. Cette infinie vaccuité _qui n'est pas sans rappeller les plus belles pages de Paul-Lou Sulitzer_ et ce silence vous sont, j'en suis sûr, insupportable. Nous allons d'abord remédier au silence radio en créant des signaux qui seront envoyés par les différents widgets au programme principal qui se chargera ensuite de les traiter.
Nous allons maintenant utiliser l'onglet "signaux" de l'éditeur de propriété. Sélectionnez d'abord le bouton grasBtn. Dans l'onglet signaux, vous avez une liste de toutes les classes dont hérite notre gtk.ToggleButton et de tous les signaux qu'il peut alors émettre. Choisissez GtkToggleButton > Toggled et dans le champ gestionnaire choisissez on_grasBtn_toggled parmi les choix disponible. Ce nom n'est qu'une variable qui sera réutilisé par le programme, et donc importe peu, mais utilisons donc les aides de Galde!
Répétez l'opération pour italBtn, et pour couleurBtn choisissez GtkColorButton>color-set>"on_couleurBtn_color_set"
Reste à configurer comme promis la barre de menu. Il faut ici utiliser l'"inspecteur" en haut à droite de Galde3 (drole de nom, sous glade2 cette fonction était remplie par une fenêtre appelée "navigateur de widgets"). Il s'agit en fait d'une liste des widgets ordonnés par conteneur imbriqués.
Notre application, quoique révolutionnaire et d'une complexité incommensurable, ne requière pas tant de menus. Nous allons donc procéder à un nettoyage par le vide.
Dans l'"inspecteur" (j'en rigole encore) sélectionnez mainWindow>menubar1>menuitem2. vérifiez dans l'éditeur des propriété qu'il s'agit bien du menu "É_dition" et dans ce cas tappez <Suppr> ou par clic-droit dessus choisissez "Supprimer". Faites de même pour tout ce qui n'est pas Fichier>Quitter.
Toujours dans l'"inspecteur"(arrète, j'vais m'pisser d'sus) sélectionnez le gtk.ImageMenuitem correspondant à Fichier>Quitter, renommez-le quitterItem, et rebelotte, dans l'onglet Signaux choisissez GtkMenuItem>activate>"on_quitterItem_activate".
Sauvegardez votre projet.
Programme principal
Vous en avez finit avec glade. Maintenant nous allons créer le programme principal et le lier avec le fichier .glade ainsi obtenu. Voici un bref résumé du script ou je n'ai conservé que ce qui se rapporte à Glade ( version complète ici : hello_world_glade.py)
1 #! /usr/bin/env python
2 # -*- coding: utf-8 -*-
3 # hello_world_glade.py
4
5 import pygtk
6 import gtk
7 import gtk.glade
8
9 class MainWindow:
10 def __init__(self):
11 self.gladefile = "helloWorld.glade"
12 self.wTree = gtk.glade.XML(self.gladefile)
13 self.mainwindow = self.wTree.get_widget("mainWindow")
14 self.mainwindow.connect("delete_event", self.delete_event)
15
16 dic={
17 "on_quitterItem_activate" : self.delete_event,
18 "on_grasBtn_toggled" : self.do_gras,
19 "on_italBtn_toggled" : self.do_italique,
20 "on_couleurBtn_color_set" :self.do_set_color ,
21 }
22
23 self.wTree.signal_autoconnect(dic)
24
25 def delete_event(self,widget,event=None,data=None):
26 gtk.main_quit()
27 return False
28
29 def do_gras(self,button):
30 pass
31
32 def do_italique(self,button):
33 pass
34
35 def do_set_color(self,button):
36 pass
37
38 class Hello:
39
40 def __init__(self):
41 Main = MainWindow()
42
43 def main(self):
44 gtk.main()
45 return 0
46
47 if __name__ == "__main__":
48 Hello = Hello()
49 Hello.main()
Alors, comment ça marche? Après les déclarations d'usage (#!... pour linux, encodage, etc)ligne 1 à 3, j'importe gtk, pygtk et glade. Dans le script complet, vous verrez que je prend une précaution de plus en important pygtk, vérifiant que la version installée convient pour l'appli.
lignes 11 et 12 : je charge le fichier .glade et crée wTree, l'arbre des widgets. Cette commande suffit à afficher l'interface ( pour peu que gtk soit lancé). Cependant je ne peut pas encore agir sur les widgets depuis mon script.
ligne 13 : j'assigne à la variable mainwindow le widget mainWindow (tel que je l'avait nommé sous Glade), c'est à dire la fenêtre principale de mon appli. À partir de maintenant, je peut m'en servir comme si je venais de la créé "à la main", ce que je vais m'empresser de faire...
ligne 14 : je connecte le signal "delete_event" au callback self.delete_event. voir plus loin pour plus de détails. Notez que j'aurais très bien pu assigner un handler "on_mainWindow_delete_event" sous glade pour arriver au même résultat.
ligne 16 à 21 : je définit un dictionnaire qui associe chaque handler créé sous Glade à un callback (désolé pour l'anglicisme, mais je n'ai lu que des docs en anglais et je ne parvient pas à trouver une traduction satisfaisante pour callback. Une idée?). Notez que pour les grosse applications cette opération est longue et chiante comme la pluie, et c'est pour ça que je développe une petite appli qui automatise tout ça et même plus. Je vous ferrais signe dès qu'elle sera au point.
ligne 23 : c'est là que la magie se fait et que gtk.glade connecte les handlers et les callbacks.
lignes 25 à 27 : j'y reviendrais encore plus tard :)
lignes 29 à 36 : mes callbacks. c'est là que sont décrite les action à effectuer en fonction des actions de l'utilisateur. Reportez vous au script complet pour plus d'infos.
lignes 38 à 45: cette classe peut vous sembler superflue, et en effet, elle l'est pour une application aussi simple. En fait, la classe MainWindow définit l'interface utilisateur de l'application, alors que la classe Hello est l'application. C'est là qu'on peut par exemple charger les fichiers de config, ou faire le ménage après la fermeture de l'interface graphique ou que sais-je encore. C'est donc là que j'instancie une nouvelle fenêtre et que je démarre le receptionneur d'évènements ( gtk.main() ) qui met en branle la machine gtk.
lignes 25 à 27 : ce callback permet d'arrêter gtk lorsque la fenêtre est fermée. Il est donc connecté au signal "delete_event" de mainWindow. Sans ce callback, et l'instruction gtk.main_quit(), la fenêtre se fermerait, mais le programme ne se terminerait pas, bloqué à l'instruction gtk.main() (ligne 44).
Voileuu. J'espère avoir été assez clair et didactique. Maintenant à vous de créer l'application qui tue. Rappelez vous cependant que Glade ne peut pas tout et que la grosse partie du boulot consiste à faire fonctionner les widgets pygtk. Mais là c'est une autre histoire. N'hésitez pas à me faire part de vos commentaires, remarques et questions concernant ce tuto.
