PyGObject : Modifier les widgets avec du CSS-like


Dans ce billet on va explorer une manière de rendre nos applications crées avec Gtk (codées avec Python ou Toutes les langues de programmation supportant la bibliothèque Gtk+). 
GtkCssProvider est un module de la bibliothèque Gtk qui permet de faire du CSS-like, c'est à dire un concept de feuille de style similaire au CSS utilisé dans les sites web et dans les navigateurs web.
Par exemple remarquant la différence entre ces deux versions de la même application :

Sans l'utilisation de CSS

Avec l'utilisation de CSS

Parlons du code maintenant. 
Je vais présenter cet aspect de CSS-like avec PyGObject (Python + Gtk+) dans un court exemple.
Je vous laisse avec le code : 

Code de la fenêtre principale :


#!/usr/bin/env python


# -*- coding: utf-8 -*-




from gi.repository import Gtk, Gdk




class Example(Gtk.Window):


"""


Utilisation de CSS avec Python et Gtk


"""


def __init__(self):


Gtk.Window.__init__(self, title="PyGtk & CSS")


self.set_default_size(400,400)


# Nom de la fenêtre


self.set_name("MyWindow")




# CSS Thème


#Création d'un Gtk.CssProvider


style_provider = Gtk.CssProvider()


# Ouvrir notre fichier de style 


# en mode rb = Read en binaire


css = open('style.css', 'rb')


# Lire les données du fichier


css_data = css.read()


# Fermeture du fichier


css.close()


# Extraire les données CSS du fichier lu


style_provider.load_from_data(css_data)


# Ajouter les données lus au style provider


# en précisant la priorité d'affichage


Gtk.StyleContext.add_provider_for_screen(


Gdk.Screen.get_default(),


style_provider,


Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)




# Création d'un box


box = Gtk.VBox()


# Ajout du box à la fenêtre principale


self.add(box)


# Création d'un Label


self.label = Gtk.Label("Je suis un LABEL")


# Création d'un boutton


button = Gtk.Button("I'm a Button")


# Ajouter un signal au boutton qui fait 


# changer le texte du Label


button.connect("clicked", self.changer)


# Ajouter le Label et le boutton au box 


# qui fait partie de la fenêtre principale


box.pack_start(self.label,True, True, 0)


box.pack_start(button, True, True, 0)


# Tout afficher dans la fenêtre


self.show_all()






def changer(self, widget):


"""


Changer le Label 


"""


txt = self.label.get_text()


if txt == "Je suis un LABEL":


self.label.set_text("Catch me if you can !")


elif txt == "Catch me if you can !" :


self.label.set_text("ha ha ha you don't?")


else :


self.label.set_text("Funny!!!")




if __name__ == '__main__':


# Création d'une variable qui contient 


# la fenêtre principale


win = Example()


# Ajouter le signal de destruction de


# la fenêtre à la fenêtre principale


win.connect("delete-event", Gtk.main_quit)


# Boucle principale


Gtk.main()








Code CSS : 


#MyWindow{


  background-color: black;


  font-size: 20px;


  color: green;


}


/* Tous les bouttons nommés button seront colorés de 


la même manière : .button


Les Widget de type GtkButton seront modifiés */


GtkButton{


           color: blue;


           background: grey;


}




Et voilà la résultat : 

Pour plus d'informations, veuillez : Cliquer ICI.