FLTK est une bibliothèque logicielle C++. Elle permet de créer facilement des interfaces graphiques multiplateformes, compatibles avec GNU/Linux, Microsoft Windows et macOS.

Je souhaite vous présenter cette bibliothèque car, en plus d’être légère et efficace, elle fut la première que j’ai apprise et utilisée pour concevoir l’interface graphique de certains logiciels que j’ai développés, tels que Jargon Informatique ou VBA Express. J’en garde un excellent souvenir pour sa simplicité d’utilisation et ses performances.

(exemple d’interface faite avec Fltk et Fluid)

Les avantages et inconvénients de Fltk

Avantages :

• Approche orientée objet : la majorité des composants héritent d’une classe commune, ce qui facilite la mémorisation et l’utilisation des méthodes.
• Maturité et stabilité : FLTK est développée depuis plusieurs années et demeure activement maintenue. Elle existait déjà avant Qt ou GTK.
• Portabilité : une interface développée avec FLTK fonctionne généralement sans modification sous Windows, Linux, et macOS.
• Légèreté : contrairement à d’autres bibliothèques telles que Qt ou GTK, FLTK reste extrêmement légère. Elle peut être compilée statiquement, n’ajoutant qu’environ 300 Ko à l’exécutable. Cela permet également d’éviter les dépendances externes comme les fichiers .dll ou .so.
• Support d’OpenGL : il est possible d’intégrer des vues 3D dans vos interfaces.
• Documentation complète : la documentation officielle est bien fournie et constitue une excellente ressource pour approfondir l’usage de la bibliothèque.

Inconvénient :

Le principal inconvénient réside dans le fait que FLTK ne propose pas toutes les fonctionnalités en standard. Cette austérité est un choix visant à préserver sa légèreté. Toutefois, des bibliothèques complémentaires permettent d’ajouter des fonctionnalités telles que la gestion de l’impression, des effets graphiques, ou des explorateurs de fichiers plus complets. le site officiel de Fltk.

FLUID : l’éditeur d’interface graphique

FLTK est fourni avec un éditeur graphique nommé FLUID, léger et fonctionnel. Une fois l’interface conçue, FLUID génère automatiquement le code C++ correspondant, évitant ainsi d’écrire manuellement l’interface via l’API.

Créer un premier programme avec FLTK et FLUID

La version utilisée pour ce tutoriel est la 1.1.7. Le projet consiste à créer une interface contenant un champ de saisie et un bouton. Lors d’un clic sur le bouton, le texte saisi sera affiché à l’écran.

Installer Fltk et Fluid sous GNU/Linux et Windows

Sous GNU/Linux

La méthode la plus simple consiste à utiliser le gestionnaire de paquets. Par exemple, sous Debian ou Ubuntu :

sudo apt-get install libfltk1.1-dev fluid

Si la bibliothèque est absente des dépôts, vous pouvez la compiler à partir des sources disponibles sur le site officiel de Fltk.

Sous Windows

Téléchargez l’archive fltk-x.x.x.tar.gz depuis le site officiel, puis :

• Utilisez Microsoft Visual C++ 6.0 en ouvrant le fichier fltk.dsw situé dans le répertoire visualc/
• Ou utilisez MinGW en copiant makefiles/Makefile.mingw dans le répertoire source, puis en lançant make

Je vous invite également à lire ces articles.

Création de l’interface avec FLUID

Le programme que nous allons créer sera très simple. Son interface comprendra un bouton « J’ai fini » ainsi qu’un champ de saisie de texte. Lorsque vous cliquerez sur le bouton « J’ai fini », le contenu saisi sera affiché.

Tous les fichiers du projet seront disponibles à la fin du tutoriel, afin que vous puissiez les télécharger si nécessaire.

Pour commencer, lancez le programme Fluid (utilisé pour éditer des interfaces graphiques). Pour ce tutoriel, je me suis basé sur la version anglaise de Fluid. Si votre version sous GNU/Linux est en français et que vous souhaitez passer à la version anglaise, lancez Fluid avec la commande suivante :

LC_ALL=C fluid

Une fois que Fluid sera lancé, vous constaterez qu’il se divise en deux fenêtres.

La principale contenant une liste et un menu :

Et la deuxième, contenant des boutons permettant d’accéder aux différents outils :

Si vous n’avez pas la fenêtre ci-dessus, vous pouvez l’afficher en cliquant sur le menu « Edit » puis sur « Widget Bin On/Off ». Vous pouvez également utiliser le raccourci ALT + b.

Cliquez sur le bouton suivant dans la fenêtre d’outils :

Cela vous affichera une nouvelle fenêtre pour créer une nouvelle classe.

Remplacez « UserInterface » par « MonInterface » puis cliquez sur le bouton OK.

Cliquez sur « MonInterface » dans la fenêtre que vous voyez dans l’image ci-dessus, pour sélectionner cette classe, puis cliquez sur le bouton :

Cela nous affichera une nouvelle fenêtre pour créer le constructeur de la classe « MonInterface » (qui va s’occuper de créer pour nous la fenêtre lors de l’instanciation de la classe tout à l’heure dans le code source C++).

Remplacez « make_window() » par « MonInterface() » (fonction dont le nom est similaire à celui de la classe, pour qu’elle devienne le constructeur).

Ensuite, cliquez sur le bouton OK.

Cliquez sur ce bouton pour créer une nouvelle fenêtre (dans le constructeur) :

Ce qui nous affichera une nouvelle fenêtre avec la taille 100×100 :

Double cliquez sur cette fenêtre (par exemple au centre de celle-ci) pour afficher les propriétés de cette dernière :

Dans l’onglet GUI, mettez dans width 320, comme suit :

Modifiez ensuite le « label » (qui désigne le titre de la fenêtre) pour y mettre « Le Titre » :

Maintenant, nous allons attribuer un nom à cette fenêtre (le nom qui sera utilisé dans le code source C++, pour le pointeur membre de la classe MonInterface, qui pointe vers l’objet de cette fenêtre).

Cliquez sur l’onglet C++, ce qui vous donnera :

Dans « Name », mettez « FenetrePrincipale » :

Cliquez sur le bouton Ok, pour confirmer toutes vos modifications dans la fenêtre de propriétés !

Notre fenêtre a désormais un titre, une taille différente et le nom C++ « FenetrePrincipale », qui sera utilisé ultérieurement dans le code source C++.

On va désormais ajouter deux Widgets (pour info, Widget vient de « Window Gadget ») : un bouton et une entrée de texte.

Pour ajouter le bouton, cliquez sur :

Les propriétés du bouton s’afficheront automatiquement (une fenêtre similaire à celle qui nous a servi pour modifier la taille, le titre, etc. de la fenêtre). Modifiez :

• Width : 110
• X : 195
• Y : 60
• Label : J’ai fini

(je tiens à noter que vous n’êtes pas obligés d’entrer le width, height, x et y manuellement, il est possible de glisser/déposer/redimentionner votre bouton à l’aide de la souris)

Cliquez sur l’onglet C++ puis modifiez le nom C++ du bouton (comme on l’avait fait pour la fenêtre). Mettez « BoutonFini » dans Name.

Enfin, cliquez sur Ok pour confirmer les modifications dans les propriétés du bouton.

Maintenant, on va créer le « Input » (le widget qui nous permettra d’entrer du texte). Dans la fenêtre outils, cliquez sur le bouton contenant un « A » indiqué en jaune dans l’image ci-dessous :

Comme pour le bouton, vous aurez automatiquement la fenêtre des propriétés. Modifiez :

• Width : 290
• X : 15
• Y : 20

Dans l’onglet C++, mettez dans « Name » le nom : « EntreeClavier ».

Cliquez sur Ok pour confirmer les propriétés.

L’interface est finie ! Félicitations !

Enregistrez cette interface dans un nouveau répertoire vide (qui contiendra également le code source C++ ultérieurement, ainsi que le Makefile) sous le nom MonInterface.fl, en cliquant sur le menu Fluid « File » puis « Save ».

Ensuite, générez le code source C++ à partir de l’interface en cliquant sur « File » puis « Write Code ».

Vous constaterez que deux nouveaux fichiers ont été générés dans le même répertoire que le fichier MonInterface.fl :

• MonInterface.cxx : le code source C++, contenant la classe de votre interface graphique
• MonInterface.h : le header contenant toutes les déclarations nécessaires (entre autres, la déclaration de la classe, de ses variables membres, etc.)

Création du code source C++ et compilation

On passe maintenant à l’écriture de la fonction main qui va utiliser notre classe MonInterface !

Créez le fichier main.cxx et mettez-y :

/*
 * Ce code source fait partie du tutoriel disponible dans le blog :
 * https://www.asher256.com/
 */

#include "MonInterface.h"  /* La déclaration de la classe */
#include <FL/fl_ask.H> /* Pour la fonction « fl_alert » */

MonInterface *Interface;   /* Déclare le pointeur vers l'interface */

/* Quand le bouton est cliqué */
void BoutonFini_Click(Fl_Widget *) {
    /* Met le pointeur vers le contenu de l'input
     * dans la variable contenu */
    const char *contenu = Interface->EntreeClavier->value();

    /* Affiche le contenu de l'Input */
    fl_alert("%s", contenu);
}

int main(int argc, char **argv) {
    /* Crée une instance de l'interface */
    Interface = new MonInterface();

    /* Crée un événement pour que une
     * fois que le bouton est cliqué, la
     * fonction « BoutonFini_Click » est appelée. */
    Interface->BoutonFini->callback(BoutonFini_Click);

    /* On Affiche la fenêtre
     * (souvenez vous, dans Fluid, dans l'onglet C++, on avait
     * choisi « FenetrePrincipale » comme nom dans « Name »)
     * Après la génération du code, FenetrePrincipale est devenue
     * une variable membre de la classe MonInterface
     * et show() est une fonction Fltk qui affiche la fenêtre */
    Interface->FenetrePrincipale->show(argc, argv);

    return Fl::run();  /* exécute Fltk (qui gère tout !) */
}

Vous avez le nécessaire pour que votre programme soit compilé et exécuté !

Compilez maintenant main.cxx et MonInterface.cxx dans le même fichier, avec Fltk comme bibliothèque. Sous GNU/Linux, par exemple, c’est :

g++ `fltk-config --cflags` main.cxx MonInterface.cxx -o MonProgramme `fltk-config --ldflags`
./MonProgramme

Bonne expérimentation avec FLTK !

Télécharger le code source du projet

Tout le code source de ce tutoriel est disponible dans cette archive :

• fltk-example-asher256.tar.gz

Quelques liens en relation avec Fltk :

• Tutoriel dans le site de Xavier Garreau
• Site officiel de Fltk
• Documentation de Fluid