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.
