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.