Apprendre à programmer, c'est bien ! Mais ensuite, qu'en faire ? La bibliothèque GTK+, écrite en C permet de créer une interface graphique pour vos applications. Vous pouvez créer fenêtres, boutons, menus, barres d'outils, barres de progression, etc... et il est même possible d'imprimer, d'appliquer un thème, et bien d'autres choses encore ! :)
Nous sommes trois membres du site a nous être rassemblés pour tout vous apprendre sur cette bibliothèque : Picxime, Guimers8 et Im@GinE.
Dans ce cours complet, nous vous apprendrons progressivement comment créer et utiliser les différents objets de la bibliothèque et nous ferons quelques TPs qui devraient vous intéresser !
Si l'aventure GTK+ vous tente, pourquoi ne pas essayer, c'est facile et très intéressant ! ;)
Si vous êtes là, c'est surement que vous souhaitez découvrir GTK+, ses possibilités, son apparence, etc... C'est donc ce que je vais tenter de vous présenter, vous pourrez ainsi voir si vous voulez apprendre à vous en servir. ;)
GTK est née d'un projet bien particulier, celui de créer une librairie graphique portable pour faire un logiciel de retouche d'images. Cette idée est venue à l'esprit de Peter Mattis, Spencer Kimball & Josh MacDonald, GTK venait de naître !
Oui mais alors, pourquoi GTK ? Après tout, que signifie ce nom bizarre ???
Ce nom signifie The GIMP ToolKit ! The GIMP étant bien entendu le nom de leur logiciel de retouche et ToolKit signifiant Kit d'outils (en gros ^^ ).
À la base, la bibliothèque GTK était faite pour être utilisée par The GIMP, mais maintenant les choses ont légèrement changé. Certes, GTK est toujours utilisée par The GIMP, mais de plus, GTK est maintenant utilisée par de nombreux projets (plus ou moins gros), comme par exemple Gnome.
Les avantages
Quels sont les avantages de GTK ? C'est vrai ça ? Pourquoi on prendrait GTK et pas une autre GUI ?
GTK possède plusieurs avantages (je ne dis pas que les autres GUI ne les ont pas, mais GTK les a) :
Licence GNU LGPL : GTK est libre, gratuite & modifiable à souhait (utilisable pour faire des logiciel payants sans acheter de licence).
Multi-Plateforme : GTK existe sur de nombreuses plateformes comme Linux, Windows, Mac OSX, Bsd et BeOs. Vive le portable ! :)
Multi-Langage : On peut programmer avec GTK avec des très nombreux langages comme le C, C++, Ada, C#, Java, Python, Perl, PHP, Pascal, Fortran, Eiffel, etc... :-°
À l'appui, une citation de notre grand ami :
Citation : M@teo21
C'est une librairie de fenêtres multiplateforme. Elle a été créée au départ pour le logiciel de dessin The Gimp, puis elle a été étendue et améliorée pour être utilisable par d'autres programmes. Contrairement à la SDL qui ne permet pas de créer des boutons et de menus (enfin c'est possible mais il faut les simuler c'est un peu délicat) et qui est plutôt adaptée pour les jeux, GTK+ vous propose tout ça. C'est une librairie sous licence LGPL aussi, donc vous êtes libres de distribuer vos programmes comme vous le voulez.
Pour info, saviez-vous que...
GTK a été portée en plus de 32 langages différents ?
Vous pouvez télécharger plus de 200 thèmes différents pour vos applications, et même créer le votre ?
Derrière le nom GTK se cache une acronymie imbriquée relativement complexe : GTK : the GIMP ToolKit. GIMP : GNU Image Manipulation Program. GNU : GNU's Not UNIX. UNIX : Uniplexed Information and Computing Service. Soit GTK : The GNU's Not Uniplexed Information and Computing Service Image Manipulation Program ToolKit... (Un sacré morceau, pas vrai !? :p )
GTK est donc (avec les librairies qui l'accompagnent) une bibliothèque graphique qui permet de créer des programme de type GUI (programme à interface graphique) comprenant fenêtres, boutons, zones de texte, etc... ;)
Cependant, les application GTK on une apparence bien particulière, beaucoup de gensd'incultes appellent (à tort) les applications GTK, fenêtres Linux ! o_O
Vous allez voir pourquoi :
Un éditeur de texte en GTK sous XP; ça change pour les Windoziens, mais quand on y pense, c'est beau quand même ! ^^
J'aurais pu prendre un exemple plus flagrant, c'est vrai, mais on voit quand même que ce n'est pas de l'API Win32 ou du Cocoa Mac OSX ! Les linuxiens sous Gnome ne seront absolument pas dépaysés ! :p
Mais si cela ne vous plait pas (on ne sait jamais), vous pourrez toujours utiliser les thèmes GTK pour modifier l'apparence de vos applications ! :) (On verra comment faire...)
Si vous voulez voir d'autres images, cherchez The GIMP, Inkscape, ou encore Gnome sur Google Images. :)
Et qu'est-ce qu'on peut faire avec ?
GTK permet (et c'est son but principal) de créer un interface graphique pour faire interagir l'utilisateur autrement qu'a grands coups de scanf, vous pourrez donc ajouter/enlever à volonté différents éléments dans vos fenêtres ! Voici une liste non-exhaustive des éléments que vous pouvez créer :
Fenêtres
Boîtes de dialogues
Sélections de couleur, Polices ou de Fichiers
Impressions de documents
Menus, Barres d'outils, Barres de Statut
Affichage de textes et de liens
Images
Frames, cadres
Boîtes et tableaux
Boutons, cases à cocher et zones d'options
Zones de textes (simple & multi-lignes)
Barres de progression
Onglets
Listes et arbres
Zones de dessin
Création et utilisation de thèmes !
Intégration d'un contexte OpenGL ou d'une surface SDL
... Et sûrement encore un certain nombre d'éléments, mais bon, ça fait déjà un paquet, non ? ^^ Elle vous fait envie cette petite liste, ça se voit ! :p
Après cette brève présentation de la bibliothèque, vous savez maintenant ce qui vous attend. Si vous êtes tenté, passez au deuxième chapitre et installez GTK !!! :)
Rassurez-vous, GTK est très facile à apprendre, et puis si vous n'êtes pas sûrs, essayez, vous verrez bien que vous auriez eu tort de passer à côté ! :p
Dans ce chapitre, je vais vous expliquer comment installer la bibliothèque GTK+ (version 2.10.12). Si certains ont déjà essayé de l'installer, ils ont dû se rendre compte que c'était vraiment le bazar, je confirme... ^^
Pour que vous n'ayez pas à télécharger plein de fichiers, je les ai regroupés dans un programme d'Installation ! :magicien:
Donc dites-vous que vous avez la chance d'avoir devant vous, un tuto qui vous explique comment installer cette bibliothèque pour Dev-C++, Visual C++ (fonctionne avec la version Express) et Code::Blocks :) .
Nous entrons à présent dans le vif du sujet : l'installation ! :)
Le Runtime GTK+
Lancez l'installation du Runtime GTK+ et installez-le dans les ressources de Windows. Donc si vous avez Windows XP ou Vista, dans C:\WINDOWS\System32 ou si vous avez Windows 2000 ou une version antérieure, dans C:\WINNT\System32 Le Runtime copie seulement des fichiers, il n'y a donc aucun risque de l'installer dans les ressources de Windows.
Le Pack GTK+
Comme je vous l'ai promis, vous n'aurez pas à télécharger plein de fichiers, à décompresser et à copier grâce au programme que j'ai réalisé ! :ange:
Lancez donc l'installation du Pack GTK+ que vous avez téléchargé :
Choisissez Français (ou une autre langue, il ne doit pas y avoir que des francophones qui lisent ce tuto ! :p ), Cliquez sur Suivant, acceptez le Contrat de License et installez-le dans : C:\Program Files\Pack GTK+
Maintenant que le Pack et le Runtime ont été installés, je vous conseille de redémarrer votre PC pour que Windows prenne bien en compte les deux installations.
Maintenant que les fichiers ressources ont été copiés sur votre disque dur (pendant l'installation), il faut configurer votre logiciel pour qu'il puisse trouver les fichiers .h, .lib, etc... dont il a besoin lors de la compilation. D'abord, je vais vous donner les lignes à ajouter dans les options du compilateur et ensuite je vous explique comment faire ;) .
Voici les lignes à ajouter dans les options du compilateur,
Répertoire du Dossier Bin (contenant les dll, etc...) : C:\Program Files\Pack GTK+\bin
Répertoire du dossier Lib (contenant le fichiers .lib) : C:\Program Files\Pack GTK+\lib
Dans le menu de Dev-C++, allez dans Outils / Options du Compilateur, puis dans l'onglet Répertoires. Ensuite, dans les sous-onglets :
Cliquez sur Binaires et ajoutez une ligne dans laquelle vous entrerez le chemin du répertoire du dossier Bin (reportez-vous à ce que j'ai écrit plus haut).
Dans l'onglet Répertoires Bibliothèques, ajoutez une ligne dans laquelle vous entrerez le chemin du répertoire du dossier Lib.
Et pour finir, dans l'onglet Répertoires C .h, ajoutez des lignes dans lesquelles vous entrerez les chemins des répertoires des dossiers Include.
(Faut les faire une par une ! :p ) Puis cliquez sur OK.
Pour Visual-C++
Dans le menu de Visual C++, cliquez sur Outils / Options... A gauche, dans la sélection, allez dans Projets et solutions / Répertoires de VC++ puis à droite de la fenêtre, sélectionnez Afficher les répertoires pour Fichiers exécutables et ajoutez une ligne dans laquelle vous entrerez le chemin du répertoire du dossier Bin (reportez-vous à ce que j'ai écrit plus haut).
Sélectionnez ensuite Afficher les répertoires pour Fichiers bibliothèques et ajoutez une ligne dans laquelle vous entrerez le chemin du répertoire du dossier Lib.
Et pour finir, sélectionnez Afficher les répertoires pour Fichiers Include et ajoutez des lignes dans lesquelles vous entrerez les chemins des répertoires des dossiers Include.
Cliquez sur OK pour appliquer les modifications.
Pour Code::Blocks
Dans le menu de Code::Blocks, cliquez sur Settings / Compiler, puis allez dans l'onglet Directories. Ensuite, dans les sous-onglets :
Cliquez sur Resource compiler et ajoutez une ligne dans laquelle vous entrerez le chemin du répertoire du dossier Bin (reportez-vous à ce que j'ai écrit plus haut).
Dans l'onglet Linker, ajoutez une ligne dans laquelle vous entrerez le chemin du répertoire du dossier Lib.
Et pour finir, dans l'onglet Compiler, ajoutez des lignes dans lesquelles vous entrerez les chemins des répertoires des dossiers Include.
Puis cliquez sur OK.
Voilà, vous avez terminé de configurer votre logiciel ! :) Mais c'est pas fini ! :p
Configuration d'un Projet
Nous allons à présent créer et configurer un projet GTK+ ;) . Comme pour la configuration de votre logiciel, il y a une explication pour chaque logiciel.
Pour Dev-C++
Créez un nouveau projet de type Console Application en C.
Ensuite, dans le menu, cliquez sur Projet / Options du Projet, puis allez dans l'onglet Paramètres.
Dans les Options du Compilateur, ajoutez : -mms-bitfields
Et à droite, dans l'Editeur de Liens, ajoutez : -lglib-2.0 -lpangocairo-1.0 -lpangowin32-1.0 -latk-1.0 -lgdk_pixbuf-2.0 -lgdk-win32-2.0 -lpango-1.0 -lgmodule-2.0 -lgobject-2.0 -lgthread-2.0 -lgtk-win32-2.0 -lcairo
Puis cliquez sur OK pour appliquer les modifications.
Pour Visual C++
Créez un nouveau projet de type Application console Win32.
Ensuite, dans le menu, cliquez sur Projet / Propriétés de <nom_du_projet>...
A gauche, dans la sélection, allez dans Propriétés de configuration / Editeur de liens / Entrée.
Cliquez sur Dépendances supplémentaires puis sur les trois petits points qui apparaissent à droite. Dans la fenêtre qui s'ouvre, ajoutez : glib-2.0.lib pangocairo-1.0.lib pangowin32-1.0.lib atk-1.0.lib gdk_pixbuf-2.0.lib gdk-win32-2.0.lib pango-1.0.lib gmodule-2.0.lib gobject-2.0.lib gthread-2.0.lib gtk-win32-2.0.lib cairo.lib
Cliquez sur OK, puis sur Appliquer pour appliquer les modifications et sur OK pour fermer la fenêtre des propriétés du projet.
Pour Code::Blocks
Créez un nouveau projet de type Win32 GUI Application.
Ensuite, dans le menu, cliquez sur Project / Build options et allez dans l'onglet Compiler puis dans Other options pour ajoutez : -mms-bitfields
Allez dans l'onglet Linker et dans la sélection de gauche(Link librairies), ajoutez des lignes dans lesquelles vous entrerez :
Cette Partie est consacrée à des astuces qui pourraient vous être très utiles ! ^^
Nouveau projet déjà configuré avec Dev-C++
Si vous avez Dev-C++ et que vous souhaitez ne pas à avoir à configurer tous vos projets GTK+, il existe une technique très simple permettant de gagner beaucoup de temps ! :)
Créez un nouveau projet et configurez le. Il vous suffit maintenant de vous en servir comme original. Lorsque vous voudrez faire un nouveau projet GTK+, il vous suffira de copier le dossier contenant le projet déjà configuré et d'utiliser cette copie ! ;)
Nouveau projet déjà configuré avec Visual C++
Pour Visual C++, il faut modifier les ressources du logiciel pour que les Dépendances supplémentaires soient automatiquement mises dans les Options des Projets ^^ .
Allez donc dans le dossier VCProjectDefaults qui se trouve dans les ressources du logiciel, par défaut ici : C:\Program Files\Microsoft Visual Studio 8\VC\VCProjectDefaults Ouvrez le fichier corewin_express.vsprops avec un éditeur de texte. Remplacez la ligne 8 par : AdditionalDependencies = "kernel32.lib glib-2.0.lib pangocairo-1.0.lib pangowin32-1.0.lib atk-1.0.lib gdk_pixbuf-2.0.lib gdk-win32-2.0.lib pango-1.0.lib gmodule-2.0.lib gobject-2.0.lib gthread-2.0.lib gtk-win32-2.0.lib cairo.lib"/> Et n'oubliez pas d'enregistrer les modifications ! :p
Maintenant, tout vos projets seront configurés pour fonctionner avec GTK+.
Nouveau projet déjà configuré avec Code::Blocks
Avec Code::Blocks, c'est encore plus simple : il est possible de sauvegarder la configuration d'un projet pour que lorsque vous en créez un nouveau, il puisse être déjà configuré ! :) Voici comment faire: Après avoir configuré le Projet, dans le menu, cliquez sur Project/Save project as user-template. Dans la fenêtre qui s'ouvre, tapez: Projet GTK+ et cliquez sur OK. Maintenant, pour créer un nouveau projet déjà configuré, il vous suffira de cliquer sur l'icône New Project et dans l'onglet User templates, de sélectionner Projet GTK+ puis de cliquer sur Create.
A Propos du Pack GTK+...
Vous pouvez tout à fait installer le Pack GTK+ ailleurs que dans C:\Program Files\Pack GTK+ mais attention, vous devrez changer les chemins des répertoires des dossiers lorsque vous configurerez votrel logiciel et votre projet ;) .
Vous pouvez à présent créer des applications GTK+ ! :)
L'installation de GTK+ sous Linux (Ubuntu & compagnie) est traitée dans le prochain chapitre.
Après l'installation sous Windows, passons maintenant à l'installation sous Linux, car à la base GTK+ a été conçue pour Linux ! :)
La compilation est expliquée en mode console avec GCC et ensuite dans la seconde partie, avec l'utilisation de Code::Blocks (qui a une interface graphique ;) ).
Alors si vous êtes prêts, amis Linuxiens allons-y !
Tout d'abord il faut télécharger les bibliothèques qui vont permettre de compiler les programmes. Il vous faut simplement une connection internet, il ne devrait pas y avoir de problèmes puisque vous êtes sur internet ! :p
Vous pouvez faire cela de deux façons : soit par la console soit par votre gestionnaire de paquets.
Mode Console
Je vais vous expliquer comment installer GTK+ entièrement par console pour les distributions Debian-based. Si vous avez une RedHat-like, par exemple Fedora, la commande ressemblera à ceci :
su -
yum votre_commande
Nous allons commencer par mettre vos paquets à jour, ouvrez donc la console et tapez :
sudo apt-get update
Maintenant, installez le paquet de développement (qui contient les bibliothèques). C'est toujours aussi simple, il suffit de faire :
sudo apt-get install libgtk2.0-dev
Vous devriez normalement avoir tout ce qu'il faut pour développer avec GTK, mais il faut s'assurer que vous disposez bien du Runtime, et comme prudence est mère de sureté nous allons vérifier ceci de suite ;) . Faites juste :
sudo apt-get install libgtk2.0-0
Si le système vous répond que vous l'avez déjà installé, vous n'avez plus qu'à programmer ! :)
Mode Graphique
Avant de télécharger et d'installer les fichiers ressources, il faut que vos dépôts soient à jour. Lancez donc le Gestionnaire de paquets à partir du menu Système :
Dans la fenêtre qui s'ouvre, cliquez sur Recharger dans la barre d'outils, puis sur Tout mettre à Jour.
Nous allons maintenant installer le paquet correspondant aux fichiers ressources. Dans la liste, recherchez un paquet nommé libgtk2.0-dev. Attention, prenez celui avec -dev à la fin, pas un autre ! Faites clic droit dessus, cliquez sur Sélectionner pour installation et si une fenêtre s'ouvre choisissez Ajouter à la sélection. Enfin, cliquez sur Appliquer dans la barre d'outils et dans la fenêtre qui a pu s'ouvrir sélectionnez A installer et cliquez sur Appliquer. Vous devez maintenant patienter pendant le téléchargement et l'installation...
La bibliothèque GTK+ a besoin d'un ensemble de fichiers appelé Runtime pour fonctionner (en plus des fichiers ressources). Sous Linux il est représenté par le paquet libgtk2.0-0, s'il est présent dans la liste et qu'il n'est pas installé, installez-le de la même manière que vous avez installé le paquet précédent.
Maintenant que vous avez installé les fichiers nécessaires, nous allons compiler ! :)
Pour compiler en console, il faut passer des paramètres au compilateur. Nous allons voir cela tout de suite plus en détail avec le compilateur GNU/GCC.
Commencez par créer un répertoire où vous stockerez tous vos programmes. Ensuite, téléchargez ce fichier (qui contient un code GTK+ de base, il ouvre une fenêtre avec un label) puis placez ce fichier dans le dossier que vous venez de créer.
Ouvrez la console et placez-vous dans votre dossier (utilisez les commandes cd, cd.. et ls ;) ) :
cd /home/le_chemin_de_votre_dossier_personnel/
Ensuite, compilez le code avec la commande suivante :
Le main.c correspond au nom de notre fichier (code source du programme) et nom_de_lexecutable est le nom que vous souhaitez donner à votre programme. Si une erreur survient, vérifiez que vous avez bien entré la commande et si le problème persiste, refaites la manipulation pour installer les fichiers, vous vous êtes peut-être trompé ! :p
Pour finir, lancez le programme par l'explorateur de fichiers ou directement par la console :
./nom_de_lexecutable
En remplaçant nom_de_lexecutable par le nom que vous avez donné à votre programme.
Après l'explication de la compilation en console, on arrive maintenant à la partie interface graphique ! :)
Dans cette partie, je vais vous montrer comment utiliser et configurer le logiciel Code::Blocks qui est un IDE portable, Open Source et très pratique pour GTK+ ^^
Configuration du logiciel
Lancez Code::Blocks et créez un nouveau Projet en faisant File -> New Project -> Empty project.
Ensuite, il est nécessaire d'indiquer au compilateur où il doit trouver les fichiers que vous avez installés dans la première partie. Pour cela, allez dans les Options du Compilateur (Project -> Build Options), partie Debug et dans Other option, entrez la ligne suivante :
Citation : Commande - Options du compilateur
`pkg-config --cflags gtk+-2.0`
Selon la version que vous avez, l'interface peut varier, mais l'essentiel est de bien repérer la zone où doit se placer la commande ;)
Allez maintenant dans les Options du Linker et dans Autre options (Other linker options) ajoutez la ligne suivante :
Citation : Commande - Option du linker
`pkg-config --libs gtk+-2.0`
Faites de même pour la partie qui doit porter le nom de votre projet GTK sur les screenshots.
Citation : Commande - Options du compilateur
`pkg-config --cflags gtk+-2.0`
Citation : Commande - Option du linker
`pkg-config --libs gtk+-2.0`
Encore une fois, l'interface peut varier.
C'est fini, il ne reste plus qu'à tester ! :)
Test de la configuration
Nous allons vérifier que tout marche en compilant et exécutant un programme de base. Téléchargez le même code que pour la console, compilez-le et exécutez-le (F9), et une fenêtre devrait s'ouvrir :
Si c'est le cas, enregistrez votre projet, et régalez-vous avec GTK+ ! :D (Sinon vérifiez que vous ne vous êtes pas trompé durant la manipulation...)
Pour enregistrer toute la configuration, faites Edit -> Save as user template. De cette façon, il vous suffira de sélectionner votre template à chaque nouveau projet et votre logiciel sera configuré ! ;)
Ce chapitre touche à sa fin, j'espère qu'il vous a été utile et qu'il vous aura permis de faire ce que vous souhaitiez ! :) L'installation sous Mac est expliqué dans le chapitre suivant.
JRG Soft remercie Petrus6 pour nous avoir offert ce très bon Tuto ! ;) Et Petrus6 le remercie d'avoir fait une place pour ce Tuto. Petrus6 remercie Im@GinE pour ses conseils et pour l'avoir aidé, Guimers8 et Picxime pour la grande relecture, ainsi que les trois Bêta-testeurs Alexfun13, Yno et Seb2003.
Dans la lignée des chapitres d'installation, passons maintenant au cas MacOS X ! :) L'installation sur ce système est somme toute sensiblement similaire à celle qui existe pour les autres Unixoïdes, à quelques détails près bien entendu ;) .
L'utilisation de GTK+ sous MacOS X est légèrement différente des autres systèmes, du fait que son utilisation n'est pas tout à fait transparente pour l'utilisateur. En effet, si vous utilisez The Gimp (Photoshop libre), ou Inkscape (dessin vectoriel), vous voyez l'icône de X11 apparaitre dans le dock avant que l'application ne se lance.
Cela est dû au fait qu'il n'existe pas, à l'heure actuelle, de portage natif de GTK+ utilisant les APIs de la pomme : Cocoa et Carbon. De ce fait, GTK+ est obligée d'utiliser le serveur X11 (XFree86) pour l'affichage, exactement comme elle le fait sous Linux.
Puisqu'il n'y a pas de version Mac de GTK+, comment va t-on faire pour compiler nos programmes ? La solution est simple, et elle s'appelle Fink. Il s'agit d'un projet destiné à porter simplement des applications et paquets écrits à la base pour GNU/Linux vers MacOS X. C'est un gestionnaire de paquets, comme dpkg sous Debian, qui va nous permettre d'installer GTK+ et ses dépendances, notamment les paquets de développement.
Nous allons installer ce qui est nécessaire à GTK+ : XCode, X11, et Fink.
XCode
Je vous conseille fortement de programmer avec XCode, l'IDE à la pomme étant très puissant, mais pourtant très simple à utiliser. Il est livré avec Tiger sur le CD n°1, pour les autres versions, rendez-vous sur le site d'Apple, section Téléchargements.
Dans tous les cas, vous devez impérativement posséder la version la plus récente tolérée par votre système (sinon cela ne marche pas).
X11
Si vous n'avez pas encore X11 sur votre machine, il est nécessaire de l'installer. Pour savoir si vous l'avez, allez dans Applications/Utilitaires et cherchez une icône blanche avec un X à l'intérieur.
MacOS X Tiger
Munissez-vous du CD d'installation n°1 de Tiger et insérez-le dans votre lecteur. Ouvrez l'installateur Optional Installs. Allez jusqu'à la sélection du type d'installation, et cochez la case X11(voir). Finalisez l'installation pour installer X11.
MacOS X Panther
Pour cette version de MacOS (et les versions inférieures), rendez-vous sur le site d'Apple et téléchargez X11. Installez-le ensuite.
Fink
Téléchargez la version de Fink correspondant à votre système :
Ouvrez l'archive téléchargée, et lancez l'installateur. À la fin, il vous demande s'il peut exécuter un script, acceptez en choisissant Oui. Après l'installation, ouvrez un Terminal (Applications/Utilitaires) et installez les paquets suivants :
gtk+2 (et gtk+2-shlibs)
gtk+2-dev
glib2 (et glib2-shlibs)
glib2-dev
pango (et pango-shlibs)
pango-dev
atk1 (et atk1-shlibs)
Pour installer un paquet, tapez la commande :
fink install nom_du_paquet
Les paquets en parenthèses devraient s'installer automatiquement. Faites-le manuellement si ce n'est pas le cas.
Pour finir l'installation, toujours dans la console, mettez à jour tous les paquets installés en faisant :
Ouvrez XCode, et créez un nouveau projet Standard Tool (catégorie Command Line Utility).
Configuration du projet
Les bibliothèques
Dans la colonne de gauche, on peut voir les dossiers Source, Documentation et Products. Cliquez-droit sur le nom du projet, et créez un nouveau dossier (Add > New Group) appellé GTK Libs (par exemple). Faites clique-droit sur ce dossier, puis choisissez Add > Existing Files. Là, sélectionnez les fichiers suivants, dans le dossier /sw/lib/ (attention aux noms qui se ressemblent) :
libatk-1.0.0.dylib
libgdk-x11-2.0.0.dylib
libgdk_pixbuf-2.0.0.dylib
libglib-2.0.0.dylib
libgmodule-2.0.0.dylib
libgobject-2.0.0.dylib
libgthread-2.0.0.dylib
libgtk-x11-2.0.0.dylib
libpangox-1.0.0.dylib
Ces bibliothèques doivent donc se retrouver dans le dossier GTK Libs(voir).
Les fichiers d'en tête
Faites un clique-droit encore une fois sur le nom du projet, et allez sur Get Info, puis dans l'onglet Build.
Repérez la ligne Header Search Paths, et collez ceci comme valeur (à droite) :
Faites de même pour la ligne Library Search Paths :
/sw/lib/ /sw/lib/glib-2.0 /sw/lib/gtk-2.0
Voilà pour ce qui est de la configuration, maintenant on compile ! ^^
Compilation et exécution
Ouvrez le fichier main.c (ou autre), et entrez un code GTK+, à tout hasard :
#include <stdlib.h>
#include <gtk/gtk.h>
int main(int argc, char **argv)
{
/* Initialisation de GTK+ */
gtk_init(&argc, &argv);
return EXIT_SUCCESS;
}
Appuyez sur le bouton Build pour compiler votre projet.
Pour l'exécuter, cela va être un peu différent par rapport à d'habitude. En effet, le fait que GTK+ nécessite X11 pose quelques problèmes avec XCode, et on ne peut donc pas utiliser le bouton Build & Run.
Pour lancer le programme, on tapera dans un Terminal :
Vous voici donc dans le premier chapitre intéressant ! ^^
Dans un premier temps nous allons faire un peu de théorie pour comprendre comment GTK fonctionne, puis nous allons découvrir le code de base d'une application GTK. Ensuite, nous allons voir comment créer une fenêtre, notamment la fenêtre principale de votre programme puis comment la personnaliser et la caractériser. En ce qui concerne les boîtes de dialogue (erreurs, infos, questions, etc), nous les verrons dans la partie II quand vous en saurez un peu plus. ;)
On a du pain sur la planche ! Bon courage et bonne lecture !
Avant de passer à la pratique, il va falloir que je vous explique certaines choses sur le fonctionnement des objets GTK (boutons, menus, etc...).
Lorsque vous développerez des applications avec GTK, les objets que vous mettrez dans vos fenêtres (je ne sais pas trop comment les appeler autrement que par leur vrai nom) sont appelés WIDGETS. Il n'existe pas de sens exact pour ce mot (sens général, bien sûr), mais en cherchant un peu, vous trouverez différentes définitions, voici quelques explications :
De l'anglais : machin, chose, gadget.
Gadget de Dashboard sous mac OSX Tiger.
Plus interéssant : WInDow gadGET ou élément d'une interface graphique.
Je pense que vous commencez à comprendre de quoi il s'agit !!! :) En gros,les widgets sont les boutons, les zones de texte, les menus, enfin.. à peu près tout ce qui constitue une interface !
Quelques bases
Il existe des types différents (ce sont des structures) pour chaque type de widget. Cependant, on ne les utilise que dans des cas particuliers et on utilisera la plupart du temps le type "widget" pour stocker les objets.
Les noms des fonctions ont une syntaxe particulière, ils sont de la forme gtk_widget_action(...). C'est cela dans la plupart des cas avec GTK. On remplace :
widget par le type de widget sur lequel on travaille (ex : window pour une fenêtre).
action par ce que la fonction est sensée effectuer (ex : set_title pour définir un titre)
C'est très facile à comprendre, vous ne devriez pas avoir de problème avec ça ! ^^
L'héritage
Après les Widgets, il y a une autre notion à connaitre avant de commencer, l'héritage ! Si vous faites du C++, vous devriez savoir ce que c'est car c'est le but du C++ : l'héritage et l'orienté objet ! Mais nous travaillerons en C et GTK introduit une notion d'héritage.
Il faut que vous sachiez qu'il existe une hiérarchie entre les différents Widgets : il y a des groupes qui contiennent plusieurs widgets, la possibilité qu'un widget en contienne un autre, etc. L'héritage de GTK y est directement lié !
Un exemple concret
Je vais vous expliquer l'héritage avec un exemple : Une fenêtre.
Je vous ai expliqué que pour créer un objet, on déclare un widget puis on y stocke un objet quelconque. Une fenêtre est donc avant tout un Widget.
Citation : Hiérarchie des objets
Widget -> fenêtre
Maintenant, imaginons que je veuille créer une boîte de dialogue. Une boîte de dialogue c'est quoi ? En y réfléchissant un peu, on s'aperçoit que c'est aussi une fenêtre ! On y a apporté des modifications mais c'est une fenêtre. On va donc descendre d'un cran pour dire qu'elle est particulière :
Citation : Hiérarchie des objets
Widget -> Fenêtre -> Boîte_de_dialogue
Petit point de vocabulaire : On dit que BOITE_DE_DIALOGUE dérive de FENETRE (retenez bien le terme de dériver). Dans la réalité, l'architecture est bien plus compliquée, mais d'un point de vue théorique, c'est exactement ça !
A quoi ça sert ?
L'intérêt de tout ça ? Il est simple.
Un premier exemple : Pour créer une boite de dialogue, les développeurs de GTK se sont dit : "On a créé une fenêtre, y'a plus qu'à la modifier !". La fonction qui crée une boite de dialogues appelle la fonction qui crée une fenêtre, puis modifie certains paramètres pour en faire une boite de dialogues. Un peu de pseudo-code C :
Widget* nouvelle_boite_dialogue(void)
{
Widget * fenetre = nouvelle_fenetre();
/* On change la taille, on ajoute du texte et des boutons, ..
pour faire une boite de dialogue */
return fenetre;
}
Un deuxième exemple : Les developpeurs de GTK ont programmé une fonction pour définir le titre d'une fenêtre. Mais pour une boite de dialogue ? Se sont-ils ennuyés à refaire la même fonction (car une boîte de dialogue a la même structure qu'une fenêtre) pour une boîte de dialogue ? Et donc avoir deux fonctions identiques pour deux objets similaires ? ... NON !
Tout simplement, vous utiliserez sur BOITE_DE_DIALOGUE une fonction faite pour FENETRE, ce qui ne pose aucun problème puisque BOITE_DE_DIALOGUE dérive de FENETRE. Concluez que vous pouvez utiliser sur un widget les fonctions des widgets parents. :) (dans la plupart des cas) _ _ _ _ _ _ _ _ _ _ _ _ _
Voilà à quoi sert l'héritage, à minimiser le nombre de fonctions pour des choses identiques. Si, ça reste assez flou pour vous, méditez bien là-dessus jusqu'à ce que vous ayez bien compris, c'est très important ! :)
Dans le chapitre précédent, vous avez installé la bibliothèque GTK, les runtimes nécessaires pour que vos programmes puissent être exécutés, et même d'autres librairies permettant à GTK de faire des choses beaucoup plus avancées ! (Car la librairie GTK toute seule ne sert pas à grand chose :p )
Après (peut-être) quelques difficultés, vous êtes arrivé à la fin de ce chapitre où vous avez trouvé le code de base d'une application GTK, afin de tester si tout marchait bien ; je vous le remet ici :
#include <stdlib.h>
#include <gtk/gtk.h>
int main(int argc, char **argv)
{
/* Initialisation de GTK+ */
gtk_init(&argc, &argv);
return EXIT_SUCCESS;
}
Citation : M@teo
Un grand nombre de librairies écrites en C nécessitent d'être initialisées et fermées par des appels à des fonctions. La SDL n'échappe pas à la règle.
GTK+ non plus ! :p En fait, GTK+ a juste besoin d'être initialisé, pas besoin de la quitter.
Vous remarquez donc les nouveautés suivantes :
int main(int argc, char **argv) : En fait, rien de nouveau mais n'oubliez pas que le main doit avoir ce prototype !
#include <gtk/gtk.h> : L'include de la librairie GTK+, charge la librairie et permet l'utilisation des fonctions GTK & co.
gtk_init(&argc, &argv) : Première fonction, elle initialise GTK et charge certaines choses en mémoire. On lui passe l'adresse des arguments du main.
return EXIT_SUCCESS : EXIT_SUCCESS est, disons, mieux que 0. C'est donc cela que nous utiliserons. :)
Si vous compilez, vous remarquerez que rien n'apparaît à l'écran, normal, tout comme la SDL, initialiser la librairie ne suffit pas, il faut créer une fenêtre. :p (ou autre chose, mais on va commencer par ça !)
Création d'une fenêtre
Faites bien attention, la méthode que je vais utiliser pour vous expliquer les fenêtres sera la même que celle que j'utiliserai tout au long du cours. Cela se passe en trois étapes :
Explication du widget, hiérarchie et fonctionnement.
Fonctions relatives à ce/ces Widget(s).
Code d'exemple complet.
Le nom du widget fenêtre est GtkWindow. Voici sa hiérarchie :
Vous allez donc déclarer un pointeur sur GtkWidget, vous pouvez le déclarer au début avant l'initialisation. Donnez lui un nom simple et clair, ce sera votre fenêtre principale ! :
GtkWidget * MainWindow = NULL;
Ensuite, vous allez assigner une nouvelle fenêtre à ce pointeur avec la fonction gtk_window_new qui prend en paramètre le type de fenêtre à créer.
GtkWidget* gtk_window_new(GtkWindowType type);
Les deux types possibles sont :
GTK_WINDOW_TOPLEVEL : Une fenêtre normale.
GTK_WINDOW_POPUP : Une fenêtre sans bordure (ne pas utiliser, sauf cas particuliers).
Vous allez donc faire :
MainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);
On dit que gtk_window_new est le constructeur de GtkWindow.
Afficher la fenêtre
Pour afficher un widget, on utilise la fonction gtk_widget_show, quel que soit le widget !
void gtk_widget_show(GtkWidget *widget);
Plus tard vous pourrez aussi utiliser gtk_widget_show_all, cette fonction permet de montrer tous les widgets qui on été insérés dans un GtkContainer (GtkWindow dérive de GtkContainer) :
void gtk_widget_show_all(GtkWidget *widget);
Evènements
Un cours sera dédié à la programmation événementielle mais il va bien falloir que je vous donne un bonus en attendant. Vous allez donc me faire confiance et rajouter cette ligne après la création de la fenêtre :
Et juste avant le return, vous rajoutez cet appel de fonction :
gtk_main();
Bon, vous l'avez mérité, voilà le code complet. Essayer d'apprendre le nom des fonctions et de ne pas faire trop de copier/coller ! :)
#include <stdlib.h>
#include <gtk/gtk.h>
int main(int argc, char **argv)
{
/* Variables */
GtkWidget * MainWindow = NULL;
/* Initialisation de GTK+ */
gtk_init(&argc, &argv);
/* Création de la fenêtre */
MainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);
g_signal_connect(G_OBJECT(MainWindow), "delete-event", G_CALLBACK(gtk_main_quit), NULL);
/* Affichage et boucle évènementielle */
gtk_widget_show(MainWindow);
gtk_main();
/* On quitte.. */
return EXIT_SUCCESS;
}
Compilez et exécutez !!! Voilà votre première fenêtre qui s'ouvre sous vos yeux, quelle émotion, ..., non ? ^^ Bon; c'est pas super beau, c'est vide, mais bon c'est une fenêtre ! C'est tout ce qu'on a demandé !
Nous allons maintenant l'améliorer, lui donner un titre, une taille, et la mettre ou on veut ! :)
La partie que vous attendiez, on va pouvoir s'amuser ! :p Je vais vous présenter pleins de fonctions intéressantes pour vos fenêtres. Certaines ne vous serviront pas pour le moment mais si vous en avez besoin, vous savez qu'elles sont là !
La quasi-totalité de ces fonctions vous demanderont un GtkWindow à la place d'un GtkWidget. La solution consiste à utiliser la macro GTK_NOM_DU_WIDGET, autrement dit, GTK_WINDOW(). N'oubliez pas, car sinon, vous aurez des erreurs dans la console (c'est pas beau, et ça peut créer des super bugs incompréhensibles).
Le titre
Fonction pour définir le titre : on donne la fenêtre et une chaîne de caractères :
gtk_window_set_title(GTK_WINDOW(MainWindow), "Fenetre de zer0");
Fonction pour récupérer le titre : La fonction retourne un gchar*. C'est le char de la GLib, je vous conseille ce type pour utiliser Gtk, sinon vous aurez toujours pleins de Warnings ! ;)
Attention, vous devez bien stocker le retour de cette fonction dans un const gchar, car le pointeur retourné pointe directement là ou GTK+ stocke le titre de la fenêtre : vous ne devez par conséquent pas libérer cette chaine.
La taille (par défaut)
Définir la taille par défaut : On donne la fenêtre (avec la macro) et les dimensions voulues.
Définir l'icône : On donne la fenêtre, le nom du fichier, et un pointeur sur GError pour gérer les erreurs (ou NULL). La fonction renvoie TRUE si l'icône a pu être définie à la fenêtre.
Comme son nom l'indique, le GdkPixbuf est un buffer de pixel, on l'utilise pour manipuler les images avec GTK+. Nous apprendrons à nous en servir plus tard.
Iconifier
Iconifier :
void gtk_window_iconify (GtkWindow *window);
Restaurer :
void gtk_window_deiconify (GtkWindow *window);
Maximiser
Maximiser :
void gtk_window_maximize (GtkWindow *window);
Restaurer :
void gtk_window_unmaximize (GtkWindow *window);
Bouton "fermer"
Définir l'état du bouton fermer : Donnez TRUE pour activer le bouton, FALSE pour le désactiver.
Pour que vous compreniez bien l'utilisation de ces fonctions, voici un exemple de code personnalisant une Fenêtre, il utilise plusieurs fonctions vue ci-dessus : Télécharger le code exemple.
Vous savez maintenant créer des fenêtres GTK+ et les personnaliser ! :)
Dans le prochain chapitre, vous allez apprendre à utiliser les labels pour pouvoir afficher du texte dans vos fenêtres ! ;) Enjoy !
Dans le chapitre précédent, nous avons vu comment faire une fenêtre. Le problème est qu'une fenêtre vide sert à rien. C'est pourquoi, dans ce chapitre, nous allons découvrir comment afficher du texte dans nos fenêtres. Pour cela nous allons utiliser des labels. Pour ceux qui ne parlent pas anglais, label veut dire étiquette. Nous allons donc "accrocher" des étiquettes sur nos widgets :p .lais signifiant étiquette.
Tout d'abord, nous allons déclarer un nouvel objet GtkLabel de type GtkWidget. Vous pouvez l'appeler comme vous le voudrez. Je rappelle qu'il est indispensable de déclarer un widget avant de l'utiliser.
GtkWidget* label = NULL;
Maintenant que notre widget est déclaré, nous allons l'initialiser avec la fonction suivante:
GtkWidget* gtk_label_new (const gchar *str);
Le paramètre :
str : Le texte de notre label entre guillemets.
Voilà, notre GtkLabel est créé. Nous allons maintenant le rajouter dans la fenêtre avec la fonction suivante :
label : Le nom de notre label que l'on veut récupérer.
Cette fonction retourne le texte de notre label (avec son formatage, voir plus bas) dans une variable. Faites attention si vous lisez la doc de GTK, il existe une fonction semblable, mais qui ne prend pas en compte le formatage.
Modifier un label
Sur le principe de la dernière fonction, gtk_label_set_label () permet de modifier un label.
Il y a un bug avec GTK ! Quand j'écris Je suis un zéro, il coupe le texte au niveau de l'accent, ou m'affiche des caractères bizarres !!!
Bonne remarque ! Les textes accentués ne s'affichent pas bien, et ce n'est pas un bug.
Pango, l'indispensable
Pour afficher un texte, GTK utilise Pango (Pan du grec qui veut dire "tous" et go du japonais qui veut dire "langage": tous les langages). C'est une bibliothèque qui est chargée du rendu des caractères et de l'affichage de texte internationalisé. Pour les spécialistes, cette bibliothèque utilise l'Unicode (pour l'encodage des caractères). Pourquoi alors votre texte ne s'affiche pas comme vous le souhaitez? La raison est que votre système d'exploitation n'utilise pas forcement le même jeu de caractère que notre bibliothèque. Nous allons trés rapidement contourner ce problème en utilisant la fonction ci-dessous qui va convertir notre texte :
C'est génial d'afficher du texte, mais j'aimerais le centrer et le mettre en gras. Tu n'a pas une fonction qui pourrait faire ça?
GTK, n'est pas un traitement de texte... :lol: , mais ses créateurs nous ont prévu ce genre de fonction.
L'alignement
Le texte est pour le moment aligné à gauche, mais moi je préfèrerais qu'il soit centré, pas vous? Pour modifier l'alignement de notre label, la fonction gtk_label_set_justify () est tout à fait appropriée, tout simplement par ce qu'elle ne sait faire que ça. :p
label : Le nom de notre label que l'on veut modifier
jtype : Le type d'alignement que l'on veut appliquer à notre label. Il peut prendre une de ces quatre valeurs:
GTK_JUSTIFY_LEFT -> Aligne le texte à gauche (par défaut).
GTK_JUSTIFY_CENTER -> Aligne le texte au centre.
GTK_JUSTIFY_RIGHT -> Aligne le texte à droite.
GTK_JUSTIFY_FILL -> Aligne le texte à droite et à gauche à la fois. Le texte est alors justifié.
Le formatage du texte avec les balises
Pour mettre un texte en forme, Pango utilise des balises (comme pour le Zcode).
Avec les balises "simples" ou "courtes"
Les balises ci-dessous vous permettent de personnaliser un texte simplement.
<b> -> Mets le texte en gras
<i> -> Mets le texte en italique
<u> -> Souligne le texte
<s> -> Barre le texte
<sub> -> Mets le texte en indice
<big> -> Rend la police relativement plus grande (+1)
<small> -> Rend la police relativement plus petite (-1)
<tt> -> Met le texte en télétype
Avec Span
La balise <span class="bleugris">span</span> est différente des dernières. Elle a des attributs qui lui permettent de modifier la police, la taille, la couleur des caractères. Elle s'utilise comme ceci :<span attribut1="valeur" attribut2="valeur">...</span>
font_family -> Nom de la police de caractère
face -> C'est un autre attribut qui définit la police
size -> C'est la taille de la police. On peut aussi utiliser 'xx-small', 'x-small', 'small', 'medium', 'large', 'x-large', 'xx-large' ou une valeur numérique.
style -> Définit le style des caractères : 'normal', 'oblique' ou 'italic'
weight -> Définit le ton du gras du caractère : 'ultralight', 'light', 'normal', 'bold', 'ultrabold', 'heavy' ou une valeur numérique.
variant -> Met le texte en petites majuscules (smallcaps) ou en normal (normal, valeur par défaut).
stretch -> définit l'espacement des lettres: 'ultracondensed', 'extracondensed', 'condensed', 'semicondensed', 'normal', 'semiexpanded', 'expanded', 'extraexpanded' ou 'ultraexpanded'.
foreground -> Définit la couleur du texte en valeur hexadécimale
background -> Définit la couleur du fond texte en valeur hexadécimale
underline -> Définit le soulignement du texte: 'single', 'double', 'low' ou 'none'.
underline_color -> Définit la couleur du soulignement en valeur hexadécimale
rise -> Définit l'élévation du texte (en indice ou exposant) en valeur décimal (les valeurs négatives sont possibles, pour mettre notamment notre texte en indice)
strikethrough -> Pour barrer son texte. La valeur doit être soit TRUE ou FALSE
strikethrough_color -> Définit la couleur de la ligne qui barre le texte en valeur hexadécimale
fallback -> Si votre caractère n'est pas disponible dans le police choisie, alors une police qui contient ce caractère sera choisi. Elle est activée par défaut.
lang -> Définit la langue du texte
Maintenant, il y a une chose primordiale à ne pas oublier: il faut dire que l'on utilise les balises de pango. Pour cela nous avons deux choix, soit on intègre ces balises directement dans notre fonction de convertion, soit nous utiliserons une fonction spécifique.
On intègre nos balises à notre fonction de convertion
Cette fonction très pratique permet de convertir à la fois le texte et les balises. Il vous suffit d'écrire vos balises avec votre texte dans g_locale_to_utf8 puis de rajouter la fonction ci-dessous après la convertion :
Je vous propose un petit exemple qui reprend les fonctions vues dans ce chapitre ! :)
#include <stdlib.h>
#include <gtk/gtk.h>
int main(int argc,char **argv)
{
GtkWidget* Fenetre = NULL;
GtkWidget* Label = NULL;
gchar* TexteConverti = NULL;
gtk_init(&argc, &argv);
Fenetre = gtk_window_new(GTK_WINDOW_TOPLEVEL); // Définition de la fenêtre
gtk_window_set_title(GTK_WINDOW(Fenetre), "Le texte avec les labels"); // Titre de la fenêtre
gtk_window_set_default_size(GTK_WINDOW(Fenetre), 300, 100); // Taille de la fenêtre
TexteConverti = g_locale_to_utf8("<span face=\"Verdana\" foreground=\"#73b5ff\" size=\"xx-large\"><b>Le site du Zéro</b></span>\n <span face=\"Verdana\" foreground=\"#39b500\" size=\"x-large\">Le tuto GTK</span>\n", -1, NULL, NULL, NULL); //Convertion du texte avec les balises
Label=gtk_label_new(TexteConverti); // Application de la convertion à notre label
g_free(TexteConverti); // Libération de la mémoire
gtk_label_set_use_markup(GTK_LABEL(Label), TRUE); // On dit que l'on utilise les balises pango
gtk_label_set_justify(GTK_LABEL(Label), GTK_JUSTIFY_CENTER); // On centre notre texte
gtk_container_add(GTK_CONTAINER(Fenetre), Label); // On ajoute le label a l'interieur de 'Fenetre'
gtk_widget_show_all(Fenetre); // On affiche 'Fenetre' et tout ce qu'il contient
g_signal_connect(G_OBJECT(Fenetre), "delete-event", G_CALLBACK(gtk_main_quit), NULL); // Je ne commente pas cette fonction, vous la verrez dans le chapitre suivant.
gtk_main();
return EXIT_SUCCESS;
}
Et voici le résultat :
Maintenant c'est a vous de bosser... ^^
Ce chapitre est fondamental (comme tout les chapitre de cette partie :p ), vous allez vous servir des labels partout où vous voudrez afficher du texte.
Dans le chapitre suivant, vous allez découvrir le fonctionnement des évènements. Là aussi, ce chapitre est primordial. Je le qualifierais même comme le chapitre le plus important. Sans lui, vous ne saurez rien faire avec GTK. Si si, c'est vrai !
Nous allons maintenant voir comment intercepter les actions de l'utilisateur et agir en conséquence. Au programme, explications, exemples et exercices.
Nous allons traiter ici ce qu'on appelle la programmation évènementielle ! Cela consiste à intercepter les actions de l'utilisateur pour les traiter : clic sur un bouton, validation d'une zone de texte, etc.. Sans ça, votre programme ne fera rien ! En fait, c'est cette gestion qui fera le "gros" du programme, tous se passe dedans !
Principe
Vos programmes ne suivront désormais plus du tout le même plan. Je m'explique : :)
Avant, vos programmes étaient dis linéaires : votre code s'exécutait dans l'ordre où vous l'aviez écrit (du haut vers le bas), vous étiez d'ailleurs assez limités par cette contrainte. De plus, l'utilisateur n'avait aucune liberté, il ne pouvait rien faire d'autre que ce que vous lui proposiez.
Maintenant, c'est une toute autre façon de penser. Dans votre programme, vous définissez votre interface, les boutons et tout ça, on lance le tout, puis on passe la main à l'utilisateur. C'est lui qui choisi ce qu'il fait, quand, et comment.
Cette méthode de programmation est dite évènementielle, elle suit le principe action -> réaction.
Le principe est vraiment simple : lorsqu'un évènement a lieu avec un widget, celui ci émet ce qu'on appelle un signal (celui-ci sera différent pour chaque action que le widget gère), l'objectif du jour est de savoir faire réagir notre application à la réception de ces signaux. GTK s'occupe de tout, donc la partie technique ne nous regarde pas; cependant il faut bien comprendre comment ça fonctionne.
Il n'y a qu'une seule chose à faire. On va utiliser une fonction qui dira à GTK :
De quel widget on veut traiter un évènement.
Le signal (l'évènement) que l'on veut traiter.
Le nom d'une fonction (faite par vous), à appeler lorsque cet évènement survient. Ce type de fonction est appelé fonction callback.
En gros, on peut résumer avec un petit schéma : ACTION UTILISATEUR | ÉMISSION SIGNAL | RÉCEPTION SIGNAL | FONCTION CALLBACK
Passons maintenant à la pratique ! Voilà le code de base sur lequel nous allons travailler. Créez un projet et collez ce code dedans :
#include <stdlib.h>
#include <gtk/gtk.h>
void mafonction(GtkWidget *widget, gpointer data)
{
gtk_main_quit();
}
int main(int argc, char **argv)
{
/* Variables */
GtkWidget * MainWindow = NULL;
/* Initialisation de GTK+ */
gtk_init(&argc, &argv);
/* Création de la fenêtre */
MainWindow = gtk_window_new(GTK_WINDOW_TOPLEVEL);
g_signal_connect(G_OBJECT(MainWindow), "delete-event", G_CALLBACK( mafonction ), NULL);
/* Affichage et boucle événementielle */
gtk_widget_show(MainWindow);
gtk_main();
/* Fermeture de GTK+ */
gtk_exit(EXIT_SUCCESS);
return EXIT_SUCCESS;
}
Observons ce code, et essayons de le comprendre. La seule nouveauté est la petite fonction en haut, normalement vous devriez vous dire :
À quoi sert-elle ? Quand est-elle appelée ? Comment ? Qu'est-ce qu'on doit mettre dedans ? Etc .. À quoi sert la fonction g_signal_connect au milieu du code ?
Autant de questions auxquelles je vais tenter de répondre.
L'appel de cette fonction permet de gérer un évènement. Voyons les paramètres :
MainWindow : Ce premier paramètre doit être le widget dont on veut gérer un évènement, en le mettant dans la macro G_OBJECT. Ici, on gère un évènement de la fenêtre.
"delete-event" : On écrit le nom du signal que l'on souhaite intercepter dans une chaine de caractères. Il existe un nom de signal pour chaque signal existant. En l'occurrence, "delete-event" est émis lorsque on clique sur la croix d'une fenêtre.
mafonction : Il faut mettre ici le nom d'une fonction callback qui sera appelée lors de l'évènement, en le mettant dans la macro G_CALLBACK.
NULL : Pour finir, on donne un paramètre passé automatiquement à la fonction donnée juste avant. On s'en sert pour passer des données à la fonction. Ici, on met NULL.
On peut dire que : Quand object émet le signal name, GTK+ appelle la fonction func avec les paramètres object et data. Donc à ce moment là, GTK génère cet appel et l'exécute :
func(object, data);
La fonction en question devra toujours avoir le prototype suivant :
Ainsi, on a accès au widget qui à émis le signal par le premier paramètre, et à une donnée quelconque par le deuxième. Maintenant, reprenez votre code, vous êtes maintenant en mesure de le comprendre : le programme est quitté lorsqu'on clique sur la croix de la fenêtre.
La boucle principale
Pour gérer les évènements, GTK+ utilise une boucle évènementielle. C'est une boucle infinie (enfin presque, faut bien qu'on puisse quitter) dans laquelle GTK+ s'occupe d'émettre les signaux, et d'appeler les fonctions callback nécessaires. Pour lancer cette boucle (le plus souvent, pour "lancer le programme" en quelque sorte), on appelle la fonction gtk_main :
void gtk_main(void);
Pour quitter cette boucle, la fonction est :
void gtk_main_quit(void);
Vous savez maintenant tout ce qu'il faut savoir pour bien aborder la gestion des évènements. Assurez-vous d'avoir bien compris, je vous conseille de relire l chapitre plusieurs fois si besoin. Je sais que tout cela peut vous paraitre un peu flou, mais après tout c'est quand même plus simple que les pointeurs ! :p (à moins que..?)
Maintenant que vous avez (plus ou moins) compris comment on traitait les événements, voilà deux exercices. Il serait vraiment essentiel de les réussir, et pour vous y aider je ne donne pas de solution : l'important, c'est que ca marche ! Pour bien commencer, prenez le code de la partie précédente. N'oubliez pas que tout se passe dans la fonction qui est en haut ! ;)
Exercice 1
Faites un programme qui fait ceci lorsque on clique sur la croix :
Ecrire le titre de la fenêtre dans la console, en inversant l'ordre des lettres ! :p
Quitter le programme.
Assez facile, pensez à activer la console si elle n'apparait pas ! (Projet > Options)
Exercice 2
Pas beaucoup plus dur, mais plus marrant ! ;)
Ecrivez un programme qui ouvre une deuxième fenêtre quand on clique sur la croix de la première.
Quitter le programme quand on clique sur la croix de la deuxième.
La deuxième fenêtre contiendra le titre de la première dans un label.
Attention, ici on a deux signaux à gérer, un pour chaque fenêtre !
Exercice 3
Vous devriez y arriver, mais il est plus difficile.
Créez une fenêtre, avec la première lettre de votre prénom dedans (dans un label).
Quand on clique sur la croix de la fenêtre, on change la lettre affichée par la suivante.
Quand on est arrivé à la fin du nom, on quitte.
Voilà enfin cette première partie sur GTK+ terminée, vous avez normalement acquis les bases et êtes prêts à faire des choses plus intéressantes ! Au programme de la seconde partie : du concret ! Découvertes des widgets les plus utilisés, au moins un TP, bref : de quoi vous occuper. :)
Les conventions de GTK disent que chaque widget doit posséder trois macros (minimum) permettant de manipuler les Widgets :
GTK_WIDGET(widget) : Permet de caster (transformer) un widget en son type réel. Par exemple, pour modifier les paramètres d'une fenêtre, vous devez passer aux fonctions un GtkWindow et non un GtkWidget, ce qui se fait donc avec la macro GTK_WINDOW.
GTK_WIDGET_CLASS(widget) : Même chose, sauf qu'on obtient un GtkWidgetClass*. Utile lors du développement de widgets, mais pas (ou trés peu) utilisé par l'utilisateur (vous).
GTK_IS_WIDGET(widget) : Permet de savoir si un widget est de type GtkWidget. Renvoie "vrai" si le widget et bien du type précisé.
* WIDGET : Quand Widget est écrit ainsi, cela signifie que le mot est à remplacer par le type voulu. Ex : pour les GtkWindow, les macros sont :
Apprenez chers amis, que lors du développement d'une vraie application GTK, ou même d'un simple petit programme, la console peut se révéler utile. Je vous conseille très fortement d'activer la console pendant le développement (on l'enlève pour la distribution ;) ), car elle permet d'afficher différentes choses telles que :
En cas d'erreur d'installation d'un composant, mais qui ne gène pas la compilation, vous pouvez avoir des erreurs qui apparaissent.
En cas d'erreur d'utilisation des certains widgets, vous pouvez voir des Warnings. Très utile !
Pour faire du débug, par exemple pour afficher simplement un retour de fonction (pour faire des tests).
Ces trois raisons sont largement suffisantes ! Quand vous avez un problème, ne posez pas de questions sur le forum avant d'avoir vérifié qu'il n'y a pas d'erreurs !
GTK+ utilise l'encodage UTF-8 pour le traitement et l'affichage des chaines de caractères, ce qui peut poser problème et gêner l'affichage des les caractères spéciaux et des accents. On aura alors une erreur de ce type dans la console :
La solution qui permet de remédier à ce problème est simple, il suffit de convertir la chaine en question en UTF-8, comme vous l'avez vu dans le chapitre sur les labels :
#define UTF8(string) g_locale_to_utf8(string, -1, NULL, NULL, NULL)
/* encodage */
gchar *chaine = UTF8("Un texte accentué, avec des caractères bizarres... $23, 32?, £18...");
/* utilisation de la chaine */
<...>
/* libération de la chaine allouée */
g_free(chaine);
Cependant, il est tout de même assez lourd de devoir passer par un encodage, puis de libérer la mémoire après utilisation… Alors qu'il y a bien plus simple !
Pourquoi ce problème ?
Nous avons un conflit d'encodage entre les chaines traitées par GTK+ (UTF-8), et celles que vous tapez dans votre IDE (ISO-38547 ou autre…). Conclusion : votre éditeur n'utilise pas le même encodage que GTK+.
Comment le résoudre ?
Pour résoudre le problème, il faudrait que votre éditeur, et donc vos fichiers sources, utilisent l'encodage UTF-8. Voici comment faire :
Sous Linux : il est très probable que vos fichiers soient déjà encodés en UTF8, ainsi pas de problème. Si ce n'est pas le cas, vous pouvez généralement régler cela dans le préférences de votre éditeur. Pour info, Code::Blocks utilise l'UTF-8 par défaut.
Sous Windows : sur cet OS, le problème est systématique. Soit vous choisissez d'utiliser un éditeur externe dont on peut choisir l'encodage, soit vous utilisez les nightly builds de Code::Blocks.
Sous Mac OS : XCode vous permet de choisir l'encodage (menu Format > File encoding > Unicode UTF8). Si vous utilisez un éditeur externe, comme Smultron, vous pourrez également utiliser l'encodage de votre choix. ;)
C'est tout ?
Oui. :) Réenregistrez vos fichiers avec le nouvel encodage, puis compilez : comme par magie, plus besoin de convertir vos chaines ! Merci qui ?
Dans le chapitre sur les labels, vous avez appris que GTK utilisait l'encodage UTF-8, mais que ce n'etait pas forcement votre encodage local et qu'il fallait donc convertir les chaines accentuées. Cela ne concerne pas que les labels mais tout les textes que GTK est succeptible d'afficher. (titre de fenêtre, boutons, etc...)
Vous découvrez donc une petite fonction permettant de convertir une chaine en UTF-8 :
La plupart du temps, on ne se sert que du premier paramètre; et comme cette fonction est très longue, je vous propose d'ecrire une petite macro qui fera la convertion mais qui prendra moins de place. La voilà :
Il n'y a pas de QCM, cela ne servirait à rien, vous n'avez réellement rien appris ! ^^
Puissent ces astuces vous servir !
Le cours n'est bien entendu pas encore terminé, les chapitres sortiront au fur et à mesure. Sachez que le plan du cours est (en gros) bien défini et que nous aborderons quasiment tous les points pouvant vous intéresser, répartis sur au moins quatre parties dont une consacrée aux annexes. Rassurez-vous, le programme est plus que complet ! :)
Si vous avez des questions ou suggestions relatifs à un chapitre en particulier, envoyez un MP à l'auteur du chapitre en question (en bas de page), pas à moi ! Pour les problèmes de code, n'oubliez pas que le forum est là.
[Important] Le Tutoriel GTK+ est actuellement en pause !
La rédaction de ce tutoriel à commencée il y a un peu plus d'un an, nous étions tous très motivés et avons travaillé dur pendant à peu près 9 mois. Mais depuis le début de l'année, l'acharnement au travail a diminué... Ainsi depuis plusieurs mois certains attendent les nouveaux chapitres, nous avons en effet écrit en partie les chapitres, mais ils ne sont plus les mêmes, trop imparfaits, et nous avons moins la motivation (et aussi surtout le temps ! :-° ) de les terminer correctement.
Nous avons ainsi décidé de mettre en pause la réalisation du tutorial car il devient important pour tous les 3 de consacrer plus de temps au travail scolaire.
Souhaitant que vous puissiez continuer d'apprendre GTK+, voici une liste de divers Tutos disponibles sur le net :
[Cours GTK] : Ce cours développera en détail la majorité des fonctions de GTK+ tout en fournissant des exemples concrets. De ce fait, ce cours sera une sorte de tutorial couplé à un manuel de référence complet.
[Gtk.org] : Le tutoriel officiel (donc en anglais !), par les créateurs de GTK+. Il est toujours intéressant d'étudier un document édité par les codeurs de la bibliothèque.
[Gtk par l'exemple] : Ce tutoriel a pour but de vous guider dans la réalisation d'une interface graphique en C grâce à GTK+ au travers l'exemple de la réalisation d'un éditeur de texte. Très instructif pour la pratique de GTK ;) .
[Tout sur GTK] : Cette page recense un grand nombre de contenues liés à GTK (documents, tutos, forum,...)
[Gtk-Fr] : Le tutoriel du wiki francophone dédié à GTK. Malgré quelques (grosses ? :-° ) lacunes pourtant essentielles, ce tutoriel est tout de même intéressant, avec de la bonne volonté biensûr.
Et en dernier cadeau, quelques documents sélectionnés (en anglais) :
[Spécial GtkTextView] : Un document de plusieurs pages, à étudier absolument si vous travaillez avec les GtkTextView. Recherche, coloration, insertion d'images,... tout y est. A combiner avec le tuto [Gtk par l'exemple], cité plus haut.
Pour Dev-C++
Pour Visual-C++
Pour Code::Blocks
