Applicare stili css in Gtk3

Autore: Fabio Di Matteo
Ultima revisione: 03/03/2017 - 09:53

Dalla versione 3 in poi delle librerie Gtk è possibile applicare dei fogli di stile CSS ai widget proprio come si fa per le pagine web. Nell'articolo vedremo come fare.

Per ogni widget Glade possiede ,nella scheda delle proprieta' “Comuni” gli attributi del widget relativamente ai fogli di stile . Infatti possiamo vedere vedere “Nome widget” e “Classe di stile” che sono rispettivamente l'id del widget e la classe di stile a cui appartiene (nel css rappresentati come #id e .classe , ovvero con il simbolo # per l'id e . per la classe).

Realizziamo un foglio di stile come questo:

style.css

button {
	background-color: #FF0000;
}
 
 
#myLabel {
	 color: #0000FF;
	 background-image: linear-gradient(45deg, yellow, blue);
	 margin-bottom: 30px;
}
 
#btBigButton{
	background-image: linear-gradient(45deg, #008000, #78EB3E);
	border-radius: 25px;
 
}
 
#btBigButton:hover{
	font-size: 58px;
}
 
#btBigButton>label {
	background-color: transparent;
}

Per caricarlo occorre in sostanza creare un Provider css e applicarlo alla finestra. Ecco i punti salienti del codice

	/*Creo il provider che servira' per applicare lo stile Css*/
	GtkCssProvider* cssProvider =gtk_css_provider_new (); //Provider
	gchar* cssFilePath = g_build_filename("style.css", NULL);
	GFile*  cssFile =  g_file_new_for_path(cssFilePath);
	if (!gtk_css_provider_load_from_file (cssProvider,  cssFile,&error))
	{
		g_warning ("Problem on css provider: %s", error->message);
		g_error_free (error);
	}
 
	/*Applico il css sullo schermo corrente*/
	GdkScreen *myScreen= gdk_screen_get_default ();
	gtk_style_context_add_provider_for_screen
                               (myScreen,
                                GTK_STYLE_PROVIDER (cssProvider),
                                GTK_STYLE_PROVIDER_PRIORITY_USER);

main.c

#include <gtk/gtk.h>
 
int c;
void on_mainWindow_delete_event(GtkWidget *widget, gpointer   data);
 
 
void
push (GtkWidget *widget, gpointer   data)
{
  c++;
  gchar* title=g_strdup_printf("Hai cliccato %d volte", c);
  gtk_label_set_label (GTK_LABEL(data), title);
 
}
 
void clean(GtkWidget *widget, gpointer   data)
{
	gtk_label_set_label (GTK_LABEL(data), "Hai cliccato 0 volte");
	c=0;
}
 
 
void on_mainWindow_delete_event(GtkWidget *widget, gpointer   data)
{
	gtk_main_quit();
}
 
 
void mainWindowInit()
{
	GError* error = NULL;
	gchar* glade_file = g_build_filename("gui.ui", NULL);
	GtkBuilder *xml;  
	GObject *mainWindow, *btClean, *btPlus, *myLabel ;
 
	/*Creo il provider che servira' per applicare lo stile Css*/
	GtkCssProvider* cssProvider =gtk_css_provider_new (); //Provider
	gchar* cssFilePath = g_build_filename("style.css", NULL);
	GFile*  cssFile =  g_file_new_for_path(cssFilePath);
	if (!gtk_css_provider_load_from_file (cssProvider,  cssFile,&error))
	{
		g_warning ("Problem on css provider: %s", error->message);
		g_error_free (error);
	}
 
	/*Applico il css sullo schermo corrente*/
	GdkScreen *myScreen= gdk_screen_get_default ();
	gtk_style_context_add_provider_for_screen
                               (myScreen,
                                GTK_STYLE_PROVIDER (cssProvider),
                                GTK_STYLE_PROVIDER_PRIORITY_USER);
 
 
	/*Infine carica come disolito il file dell'interfaccia */
	xml = gtk_builder_new ();
	if (!gtk_builder_add_from_file  (xml, glade_file, &error))
	{
		g_warning ("Couldn\'t load builder file: %s", error->message);
		g_error_free (error);
	}
 
	mainWindow=gtk_builder_get_object (xml,"mainWindow" );
	btPlus=gtk_builder_get_object (xml,"btPlus" );
	btClean=gtk_builder_get_object (xml,"btClean" );
	myLabel=gtk_builder_get_object (xml,"label" );
 
	g_object_unref( G_OBJECT( xml ) );
	g_signal_connect (mainWindow, "destroy", G_CALLBACK (on_mainWindow_delete_event), NULL);
	g_signal_connect (btPlus, "clicked", G_CALLBACK (push), myLabel);
	g_signal_connect (btClean, "clicked", G_CALLBACK (clean), myLabel);
 
 
 
 
}
 
 
 
 
int main (int    argc,  char **argv)
{
	gtk_init (&argc, &argv);
	mainWindowInit();
	gtk_main ();
 
  return 0;
}

gui.ui

<?xml version="1.0" encoding="UTF-8"?>
<!-- Generated with glade 3.20.0 -->
<interface>
  <requires lib="gtk+" version="3.20"/>
  <object class="GtkWindow" id="mainWindow">
    <property name="visible">True</property>
    <property name="can_focus">False</property>
    <property name="resizable">False</property>
    <signal name="delete-event" handler="on_mainWindow_delete_event()" swapped="no"/>
    <child>
      <object class="GtkBox">
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="orientation">vertical</property>
        <child>
          <object class="GtkAlignment">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <placeholder/>
            </child>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="padding">7</property>
            <property name="position">0</property>
          </packing>
        </child>
        <child>
          <object class="GtkLabel" id="label">
            <property name="name">myLabel</property>
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <property name="label" translatable="yes">Pronto.</property>
            <attributes>
              <attribute name="font-desc" value="Nimbus Sans Narrow Bold Oblique Semi-Condensed 40"/>
            </attributes>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">1</property>
          </packing>
        </child>
        <child>
          <object class="GtkButton" id="btBigButton">
            <property name="label" translatable="yes">Non fa niente</property>
            <property name="name">btBigButton</property>
            <property name="visible">True</property>
            <property name="can_focus">True</property>
            <property name="receives_default">True</property>
          </object>
          <packing>
            <property name="expand">False</property>
            <property name="fill">True</property>
            <property name="position">2</property>
          </packing>
        </child>
      </object>
    </child>
    <child type="titlebar">
      <object class="GtkHeaderBar">
        <property name="name">HeaderBar</property>
        <property name="visible">True</property>
        <property name="can_focus">False</property>
        <property name="title">Titolo Applicazione</property>
        <property name="subtitle">Applicazione d'esempio</property>
        <property name="show_close_button">True</property>
        <child>
          <object class="GtkBox">
            <property name="visible">True</property>
            <property name="can_focus">False</property>
            <child>
              <object class="GtkButton" id="btPlus">
                <property name="label">gtk-add</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="use_stock">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">0</property>
              </packing>
            </child>
            <child>
              <object class="GtkButton" id="btClean">
                <property name="label">gtk-clear</property>
                <property name="visible">True</property>
                <property name="can_focus">True</property>
                <property name="receives_default">True</property>
                <property name="use_stock">True</property>
              </object>
              <packing>
                <property name="expand">False</property>
                <property name="fill">True</property>
                <property name="position">2</property>
              </packing>
            </child>
          </object>
        </child>
      </object>
    </child>
  </object>
</interface>

makefile

all:
	gcc  main.c -o simple  `pkg-config --cflags --libs gtk+-3.0`