[GTK3+] Gestion des styles

**troumad** · 08/10/2015, 19h09

Bonjour

J'aimerai bien trouver un exemple ou avoir une explication afin de pouvoir modifier en cours de route le style d'un widget. Quelque chose du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
si (test1)
{
 affecter le style1;
]
sinon
{
 affecter le style1
}

Je n'arrive pas à voir comment faire.

**gerald3d** · 08/10/2015, 20h44

À priori depuis Gtk+ v3 il faut passer par les GtkStyleContext. Tu as une fonction pour les GtkWiget qui te permet de récupérer le GtkStyleContext : GtkStyleContext *gtk_widget_get_style_context (GtkWidget *widget);.

Ensuite tu as tout un tas de fonctions pour manipuler ce pointeur.

**troumad** · 08/10/2015, 21h40

Voici le code que j'ai testé :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
void couleur_item(GtkWidget *ChildWidget,signed short couleur)
{
    GtkStyleContext * css;
    GList * gl, * gl1;
 
    css=gtk_widget_get_style_context (ChildWidget);
    gl=gtk_style_context_list_classes (css);
 
    for(gl1=gl;gl1 != NULL; gl1= g_list_next(gl1))
    {
        gtk_style_context_remove_class (css,(char *)gl1->data);
    }
 
    switch (couleur)
    {
        case GRIS: gtk_style_context_add_class (css,"gris");
            break;
        case ROUGE: gtk_style_context_add_class (css,"rouge");
            break;
        case VERT: gtk_style_context_add_class (css,"vert");
            break;
        case VIOLET: gtk_style_context_add_class (css,"violet");
            break;
        case BLEU: gtk_style_context_add_class (css,"bleu");
            break;
        case JAUNE: gtk_style_context_add_class (css,"jaune");
            break;
        default:
            break;
    }
}

Voici mon css qui donen l'impression de marcher en lui-même :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
*
{
background-color: rgba(80%,80%,80%,.1);
}
 
 
GtkWindow {
    /*background-color: rgba(80%,100%,80%,1);*/
    background-image : url("images/dragon.jpg");
    background-position : top center;
    /*color : #000;*/
}
 
GtkLabel
{
    color : #000;
}
 
 
.gris
{
    background-color: rgba(80%,80%,80%,.5);
}
 
.vert
{
    background-color: rgba(50%,100%,50%,.5);
}
 
.jaune
{
    background-color: rgba(100%,85%,00%,.5);
}
 
.violet
{
    background-color: rgba(100%,85%,92%,.5);
}
 
.rouge
{
    background-color: rgba(100%,0%,0%,.5);
}
 
.bleu
{
    background-color: rgba(0%,100%,0%,.5);
}

Le problème (je ne teste pour le moment que avec rouge et gris), c'est que je dois enlever à la main le rouge )si je ne veux pas qu'il reste une fois qu'il s'est affiché.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

gtk_style_context_remove_class (css,"rouge");

En effet, la Glist est toujours vide.

**gerald3d** · 09/10/2015, 11h48

J'ai tenté de faire la même programmation en gtkmm avec mon propre widget. Effectivement la liste est vide !

La solution ne semble donc pas être de ce côté là. Peut du côté des GtkCssProvider...

**troumad** · 09/10/2015, 17h27

Il en faudrait une avec une entrée widget non ? Il n'y a rien qui correspond

**gerald3d** · 09/10/2015, 17h52

Si j'ai bien tout compris (dans la description des GtkCssProvider), tu ajoutes un GtkCssProvider à un GtkStyleContext avec la fonction gtk_style_context_add_provider();.

Comme tu vas utiliser un GtkStyleContext extrait du GtkWidget, il me semble, mais ca reste à tester, que tu vas naturellement ajouter un feuille de style indirectement au widget.

**troumad** · 09/10/2015, 20h53

Cette fois, l'anglais me dépasse... J'ai déjà mal à la tête avant d'essayer de lire (pas génial cette semaine), je n'ose pas me lancer plus dedans

En plus, si je fais des recherches, je ne trouve rien ou presque ou presque dessus !

**troumad** · 06/12/2015, 09h21

Bonjour

Ça marchait... Depuis hier, ça ne marche plus

Voici les deux fonctions que j'utilisais :
1) j'efface le style
2) je mets un style.

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
void couleur_item(GtkWidget *ChildWidget,signed short couleur)
{
    GtkStyleContext * css;
    GList * gl, * gl1;
 
    css=gtk_widget_get_style_context (ChildWidget);
    gl=gtk_style_context_list_classes (css);
 
    for(gl1=gl;gl1 != NULL; gl1= g_list_next(gl1))
    {
        gtk_style_context_remove_class (css,(char *)gl1->data);
    }
    g_list_free(gl);
    /*gtk_style_context_remove_class (css,"rouge");*/
 
    switch (couleur)
    {
        case GRIS: gtk_style_context_add_class (css,"gris");
            break;
        case ROUGE: gtk_style_context_add_class (css,"rouge");
            break;
        case ORANGE: gtk_style_context_add_class (css,"orange");
            break;
        case VERT: gtk_style_context_add_class (css,"vert");
            break;
        case VIOLET: gtk_style_context_add_class (css,"violet");
            break;
        case BLEU: gtk_style_context_add_class (css,"bleu");
            break;
        case JAUNE: gtk_style_context_add_class (css,"jaune");
            break;
        case GRISCLAIR: gtk_style_context_add_class (css,"grisclair");
            break;
        case GRISFONCE: gtk_style_context_add_class (css,"grisfonce");
            break;
        default:
            break;
    }
}
 
void couleur_item_efface(GtkWidget *ChildWidget,signed short couleur)
{
    GtkStyleContext * css;
 
    css=gtk_widget_get_style_context (ChildWidget);
    switch (couleur)
    {
        case GRIS: gtk_style_context_remove_class (css,"gris");
            break;
        case ROUGE: gtk_style_context_remove_class (css,"rouge");
            break;
        case ORANGE: gtk_style_context_remove_class (css,"orange");
            break;
        case VERT: gtk_style_context_remove_class (css,"vert");
            break;
        case VIOLET: gtk_style_context_remove_class (css,"violet");
            break;
        case BLEU: gtk_style_context_remove_class (css,"bleu");
            break;
        case JAUNE: gtk_style_context_remove_class (css,"jaune");
            break;
        case GRISCLAIR: gtk_style_context_remove_class (css,"grisclair");
            break;
        case GRISFONCE: gtk_style_context_remove_class (css,"grisfonce");
            break;
        default:
            break;
    }
}

Voilà que depuis hier, ça ne marche plus pour le texte des des spin boutons... J'ai cru à un bug de mon programme, mais je vois que tout ce fait comme il faut et ceci même à des endroits du programme non modifiés.

**Gaulouis** · 14/12/2015, 15h44

Bonjour à tous,

Pardonnez moi si je parle sans savoir, mais j'imagine que Gtk+3 utilise des classes css pour stylisé ses widgets (par défaut). C'est pourquoi je pense que c'est une mauvaise idée que de gtk_style_context_remove_class toute les classes présente dans un widget depuis la fonction couleur_item.

Peut être qu'un gtk_widget_queue_draw () remettrait les choses en ordre après un gtk_style_context_remove_class, gtk_style_context_add_class;

En espérant pouvoir aider,
A+

**troumad** · 14/12/2015, 18h42

Bonjour

Le gtk_style_context_remove_class n'enlève qu'une classe. La boucle posée en premier est inopérante, c'est pour ça que j'ai du mettre une fonction void couleur_item_efface(GtkWidget *ChildWidget,signed short couleur) qui enlève les styles pouvant être présents.
Après, je ne suis pas un expert en classe CSS... Et surtout pas avec GTK !

**Gaulouis** · 15/12/2015, 13h36

(En cherchant sur google, j'ai regardé les sources de Glade et dedans il y a un gtk_widget_queue_draw après gtk_style_context_add_class : Est-ce à prendre en compte ?)

Je me suis fait un exemple pour tester en Gtk+3 ...
Mais il n'y a qu'au moment d'appliqué les styles que je me suis rendu compte que tu utilisais background-color alors que sur un GtkLabel tu ne peux pas (de base) appliqué un background par ce qu'il utilise le GdkWindow de son parent (C'est pareil pour les GtkBox). Si tu souhaite appliquer un background, il te faudra utiliser un GtkEventBox qui contiendrais ton GtkLabel.

Mais ça c'est dans mon exemple. En relisant, tu parle de spin boutons. Dans mes feuille de style de mon système voici les règle utiliser pour coloré le texte d'un spinbutton

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
.spinbutton,
.spinbutton:hover {
    color: @fg_color;
}

Code C :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
/*
First save troumad.glade through Glade3
 
Save this file as troumad.cpp and compile it using this command
(those are backticks, not single quotes):
gcc -Wall -g -o troumad troumad.cpp `pkg-config --cflags --libs gtk+-3.0`
gcc `pkg-config --cflags gtk+-3.0` -o troumad troumad.cpp `pkg-config --libs gtk+-3.0`
 
Then execute it using:
  ./troumad
*/
#include <stdlib.h>
#include <string.h>
#include <gtk/gtk.h>
 
typedef enum _ColorName {
  COLOR_NAME_RED,
  COLOR_NAME_GREEN,
  COLOR_NAME_BLUE,
 
  COLOR_NAME_LENGTH
} ColorName;
 
typedef struct _LabelContext {
  GtkLabel *label;
  ColorName name; 
} LabelContext;
 
static GtkToggleToolButton *active = NULL;
 
static void cb_change_color (GtkWidget * p_wid, gpointer p_data)
{
  GtkToggleToolButton *current = (GtkToggleToolButton *) p_wid;
  if (active && active!=current) {
    gtk_toggle_tool_button_set_active (active, FALSE);
  }
  active = current;
  if (p_data) {
    gtk_toggle_tool_button_set_active (GTK_TOGGLE_TOOL_BUTTON(p_wid), TRUE);
  }
 
  LabelContext *p_ctx = (LabelContext *) g_object_get_data(G_OBJECT(p_wid), "my_data" );
  ColorName  couleur = p_ctx->name;// check if < COLOR_NAME_LENGTH
  GtkLabel  *label   = p_ctx->label;
 
  const char naming[COLOR_NAME_LENGTH][6] = {"red", "green", "blue"};
  GtkStyleContext * css = gtk_widget_get_style_context (GTK_WIDGET(label));
  if (gtk_toggle_tool_button_get_active (active)) {
    g_print("Enable color : %s\n", naming[couleur]);
    gtk_style_context_add_class (css, naming[couleur]);
  } else {
    g_print("Disable color : %s\n", naming[couleur]);
    gtk_style_context_remove_class (css, naming[couleur]);
  }
 
}
 
 
static void cb_quit (GtkWidget * p_wid, gpointer p_data)
{
   gtk_main_quit ();
}
 
 
int main (int argc, char ** argv)
{
   GtkBuilder  *  p_builder   = NULL;
   GError      *  p_err       = NULL;
 
 
   /* Initialisation de GTK+ */
   gtk_init (& argc, & argv);
 
   /* Creation d'un nouveau GtkBuilder */
   p_builder = gtk_builder_new ();
 
   if (p_builder != NULL)
   {
      /* Chargement du XML dans p_builder */
      gtk_builder_add_from_file (p_builder, "troumad.glade", & p_err);
 
      if (p_err == NULL)
      {
         /* 1.- Recuparation d'un pointeur sur la fenetre. */
         GtkWidget * p_win = (GtkWidget *) gtk_builder_get_object (
            p_builder, "window"
         );
         g_signal_connect(p_win, "destroy",
                          G_CALLBACK(cb_quit/*gtk_main_quit*/), NULL);  
 
				/* changement des style */
    GtkCssProvider *provider = gtk_css_provider_new ();
    GdkDisplay *display = gdk_display_get_default ();
    GdkScreen *screen = gdk_display_get_default_screen ( display );
    gtk_style_context_add_provider_for_screen ( screen, GTK_STYLE_PROVIDER ( provider ), GTK_STYLE_PROVIDER_PRIORITY_USER );
    gtk_css_provider_load_from_data ( GTK_CSS_PROVIDER ( provider ),
                                     ".red {\n"
                                     "   color: rgb(100%,0%,0%);\n"
                                     "}\n"
                                     ".green {\n"
                                     "   color: rgb(0%,100%,0%);\n"
                                     "}\n"
                                     ".blue {\n"
                                     "   color: rgb(0%,0%,100%);\n"
                                     "}\n"
                                      , -1, NULL);
 
 
         /* 2.- */
         GtkLabel *p_label = (GtkLabel*) gtk_builder_get_object(p_builder, "label1");
         LabelContext *red_ctx = g_new(LabelContext, 1);
                       red_ctx->label = p_label;
                       red_ctx->name = COLOR_NAME_RED;
         g_object_set_data(gtk_builder_get_object (p_builder, "button1"), "my_data", red_ctx);
         LabelContext *green_ctx = g_new(LabelContext, 1);
                       green_ctx->label = p_label;
                       green_ctx->name = COLOR_NAME_GREEN;
         g_object_set_data(gtk_builder_get_object (p_builder, "button2"), "my_data", green_ctx);
         LabelContext *blue_ctx = g_new(LabelContext, 1);
                       blue_ctx->label = p_label;
                       blue_ctx->name = COLOR_NAME_BLUE;
         g_object_set_data(gtk_builder_get_object (p_builder, "button3"), "my_data", blue_ctx);
 
         cb_change_color((GtkWidget*) gtk_builder_get_object (p_builder, "button3"), (gpointer) 1);
 
         /* Signal du bouton Rouge */
         g_signal_connect (
            gtk_builder_get_object (p_builder, "button1"),
            "clicked", G_CALLBACK (cb_change_color), NULL 
         );
 
         /* Signal du bouton Vert */
         g_signal_connect (
            gtk_builder_get_object (p_builder, "button2"),
            "clicked", G_CALLBACK (cb_change_color), NULL 
         );
 
         /* Signal du bouton Bleu */
         g_signal_connect (
            gtk_builder_get_object (p_builder, "button3"),
            "clicked", G_CALLBACK (cb_change_color), NULL 
         );
 
 
         GtkToolbar *p_toolbar = (GtkToolbar*) gtk_builder_get_object(p_builder, "toolbar1"); 
         GtkStyleContext *ctx = gtk_widget_get_style_context (GTK_WIDGET(p_toolbar));
         gtk_style_context_add_class (ctx, GTK_STYLE_CLASS_INLINE_TOOLBAR);
 
         gtk_widget_show_all (p_win);
         gtk_main ();
      }
      else
      {
         /* Affichage du message d'erreur de GTK+ */
         g_error ("%s", p_err->message);
         g_error_free (p_err);
      }
   }
 
 
   return EXIT_SUCCESS;
}

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
<?xml version="1.0" encoding="UTF-8"?>
<interface>
  <requires lib="gtk+" version="2.24"/>
  <!-- interface-naming-policy project-wide -->
  <object class="GtkWindow" id="window">
    <property name="can_focus">False</property>
    <child>
      <object class="GtkVBox" id="vbox1">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <child>
          <object class="GtkLabel" id="label1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">text</property>
          </object>
          <packing>
            <property name="expand">True</property>
            <property name="fill">True</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkToolbar" id="toolbar1">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="toolbar_style">text</property>
            <child>
              <object class="GtkToggleToolButton" id="button1">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="use_action_appearance">False</property>
                <property name="label">Rouge</property>
                <property name="use_underline">True</property>
              </object>
              <packing>
                <property name="expand">True</property>
                <property name="homogeneous">True</property>
              </packing>
            </child>
            <child>
              <object class="GtkToggleToolButton" id="button2">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="use_action_appearance">False</property>
                <property name="label">Vert</property>
                <property name="use_underline">True</property>
              </object>
              <packing>
                <property name="expand">True</property>
                <property name="homogeneous">True</property>
              </packing>
            </child>
            <child>
              <object class="GtkToggleToolButton" id="button3">
                <property name="visible">True</property>
                <property name="can_focus">False</property>
                <property name="use_action_appearance">False</property>
                <property name="label">Bleu</property>
                <property name="use_underline">True</property>
              </object>
              <packing>
                <property name="expand">True</property>
                <property name="homogeneous">True</property>
              </packing>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
      </object>
    </child>
  </object>
</interface>

Ca me sert d'exemple de GroupedToggleToolButton
Nom : troumad.png
Affichages : 802
Taille : 9,7 Ko

**troumad** · 15/12/2015, 19h56

Il faudra que j'étudie ton code. Il y a des choses intéressantes que je connaissais pas.

**MichelPlatini** · 21/12/2015, 15h58

si tu as Gtk >= 3.19.4 j'ai peut être une idée : les développeurs préparent 3.20 (4.0?) et ont refondu la partie CSS : https://blogs.gnome.org/mclasen/2015.../a-gtk-update/

avant cette version pour la modification du style je fais ceci (adapté d'un code vala

) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
int main (int argc, char ** argv) {
	gtk_init (&argc, &argv);
	GtkWindow* window = (GtkWindow*) gtk_window_new (GTK_WINDOW_TOPLEVEL);
	GError* err = NULL;
	GtkCssProvider* provider = gtk_css_provider_new ();
	gtk_css_provider_load_from_path (provider, "path", &err);
	if (G_UNLIKELY (err != NULL)) {
		// erreur : ...
	}
	GdkScreen* screen = gdk_screen_get_default ();
	gtk_style_context_add_provider_for_screen (screen, (GtkStyleProvider*) provider, (guint) GTK_STYLE_PROVIDER_PRIORITY_APPLICATION);
	/*
	 * reste du code 
	 */
	return 0;
}

**troumad** · 22/12/2015, 08h28

Envoyé par MichelPlatini

si tu as Gtk >= 3.19.4 j'ai peut être une idée : les développeurs préparent 3.20 (4.0?) et ont refondu la partie CSS : https://blogs.gnome.org/mclasen/2015.../a-gtk-update/

Comme je compte aussi faire tourner mon programme sous windows, je ne suis pas si pressé que ça !

**troumad** · 09/01/2016, 09h29

Avec l'aide de Gaulouis, j'ai modifié mon programme pour la gestion des styles :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
void couleur_item(GtkWidget *ChildWidget,signed short couleur)
{
/* On mémorise le dernier style dans une donnée attachée au widget.                      */
/* Si aucune donnée n'est actuellement mise : premier passage, on initialise le système. */
/* Si on veut remettre le même que l'actuel, on ne fait rien.                            */
 
    GtkStyleContext * css;
    unsigned short * pt_couleur= (unsigned short *) g_object_get_data(G_OBJECT(ChildWidget), "couleur" );
 
    css=gtk_widget_get_style_context (ChildWidget);
 
    if (pt_couleur && *pt_couleur==couleur)
    { /* même couleur : on ne change pas */
    }
    else
    {
        if (pt_couleur!=NULL)
        {   /* on enlève le style précédent */
            switch (*pt_couleur)
            {
                case GRIS: gtk_style_context_remove_class (css,"gris");
                    break;
                case ROUGE: gtk_style_context_remove_class (css,"rouge");
                    break;
                case ORANGE: gtk_style_context_remove_class (css,"orange");
                    break;
                case VERT: gtk_style_context_remove_class (css,"vert");
                    break;
                case VIOLET: gtk_style_context_remove_class (css,"violet");
                    break;
                case BLEU: gtk_style_context_remove_class (css,"bleu");
                    break;
                case JAUNE: gtk_style_context_remove_class (css,"jaune");
                    break;
                case GRISCLAIR: gtk_style_context_remove_class (css,"grisclair");
                    break;
                case GRISFONCE: gtk_style_context_remove_class (css,"grisfonce");
                    break;
                default:
                    break;
            }
        }
        else
        {   /* système non initialisé : on prépare la place mémoire */
            pt_couleur=(unsigned short *)malloc(sizeof(unsigned short));
        }
 
        switch (couleur)
        {   /* on met le nouveau style */
            case GRIS: gtk_style_context_add_class (css,"gris");
                break;
            case ROUGE: gtk_style_context_add_class (css,"rouge");
                break;
            case ORANGE: gtk_style_context_add_class (css,"orange");
                break;
            case VERT: gtk_style_context_add_class (css,"vert");
                break;
            case VIOLET: gtk_style_context_add_class (css,"violet");
                break;
            case BLEU: gtk_style_context_add_class (css,"bleu");
                break;
            case JAUNE: gtk_style_context_add_class (css,"jaune");
                break;
            case GRISCLAIR: gtk_style_context_add_class (css,"grisclair");
                break;
            case GRISFONCE: gtk_style_context_add_class (css,"grisfonce");
                break;
            default:
                break;
        }
        *pt_couleur=couleur; /* memorisation du style actuel */
        g_object_set_data(G_OBJECT(ChildWidget), "couleur",pt_couleur);
    }
}

On mémorise le dernier style dans une donnée attachée au widget.
Si aucune donnée n'est actuellement mise : premier passage, on initialise le système.
Si on veut remettre le même que l'actuel, on ne fait rien.

[GTK3+] Gestion des styles

GTK+ avec C & C++

Discussions similaires

Partager

Partager