Toolbar created using Glade (Vala)

Toolbar created using Glade (Vala) Tiffany Antopolski tiffany.antopolski@gmail.com 2012 Une barre de boutons Luc Rebert, traduc@rebert.name 2011 Alain Lojewski, allomervan@gmail.com 2011-2012 Luc Pionchon pionchon.luc@gmail.com 2011 Bruno Brouard annoa.b@gmail.com 2011-12 Luis Menina liberforce@freeside.fr 2014 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.

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.

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 :

]]>

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>

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

/* This is the Window */
class MyWindow : Gtk.ApplicationWindow {

	/* Declare these two ToolButtons, as we will get them
	 * from the ui file (see lines 32 and 33), so we can
	 * hide() and show() them as needed.*/
	Gtk.ToolButton fullscreen_button;
	Gtk.ToolButton leave_fullscreen_button;

	/* Constructor */
	internal MyWindow (MyApplication app) {
		Object (application: app, title: "Toolbar Example");

		this.set_default_size (400, 200);
		var grid = new Gtk.Grid ();
		this.add (grid);
		grid.show ();

		/* add the toolbar from the ui file */
		var builder = new Gtk.Builder ();
		try {
			builder.add_from_file ("toolbar_builder.ui");
		}
		/* Handle the exception */
		catch (Error e) {
			error ("Unable to load file: %s", e.message);
		}

		grid.attach (builder.get_object ("toolbar") as Gtk.Toolbar, 0, 0, 1, 1);

		/* get these objects from the ui file so we can toggle between them */
		fullscreen_button = builder.get_object ("fullscreen_button") as Gtk.ToolButton;
		leave_fullscreen_button = builder.get_object ("leave_fullscreen_button") as Gtk.ToolButton;

		/* create the "undo" window action action */
		var undo_action = new SimpleAction ("undo", null);
		undo_action.activate.connect (undo_callback);
		this.add_action (undo_action);

		/* create the "fullscreen" window action */
		var fullscreen_action = new SimpleAction ("fullscreen", null);
		fullscreen_action.activate.connect (fullscreen_callback);
		this.add_action (fullscreen_action);
	}

	void undo_callback (SimpleAction simple, Variant? parameter) {
			print ("You clicked \"Undo\".\n");
	}

	void fullscreen_callback (SimpleAction simple, Variant? parameter) {
		if ((this.get_window ().get_state () & Gdk.WindowState.FULLSCREEN) != 0) {
			this.unfullscreen ();
			leave_fullscreen_button.hide ();
			fullscreen_button.show ();
		}
		else {
			this.fullscreen ();
			fullscreen_button.hide ();
			leave_fullscreen_button.show ();
		}
	}
}

/* This is the application */
class MyApplication : Gtk.Application {
	protected override void activate () {
		new MyWindow (this).show ();
	}

	protected override void startup () {
		base.startup ();

		/* Create the "new" action and add it to the app*/
		var new_action = new SimpleAction ("new", null);
		new_action.activate.connect (new_callback);
		this.add_action (new_action);

		/* Create the "open" action, and add it to the app */
		var open_action = new SimpleAction ("open", null);
		open_action.activate.connect (open_callback);
		this.add_action (open_action);

		/* You could also add the action to the app menu
		 * if you wanted to.
		 */
		//var menu = new Menu ();
		//menu.append ("New", "app.new");
		//this.app_menu = menu;
	}

	void new_callback (SimpleAction action, Variant? parameter) {
		print ("You clicked \"New\".\n");
	}

	void open_callback (SimpleAction action, Variant? parameter) {
			print ("You clicked \"Open\".\n");
	}
}

/* The main function creates the application and runs it. */
int main (string[] args) {
	return new MyApplication ().run (args);
}

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

Gtk.Toolbar

Gtk.Toolbutton

Gtk.Stock