Un petit tuto à la demande de certains d'entre vous sur glade le concepteur d'interfaces de gtk. Toujours en utilisant le python et pygtk et la version 3 de glade (oui oui la 3 pas la 2, mettez à jour).
Si vous n'avez pas de connaissances en gtk/python vous pouvez lire ma prose ça pourrait vous donner envie de vous y mettre, mais vous n'en ferez rien directement. Enfin une saine lecture ça se refuse pas, non ?
En plus, on fait ça aujourd'hui (et demain piscine) :
IntroductionGlade est un système de confection d'interfaces gtk relativement bien foutu et assez pratique quand on sait l'utiliser. Un programme en gtk impose de définir l'interface élément par élément et ensuite de connecter les évènements. Quand on a 4 widgets c'est pas trop compliqué, mais quand on en a 50 avec autant d'option d'ajustement ou autres c'est pas vraiment facile et le code s'en trouve bien alourdi...
Glade est la pour remédier à tout ça, du moins au niveau de la définition des widgets, pour les connections c'est simplifié, mais y'a quand même du taf, bande de fainéants !
Voilà à quoi ressemble la bête :
La palette vous propose tous (ou presque) les widgets dispo dans votre install.
L'inspecteur (gadget) est un navigateur qui permet de lister tous les widgets que vous rajoutez avec représentation de la parenté.
Les propriétés quand elles sont celle du widget sélectionné qu'on peut modifier à merci.
Donc si vous avez bien compris on crée les widgets avec la palette on les sélectionne avec l'inspecteur et on les modifie avec les propriétés. Remarquez que tout s'inscrit dans un sens de rotation pareil à celui des aiguilles sur une montre, c'est beau l'ergonomie.
Au boulot !On va faire un Hello World pour ne pas rompre avec l'habitude, donc en toute logique on se rue sur la palette. Vous pouvez remarquez une section
Niveaux supérieurs avec dedans plein d'icônes concrètement pour le moment seule la première nous intéresse et elle s'intitule sobrement -mais efficacement-
fenêtre cliquez dessus et, oh magie, vous obtenez ça :
Une fenêtre !... Vide ! Le tooltip du bouton ne mentait pas, mais on a l'air fin avec une fenêtre vide.
Vous l'aurez compris on va mettre des choses dedans. J'entends déjà les VisualBasiqueux et autres Windeveux '
Je vois pas le quadrillage pour placer les boutons...'. Point de quadrillage malheureux ! Tout est dynamique ici et pour ce faire on utilise des containers, partout où vous avez ce fond grisâtre c'est qu'il n'y a rien...
Dirigez-vous vers les options on va devoir en modifier certaines dans l'onglet Général :
1 - Dans le champ
nom mettez "MainWindow", c'est le nom du widget au sein de gtk.
2 - Dans le champ
titre de la fenêtre mettez "Yet Another Hello World", c'est le titre de la fenêtre à l'exécution.
3 - Mettez non à
redimensionnable, j'imagine que vous comprenez pourquoi...
4 - Pour
astuce de saisie, choisissez "Boîte de dialogue" pour faire une sorte de pop-up.
Ça c'est fait, passons à l'onglet Commun :
1 - Commencez par cocher
Requête de largeur et
requête de hauteur, cela va nous permettre de donner une taille désirée à la fenêtre à sa création.
2 - Dans les 2 champs qui se sont ouverts mettez 240 pour la largeur et 100 pour la hauteur. Notez que vous pouvez aussi le faire dans général, mais c'est mieux de le faire là pour éviter des problèmes de compatibilité et par souci de cohérence avec un code écrit à la main (gtk.Widget.size_request)
3 - Passez
visible à oui, cela permet à la fenêtre de s'afficher au lancement de la boucle gtk sans utiliser la fonction gtk.Widget.show
Voilà pour les options de la fenêtre
Ajoutons maintenant un container à cette fenêtre ! Les containers sont des widgets, vous le savez vous codez en gtk (ah bon ?). Bref, comme tout widget ils ont droit à leurs options, voyons ça. Commencez par en ajouter un, dans la section
Conteneurs de la palette cliquez sur
Boîte verticale, cliquez ensuite dans la zone grisée de la fenêtre qu'on a créé au préalable et mettez 2 au nombre d'éléments. Ça donne ça :
Pour les options on se cantonnera à l'onglet Général et à mettre non à
homogène. Pour ceux qui ne le savent pas l'homogénéité chez gtk c'est laisser autant de place à chaque widget dans un container, je vous laisse faire les tests pour vous en rendre compte par vous même.
Dans la partie supérieure nous allons ajouter un autre container mais horizontal cette fois ci. Donc on fait pareil sauf qu'on clique sur
Boîte verticale sinon même nombre d'éléments et pas homogène (oui je détaille pas vous êtes grands
). Allez dans l'onglet Regroupement et passez
Développer et
Remplir à non.
Désormais nous allons faire comme l'ergonomie de glade et tourner dans le sens horaire.
Donc, en toute logique commençons par l'espace haut/gauche qui s'est créé. Nous allons y placer une petite image. Mais vous avez pas l'image et y'a pas de lien
. Pas grave dans la mesure où je l'ai pêchée dans les stocks de gtk (les plus valeureux d'entre vous l'auront remarqué, mettant à plat mon humour). Je ne me rependrai pas en explication sur les stocks de gtk, sachez juste qu'ils sont utilisables facilement dans glade.
Donc :
1 - Cliquez sur
Image dans la palette et cliquez dans la partie grisée haut/gauche
2 - Passez au niveau des options, onglet Général, dans
Image de base choisissez
Information, magie l'image apparaît !
3 - Passons maintenant à
Taille de l'icône que vous passez à 6. (je n'ai pas encore bien compris à quel constant gtk correspond quel chiffre)
4 - Dans l'onglet Regroupement maintenant vous devez passer
Développer et
Remplir à non pour que le widget ne prenne que la place dont il a besoin.
C'est beau n'est-ce pas ? Mais on est loin du but tout de même, continuons.
Pour ajouter le texte, ça n'est pas très compliqué :
1 - Cliquez sur le bouton
Étiquette et placez-la dans la partie grisée haut/droite.
2 - Comme d'hab on passe aux Propriétés. Dans l'onglet Général mettez juste
Encore un hello world dans
Étiquette.
3 - Dans l'onglet Regroupement laissez
Développer à oui et passez
Remplir à non.
C'est bien beau tout ça, mais il manque les boutons, ça craint.
1 - Sélectionnez
Boîte à boutons horizontale et ajoutez-la dans la partie grisée en bas (la dernière qui reste quoi) et pour le nombre d'éléments mettez-en 2 (y'en a un peu plus j'vous l'met ? Non)
2 - Dans les Propriétés générales passez
Style d'agencement à
Extension (testez les autres pour comprendre le fonctionnement de l'option.
Vous avez pour résultat deux parties grisées de la taille d'un bouton :
Maintenant ajoutez un bouton dans chacune de ces parties en utilisant
Bouton dans la palette. Il faut les configurer maintenant :
1 - Sélectionnez le bouton de gauche en cliquant dessus ou à l'aide de l'inspecteur (Barnaby).
2 - Dans
Type édition choisissez
De base et appelez-le
quit_btn3 - Au niveau
Bouton de base mettez
Quitter4 - Faites pareil pour le bouton de droite, mais en choisissant
Valider pour
Bouton de base et
ok_btn pour le nom.
Ça y est on a ajouté l'interface, le travail de conception graphique s'arrête la, il faut passer à la connexion des events (ou évènements)
Connexion établie Général !Dans les propriétés vous avez surement remarqué l'onglet Signaux (non ? ben faut ouvrir les yeux). C'est celui-ci qui permet de gérer les... signaux et évènements ou events. Un truc vachement pratique est qu'il liste les events propres au widget sélectionné, pas de risque de connecter n'importe quoi n'importe comment (enfin surtout n'importe comment).
On s'y met alors ? Bien.. !
1 - Commencez par sélectionner la fenêtre et allez à l'onglet Signaux.
2 - Dans l'arbre
GtkObject (oui c'est trié par héritage, pratique je vous dit) prenez
destroy. Pour le gestionnaire, prenez celui qu'il vous propose :
on_MainWindow_destroyPour ce qui est des boutons il faut s'occuper du signal
clicked dans l'arbre
GtkButton avec
on_quit_btn_clicked et
on_ok_btn_clicked respectivement.
Ca y est les signaux sont gérés, ouf, sauvegardez dans HelloAgain.glade ! On passe à la suite.
Parce qu'il faut quand même coder ?!Eh oui il faut coder quand même, c'est le lot.
Créez un fichier python dans le même répertoire que celui où vous avez enregistré HelloAgain.glade
Maintenant il faut coder, voilà un code python commenté pour bien comprendre ce qu'il se passe
:
(python):
#! /usr/bin/env python
# -*- coding: iso-8859-15 -*-
import gtk
import gtk.glade
class HelloAgain:
def __init__(self):
#On charge le fichier glade qui est dans le meme repertoire (j'insiste)
self.gui=gtk.glade.XML("HelloAgain.glade")
#Dans la foulee on chope la fenetre principale, ca sert a rien c'est pour
#montrer qu'on peut le faire c'est tout ^^
self.win=self.gui.get_widget("MainWindow")
#On cree un dico qui permet de connecter les events automatiquement (si, si !)
#Chaque gestionnaire cree dans glade doit etre connecte a une fonction
#si toutefois on veut que les evenements soient geres
dico = {\
#On connecte le ok_btn a la fonction self.ok_clicked en rapport a l'event "clicked"
#comme on l'a defini dans Glade quoi ^^
'on_ok_btn_clicked':self.ok_clicked,\
#Signal "destroy" de la fenetre connecte a gtk.main_quit
'on_MainWindow_destroy':gtk.main_quit,\
#Signal "clicked" de quit_btn connecte a gtk.main_quit qui comme son nom l'indique
#sort de la boucle gtk principale et du programme par la meme occasion pour nous.
'on_quit_btn_clicked':gtk.main_quit}
#Auto-connection des signaux (ca fait un peu film de SF)
self.gui.signal_autoconnect(dico)
#Et c'est tout :) L'interface va s'afficher avec uniquement ca, si toutefois
#MainWindow a bien visible a oui dans les options
def ok_clicked(self, widget):
print("Hello (again) world")
HelloAgain()
gtk.main()
Voilà vous n'avez plus qu'à le lancer pour le tester pour voir s'afficher votre première fenêtre GTK faite avec Glade. On s'en remet difficilement, la preuve j'ai même écrit un tuto.
En espérant que cela vous ait plus et que cela vous ait été utile (tant qu'à faire
)
PS : Je joins les fichiers pour les fainéants
