<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" xmlns:xi="http://www.w3.org/2001/XInclude" type="guide" style="task" id="toolbar_builder.py" xml:lang="fr">

  <info>

    <title type="text">Toolbar created using Glade (Python)</title>

    <link type="guide" xref="beginner.py#menu-combo-toolbar"/>

    <link type="seealso" xref="toolbar.py"/>

    <link type="seealso" xref="grid.py"/>

    <link type="next" xref="menubar.py"/>

    <revision version="0.1" date="2012-07-17" status="draft"/>

    <credit type="author copyright">

      <name>Tiffany Antopolski</name>

      <email its:translate="no">tiffany.antopolski@gmail.com</email>

      <years>2012</years>

    </credit>

    <credit type="author copyright edit">

      <name>Marta Maria Casetti</name>

      <email its:translate="no">mmcasetti@gmail.com</email>

      <years>2012</years>

    </credit>

    <credit type="author copyright">

      <name>Sebastian Pölsterl</name>

      <email its:translate="no">sebp@k-d-w.org</email>

      <years>2011</years>

    </credit>

    <desc>Une barre de boutons et autres éléments graphiques</desc>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Luc Rebert,</mal:name>

      <mal:email>traduc@rebert.name</mal:email>

      <mal:years>2011</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Alain Lojewski,</mal:name>

      <mal:email>allomervan@gmail.com</mal:email>

      <mal:years>2011-2012</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Luc Pionchon</mal:name>

      <mal:email>pionchon.luc@gmail.com</mal:email>

      <mal:years>2011</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Bruno Brouard</mal:name>

      <mal:email>annoa.b@gmail.com</mal:email>

      <mal:years>2011-12</mal:years>

    </mal:credit>

    <mal:credit xmlns:mal="http://projectmallard.org/1.0/" type="translator copyright">

      <mal:name>Luis Menina</mal:name>

      <mal:email>liberforce@freeside.fr</mal:email>

      <mal:years>2014</mal:years>

    </mal:credit>

  </info>

  <title>Barre d'outils créée avec Glade</title>

  <media type="image" mime="image/png" src="media/toolbar.png"/>

  
Cet exemple est identique à <link xref="toolbar.py"/>, sauf que nous utilisons Glade pour créer la barre d'outils dans un fichier XML .ui.

<links type="sections"/>

<section id="glade">

<title>Création de la barre d'outils avec Glade</title>

  
Pour créer la barre d'outils avec <link href="http://glade.gnome.org/">Glade</link> :

  <steps>

    <item>
ouvrez Glade et enregistrez le fichier sous <file>toolbar_builder.ui</file>

          
<media type="image" src="media/glade_ui.png" width="900">

              Screenshot of Glade ui

           </media>

    </item>

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

          
<media type="image" src="media/glade_select_toolbar.png">

           Screenshot of toolbar icon in Glade ui

          </media>

    </item>

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

          
<media type="image" src="media/glade_toolbar_general.png">

             Screenshot of General tab

          </media>

    </item>

    <item>
Dans l'onglet <gui>Commun</gui>, définissez <gui>Extension horizontale</gui>à <gui>Oui</gui>.

         
<media type="image" src="media/glade_toolbar_common.png">

              Screenshot of Common tab

          </media>

     </item>

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

         
<media type="image" src="media/glade_toolbar_edit.png">

             Screenshot of where to right click to edit toolbar.

          </media>

   </item>

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

     <steps>

       <item>
Dans l'onglet <gui>Hiérarchie</gui>, cliquez sur <gui>Ajouter</gui>.
</item>

       <item>
Modifiez le nom de l'élément outil (ToolItem) en <input>new_button</input>.
</item>

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

       <item>
Saisissez le <gui>nom de l'action</gui> : <input>app.new</input>.
</item>

       <item>
Modifiez le champ <gui>Étiquette</gui> en <input>New</input> (Nouveau).
</item>

       <item>
Dans le menu déroulant « ID prédéfini », sélectionnez <gui>Nouveau</gui>, ou saisissez <input>gtk-new</input>.
</item>

     </steps>

     
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

          <media type="image" src="media/glade_toolbar_editor.png">

          </media>

    </item>

    <item>
Fermez l'<gui>Éditeur de barre d'outils</gui>.

   </item>

   <item>
Au lancement du programme, nous ne voulons pas que le ToolButton <gui>Quitter le mode plein écran</gui> s'affiche, car nous ne sommes pas en mode plein écran. Dans l'onglet <gui>Commun</gui>, définissez la propriété <gui>Visible</gui> sur <gui>Non</gui>. 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.

          
<media type="image" src="media/glade_visible_no.png">

                 Setting the visible property to No

          </media>

   </item>

    <item>
Enregistrez votre travail et quittez Glade.

   </item>

   <item>
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 <file>toolbar_builder.ui</file> :

  <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.

   </item>

</steps>

  <?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>

</section>

<section id="code">

<title>Code utilisé pour générer cet exemple</title>

  
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)

</section>

<section id="methods">

<title>Méthodes utiles pour Gtk.Builder</title>

Consultez <link xref="toolbar.py"/> 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.

<list>

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

<item>
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.
</item>

<item>
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.
</item>

<item>
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_ids list.
</item>

<item>
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.
</item>

<item>
La méthode get_objects() renvoie tous les objets chargés.
</item>

<item>
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 <link xref="signals-callbacks.py"/> for a more detailed explanation.

</item>

</list>

</section>

<section id="references">

<title>Références API</title>

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

<list>

  <item>
<link href="http://developer.gnome.org/gtk3/unstable/GtkGrid.html">GtkGrid</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/unstable/GtkBuilder.html">GtkBuilder</link>
</item>

  <item>
<link href="http://developer.gnome.org/gtk3/unstable/GtkWidget.html">GtkWidget</link>
</item>

  <item>
<link href="http://developer.gnome.org/gdk3/unstable/gdk3-Event-Structures.html#GdkEventWindowState">Event Structures</link>
</item>

</list>

</section>

</page>