Free online content available in this course.

Got it!

Last updated on 1/8/18

Le texte avec les labels

Log in or subscribe for free to enjoy all this course has to offer!

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.

Les GtkLabels

Créer un label

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 :

void gtk_container_add (GtkContainer *container, GtkWidget *widget);

Les paramètres :

  • container : Le nom du widget qui contiendra notre label. Dans notre cas, c'est la fenêtre.

  • widget : Le nom du widget à ajouter. Ici, nous rajouterons notre label

N'oubliez pas d'afficher la fenêtre et le label, pour ce faire utilisez la fonction gtk_widget_show_all ! ;)

Récupérer et modifier un label

Récupérer un label

Dans certains programmes, il est parfois nécessaire de récupérer le contenu d'un label. Là aussi, une fonction très simple :

const gchar* gtk_label_get_label (GtkLabel *label);

Le paramètre :

  • 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.

void gtk_label_set_label (GtkLabel *label, const gchar *str);

Les paramètres :

  • label : Le nom du label que l'on veut modifier.

  • str : Le nouveau texte que l'on veut mettre dans le label.

Les Accents

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 :

Changer le style d'un label

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

void gtk_label_set_justify (GtkLabel *label, GtkJustification jtype);

Les paramètres :

  • 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 :

void gtk_label_set_use_markup (GtkLabel *label, gboolean setting);

Les paramètres :

  • label : Le label à qui on veut appliquer les balises.

  • setting : On met TRUE pour que ça marche.

On utilise pas notre fonction de conversion

Si vous n'avez pas de caractères spéciaux à convertir, l'utilisation de cette fonction sera plus adaptée.

void gtk_label_set_markup (GtkLabel *label, const gchar *str);

Les paramètres :

  • label : Le label à qui on veut appliquer les balises.

  • str : On met ici le texte avec les balises que l'on souhaite afficher

C'est fini, il ne reste plus qu'à afficher le label.

Exemple

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 :

Gtk Label

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 !

Example of certificate of achievement
Example of certificate of achievement