Accueil > Linux / Logiciels Libres > Logiciels Libres > Programmation Graphique Libre sous Windows

Programmation Graphique Libre sous Windows

samedi 7 mai 2005, par Yann

Documents
Programmation graphique libre sous windows
Initiation à la programmation graphique libre sous windows à l’aide des outils libres DevCPP et GTK+
projet-gtk.zip
Sources de l’exemple développé dans l’article
Tous les projets et « templates » au format Dev-C++
Ce fichier contient tous les projets testés (GTK+ et FLTK) et les projets « templates » déjà configurés.
Fichers de documentation GTK au format Windows Help
Un fichier zip contenant tous les fichiers de la documentation de GTK au format Windows Help
Programmation Graphique Libre sous Windows

Programmation Graphique Libre sous Windows

Y. Morère

Mai 2005

Résumé

Le but de cet article est avant tout de présenter l'utilisation des logiciels libres pour la programmation graphique sous windows. Pour cela on se basera sur l'utilisation des bibliothèques GTK+ http://www.gtk.org/, de Glade http://glade.gnome.org/ pour windows pour de développement d'interface graphique et de DevCPP http://www.bloodshed.net/devcpp.html pour l'environnement de developpement. Cela montre aussi la facilité de portage d'une application Linux (en GTK+) vers Windows sans l'utilisation de Cygwin http://www.cygwin.com/.

Table des Matières

1  Introduction/Prérequis
    1.1  Installation de DevCPP
2  Programmation Graphique avec GTK+
    2.1  Présentation de GTK+
    2.2  Installation Glade/Gtk+
    2.3  Conversion des fichiers DevHelp en fichier .chm Aide Windows
    2.4  Création d'interface graphique avec Glade
    2.5  DevCPP et GTK+ : Création, compilation et exécution du projet GTK
        2.5.1  Création du projet
        2.5.2  Configuration du projet
        2.5.3  Exécution du projet
    2.6  Utilisation des DevPak
        2.6.1  Présentation
        2.6.2  DevPak pour l'utilisation de GTK+
3  Programmation Graphique avec FLTK
    3.1  Présentation de FLTK
    3.2  Installation Fluid/FLTK à partir des sources
        3.2.1  Compilation de FLTK avec MinGW
        3.2.2  Compilation de FLTK avec Cygwin
        3.2.3  Génération d'interface avec Fluid
    3.3  Installation Fluid/FLTK à partir des DevPak
    3.4  Création, configuration et compilation du projet FLTK
    3.5  Exécution du projet
4  Programmation Graphique avec wxWindows
    4.1  Présentation de wxWindows

1  Introduction/Prérequis

Il s'agit dans un premier temps, d'installer et de configurer les outils dont nous allons nous servir pour nous permettre de programmer librement sous linux.
Je considère aussi que vous avez un minimum de connaissance en ce qui concerne le C et la programmation à l'aide d'un IDE (Integrated Development Environment, EDI en français).
Deux choses sont indispensables, l'IDE DevCPP et les bibliothèque de developpement de GTK+ sous windows.

1.1  Installation de DevCPP

Il s'agit du fichier devcpp-4.9.9.2_setup.exe à exécuter. L'installation de DevCPP ne pose aucun problème. Je vous conseille de conserver les chemins d'installation par défaut. En effet, comme il est basé sur le compilateur GCC (issu su monde Unix), vous risquez certains problèmes si vous l'installez dans le répertoire Program Files. En effet il n'aime pas trop les espaces dans les noms de chemins.
A la fin de l'installation, ne l'exécuter pas avant d'avoir installé les librairies GTK+. En effet ce dernier scrute les fichiers entêtes de l'arborescence GTK+, afin de permettre la complétion automatique des fonctions lors de la programmation.
Les sources du petit projet sont téléchargeables ici : zips/projet_gtk.zip

2  Programmation Graphique avec GTK+

2.1  Présentation de GTK+

Sources : http://www.gtk-fr.org/wakka.php?wiki=PresentationGtk
GTK+ est une bibliothèque permettant de créer des interfaces graphiques (GUI) très facilement.
A l'origine, GTK+ a été développé pour les besoins du logiciel de traitement d'images GIMP (GNU Image Manipulation Program). Mais aujourd'hui, le domaine d'application ne se limite plus seulement à GIMP, mais est utilisée dans d'autres projets. Ainsi, l'environnement GNOME (GNU Network Object Model Environment) est basé sur GTK+.
L'utilisation de GTK+ pour la création de GUI est très intéressante sur plusieurs points :
  • GTK+ est sous licence GNU LGPL. Cela fait de GTK+ une bibliothèque libre, permettant ainsi de l'utiliser ou de la modifier sans aucune contrainte financière. Pour avoir plus de renseignement, le plus simple est de visiter le site du projet GNU ;
  • GTK+ existe sur plusieurs plates-formes. En effet, GTK+ fonctionne sur les plates-formes UNIX-like, Windows, BeOs;
  • GTK+ est utilisable avec plusieurs langages de programmation. Même si les créateurs de GTK+ ont écris cette bibliothèque en C, sa structure orientée objets et sa licence ont permis à d'autres développeurs d'adapter GTK+ à leur langage préféré. Ainsi, il est maintenant possible de programmer des GUI GTK+ en C, C++, Ada, Perl, Python, PHP et bien d'autres.

2.2  Installation Glade/Gtk+

Il s'agit du fichier gtk-win32-devel-2.6.7-rc1.exe à exécuter. Ce dernier installera Glade et les librairies GTK+ dans le répertoire c:\gtk si vous conservez les options pas défaut (ce que je vous conseille de faire pour éviter toute surprise).
N'oubliez pas, lors de l'installation de cocher la case qui va permettre à l'installateur de configurer DevCPP pour qu'il prenne en compte ces librairies.
Finalement vous pouvez relancer DevCPP pour qu'il finisse de configurer en scrutant l'arborescence de GTK+ à la recherche des fichiers entêtes.
Un fois terminé, vous obtenez la fenêtre suivante :
local/cache-vignettes/L672xH525/devcpp-154a5.jpg?1682442806
Figure 1: Fenêtre de l'IDE DevCPP
Et sur votre bureau l'icone de glade est présente local/cache-vignettes/L50xH55/glade_icone-5ce0c.jpg?1682442806.

2.3  Conversion des fichiers DevHelp en fichier .chm Aide Windows

Sous Linux, Anjuta et DevHelp forme le couple parfait pour faire des recherches sur les fonctions GTK+ (et d'autres d'ailleurs). Sous Windows il est nécessaire d'utiliser le programme Help. Pour cela il faut convertir les fichiers devhelp en fichier chm.
Pour cela il faut récupérer deux utilitaires. Un pour Unix/Cygwin qui va permettre de transformer les fichiers devhelp en projet Help Windows.
DevHelp2CHM: Convert DevHelp books into CHM files, on trouvera un article à l'adresse suivante http://www.linuxeden.com/forum/blog/index.php?op=ViewArticle&articleId=640&blogId=110848 Il est possible de télécharger le script devhelp2chm.sh à l'adresse http://htmlhelp.berlios.de/formats/devhelp2chm.sh
L'utilitaire de création des fichiers .chm, Microsoft fournit l'utilitaire suivant : HTML Help Workshop disponible à l'adresse suivante http://msdn.microsoft.com/library/default.asp?url=/library/en-us/htmlhelp/html/hwMicrosoftHTMLHelpDownloads.asp
Ensuite il suffit de lancer un bash Cygwin et d'effectuer les commandes suivantes pour générer les projets Windows Help.
yann@gandalf /cygdrive/c/GTK/share/gtk-doc/html
$ for i in gdk gdk-pixbuf glib gobject gtk gtkglext libglade pango&
>do 
>~/devhelp2chm.sh -d $i ./$i/$i.devhelp;
>done

yann@gandalf /cygdrive/c/GTK/share/gtk-doc/html

Ensuite il faut utiliser HTML Help Workshop pour générer les fichier .chm.
Voici la totalité des fichiers .chm au format zip.

2.4  Création d'interface graphique avec Glade

Commencez par lancer Glade. Vous obtenez les trois fenêtres suivantes :
local/cache-vignettes/L276xH220/glade_projet-33e37.jpg?1682442806   local/cache-vignettes/L268xH343/glade_properties-243fd.jpg?1682442806   local/cache-vignettes/L132xH453/glade_palette-1b39e.jpg?1682442806
Figure 2: Fenêtres de Glade
Pour plus d'informations sur l'utilisation de Glade pour la génération d'interface je vous renvoie aux adresses suivantes :
Il s'agit toujours à partir d'une fenêtre vide comme celle-ci :
local/cache-vignettes/L408xH327/window1-08863.jpg?1682442806   local/cache-vignettes/L268xH343/window1-2-2a40a.jpg?1682442806
Figure 3: Fenêtre de base pour la création d'interface
pour arriver à une application graphique terminée comme celle-ci :
local/cache-vignettes/L407xH335/window1-3-42f62.jpg?1682442806
Figure 4: Fenêtre finale de l'interface
Une fois l'interface graphique créée (n'oubliez pas d'enregistrer assez souvent votre travail, la fonction annuler n'existe pas sous Glade !!!), sauver là par le bouton Enregistrer local/cache-vignettes/L67xH43/bouton_enregistrer-12c6f.jpg?1682442806. Configurez le projet à l'aide du bouton Options local/cache-vignettes/L48xH42/bouton_option-006e8.jpg?1682442806 (langage par défaut, support gettext, répertoire du projet, etc.), puis générez le code source de l'application par le bouton Générer local/cache-vignettes/L51xH45/bouton_generer-b255a.jpg?1682442806
2.4.0.1   *  Remarque : lors de la génération successive du code sourcede l'application, il arrive que les fichiers ne soient pas mis à jour, il faut alors les effacer et reitérer la génération du code source.
Vous avez donc maintenant un interface graphique, il va maintenant falloir associer des fonctionnalités (donc du code source) aux actions que vous avez associées aux boutons et organes cliquables de l'interface. Pour cela on va utiliser DevCPP.

2.5  DevCPP et GTK+ : Création, compilation et exécution du projet GTK

La version de glade pour windows, lors de la génération de votre code source, a aussi généré, un répertoire devcpp, à l'intérieur du répertoire de votre projet Glade. Ce répertoire contient une fichier config.h qui nous sera utile lors de la compilation du projet.
Comme le répertoire devcpp existe déjà, on l'utilisera pour y déposer le projet devcpp.

2.5.1  Création du projet

On commence par lancer le programme DecvCPP et dans le menu fichier on choisit nouveau projet. On obtient alors la fenêtre suivante :
local/cache-vignettes/L514xH292/new_projet-507f9.jpg?1682442806
Figure 5: Création d'un nouveau projet
Comme nous ne créons, ni une application purement windows, ni une application purement console, ni une dll, ni une librairie statique, on choisit empty project, avec le langage C. On nomme par la même occasion le projet projet-gtk.
On obtient alors la fenêtre suivante :
local/cache-vignettes/L672xH525/projet_created-3db72.jpg?1682442806
Figure 6: Création d'un nouveau projet
et il nous faut maintenant ajouter des fichiers sources et entêtes à ce projet. Pour cela il suffit de cliquer avec le bouton droit sur la racine du projet et d'ajouter des fichiers comme le montre les figures suivantes :
local/cache-vignettes/L672xH525/ajout_projet-09c69.jpg?1682442806
Figure 7: Ajout de fichier source et entête à notre projet
local/cache-vignettes/L563xH412/ajout_fichier-8655b.jpg?1682442806
Figure 8: Ajout de tous les fichiers générés par Glade
Il suffit alors d'ajouter le fichier config.h du répertoire devcpp
Dans le fichier main.c, on n'oubliera pas de faire référence au fichier config.h qui se trouve dans le répertoire devcpp. Pour cela on ajoute la ligne :
#include "../devcpp/config.h"

Ce fichier contient la définition de constante comme PACKAGE_LOCAL_DIR.
On obtient alors un projet prêt à compiler comme le montre la figure suivante. Malheureusement, il n'est pas compilable en l'état (en fait il va peut être compiler mais l'éditeur de liens échouera). Il faut configurer le projet afin qu'il prenne en compte les librairies GTK lors de l'édition de liens.
local/cache-vignettes/L672xH525/projet_complet-bd465.jpg?1682442806
Figure 9: Projet terminé prêt à compiler

2.5.2  Configuration du projet

Il s'agit tout d'abord de vérifier que le compilateur connait GTK+. Pour cela allez dans le menu Outils -> Options du compilateur, puis vérifiez que les chemins vers les entêtes et les librairies GTK+ sont présents comme dans les figures ci-dessous.
L'installation des librairies GTK+, modifie la configuration de base de Dev-C++ (si vous avez cochez l'option à l'installation). Et donc par défaut, Dev-C++ connait les chemin vers les fichiers entêtes de GTK+. Si vous n'avez pas cocher l'option, il n'y a rien de grave, il suffit de configurer le projet lui-même (cette dernière solution est d'ailleurs préférable si vous souhaitez developper avec d'autres toolkits graphique)
Voici les options modifiées par l'installation de GTK+ :
local/cache-vignettes/L457xH415/config_compilo-95ac6.jpg?1682442806local/cache-vignettes/L457xH415/config_compilo2-0988d.jpg?1682442806
Figure 10: Configuration du compilateur pour le support de GTK
et pour les entêtes C et C++
local/cache-vignettes/L457xH415/config_compilo3-6e274.jpg?1682442806
Figure 11: Configuration du compilateur pour le support de GTK
Voici les options à placer dans la configuration du projet :
local/cache-vignettes/L477xH340/config_projet-397c2.jpg?1682442806   local/cache-vignettes/L477xH340/config_projet2-ceb4d.jpg?1682442806
Figure 12: Configuration du compilateur pour le support de GTK
et pour les entêtes C et C++
local/cache-vignettes/L477xH340/config_projet3-de9a6.jpg?1682442806
Figure 13: Configuration du compilateur pour le support de GTK
Si vous n'avez rien de tout cela, il vous faut ajouter les chemins à la main afin que le compilateur puisse fonctionner.
Ensuite, afin que l'éditeur de liens puis fonctionner, il faut lui indiquer les chemins vers les fichiers .lib. Pour cela, ouvrir la fenêtre de configuration du projet par options -> options du projet, puis dans l'onglet paramètres, ajouter comme option du compilateur -mms-bitfileds. Sinon votre projet compilera mais ne pourra pas s'exécuter. L'erreur suivante se produira :
images/erreur_exec.jpg
Figure 14: Erreur d'exécution à cause de l'oubli de l'option -mms-bitfields
Puis il faut ajouter les chemins vers les bibliothèques pour l'éditeur de liens. Toujours dans le même onglet on ajoute les librairies nécessaires (pour plus de facilité, on peut tout ajouter).
local/cache-vignettes/L563xH412/ajouter_libs-3cf8c.jpg?1682442806
Figure 15: Ajout de librairies au projet pour l'édition de liens
On obtient donc le résultat suivant :
local/cache-vignettes/L477xH340/config_projet-397c2.jpg?1682442806
Figure 16: Configuration du projet pour la compilation et édition de liens
Comme nous avons choisi un empty project, par défaut lors du lancement de l'application, windows va ouvrir une fenêtre console. Ceci peut être utile à des fins de débuggage, mais n'est pas souhaitable si vous distribuez votre programme. Il est donc possible de configurer le compilateur afin d'éviter l'ouverture de cette console. Toujours dans les options du projet dans l'onglet compilateur, à la ligne éditeur de liens, il suffit de passer à Yes l'option Ne pas créer de fenêtre console.
local/cache-vignettes/L477xH340/fenetre_console-73254.jpg?1682442806
Figure 17: Configuration du projet pour éviter l'ouverture d'une fenêtre console

2.5.3  Exécution du projet

Voilà, tout est prêt, il ne nous reste plus qu'à compiler et exécuter le projet, option compiler et exécuter du menu Projet, afin d'obtenir la fenêtre suivante.
local/cache-vignettes/L398xH309/running_window-81fd9.jpg?1682442806
Figure 18: L'application est compilée et s'éxécute
2.5.3.1   *  Remarque : Si vous avez oublié la configuration -mms-bitfields ou la suppression de la fenêtre console, je vous invite à utiliser l'option nettoyer du menu Projet et de refaire une compilation afin d'éviter tout problème.

2.6  Utilisation des DevPak

2.6.1  Présentation

DevCpp possède un utilitaires très intéressant Dev-C++ Package Manager, qui permet d'installer de nouvelles librairies de manière simple et efficace par l'intermédiaire d'une interface.
local/cache-vignettes/L672xH490/devpak_manager-8a9e2.jpg?1682442806
Figure 19: Interface de gestion des DevPak
En effet les librairies sont la plupart du temps disponibles sous la forme de sources. C'est appréciable, mais il est parfois difficile de recompiler ces sources afin d'obtenir quelque chose de fonctionnel. Les concepteurs de Dev-C++ ont introduit la notion de devpak - development package (paquet de developpement, qui contiennent une version précompilée de la librairie, de telle sorte qu'un utilisateur débutant puisse l'utiliser. Dev-C++ inclus aussi plusieurs outils pour télécharger, installer et créer des paquets.
Les paquets de developpement ne sont pas seulement utilisables avec Dev-C++. En effet il s'agit en fait d'un fichier texttt.tar.bz2 déguisé. Il est aussi possible de créer ses propres paquets, car Dev-C++ contient uyn outil de création de paquet PackMaker. Pour cela je vous renvoie au tutoriel de Michel Weinachter sur la création manuelle de paquet de developpement http://michel.weinachter.free.fr/DevPack_howto.html.
Le site de référence pour la collection de devpak est http://devpaks.org/, il y a aussi http://michel.weinachter.free.fr/
Le principal intérêt dans l'utilisation des DevPak, outre le fait que l'on aie pas besoin de recompiler les librairies, c'est que la plupart du temps, l'installation s'accompagne de la mise ne place d'un Project Wizard, pour la librairie installée. Ceci est spécialement vrai pour les librairies graphiques. Ainsi lors de la création d'un nouveau projet nous auront le choix de créer un projet GTK+, et les configurations du projet seront déjà faites (chemins des librairies, options, chemins des entêtes).
L'inconvénient majeur, est que les versions des DevPak sont souvent un peu en retrait, par rapport à la même librairies disponibles sous la forme de sources.
De plus dans les exemples des GTK+ et FLTK, les outils annexes de création d'interface (Glade et Fluid) ne sont pas présents.

2.6.2  DevPak pour l'utilisation de GTK+

Il faut tout d'abord récupérer les librairies nécessaires pour l'utilisation de GTK+. Voici le liste des DevPak disponible à l'adresse suivante http://devpaks.org/list.php?category=GUI. L'installation se fait dans l'ordre suivant :
  1. glib 2.6.3
  2. atk 1.9.0
  3. pango 1.8.0
  4. gtk+ 2.6.4
local/cache-vignettes/L522xH452/devpak_gtk-862cc.jpg?1682442806
Figure 20: Liste des DevPak nécessaires pour la compilation d'un projet GTK
Pour installer un DevPak, soit on double-clic dessus, ou on passe par l'interface de gestion disponlible dans le menu Outils->Gestion de Paquets.
local/cache-vignettes/L494xH395/install_devpak-09e63.jpg?1682442806
Figure 21: Installation d'un DevPak
On va donc installer successivement les 4 DevPak.
local/cache-vignettes/L563xH412/install2_devpak-d9669.jpg?1682442806
Figure 22: Installation d'un autre DevPak
local/cache-vignettes/L672xH490/installed_gtk-86c53.jpg?1682442806
Figure 23: Installation terminée des DevPak GTK
Tous les DevPak de GTK+ sont installés, il ne reste plus qu'à redémarrer Dev-C++ afin de prendre en compte les changements. Maintenant, lors de la création de projet, un nouveau type de projet est disponible :
local/cache-vignettes/L514xH292/new_project2-38ec0.jpg?1682442806
Figure 24: Installation d'un DevPak
Comme je l'ai déjà dit, si vous ouvrer les propriétés du projet ainsi nouvellement créé, les options suivantes sont déjà configurées :
  • Pour l'onglet compilateur :
    -I"<INCLUDE>\gtk-2.0" 
    -I"<INCLUDE>\..\lib\gtk-2.0\include" 
    -I"<INCLUDE>\atk-1.0" 
    -I"<INCLUDE>\pango-1.0" 
    -I"<INCLUDE>\glib-2.0" 
    -I"<INCLUDE>\..\lib\glib-2.0\include" 
    -mms-bitfields
    
    
  • pour l'onglet éditeur de liens
    -lgtk-win32-2.0 
    -lgdk-win32-2.0 
    -latk-1.0 
    -lgdk_pixbuf-2.0 
    -lpangowin32-1.0 
    -lgdi32 
    -lpango-1.0 
    -lgobject-2.0 
    -lgmodule-2.0 
    -lglib-2.0
    -lintl
    
    
Afin d'utiliser le code générer par le programme Glade, il est nécessaire d'ajouter les librairies libintl et libiconv.
Pour le reste la méthode reste identique à l'utilisation sans DevPak.

3  Programmation Graphique avec FLTK

3.1  Présentation de FLTK

Source : http://www.xgarreau.org/aide/devel/langtk/cpp_fltk.php FLTK (prononcez "fulltick") signifie Fast Light ToolKit. C'est une librairie disponible pour plusieurs plateformes (Linux/Windows/MacOs X). FLTK a été conçu pour être lié de façon statique avec les applications qui l'utilisent. Rappelons que celà permet de s'affranchir du contrôle des dépendances lors de la distribution d'une application sous forme binaire. Le mauvais point est que chaque application utilisant fltk est livrée avec fltk, ce qui induit une occupation d'espace disque et mémoire qui n'est pas à priori nécessaire.
Il est toutefois possible d'utiliser fltk comme un autre toolkit graphique et d'utiliser une liaison dynamique. Cette utilisation tend à se développer, fltk étant de plus en plus fourni avec les distributions linux.
Dans la suite j'utiliserais la version de developpement de FLTK (FLTK2.0.x), qui est encore en developpement, car elle permet l'utilisation d'OpenGL.

3.2  Installation Fluid/FLTK à partir des sources

3.2.1  Compilation de FLTK avec MinGW

Source : http://www-user.tu-chemnitz.de/~poenisch/FLUID-Tutorial/ Afin de pouvoir compiler la librairie sous Windows, il est nécessaire d'voir 3 composant :
On commence par installer le compilateur MinGW, puis MySYS. A la fin de l'installation MySYS, une fenêtre de commande DOS s'ouvre pour vous demander où se trouve le compilateur. Commencez par répondre Y à la demande de configuration de post-installation, puis renseignez la question suivante avec le chemin absolu vers le compilateur MinGW, par exemple c:\MinGW.
Tout est prêt pour la compilation de la librairie. IL suffit de lancer msys, vous obtenez ainsi une console Unix dans laquelle vous allez pouvoir compiler la librairie par la commande make.
On commence par décompresser l'archive de la bibliothèque dans un répertoire, soit après l'avoir copier dans l'arborescence Unix (/home/source/fltk), soit dans l'arborescence Windows /c/temp/fltk.
Ensuite il suffit de lancer make pour la version 2.0.x et ./configure && make pour la version 1.1.6.
A la fin de la compilation, les bilbiothèques de FLTK sont générées ainsi que le logiciel Fluid et les exemples.

3.2.2  Compilation de FLTK avec Cygwin

Cygwin est un environnement Style-Linux pour windows. Il est constitué de 2 partie, une DLL (cygwin1.dll) qui agit comme une couche d'émulation de l'API (Applacation Programming Interface) Linux, qui fournit de nombreuses fonctionnalités; et une collection d'outils qui donnent l'impression d'être sous Linux.
Par contre Cygwin ne permet pas d'utiliser les application Linux nativement. Il est nécessaire de recompiler les applications à partir des sources.
Pour installer Cygwin, il faut télécharger le fichier setup.exe à l'adresse suivante : http://www.cygwin.com/.
Ce dernier permet d'installer Cygwin par l'inetermédiaire de votre connexion internet. En effet après avoir fait le choix du type d'installation, du serveur et enfin des utilitaires à installer, il va télécharger les fichiers sélectionnés et les installer.
la liste des paquets nécessaires est la suivante :
ash
autoconf
automake
base-files
base-passwd
bash
binutils
bzip2
coreutils
crypt
cvs
cvsutils
cygrunsrv
cygutils
cygwin
cygwin-doc
db
diffutils
editrights
expat
findutils
flex
gawk
gcc
gcc-mingw
gdbm
gettext
grep
groff
gzip
less
libiconv
libxml2
libxslt
liste_cygwin.txt
login
m4
make
man
mingw-runtime
minires
mktemp
ncurses
openssh
openssl
pcre
perl
popt
readline
rsync
sed
setsid
tar
termcap
terminfo
texinfo
w32api
which
zlib

Voici en images, l'installation de Cygwin :
local/cache-vignettes/L505xH388/cygwin_install-b1dfa.jpg?1682442806
Figure 25: Installation de Cygwin
local/cache-vignettes/L505xH388/cygwin_install2-af220.jpg?1682442806
Figure 26: Installation de Cygwin
local/cache-vignettes/L505xH388/cygwin_install3-0523b.jpg?1682442806
Figure 27: Installation de Cygwin
local/cache-vignettes/L505xH388/cygwin4-564db.jpg?1682442806
Figure 28: Installation de Cygwin
local/cache-vignettes/L505xH388/cygwin5-baa5c.jpg?1682442806
Figure 29: Installation de Cygwin
local/cache-vignettes/L505xH388/cygwin6-89214.jpg?1682442806
Figure 30: Installation de Cygwin
local/cache-vignettes/L505xH388/cygwin7-8bdb6.jpg?1682442806
Figure 31: Installation de Cygwin
local/cache-vignettes/L672xH427/cygwin_install8-7b88c.jpg?1682442806
Figure 32: Installation de Cygwin
local/cache-vignettes/L515xH394/cygwin_install9-a7425.jpg?1682442806
Figure 33: Installation de Cygwin
Il faut aussi télécharger et décompresser la librairie FLTK2 (ou FLTK1) disponible aux adresses : http://www.fltk.org/, et http://www.fltk.net/.
Pour compiler la bibliothèque, on lance Cygwin et on obtient une console bash.
local/cache-vignettes/L668xH331/cygwin-68f04.jpg?1682442806
Figure 34: Console bash de Cygwin
la compilation se déroule de la manière suivante :
local/cache-vignettes/L668xH331/configure_fltk-11b5e.jpg?1682442806
Figure 35: Compilation de FLTK
local/cache-vignettes/L668xH331/make_fltk-42f87.jpg?1682442806
Figure 36: Compilation de FLTK
Une fois que tout est compilé, il est possible de lancer fluid (par l'intermédiaire de Cygwin, puisqu'il a été compilé avec). Voici l'interface Fluid de la version 1.1.6 de FLTK.
local/cache-vignettes/L308xH552/fluid-aa2ef.jpg?1682442806   
local/cache-vignettes/L446xH105/fluid_widget-d8a8e.jpg?1682442806
Figure 37: Fenêtre principale et de widget de Fluid

3.2.3  Génération d'interface avec Fluid

C'est le programme de conception d'interface pour FLTK. C'est un éditeur graphique qui est utilisé pour générer du code source FLTK.
Fluid édite et sauve l'interface dans des fichiers .fl. Ce sont des fichers textes qu'il est possible d'éditer (si l'on sait ce que l'on fait) afin d'obtenir des effets non gérés par Fluid.
Fluid peut convertir le fichier .fl en un fichier .cxx et .h. Le fichier .cxx contient la définition de tous les objets du fichier .fl et le fichier .h déclare toutes le variables globales.
Un programme simple peut être fait en mettant tout le code (avec la fonction main()) dans le fichier .fl, ce qui permet de générer un seul fichier .cxx pour la compilation. Mais la plupart des programmes sont plus complexes. Il est alors nécessaire d'écrire d'autres fichier .cxx qui appellent des fonctions Fluid. Ces fichiers doivent alors inclure les fichiers oubien inclure le fichier .cxx.
D'une manière générale, le fichier Fluid définit une ou plusieurs fonctions ou classes qui produisent du code C++. Chaque fonction définit une ou plusieurs fenêtres FLTK, ainsi que tous les widgets qui se tronvent à l'intérieur de la fenêtre.
Les widgets créées par Fluid peuvent être nommées, nommées complexes ou non nommées. Un widget nommé doit avoir un nom de variable valide (i.e. seulement des alphanumériques et souligné). Dans ce cas, Fluid définit une variable globale ou un membre de classe qui va pointer sur le widget après l'appel du constructeur (ou déclaration). Un objet qui possède un nom complexe possède un . ou une -> dasn son nom. Dans ce cas Fluid assigne au nom un pointeur de widget dans tenter de le déclarer. Ceci peut être utiliser pour récupérer des widgets dans une structure. Un widget non nommé possède un champ nom vide, et aucun pointer n'est stocké.
Les widgets peuvent aussi appeler une fonction Callback, qu'il est possible d'écrire dans une autre fichier source, oubien vous pouvez fournir un petit morceau de code directement dans Fluid, qui va écrire un fonction callback provée dans le fichier .cxx.
Tutoriel FLTK : http://www3.telus.net/public/robark/ Tutoriel FLTK Fluid en Allemand : http://www-user.tu-chemnitz.de/~poenisch/FLUID-Tutorial/ Tutoriel Fluid : http://embedded.centurysoftware.com/docs/nx/fltk-fluid.html, http://www.fltk.org/doc-2.0/fluid.html
local/cache-vignettes/L308xH550/fluid1-83623.jpg?1682442806
Figure 38: Générateur d'interface Fluid
local/cache-vignettes/L388xH400/fluid_option-239af.jpg?1682442806
Figure 39: Fenêtre d'option du générateur d'interface Fluid
local/cache-vignettes/L498xH217/fluid_kbd-cca9c.jpg?1682442806
Figure 40: Interface générée par Fluid

3.3  Installation Fluid/FLTK à partir des DevPak

Comme pour GTK+, il est possible d'installer la librairie FLTK à l'aide de DevPak. Ces DevPak ne sont pas disponible sur le site d'origine http://www.fltk.org/, mais sur le site http://www.fltk.net/. Vous aurez besoin de la librairie pthread et FLTK2. Ces deux librairies sont disponibles aux adresses suivantes et à installer dans l'ordre :
  1. http://www.fltk.net/files/devpak/libpthread.DevPak http://www.fltk.net/files/devpak/libpthread.DevPak
local/cache-vignettes/L522xH373/devpak_fltk-fe223.jpg?1682442806
Figure 41: DevPak nécessaires pour FLTK
Comme dans le cas de GTK+, on va utiliser le gestionnaire de DevPak pour installer ces librairies.
Ensuite lors de la création de nouveau projet, un nouvel onglet GUI est disponible, permettant de créer un projet FLTK et FLTK OpenGL.
local/cache-vignettes/L514xH292/fltk_projet-4b913.jpg?1682442806
Figure 42: Nouveau projet FLTK fourni par le DevPak
Le seul problème avec l'utilisation des DevPak est que l'utilitaire de création d'interface Fluid nest pas disponible.
L'avantage, comme avec GTK+, c'est que le projet est directement configuré, pour une compilation sans problème.

3.4  Création, configuration et compilation du projet FLTK

local/cache-vignettes/L477xH340/fltk_rep_include-2e49b.jpg?1682442806
Figure 43: Configuration des répertoires d'inclusion
local/cache-vignettes/L477xH340/fltk_rep_libs-b80f6.jpg?1682442806
Figure 44: Configuration des répertoires de librairies
local/cache-vignettes/L477xH340/option_projet_fltk-650f2.jpg?1682442806
Figure 45: Configuration des options d'un projet FLTK

3.5  Exécution du projet

local/cache-vignettes/L672xH490/fltk_projet_full-0eda7.jpg?1682442806
Figure 46: Projet complet Hello avec FLTK
local/cache-vignettes/L306xH205/fltk_hello-6d731.jpg?1682442806
Figure 47: Exécution du projet Hello avec FLTK

4  Programmation Graphique avec wxWindows

4.1  Présentation de wxWindows

Sources : http://wiki.wxwidgets.org/wiki.pl?Table_Of_Contents
wxWorks est une des toolkits les plus complet pour la création d'interfaces graphiques. Elle comporte de nombreuses classes. Elle est toujours en developpement, et le documentation est importante. De plus quand cela est possible, wxWorks utilise la plateforme SDK. Cela signifie que les programmes compilés sous windows auront le style Windows, et que ceux compilé sous linux auront le style Linux.
Il est aussi possible de developper avec wxWorks dans dautres langages que C++ (python, perl, java, lua, eiffel, C# (.NET), basic, ruby et même javascript).
http://www.wxwindows.org/ http://wiki.wxwidgets.org/wiki.pl?Table_Of_Contents
To be continued...
Voilà, c'est fini pour cette petite initiation, tous commentaires et corrections sont les bienvenus à l'adresse morere@univ-metz.fr