Full Circle Magazine FR

Outils pour utilisateurs

Outils du site

Piste : • latex • issue • finalisation • tutoriel1
issue220:tutoriel1

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Prochaine révision		Révision précédente
issue220:tutoriel1 [2025/08/31 07:39] – d52frissue220:tutoriel1 [2025/08/31 08:15] (Version actuelle) – d52fr
Ligne 3: Ligne 3:
 Written by Alan Crispin** Written by Alan Crispin**
  
-Programmation en C dans GTK4 - partie 1+//Bandeau de titre : //Programmation GTK4 en C - partie 1
  
  
Ligne 15: Ligne 15:
  
 https://github.com/crispinprojects/fullcircle** https://github.com/crispinprojects/fullcircle**
 +
 +Introduction
 +
 +Cet article est le premier d'une série sur le développement d'applications GTK4 en C. Nous développerons quelques petits programmes pour illustrer l'utilisation de GTK4 et des bibliothèques associées pour la programmation d'interfaces graphiques (GUI). Ce premier article présente GTK4. Il explique comment l'installer, le compilateur C et l'outil d'automatisation de compilation GNU Make. Une petite application de démonstration est développée pour illustrer la création d'une fenêtre et l'utilisation de widgets de type bouton et étiquette.
 +
 +Tout au long de cette série, nous utiliserons Ubuntu 24.04, qui utilise la version GTK4.14 de GTK4. Cette série suppose que le lecteur maîtrise le langage de programmation C. De nombreux tutoriels et vidéos en ligne sur la programmation C sont disponibles.
 +
 +Le code source complet de ce projet peut être téléchargé via le lien ci-dessous.
 +
 +https://github.com/crispinprojects/fullcircle
 +
  
 **GTK4 **GTK4
Ligne 23: Ligne 34:
  
 Widgets are the fundamental building blocks when creating a GTK4 Graphical User Interface (GUI) application. Widgets are pre-built user interface elements such as labels, text entries and buttons. GtkWidget is the base class for all widgets. Every widget derives from GtkWidget. It provides a common set of properties, methods and signals to ensure consistency and styling of widgets.** Widgets are the fundamental building blocks when creating a GTK4 Graphical User Interface (GUI) application. Widgets are pre-built user interface elements such as labels, text entries and buttons. GtkWidget is the base class for all widgets. Every widget derives from GtkWidget. It provides a common set of properties, methods and signals to ensure consistency and styling of widgets.**
 +
 +GTK4
 +
 +GTK4 est une bibliothèque de création d'interfaces utilisateur graphiques (GUI), largement disponible dans les dépôts des distributions Linux. C'est une boîte à outils portable, ce qui signifie que les applications écrites pour une plateforme donnée peuvent être portées vers une autre. Linux est bien sûr la plateforme privilégiée. Bien que le langage C soit utilisé dans ces articles, GTK4 dispose de liaisons pour d'autres langages de programmation. GTK est sous licence GNU Library General Public License v2.
 +
 +Gtk4 utilise la bibliothèque GObject, qui offre des fonctionnalités de programmation orientée objet (POO) grâce à des macros de type fonction. En POO, les constructeurs permettent d'initialiser un nouvel objet à partir d'une classe spécifique. Ainsi, lorsque vous utilisez l'API GTK4, celle-ci fournit une liste de classes avec leurs constructeurs, propriétés, méthodes et signaux.
 +
 +Les widgets sont les éléments fondamentaux de la création d'une application d'interface utilisateur graphique (GUI) GTK4. Ce sont des éléments d'interface utilisateur prédéfinis, tels que des étiquettes, des entrées de texte et des boutons. GtkWidget est la classe de base de tous les widgets. Chaque widget dérive de GtkWidget. Elle fournit un ensemble commun de propriétés, de méthodes et de signaux pour garantir la cohérence et le style des widgets.
 +
  
 **GTK4 API **GTK4 API
Ligne 29: Ligne 49:
  
 For example, the API information on the button class reveals that it has a constructor called gtk_button_new_with_label(), a property called has-frame and a signal called “clicked”. The “clicked” signal is emitted when the button has been pressed and released (activated). The has-frame property has getter and setter methods called gtk_button_get_has_frame() and gtk_button_set_has_frame() respectively.** For example, the API information on the button class reveals that it has a constructor called gtk_button_new_with_label(), a property called has-frame and a signal called “clicked”. The “clicked” signal is emitted when the button has been pressed and released (activated). The has-frame property has getter and setter methods called gtk_button_get_has_frame() and gtk_button_set_has_frame() respectively.**
 +
 +API GTK4
 +
 +Les informations de l'API GTK4 sont une ressource essentielle pour le développement d'une application GTK. Elles fournissent des informations sur les constructeurs, les propriétés, les méthodes et les signaux d'un objet. Consultez le lien externe de l'API GTK4 ci-dessous. Les propriétés représentent les données ou l'état d'un objet. Les méthodes sont des fonctions associées à un objet. Les signaux informent le programme qu'un événement est survenu sur l'objet et sont systématiquement connectés à des fonctions de rappel pour déclencher l'action appropriée. La macro de fonction g_signal_connect() permet de connecter une fonction de rappel à un signal pour un objet particulier.
 +
 +Par exemple, les informations de l'API sur la classe button révèlent qu'elle possède un constructeur appelé gtk_button_new_with_label(), une propriété appelée has-frame et un signal appelé « clicked ». Le signal « clicked » est émis lorsque le bouton est enfoncé puis relâché (activé). La propriété has-frame possède des méthodes getter (récupérer une valeur) et setter (définir une valeur) appelées respectivement gtk_button_get_has_frame() et gtk_button_set_has_frame().
 +
  
 **Install GTK4 **Install GTK4
Ligne 35: Ligne 62:
  
 With Ubuntu 24.04 the following packages need to be installed using the terminal commands below. With Ubuntu 24.04 the following packages need to be installed using the terminal commands below.
 +
 +sudo apt update
 +sudo apt install build-essential
 +sudo apt install libgtk-4-dev**
 +
 +Installer GTK4
 +
 +Pour créer des applications GTK à partir des sources, il est nécessaire d'installer le paquet libgtk-4-dev, qui contient les fichiers d'en-tête et de développement de la bibliothèque GTK4. L'installation de ce paquet libgtk-4-dev s'accompagne de l'installation d'autres bibliothèques, telles que GLib et Gio. GLib propose diverses structures de données, ainsi que des fonctions de manipulation de chaînes et de gestion de fichiers, couramment utilisées en programmation C. La bibliothèque Gio fournit des classes pour les entrées/sorties générales, la mise en réseau et la prise en charge de D-bus. Le méta-paquet build-essential est également requis. Il contient un ensemble d'outils logiciels et de bibliothèques essentiels à la création et à la compilation d'applications à partir du code source. Il comprend notamment la collection de compilateurs GNU (GCC) pour la programmation en C et C++, ainsi que GNU Make, un outil d'automatisation de la compilation permettant de gérer le processus de compilation d'un projet.
 +
 +Sous Ubuntu 24.04, ces paquets doivent être installés à l'aide des commandes de terminal ci-dessous.
  
 sudo apt update sudo apt update
Ligne 40: Ligne 77:
 sudo apt install libgtk-4-dev sudo apt install libgtk-4-dev
  
-A number of different code editors can be used when developing GTK applications including Geany and GNOME Builder.+ 
 +**A number of different code editors can be used when developing GTK applications including Geany and GNOME Builder.
  
 Geany can be installed using the Ubuntu App Center. Geany has an integrated terminal and a sidebar that has a symbols tab. This is very useful as it shows a list of symbols (functions, classes and variables) found within the current open file. This list can be filtered. Geany can be installed using the Ubuntu App Center. Geany has an integrated terminal and a sidebar that has a symbols tab. This is very useful as it shows a list of symbols (functions, classes and variables) found within the current open file. This list can be filtered.
  
 With Ubuntu 24.04 the latest version of GNOME Builder is installed using Flatpak. A tutorial on how to install Flatpak on Ubuntu is in the external links below. GNOME Builder can be used for developing both GTK4 and GNOME applications. In this series of articles, GNOME (libadwaita) applications are not being developed. Some feature highlights of GNOME Builder include browser pages so that GTK4 API information can be displayed within the IDE, code completion, integral terminal, build, rebuild, clean, and run command menu items.** With Ubuntu 24.04 the latest version of GNOME Builder is installed using Flatpak. A tutorial on how to install Flatpak on Ubuntu is in the external links below. GNOME Builder can be used for developing both GTK4 and GNOME applications. In this series of articles, GNOME (libadwaita) applications are not being developed. Some feature highlights of GNOME Builder include browser pages so that GTK4 API information can be displayed within the IDE, code completion, integral terminal, build, rebuild, clean, and run command menu items.**
 +
 +Plusieurs éditeurs de code peuvent être utilisés pour développer des applications GTK, notamment Geany et GNOME Builder.
 +
 +Geany peut être installé via l'App Center d'Ubuntu. Geany dispose d'un terminal intégré et d'une barre latérale avec un onglet Symboles. Cet onglet est très utile car il affiche la liste des symboles (fonctions, classes et variables) présents dans le fichier ouvert. Cette liste est filtrable.
 +
 +Avec Ubuntu 24.04, la dernière version de GNOME Builder s'installe avec Flatpak. Un tutoriel expliquant comment installer Flatpak sur Ubuntu est disponible dans les liens externes ci-dessous. GNOME Builder peut être utilisé pour développer des applications GTK4 et GNOME. Dans cette série d'articles, les applications GNOME (libadwaita) ne sont pas développées. Certaines fonctionnalités phares de GNOME Builder incluent des pages de navigateur permettant d'afficher les informations de l'API GTK4 dans l'IDE, la saisie semi-automatique du code, le terminal intégré, la construction, la reconstruction, le nettoyage et l'exécution des éléments du menu de commande.
 +
  
 **First Application **First Application
Ligne 53: Ligne 98:
  
 Notice that “org.gkt.demo” is the application ID. As an aside, GTK and GNOME make use of “reverse DNS” style identifiers for applications and a desktop file should be named using the application ID. That is <application_id>.desktop.** Notice that “org.gkt.demo” is the application ID. As an aside, GTK and GNOME make use of “reverse DNS” style identifiers for applications and a desktop file should be named using the application ID. That is <application_id>.desktop.**
 +
 +Première application
 +
 +Dans le téléchargement, ouvrez le fichier main.c. Il explique comment utiliser GTK4 pour créer une fenêtre contenant des widgets d'étiquettes et de boutons positionnés à l'aide d'un conteneur de mise en page de boîte. Un programme GTK4 doit commencer par la directive #include <gtk/gtk.h>. Celle-ci inclut tous les widgets, variables, fonctions et structures disponibles dans la boîte à outils GTK4, ainsi que les fichiers des autres bibliothèques dont GTK4 dépend.
 +
 +La fonction main est le point d'entrée du programme et permet de créer et d'exécuter un objet GtkApplication. Le pointeur appelé « app » est déclaré et initialisé à l'aide du constructeur gtk_application_new(). La macro de fonction g_signal_connect() connecte le signal « activate » à la fonction activate(). Le signal activate est émis au démarrage de l'application avec g_application_run() qui prend les arguments de la ligne de commande. La méthode g_object_unref() est appelée sur le pointeur d'application GtkApplication à la fermeture de l'application.
 +
 +Notez que « org.gkt.demo » correspond à l'ID de l'application. Par ailleurs, GTK et GNOME utilisent des identifiants de type « DNS inversé » pour les applications, et un fichier de bureau doit être nommé avec l'ID de l'application. Il s'agit de <application_id>.desktop.
 +
  
 **#include <gtk/gtk.h> **#include <gtk/gtk.h>
Ligne 92: Ligne 146:
  return status;  return status;
  }**  }**
 +
 +#include <gtk/gtk.h>
 + 
 + static void button_clicked (GtkButton *button, gpointer user_data)
 + {
 + GtkWidget *label =user_data;
 + gtk_label_set_text(GTK_LABEL(label),"Button Clicked");
 + }
 + 
 + static void activate (GtkApplication* app, gpointer user_data)
 + {
 + GtkWidget *window;
 + GtkWidget *button;
 + GtkWidget *label;
 + GtkWidget *box;
 + window = gtk_application_window_new (app);
 + gtk_window_set_title (GTK_WINDOW (window), "Hello Window");
 + gtk_window_set_default_size (GTK_WINDOW (window),400, 100); 
 + label =gtk_label_new("Programmation GTK4 en C");
 + box =gtk_box_new(GTK_ORIENTATION_VERTICAL,1);
 + gtk_window_set_child (GTK_WINDOW (window), box);
 + button = gtk_button_new_with_label ("Cliquez-moi");
 + gtk_button_set_has_frame(GTK_BUTTON(button),FALSE);
 + g_signal_connect (GTK_BUTTON (button),"cliqué", G_CALLBACK (button_clicked),label);
 + gtk_box_append(GTK_BOX(box), label);
 + gtk_box_append(GTK_BOX(box), button);
 + gtk_window_present(GTK_WINDOW (window));
 + }
 + 
 + int main (int argc, char **argv)
 + {
 + GtkApplication *app;
 + int status;
 + app = gtk_application_new ("org.gtk.demo", G_APPLICATION_DEFAULT_FLAGS);
 + g_signal_connect (app, "activate", G_CALLBACK (activate), NULL);
 + status = g_application_run (G_APPLICATION (app), argc, argv);
 + g_object_unref (app); 
 + return status;
 + }
 +
  
 **In the activate() function, a GTK window is created using the gtk_application_window_new() constructor. The window title “Hello Window” is set using gtk_window_set_title(). In GTK, GTK_WINDOW() is a macro that performs a type cast to convert a GtkWidget pointer to a GtkWindow pointer. The window size is set using gtk_window_set_default_size() and a window is displayed using gtk_window_present(). **In the activate() function, a GTK window is created using the gtk_application_window_new() constructor. The window title “Hello Window” is set using gtk_window_set_title(). In GTK, GTK_WINDOW() is a macro that performs a type cast to convert a GtkWidget pointer to a GtkWindow pointer. The window size is set using gtk_window_set_default_size() and a window is displayed using gtk_window_present().
  
 Button, label and box GtkWidget pointers are declared. The label widget is created using the gtk_label_new() constructor and its text set to “GTK4 Programming in C”. The button widget is created using the gtk_button_new_with_label() constructor with the button label text set to “Click Me”. The box layout container is created using the gtk_box_new() constructor and its orientation is set to vertical and is used to arrange child widgets (e.g. the label and button in this example). The gtk_box_append() method is used to add the label and then the button to the box container. The gtk_window_set_child() function is used to add the box to the window.** Button, label and box GtkWidget pointers are declared. The label widget is created using the gtk_label_new() constructor and its text set to “GTK4 Programming in C”. The button widget is created using the gtk_button_new_with_label() constructor with the button label text set to “Click Me”. The box layout container is created using the gtk_box_new() constructor and its orientation is set to vertical and is used to arrange child widgets (e.g. the label and button in this example). The gtk_box_append() method is used to add the label and then the button to the box container. The gtk_window_set_child() function is used to add the box to the window.**
 +
 +Dans la fonction activate(), une fenêtre GTK est créée à l'aide du constructeur gtk_application_window_new(). Le titre de la fenêtre, « Hello Window », est défini à l'aide de gtk_window_set_title(). En GTK, GTK_WINDOW() est une macro qui convertit un pointeur GtkWidget en pointeur GtkWindow par conversion de type. La taille de la fenêtre est définie à l'aide de gtk_window_set_default_size() et une fenêtre est affichée à l'aide de gtk_window_present().
 +
 +Les pointeurs GtkWidget de bouton, d'étiquette et de boîte sont déclarés. Le widget d'étiquette est créé à l'aide du constructeur gtk_label_new() et son texte est défini à « Programmation GTK4 en C ». Le widget de bouton est créé à l'aide du constructeur gtk_button_new_with_label() et son texte est défini à « Cliquez-moi ». Le conteneur de mise en page de la boîte est créé à l'aide du constructeur gtk_box_new(). Son orientation est verticale et permet d'organiser les widgets enfants (par exemple, l'étiquette et le bouton dans notre cas). La méthode gtk_box_append() permet d'ajouter l'étiquette, puis le bouton, au conteneur de la boîte. La fonction gtk_window_set_child() permet d'ajouter la boîte à la fenêtre.
 +
  
 **The button property “has-frame” is set to FALSE using the setter function gtk_button_set_has_frame(). Then g_signal_connect() is used to connect a callback function called button_clicked() to the “clicked” signal of the button. The function arguments of the button clicked callback function are the GtkButton and a gpointer. A gpointer (generic pointer) is an untyped pointer meaning that it is not associated with any data type and so requires casting. It has to be explicitly cast to the correct specific pointer type or else the compiler does not know how to interpret it. In this case the gpointer is the label widget. In the callback function the macro GTK_LABEL() casts the GtkWidget label pointer obtained from the gpointer user_data to a GtkLabel. The gtk_label_set_text() method then sets the label text to “Button Clicked”. When the button is clicked the text in the label changes to “Button Clicked”. **The button property “has-frame” is set to FALSE using the setter function gtk_button_set_has_frame(). Then g_signal_connect() is used to connect a callback function called button_clicked() to the “clicked” signal of the button. The function arguments of the button clicked callback function are the GtkButton and a gpointer. A gpointer (generic pointer) is an untyped pointer meaning that it is not associated with any data type and so requires casting. It has to be explicitly cast to the correct specific pointer type or else the compiler does not know how to interpret it. In this case the gpointer is the label widget. In the callback function the macro GTK_LABEL() casts the GtkWidget label pointer obtained from the gpointer user_data to a GtkLabel. The gtk_label_set_text() method then sets the label text to “Button Clicked”. When the button is clicked the text in the label changes to “Button Clicked”.
  
 There are macros similar to GTK_LABEL for almost every widget such GTK_ENTRY(object) which casts the object to GtkEntry*. A GtkEntry allows a user to input and edit a single line of text. These macros are a cornerstone of how GTK implements object oriented programming and type safety in the C language.** There are macros similar to GTK_LABEL for almost every widget such GTK_ENTRY(object) which casts the object to GtkEntry*. A GtkEntry allows a user to input and edit a single line of text. These macros are a cornerstone of how GTK implements object oriented programming and type safety in the C language.**
 +
 +La propriété du bouton « has-frame » est définie sur FALSE à l'aide de la fonction de définition gtk_button_set_has_frame(). Ensuite, g_signal_connect() est utilisée pour connecter une fonction de rappel appelée button_clicked() au signal « clicked » du bouton. Les arguments de la fonction de rappel de clic du bouton sont le GtkButton et un gpointer. Un gpointer (pointeur générique) est un pointeur non typé, ce qui signifie qu'il n'est associé à aucun type de données et nécessite donc un transtypage. Il doit être explicitement transtypé vers le type de pointeur spécifique approprié, sinon le compilateur ne sait pas comment l'interpréter. Dans ce cas, le gpointer est le widget d'étiquette. Dans la fonction de rappel, la macro GTK_LABEL() convertit le pointeur d'étiquette GtkWidget obtenu à partir des données utilisateur du gpointer en GtkLabel. La méthode gtk_label_set_text() définit ensuite le texte de l'étiquette à « cliqué ». Lorsqu'un utilisateur clique sur le bouton, le texte de l'étiquette devient « cliqué ».
 +
 +Il existe des macros similaires à GTK_LABEL pour presque tous les widgets, comme GTK_ENTRY(object) qui convertit l'objet en GtkEntry*. Une GtkEntry permet à l'utilisateur de saisir et de modifier une seule ligne de texte. Ces macros sont essentielles à la mise en œuvre par GTK de la programmation orientée objet et de la sécurité des types en langage C.
 +
  
 **Makefile **Makefile
Ligne 114: Ligne 218:
  
 The Makefile contains a target called ‘clean’ which will delete the executable and any object files so that a fresh build can be performed using the source code files which remain untouched. Running “make clean” at the command line removes the object file and the executable.** The Makefile contains a target called ‘clean’ which will delete the executable and any object files so that a fresh build can be performed using the source code files which remain untouched. Running “make clean” at the command line removes the object file and the executable.**
 +
 +Makefile
 +
 +GNU Make est un outil d'automatisation de la compilation qui gère le processus de compilation d'un projet. L'objectif général est de créer un Makefile pour compiler l'exécutable du projet avec les bibliothèques et les en-têtes GKT4. Make et d'autres systèmes de compilation sont utilisés en développement logiciel car ils ne recompilent les fichiers qu'en cas de modifications, ce qui est important pour les projets volumineux comportant de nombreux fichiers de code source. Une explication du Makefile de ce projet GTK4 est disponible dans le téléchargement du code ; seule son utilisation est donc abordée ici.
 +
 +Pour utiliser Makefile afin de compiler le projet de démonstration, ouvrez un terminal dans le répertoire du projet et exécutez la commande « make ». L'avantage de GNU Make est qu'une seule commande suffit pour compiler le projet.
 +
 +make
 +
 +Pour exécuter l'exécutable de démonstration, utilisez la commande ci-dessous (point barre oblique suivi du nom du programme).
 +
 +./demo
 +
 +Le Makefile contient une cible appelée « clean » qui supprime l'exécutable et tous les fichiers objets afin qu'une nouvelle compilation puisse être effectuée à partir des fichiers sources intacts. L'exécution de « make clean » en ligne de commande supprime le fichier objet et l'exécutable.
 +
  
 **External links **External links
Ligne 137: Ligne 256:
 Flatpak on Ubuntu: The Right Way to Set It Up and Use It Flatpak on Ubuntu: The Right Way to Set It Up and Use It
 https://www.youtube.com/watch?v=Pk_GeN5OC68** https://www.youtube.com/watch?v=Pk_GeN5OC68**
 +
 +Liens externes
 +
 +Boîte à outils GTK
 +https://www.gtk.org/
 +
 +API GTK4
 +https://docs.gtk.org/gtk4/
 +
 +Programmation en C avec Code Vault
 +https://www.youtube.com/@CodeVault
 +
 +Introduction aux Makefiles
 +https://www.gnu.org/software/make/manual/html_node/Introduction.html
 +
 +Geany est un éditeur de code source léger.
 +https://www.geany.org/
 +
 +GNOME Builder est un IDE pour le développement de logiciels basés sur GTK et GNOME.
 +https://gitlab.gnome.org/GNOME/gnome-builder
 +
 +Flatpak sur Ubuntu : comment l'installer et l'utiliser correctement.
 +https://www.youtube.com/watch?v=Pk_GeN5OC68
  
  
issue220/tutoriel1.1756618748.txt.gz · Dernière modification : 2025/08/31 07:39 de d52fr