Guillaume Rivière 2012 – 2017

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.

Exercice 1 • Votre première Interface Graphique avec GTK+ et Glade

English En anglais GUI = Graphical User Interface

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 1.1

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

Cliquer pour agrandir
Cliquer pour agrandir
Figure 1.2

Widget = Window Gadget = un composant graphique

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

Composition de la fenêtre du programme addition
Figure 1.1.1

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é 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 émit 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 D:\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