Barra de herramientas creada con Glade (Vala)

Barra de herramientas creada con Glade (Vala) Tiffany Antopolski tiffany.antopolski@gmail.com 2012 Una barra de botones Daniel Mustieles daniel.mustieles@gmail.com 2011 - 2017 Nicolás Satragno nsatragno@gmail.com 2012 - 2013 Jorge González jorgegonz@svn.gnome.org 2011 Barra de herramientas creada con Glade

Este ejemplo es similar a , excepto que se usa Glade para crear la barra de herramientas en un archivo ui de XML.

Para crear la barra de herramientas usando el diseñador de interfaces Glade:

Abra Glade y guarde el archivo como toolbar_builder.ui

Captura de pantalla de la IU de Glade

Bajo Contenedores en el lado izquierdo, pulse con el botón derecho en el icono de la barra de herramientas y seleccione Añadir widget como nivel superior.

Captura de pantalla del icono de la barra de herramientas en la IU de Glade

Bajo la pestaña General en la parte inferior derecha, cambie el Nombre a toolbar y Mostrar flecha a No.

Captura de pantalla de la pestaña «General»

Bajo la pestaña Comunes, establezca Expansión horizontal a Sí.

Captura de pantalla de la pestaña «Común»

Pulse el botón derecho sobre la barra de herramientas en la parte superior derecha y seleccione Editar. La ventana Editor de barras de herramientas aparecerá.

Captura de pantalla que muestra dónde pulsar el botón derecho para editar la barra de herramientas.

Se quieren añadir 5 «ToolButton»: «New», «Open», «Undo», «Fullscreen», y «Leave Fullscreen». Primero, se añadirá el «ToolButton» «New».

Bajo la pestaña Jerarquía, pulse Añadir.

Cambie el nombre del «ToolItem» a new_button.

Deslícese hacia abajo y establezca Es Importante a Sí. Esto hará que la etiqueta del «ToolButton» se muestre cuando vea la barra de herramientas.

Introduzca el Nombre de la acción: app.new.

Cambie la Etiqueta a New.

Seleccione el ID del inventario Nuevo desde el menú desplegable, o escriba gtk-new.

Repita los pasos anteriores para los «ToolButton» restantes, con las siguientes propiedades:

Name	Es importante	Nombre de la acción	Etiqueta	ID del inventario
open_button	Sí	app.open	Open	gtk-open
undo_button	Sí	win.undo	Undo	gtk-undo
fullscreen_button	Sí	win.fullscreen	Fullscreen	gtk-fullscreen
leave_fullscreen_button	Sí	win.fullscreen	Leave Fullscreen	gtk-leave-fullscreen

Cierre el Editor de la barra de herramientas.

No se quiere que se vea el «ToolButton» Leave Fullscreen cuando el programa se inicie por primera vez, dado que la aplicación no estará en modo a pantalla completa. Puede establecer esto en la pestaña Comunes, pulsando No en la propiedad Visible. El «ToolButton» aparecerá de todos modos en el diseñador de interfaces, pero se comportará correctamente cuando se cargue el archivo en el código de su programa.

Establecer la propiedad «visible» a «No»

Guarde su trabajo y cierre Glade.

El archivo XML generado por Glade se muestra debajo. Este es la descripción de la barra de herramientas. En el momento en el que se escribe esto, la opción para añadir la clase «Gtk.STYLE_CLASS_PRIMARY_TOOLBAR» en el diseñador de interfaces Glade no existe. Se puede añadir manualmente al archivo XML. Para hacer esto, añada el siguiente código XML en la línea 9 de toolbar_builder.ui:


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

Si no añade esto, el programa seguirá funcionando bien. La barra de herramientas resultante se verá, sin embargo, ligeramente distinta a la de la captura de pantalla en la parte superior de esta página.

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

Ahora se crea el código siguiente, que añade la barra de herramientas desde el archivo que se acaba de crear.

/* 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);
}

En este ejemplo se usa lo siguiente:

Gtk.Toolbar

Gtk.Toolbutton

Gtk.Stock