# Toolbar created using Glade (Python)

Tiffany Antopolski
tiffany.antopolski@gmail.com 2012
Marta Maria Casetti
mmcasetti@gmail.com 2012
Sebastian Pölsterl
sebp@k-d-w.org 2011
Une barre de boutons et autres éléments graphiques

# Barre d'outils créée avec Glade

Cet exemple est identique à , sauf que nous utilisons Glade pour créer la barre d'outils dans un fichier XML .ui.

# Création de la barre d'outils avec Glade

Pour créer la barre d'outils avec Glade :

ouvrez Glade et enregistrez le fichier sous toolbar_builder.ui

Screenshot of Glade ui

Au-dessous de Conteneurs, dans la partie gauche, faites un clic droit sur une icône de la barre d'outils et sélectionnez Ajouter un widget comme premier niveau.

Screenshot of toolbar icon in Glade ui

Dans l'onglet Général, dans la partie inférieure droite, modifiez le Nom en toolbar et mettez l'option Afficher la flèche à Non.

Screenshot of General tab

Dans l'onglet Commun, définissez Extension horizontaleà Oui.

Screenshot of Common tab

Faites un clic droit sur « toolbar » dans la partie en haut à droite et sélectionnez Éditer. La boîte de dialogue Éditeur de barre d'outils s'affiche.

Screenshot of where to right click to edit toolbar.

Nous voulons ajouter 5 ToolButtons (boutons) : « Nouveau », « Ouvrir », « Mode plein écran » et « Quitter le mode plein écran ». Ajoutons d'abord le ToolButton « Nouveau ».

Dans l'onglet Hiérarchie, cliquez sur Ajouter.

Modifiez le nom de l'élément outil (ToolItem) en new_button.

Faites défiler vers le bas et définissez Est important à Oui. Ceci provoque l'affichage de l'étiquette du ToolButton quand vous affichez la barre d'outils.

Saisissez le nom de l'action : app.new.

Modifiez le champ Étiquette en New (Nouveau).

Dans le menu déroulant « ID prédéfini », sélectionnez Nouveau, ou saisissez gtk-new.

Répétez les étapes ci-dessus pour tous les autres ToolButtons en leur attribuant les propriétés suivantes :

Nom | Est important | Nom de l'action | Étiquette | ID prédéfini
--- | --- | --- | --- | ---
open_button | Oui | app.open | Open (Ouvrir) | gtk-open
undo_button | Oui | win.undo | Undo (Annuler) | gtk-undo
fullscreen_button | Oui | win.fullscreen | Fullscreen (Mode plein écran) | gtk-fullscreen
leave_fullscreen_button | Oui | win.fullscreen | Leave Fullscreen (Quitter le mode plein écran) | gtk-leave-fullscreen

Fermez l'Éditeur de barre d'outils.

Au lancement du programme, nous ne voulons pas que le ToolButton Quitter le mode plein écran s'affiche, car nous ne sommes pas en mode plein écran. Dans l'onglet Commun, définissez la propriété Visible sur Non. Le ToolButton sera toujours présent dans le concepteur d'interface, mais se comportera comme souhaité quand le fichier sera chargé dans le code de votre programme. Notez que la méthode `show_all()` ne prend pas en compte ce réglage, de sorte qu'il nous faut utiliser `show()` séparément pour chaque élément.

Setting the visible property to No

Enregistrez votre travail et quittez Glade.

Vous pouvez voir le fichier XML créé par Glade ci-dessous. C'est la description de la barre d'outils. Au moment de la rédaction de ces lignes, l'option pour ajouter la classe Gtk.STYLE_CLASS_PRIMARY_TOOLBAR dans l'interface de Glade n'existait pas. Mais nous pouvons le faire manuellement. Pour cela, ajoutez le code XML suivant à la ligne 9 du fichier toolbar_builder.ui :

<style> <class name="primary-toolbar"/> </style>

Le programme fonctionnera malgré tout correctement si vous ne l'ajoutez pas, mais la barre d'outils que vous obtiendrez sera légèrement différente de celle de la capture d'écran en haut de cette page.

<?xml version="1.0" encoding="UTF-8"?> <interface> <!-- interface-requires gtk+ 3.0 --> <object class="GtkToolbar" id="toolbar"> <property name="visible">True</property> <property name="can_focus">False</property> <property name="hexpand">True</property> <property name="show_arrow">False</property> <child> <object class="GtkToolButton" id="new_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">app.new</property> <property name="label" translatable="yes">New</property> <property name="use_underline">True</property> <property name="stock_id">gtk-new</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="open_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">app.open</property> <property name="label" translatable="yes">Open</property> <property name="use_underline">True</property> <property name="stock_id">gtk-open</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="undo_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">win.undo</property> <property name="label" translatable="yes">Undo</property> <property name="use_underline">True</property> <property name="stock_id">gtk-undo</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="fullscreen_button"> <property name="use_action_appearance">False</property> <property name="visible">True</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">win.fullscreen</property> <property name="label" translatable="yes">Fullscreen</property> <property name="use_underline">True</property> <property name="stock_id">gtk-fullscreen</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> <child> <object class="GtkToolButton" id="leave_fullscreen_button"> <property name="use_action_appearance">False</property> <property name="can_focus">False</property> <property name="use_action_appearance">False</property> <property name="is_important">True</property> <property name="action_name">win.fullscreen</property> <property name="label" translatable="yes">Leave Fullscreen</property> <property name="use_underline">True</property> <property name="stock_id">gtk-leave-fullscreen</property> </object> <packing> <property name="expand">False</property> <property name="homogeneous">True</property> </packing> </child> </object> </interface>

# Code utilisé pour générer cet exemple

Le code ci-dessous ajoute la barre d'outils du fichier que nous venons de finir.

from gi.repository import Gtk from gi.repository import Gdk from gi.repository import Gio import sys

class MyWindow(Gtk.ApplicationWindow):

def __init__(self, app): Gtk.Window.__init__(self, title="Toolbar Example", application=app) self.set_default_size(400, 200)

# a grid to attach the toolbar (see below) grid = Gtk.Grid() self.add(grid) # we have to show the grid (and therefore the toolbar) with show(), # as show_all() would show also the buttons in the toolbar that we want to # be hidden (such as the leave_fullscreen button) grid.show()

# a builder to add the UI designed with Glade to the grid: builder = Gtk.Builder() # get the file (if it is there) try: builder.add_from_file("toolbar_builder.ui") except: print "file not found" sys.exit() # and attach it to the grid grid.attach(builder.get_object("toolbar"), 0, 0, 1, 1)

# two buttons that will be used later in a method self.fullscreen_button = builder.get_object("fullscreen_button") self.leave_fullscreen_button = builder.get_object( "leave_fullscreen_button")

# create the actions that control the window, connect their signal to a # callback method (see below), add the action to the window:

# undo undo_action = Gio.SimpleAction.new("undo", None) undo_action.connect("activate", self.undo_callback) self.add_action(undo_action)

# and fullscreen fullscreen_action = Gio.SimpleAction.new("fullscreen", None) fullscreen_action.connect("activate", self.fullscreen_callback) self.add_action(fullscreen_action)

# callback for undo def undo_callback(self, action, parameter): print "You clicked \"Undo\"."

# callback for fullscreen def fullscreen_callback(self, action, parameter): # check if the state is the same as Gdk.WindowState.FULLSCREEN, which # is a bit flag is_fullscreen = self.get_window().get_state( ) & Gdk.WindowState.FULLSCREEN != 0 if is_fullscreen: self.unfullscreen() self.leave_fullscreen_button.hide() self.fullscreen_button.show() else: self.fullscreen() self.fullscreen_button.hide() self.leave_fullscreen_button.show()

class MyApplication(Gtk.Application):

def __init__(self): Gtk.Application.__init__(self)

def do_activate(self): win = MyWindow(self) # show the window - with show() not show_all() because that would show also # the leave_fullscreen button win.show()

def do_startup(self): Gtk.Application.do_startup(self)

# actions that control the application: create, connect their signal to a # callback method (see below), add the action to the application

# new new_action = Gio.SimpleAction.new("new", None) new_action.connect("activate", self.new_callback) app.add_action(new_action)

# open open_action = Gio.SimpleAction.new("open", None) open_action.connect("activate", self.open_callback) app.add_action(open_action)

# callback for new def new_callback(self, action, parameter): print "You clicked \"New\"."

# callback for open def open_callback(self, action, parameter): print "You clicked \"Open\"."

app = MyApplication() exit_status = app.run(sys.argv) sys.exit(exit_status)

# Méthodes utiles pour Gtk.Builder

Consultez pour connaître les méthodes utiles à un élément graphique de barre d'outils

Gtk.Builder construit une interface à partir d'une définition XML d'une interface utilisateur.

La méthode `add_from_file(nomdufichier)` charge et analyse le fichier donné et le fusionne avec le contenu actuel de Gtk.Builder.

La méthode `add_from_string(chaîne)` charge et analyse la chaîne de caractères donnée et la fusionne avec le contenu actuel de Gtk.Builder.

La méthode `add_objects_from_file(nomdufichier, object_ids)` est identique à `add_from_file()`, mais elle ne charge que les objets qui possèdent les identifiants donnés par la liste `object_id`.

`add_objects_from_string(string, object_ids)` is the same as `add_from_string()`, but it loads only the objects with the ids given in the `object_id`s list.

La méthode `get_object(object_id)` récupère l'élément graphique possédant l'identifiant `object_id` à partir des objets chargés dans le constructeur.

La méthode `get_objects()` renvoie tous les objets chargés.

`connect_signals(handler_object)` connects the signals to the methods given in the `handler_object`. This can be any object which contains keys or attributes that are called like the signal handler names given in the interface description, e.g. a class or a dict. In line 39 the signal `"activate"` from the action `undo_action` is connected to the callback function `undo_callback()` using `action.connect(signal, callback function)`. See for a more detailed explanation.

# Références API

Dans cet exemple, les éléments suivants sont utilisés :

GtkGrid

GtkBuilder

GtkWidget

Event Structures