Gtk3 on Touhami's Space

[Python] Utiliser GtkSourceView avec un fichier Glade

Mon, 08 Jul 2013 13:48:49 +0000

Il y a trop peu de documentation sur l’utilisation de GtkSourceView3 et encore moins avec Glade. Donc voici un petit tutoriel simpliste pour démarrer.

Installation du paquet de developpement GtkSourceView

Il vous faut installer le paquet gtksourceview3-devel sur Fedora :

# yum install gtksourceview3-devel

ou libgtksourceview-3.0-dev sur Debian :

# apt-get install libgtksourceview-3.0-dev

Ceci ajoute le catalogue (support) de GtkSourceView dans Glade.

Catalogue GtkSourceView dans Glade

Exemple d’utilisation

from gi.repository import Gtk, GtkSource, GObject

class MyApp(object): def __init__(self):
    self.builder = Gtk.Builder()
    GObject.type_register(GtkSource.View)
    self.builder.add_from_file("ui.glade")

if __name__ == '__main__':
    gui = MyApp()
    Gtk.main()

Remarque

Il est important d’enregistrer le type GtkSource.View comme dans la 6éme ligne. Sinon, ça ne marchera pas.

GTK+3 et style CSS

Sat, 08 Dec 2012 22:05:00 +0000

GTK+3 donne la possibilité de donner du style aux applications et les widgets via une description CSS-like très naturelle. Les designeurs familiers au CSS pourront donc créer facilement de fabuleuses interfaces au design totalement personnalisable.

Il est à noter qu’en Qt, il est possible d’appliquer du CSS directement via l’éditeur visuel de fenêtres. Mais pour GTK+, il vas falloir le faire programmatiquement, (On peut désormé appliquer des classe de style depuis Glade) mais ce n’est pas si compliqué. C’est d’une facilité déconcertante.

Je vais dans cet article vous montrer comment appliquer du CSS à une interface GTK+ en Python (PyGobject).

De la théorie

Pour utiliser ce fichu CSS, on va devoir nous servir de l’objet Gtk.CssProvider. On indique à ce CssProvider notre feuille de style qu’on charge soit depuis un fichier .css soit d’une variable string. Il ne reste plus qu’à appliquer ce CSS. En d’autres termes, on charge du CSS dans un provider, qu’on ajoute au contexte stylistique d’un widget ou de toute l’application.

Dans la suite, ce qui appliquera réellement du style CSS est la ligne : widget.get_style_context().add_provider(css, 600) Le 600 de la fin indique l’indice de priorité d’exécution du style. Plus cet indice est bas, plutôt le style sera appliqué et plus il aura de chance de se faire écraser. Je crois que cette ligne parle d’elle même et n’as pas besoin de plus d’explications. Mais si vous avez des questions, n’hésitez surtout pas à ne pas les poser, en commentaire ;).

Appliquer le CSS sur l’ensemble de l’application

from gi.repository import Gtk, Gdk

css = Gtk.CssProvider()

# css.load_from_file(file)
css.load_from_data('''
GtkEntry {
    color: #900185;
}''')

Gtk.StyleContext.add_provider_for_screen(Gdk.Screen.get_default(),
       css, Gtk.STYLE_PROVIDER_PRIORITY_APPLICATION)

entry = Gtk.Entry()

css = Gtk.CssProvider()

# css.load_from_file(file)
css.load_from_data('''
GtkEntry {
    color: #900185;
}
''')

entry.get_style_context().add_provider(css, 600)

Selecteurs

On peut utiliser les sélecteurs CSS et de la même façon. Toutefois, il est plus commode de faire quelques rappels par ici. Il faut indiquer le nom de la class du widget comme qui dirait en C à la place des noms des éléments. On doit donc préfixer le nom du widget par un Gtk. Par exemple GtkEntry, et pas juste un Entry. Les noms des widgets (ceux que vous leurs donner) jouent le rôle des IDs.

Voici quelques exemples de ce qu’on peut faire. Ce sont les exemples de la documentation officielle. J’ai simplement traduit les commentaires.

/* Donne du style aux labels qui descendent d'une fenêtre */
GtkWindow GtkLabel {
    background-color: #898989
}

/* Donne du style aux notebooks et tout ce qui se trouve
 à l’intérieur */
GtkNotebook {
    background-color: #a939f0
}

/* Donne du style aux combo boxes, et les entries qui
 descendent directement de notebook */
GtkComboBox,
GtkNotebook > GtkEntry {
    color: @fg_color;
    background-color: #1209a2
}

/* Donne du style à n'importe quel widget à
 l'intérieur d'un GtkBin */
GtkBin * {
    font: Sans 20
}

/* Donne du style à un label nommé title-label */
GtkLabel#title-label {
    font: Sans 15
}

/* Donne du style à tout widget nommé main-entry */
#main-entry {
    background-color: #f0a810
}

/* Donne du style à tous les widget définissants la class entry */
.entry {
    color: #39f1f9;
}

/* Donne du style seulement aux entries des spinbuttons */
GtkSpinButton.entry {
    color: #900185
}

Toolbar GTK+ 3

Tue, 25 Sep 2012 17:18:53 +0000

Si vous créez des toolbars avec GTK+ 3 elle ne suivra pas le style des autres applications et ne s’affichera pas avec le fond cool peu plus sombre que le reste de la fenêtre, mais vous aurez une simple toolbar que l’on confond avec le reste de la fenêtre.

[gallery columns=“2” ids=“232,233”]

La solution consiste à indiquer au programme la toolbar principale et il GTK+ 3 s’occupera de tout.

Je n’es pas réussi a trouver de paramètres dans Glade pour se faire, mais vous pouvez ajouter ces trois lignes dans la description de la toolbar directement dans le fichiers .glade dans le noeud <object class="GtkToolbar"/>

<class name="primary-toolbar"/>

UPDATE : Il est désormais possible d’indiquer la class primary-toolbar depuis Glade.

C’est universel est sa marche partout, ~~mais il n’y a pas d’options pour le faire via l’interface de Glade pour le moment, enfin, à ce que je sache~~. Il y a aussi la class “inline-toolbar” qui est utile si vous voulez mettre votre toolbar au milieux de la fenêtre. Le rendu est presque le même, mais le bord sont de façon a ce qu’il ne touche pas les bord de la fenêtre.

Dans ce qui suit, on va faire la même chose, mais programmatiquement.

Python

Voici le code magique :

toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR)

Exemple :

from gi.repository import Gtk

class CoolToolbar:
	def __init__(self):
		self.win = Gtk.Builder()
		self.win.add_from_file("toolbar.glade")
		self.toolbar = self.win.get_object("toolbar")
		self.toolbar.get_style_context().add_class(Gtk.STYLE_CLASS_PRIMARY_TOOLBAR)
		self.win.connect_signals(self)

	def quit(self, widget):
		Gtk.main_quit()

if __name__ == "__main__":
	CoolToolbar()
	Gtk.main()

C++

En C++, il faut d’abord ajouter le header gtkmm/stylecontext.h et se servir du code magique. Notez que si vous utilisez le header gtkmm.h vous pouvez omettre d’utiliser gtkmm/stylecontext.h comme dans l’exemple. m_toolbar->get_style_context()->add_class(GTK_STYLE_CLASS_PRIMARY_TOOLBAR);