Nexus: Opensuse 13.2

PyGObject : Modifier les widgets avec du CSS-like

Read

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;


}