Guillaume Rivière 2012 – 2024

Le logo de la CCI Bayonne Pays Basque

Développement Rapide d'Interfaces

TP1 - Tutoriel Gtk+2.0/Glade

BUTS PÉDAGOGIQUES

  • Découvrir par la pratique la programmation des interfaces graphiques
  • Découvrir l'utilisation d'un constructeur d'interface
  • Découvrir comment connecter les signaux d'une interface et comment accéder à ses composants
  • Découvrir comment consulter et modifier la valeur d'un composant graphique


Plutôt qu'un cours théorique, vous allez apprendre par la pratique. Ce premier TP vous montre par l'exemple comment réaliser une première interface simple.

English Un peu de vocabulaire :
GUI = Graphical User Interface = une Interface Graphique
Widget = Window Gadget = un composant graphique

Dans ce TP, nous allons découvrir les deux « outils » (complémentaires) suivants :

GTK+ (Gimp Tool Kit) : une bibliothèque C pour faire des interfaces graphiques http://www.gtk.org/

Cette bibliothèque est écrite en C/C++ et peut être utilisée avec d'autres langages de programmation, comme : Python, Ada, PHP, R, Go, Pascal…

Exemple de fenêtre GTK
Figure 0.1

Glade : un outil WYSIWYG pour construire une interface graphique GTK+ http://glade.gnome.org/

Cliquer pour agrandir
Cliquer pour agrandir
Figure 0.2

Exercice 1 • Votre première interface graphique avec GTK+ et Glade

1.1 Dessin de l'interface à l'aide de Glade

La première étape est de construire une fenêtre GtkWindow qui sera structurée par un conteneur GtkTable et qui contiendra trois étiquettes GtkLabel, deux zones de saisie GtkEntry et un bouton GtkButton :

Composition de la fenêtre du programme addition
Figure 1.1.1
  1. Lancez le programme C:\"Program Files (x86)"\GLADE-3.8\bin\glade-3.exe
    • Remarque : créer un raccourci sur votre bureau permettra d'aller plus vite les prochaines fois.
  2. À partir de ce point, les étapes sont décrites dans la vidéo gtk-glade-v2.avi :
    1. Créez deux nouveaux répertoires C:\PROG1ACI\1A_GUI_GTK\ et C:\PROG1ACI\1A_GUI_GTK\Addition\
    2. Copiez la vidéo dans C:\PROG1ACI\1A_GUI_GTK\Addition\
    3. Attention, votre répertoire de travail sera C:\PROG1ACI\1A_GUI_GTK\Addition\ ce qui diffère légèrement du chemin donné à la fin de la vidéo.
    4. Branchez vos écouteurs pour avoir les commentaires et utilisez à bon escient le bouton pause pendant la lecture de cette vidéo !

Nous qualifions cette approche de « rapide » ou de « facile » car la visualisation du résultat est immédiate, d'une part, et car cela évite de produire le code « à la main » (et « en aveugle »), d'autre part. L'autre approche, que nous pouvons qualifier de « classique », consisterait par exemple à produire deux fichiers comme ceux-ci :
addition.h

addition.c

1.2 Le fichier principal de l'interface (main.c)

1.3 Un fichier pour les fonctions de rappels de l'interface (callbacks.c)

Avec Glade nous avons précédemment indiqué d'une part que le signal "destroy" de la fenêtre window1 serait connecté à une fonction nommée on_window1_destroy(), et d'autre part, que le signal "clicked" du composant button_addition serait connecté à une fonction nommée on_button_addition_clicked(). Pour que notre interface puisse fonctionner, il faut donc écrire le code de ces deux « fonctions de rappel » (en d'autres termes, fonction qui sera appelée lorsque le signal correspondant sera émis par le composant auquel elle est connectée). Le rôle de la première fonction sera simplement de stopper la boucle d'exécution de GTK. Le rôle de la seconde sera de récupérer les valeurs saisies par l'utilisateur, de procéder au calcul et d'afficher le résultat.

1.4 Compilation et exécution

La fenêtre du programme addition
Figure 1.4.1

Exercice 2 • Un utilitaire pour les pourcentages

En vous inspirant de l'interface précédente, faire une nouvelle interface GTK+ appelée « pourcentages » (qui sera enregistrée dans C:\PROG1ACI\1A_GUI_GTK\Pourcentages\). Le but est que l'utilisateur saisit 2 nombres entiers X et Y, et que l'interface puisse calculer et afficher le pourcentage d'augmentation qu'il a fallu appliquer à X pour obtenir Y. Essayez ensuite d'adapter le programme pour gérer les nombres réels.

Besoin d'aide pour la formule de calcul ?

Exemples :

La fenêtre pourcentages
Figure 2.2
La fenêtre pourcentages
Figure 2.3

Exemple avec des nombres à virgule :

La fenêtre pourcentages
Figure 2.4

Documentation GTK+ 2 :
• API : Widgets and Objects
• Manuel : Reference Manual
• Tutoriel : GTK+ 2.0 Tutorial
• Tutoriel : The GTK+ tutorial