> Le Site du Zéro - Informatique

> Cours

> Tutoriels

> Programmation

> Python

> PyGTK

> Introduction

> Glade

> Lecture du tutoriel

Glade

Par

antoyo et Kivutar

Mise à jour : 31/07/2009

Difficulté : Facile Facile

808 visites depuis 7 jours, dont 160 sur ce chapitre classé 153/786

Notre apprentissage va commencer avec Glade.

La plupart des cours que l'on trouve sur PyGTK traitent cette partie vers la fin. Personnellement, je trouve que Glade nous simplifie tellement la tâche que ça serait dommage de s'en passer tout au long du tutoriel. De plus, je vais dans cette partie vous présenter un logiciel très bien fait, ce qui aura pour effet immédiat de vous rassurer. Puisque je vous le dis ! :lol:

Je vais commencer par vous parler de GtkBuilder, qui nous sera indispensable pour créer des fenêtre avec Glade.

Retour en haut

Sommaire du chapitre :

Qu'est-ce que GtkBuilder ?
Installer Glade, le Concepteur d'Interface graphique sous Ubuntu (GNU/Linux)
Visite du concepteur d'interface
Un fichier glade
Q.C.M.

Retour en haut

Qu'est-ce que GtkBuilder ?

GtkBuilder est un objet PyGTK qui permet de séparer l'interface graphique et le code dans des fichiers différents. C'est l'équivalent d'un moteur de template pour un site web. On travaillera donc avec des fichiers Python à l'extension ".py" et des fichiers Glade à l'extension ".glade".

Il y a plusieurs avantages à utiliser GtkBuilder :

notre code Python, débarrassé de la gestion de l'interface graphique va être plus court et plus clair à lire ;
avec un peu d'organisation, on peut coder à deux, une personne qui s'occupe de Python, et une autre qui fait le fichier Glade ;
il existe un logiciel intuitif qui vous aidera à créer votre fichier Glade ;
si quelqu'un veut réécrire votre programme dans un autre langage, il peut se resservir de vos fichiers Glade.

Dans notre cas, c'est-à-dire celui de débutants voulant commencer un tout petit projet, c'est le 3^e point qui va nous intéresser. Le "Concepteur d'Interface Glade" va nous être d'une aide très précieuse pour nous initier à GTK. Il est vite pris en main et permet de créer en un rien de temps une interface graphique.

On n'aura plus qu'à s'occuper du code Python, ce qui est la tâche la plus intéressante du point de vue du programmeur.

J'ai entendu parler de libglade. Existe-t-il encore ?

GtkBuilder est le successeur de libglade ; il apporte de nouvelles choses comme le support de plus de widgets. De plus, les gestionnaires sont automatiquement liés aux fonctions qui portent le même nom (contrairement à libglade, avec lequel il fallait, pour chaque fonction, créer un gestionnaire et une fonction, puis les relier). Donc, GtkBuilder est donc plus complet et plus facile d'utilisation.
Sachez toutefois que libglade est encore utilisé et GtkBuilder et celui-ci produisent tous deux des fichiers portant la même extension (.glade), donc la seule façon de les différencier est de l'ouvrir dans un éditeur de texte.

Retour en haut

Installer Glade, le Concepteur d'Interface graphique sous Ubuntu (GNU/Linux)

En ligne de commande

Ouvrez un terminal et tapez simplement :

Code : Console

sudo apt-get install glade-gnome-3

C'est simple n'est-ce pas ?

Par ajouter/supprimer des programmes

Rendez-vous dans Applications -> Ajouter/supprimer des programmes :

Dans le menu "Programmation", vous trouverez le "Concepteur d'Interface Glade". Cochez-le et appliquez :

Lancer le concepteur

Si tout s'est bien passé, vous trouverez le lanceur dans le menu "Applications -> Programmation" :

Retour en haut

Visite du concepteur d'interface

À l'ouverture du programme, une fenêtre de préférences s'affiche.
Veuillez choisir le format de fichier du projet GtkBuilder, sinon gtk sera incapable de lire le fichier .glade.
Si vous auriez choisi Libglade, l'utilisation du fichier aurait été différente.

Une fois lancé, notre concepteur d'interface ressemble à ceci :

Son interface est composée de quatre parties principales :

la colonne de gauche : notre palette de widgets ;
au centre : notre zone de travail ;
en haut à droite : l'arbre de nos widgets ;
en bas à droite : les propriétés du widget sélectionné.

La palette des widgets

Si vous ne savez pas ce qu'est un widget, c'est le moment où jamais pour l'apprendre : le widget est l'élément de base d'une interface graphique, comme l'atome est l'unité de base pour une molécule, ou encore la cellule pour un organisme vivant. Bref, vous m'aurez compris, les interfaces que nous allons créer ensemble ne sont rien d'autre qu'un amas de widgets hiérarchisés.

Regardons de plus près cette palette. Elle nous indique qu'il y a 4 familles de widgets.

Widgets de niveau supérieur

Ces widgets sont les grands-parents. Ils contiendront tous les autres, mais ne peuvent être contenus eux-mêmes. C'est pour ça qu'ils sont dits "de niveau supérieur".

Il s'agit des fenêtres et des boîtes de dialogue.

Vous pouvez en ajouter quelques-uns sur notre zone de travail simplement en les sélectionnant dans la palette. Vous constaterez qu'il en existe de très complexes, qui sont en fait des assemblages de widgets plus simples. Comme ces assemblages reviennent dans énormément de programmes, on les a réuni dans un seul widget pour vous simplifier la tâche !

Conteneurs

Ces widgets comme leur nom l'indique vont contenir d'autres widgets plus petits. Ils servent à organiser l'intérieur d'une fenêtre. Il s'agit de tableaux, de frames, de menus et d'onglets. Leur utilisation avisée fera que votre interface sera bonne ou pas.

On peut bien sûr les imbriquer les uns dans les autres pour arriver à des configurations complexes et adaptées.

Vous pouvez essayer d'en ajouter, mais il faudra au préalable avoir posé une fenêtre sur la zone de travail !
Pour ajouter un conteneur, sélectionnez-le dans la palette, puis cliquez dans la zone de travail sur le widget qui sera son parent.

Contrôle et affichage

Voilà maintenant plein de petits widgets de base tous plus utiles les uns que les autres !
Toutes sortes de boutons, des labels, des images, des zones de texte, tout y est.

Leur utilisation détaillée fera l'objet de la plus grosse partie de ce cours. Mais sachez déjà que les possibilités offertes par ces widgets sont immenses, et que le cours ne pourra jamais tout couvrir. C'est là que lire la documentation de PyGTK vous sera utile.

Les widgets obsolètes

Ces widgets ne sont plus d'actualité, il est déconseillé de les utiliser donc nous n'en parlerons pas ici. Vous vous demandez sûrement pourquoi on les a mis là si on ne doit plus les utiliser ? Simplement pour un souci de rétrocompatibilité : le concepteur doit rester capable d'ouvrir de vieux fichiers Glade.

La zone de travail

C'est l'équivalent de la zone de dessin pour un logiciel de dessin. Ce que vous y verrez dépendra de votre projet.

Elle donne un aperçu du look final de votre interface, ce qui est utile quand il s'agit de régler finement des marges ou autres petits détails.
C'est bien entendu dans cette zone qu'on organisera nos widgets entre eux, et à ce titre-là elle fait double emploi avec l'"arbre des widgets" que je vais vous présenter de ce pas.

L'arbre des widgets

Voilà une partie du concepteur qui est bien plus importante qu'il n'y paraît.

On y trouve la hiérarchie des widgets de notre interface, sous forme d'un arbre dont on peut déplier les branches.

Pourquoi cette partie est-elle si importante ?

Il est très aisé d'y sélectionner un widget précis, ce qui peut s'avérer compliqué dans la zone de travail, dans le cas d'un widget extrêmement petit par exemple.
Le clic droit sur un widget nous donne accès à des actions très utiles, comme insérer/supprimer un parent !
Dans le cas où l'on travaille avec plusieurs widgets de niveau supérieur, c'est la seule façon pour passer de l'un à l'autre.

La zone des propriétés

Cette zone en bas à droite du concepteur permet de modifier les propriétés du widget sélectionné. C'est une partie immense qu'on ne pourra pas trop détailler, mais rassurez- vous, on en verra les grandes lignes car elle est très utile.

Comme vous vous en doutez, elle s'adapte à chaque widget, on y trouvera donc des choses différentes selon qu'on a sélectionné une fenêtre ou un bouton par exemple. Mais bien qu'elle change tout le temps de contenu, ce contenu est toujours organisé de la même manière à l'aide de cinq onglets :

général : pour des propriétés générales telles que le nom du widget ;
regroupement : pour régler le comportement graphique du widget par rapport aux autres ;
commun : pour régler des propriétés communes à tous les widgets (par exemple le fait qu'il soit visible ou caché) ;
signaux : pour régler, je vous le donne en mille... les signaux émis par les widgets. On verra de quoi il s'agit plus tard ;
accessibilité : pour rendre votre interface lisible par un lecteur d'écran pour non-voyants. Comme je ne connais pas encore cette partie, je ne pense pas écrire dessus.

Retour en haut

Un fichier glade

Avant de passer à la suite, j'aimerais qu'on étudie un peu les fichiers glade.

Je vais vous demander de créer une interface avec le concepteur. N'importe laquelle, amusez vous.

Vous allez ensuite la sauvegarder dans un fichier, et ouvrir ce fichier non pas avec le concepteur d'interface, mais avec votre éditeur de texte favori.

Voilà ce que j'obtiens :

Code : XML

<?xml version="1.0"?>
<interface>
  <requires lib="gtk+" version="2.16"/>
  <!-- interface-naming-policy project-wide -->
  <object class="GtkWindow" id="fenetre">
    <property name="visible">True</property>
    <signal name="destroy" handler="quitter"/>
    <child>
      <object class="GtkVBox" id="boiteV">
        <property name="visible">True</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkEntry" id="zoneTexte">
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="invisible_char">&#x25CF;</property>
            <signal name="activate" handler="changerTexte"/>
          </object>
          <packing>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkLabel" id="etiquette">
            <property name="visible">True</property>
          </object>
          <packing>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkButton" id="bouton">
            <property name="label" translatable="yes">gtk-quit</property>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
            <property name="use_stock">True</property>
            <signal name="clicked" handler="quitter"/>
          </object>
          <packing>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

Les plus futés d'entre vous reconnaîtrons un fichier XML. Si on y regarde de près, on y retrouve la hiérarchie de nos widgets. Et je dirai même qu'on n'y retrouve que ça. C'est-à-dire qu'il n'y a pas de code pour exécuter notre interface. Ce code-la, c'est nous qui devrons l'écrire avec nos petites menottes.

Mais on peut quand même dire un grand merci au concepteur d'interface, imaginez si on avait dû écrire ce fichier glade à la main, ou pire, le coder directement en python comme je vous apprendrai dans la suite du cours... Mouhahaha ! :lol:

Retour en haut

Voilà, vous êtes maintenant le maitre du Concepteur Glade. Ce logiciel vous obéit au doigt et à l'oeil, rapporte le baton et vous donne la papate. Quoi ? Ce n'est pas le cas ? Alors il va falloir l'apprivoiser.

Je suis sérieux, bien que ce logiciel soit intuitif, il est important de passer du temps à jouer avec, car GTK est un toolkit immense qui demande un moment avant d'être maîtrisé.

Retour en haut

Retour en haut

6 commentaires pour "Glade"

Note moyenne : 3.59 / 4 (17 votes)

Pseudo	Commentaire
Marin M.	# Posté le 06/06/2010 à 11:41:46
Avis : Très bon Groupe : Bannis	Bonjour, Citation : Tuto Sachez toutefois que libglade est encore utilisé et GtkBuilder et celui-ci produisent tous deux des fichiers portant la même extension (.glade), donc la seule façon de les différencier est de l'ouvrir dans un éditeur de texte. J'ai entendu dire que l'extension officielle de GtkBuilder est le .ui ? Citation : Tuto sudo apt-get install glade-gnome-3 Le paquet s'appelle maintenant glade-gnome, et il vaut mieux utiliser le paquet glade, car glade-gnome des bibliothèques GNOME obsolètes (libgnome, libsexy, libbonobo...) qui sont obsolètes et ne seront même plus présentes avec GNOME 3.
antoyo	# Posté le 06/06/2010 à 17:18:15
GNU/Linux forever! Études : Cégep de rimouski	Salut, pour ce qui est de l'extension du fichier, d'où tenez-vous vos sources ? Car, sur la documentation de Gtkmm, c'est bien écrit .glade. Et, pour l'installation, je vais tout réécrire en ajoutant l'installation sous Windows. Mon extension pour Chrome/Chromium : SaveAllPasswords : vous permet d’enregistrer vos mots de passe sur tous les sites Web (même ceux qui ne veulent pas ).
cbourree	# Posté le 11/07/2010 à 18:57:10
	Euh moi c'est tout bête, je n'arrive pas a le telecharge est il possible de mettre un lien ?
antoyo	# Posté le 11/07/2010 à 19:17:01
GNU/Linux forever! Études : Cégep de rimouski	Salut, je vais bientôt rééditer le tutoriel et je vais modifier en tenant compte des commentaires. Pour télécharger Glade, rend-toi sur le site de Glade.. Mon extension pour Chrome/Chromium : SaveAllPasswords : vous permet d’enregistrer vos mots de passe sur tous les sites Web (même ceux qui ne veulent pas ).
R-transat	# Posté le 02/08/2011 à 16:02:42
	Il y a d'autres alternative que Glade pour construire des GUI avec PyGTK ?

Voir tous les commentaires

Ce tutoriel a été corrigé par les zCorrecteurs.

Les cours phares

Tous les cours par catégories

Autres

Programmation (263 Cours)

Graphisme (29 Cours)

Bureautique (27 Cours)

Jeux Vidéo (18 Cours)

Matériel (7 Cours)

Dernières annonces

Recrutement à Bac / Bac +1

Recrutement à Bac +2

Recrutement à Bac +3 / Bac +4

Recrutement à Bac +5

Dynamisez vos sites web avec JavaScript

Créez des applications pour iPhone, iPad et iPod Touch

Cours

Nouveau ?

Nouveautés

Site Web

Programmation

Bases de données

Mobiles

Systèmes d'exploitation

Graphisme

Infographie 3D

Bureautique

Réseaux

Matériel

Mapping

Glade

En ligne de commande

Par ajouter/supprimer des programmes

Lancer le concepteur

La palette des widgets

Widgets de niveau supérieur

Conteneurs

Contrôle et affichage

Les widgets obsolètes

La zone de travail

L'arbre des widgets

La zone des propriétés

Partager