<page xmlns="http://projectmallard.org/1.0/" xmlns:its="http://www.w3.org/2005/11/its" type="topic" id="image-viewer.cpp" xml:lang="es">

  <info>

    <link type="guide" xref="cpp#examples"/>

    <desc>Algo más que una sencilla aplicación «Hola mundo» en GTKmm.</desc>

    <revision pkgversion="0.1" version="0.1" date="2011-03-18" status="review"/>

    <credit type="author">

      <name>Proyecto de documentación de GNOME</name>

      <email its:translate="no">gnome-doc-list@gnome.org</email>

    </credit>

    <credit type="author">

      <name>Johannes Schmid</name>

      <email its:translate="no">jhs@gnome.org</email>

    </credit>

    <credit type="editor">

      <name>Marta Maria Casetti</name>

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

      <years>2013</years>

    </credit>

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

      <mal:name>Daniel Mustieles</mal:name>

      <mal:email>daniel.mustieles@gmail.com</mal:email>

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

    </mal:credit>

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

      <mal:name>Nicolás Satragno</mal:name>

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

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

    </mal:credit>

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

      <mal:name>Jorge González</mal:name>

      <mal:email>jorgegonz@svn.gnome.org</mal:email>

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

    </mal:credit>

  </info>

<title>Visor de imágenes</title>

<synopsis>

  
En este tutorial aprenderá:

  <list>

    <item>
Algunos conceptos básicos de programación en C++/GObject
</item>

    <item>
Cómo escribir una aplicación GTK en C++
</item>

  </list>

</synopsis>

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

<section id="anjuta">

  <title>Crear un proyecto en Anjuta</title>

  
Antes de empezar a programar, deberá configurar un proyecto nuevo en Anjuta. Esto creará todos los archivos que necesite para construir y ejecutar el código más adelante. También es útil para mantener todo ordenado.

  <steps>

    <item>

    
Inicie Anjuta y pulse <guiseq><gui>Archivo</gui><gui>Nuevo</gui><gui>Proyecto</gui></guiseq> para abrir el asistente de proyectos.

    </item>

    <item>

    
Elija <gui>GTKmm (simple)</gui> de la pestaña <gui>C++</gui>, pulse <gui>Adelante</gui> y rellene los detalles en las siguientes páginas. Use <file>visor-imagenes</file> como nombre de proyecto y de carpeta.

   	</item>

    <item>

    
Asegúrese de que <gui>Usar GtkBuilder para la interfaz del usuario</gui> está desactivado, ya que, en este tutorial, la IU se creará manualmente. Revise el tutorial del <link xref="guitar-tuner.cpp">afinador de guitarra</link> si quiere aprender a usar el constructor de interfaces.

    </item>

    <item>

    
Pulse <gui>Aplicar</gui> y se creará el proyecto. Abra <file>src/main.cc</file> desde las pestañas <gui>Proyecto</gui> o <gui>Archivo</gui>. Debería ver algo de código que comience con las líneas:

#include <gtkmm.h>

#include <iostream>

#include "config.h">

    </item>

  </steps>

</section>

<section id="build">

  <title>Construir el código por primera vez</title>

  
Esto es una configuración de código C++ usando GTKmm. Se ofrecen más detalles a continuación; omita esta lista si entiende los conceptos básicos:

  <list>

  <item>

    
Las tres líneas #include en la parte superior incluyen las bibliotecas config (definiciones útiles para construcción con autoconf), gtkmm (interfaz de usuario) iostream (C++-STL). Las funciones de estas bibliotecas se usan en el resto del código.

   </item>

   <item>

    
La función main crea una ventana (vacía) nueva y establece el título de la ventana.

   </item>

   <item>

    
La llamada kit::run() inicia el bucle principal de GTKmm, que ejecuta la interfaz de usuario y empieza a escuchar eventos (como pulsaciones del ratón y del teclado). Como se ha pasado la ventana como argumento a esta función, la aplicación se cerrará automáticamente cuando se cierre la ventana.

   </item>

  </list>

  
Este código está listo para usarse, por lo que puede compilarlo pulsando <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> (o pulsando <keyseq><key>Mayús</key><key>F7</key></keyseq>).

  
Pulse <gui>Ejecutar</gui> en la siguiente ventana que aparece para configurar una construcción de depuración. Esto sólo necesita hacer una vez para la primera construcción.

</section>

<section id="ui">

<title>Crear la interfaz de usuario</title>

Ahora se dará vida a la ventana vacía. GTKmm organiza la interfaz de usuario con varios Gtk::Container que pueden contener otros widgets e incluso otros contenedores. Aquí se usará el contenedor más sencillo disponible, una Gtk::Box:

int

main (int argc, char *argv[])

{

	Gtk::Main kit(argc, argv);

	Gtk::Window main_win;

	main_win.set_title ("image-viewer-cpp");

	Gtk::Box* box = Gtk::manage(new Gtk::Box());

	box->set_orientation (Gtk::ORIENTATION_VERTICAL);

	box->set_spacing(6);

	main_win.add(*box);

	image = Gtk::manage(new Gtk::Image());

	box->pack_start (*image, true, true);

	Gtk::Button* button = Gtk::manage(new Gtk::Button("Open Image…"));

	button->signal_clicked().connect (

		sigc::ptr_fun(&on_open_image));

	box->pack_start (*button, false, false);

	main_win.show_all_children();

	kit.run(main_win);

	return 0;

}

  <steps>

    <item>

    
La primera línea crea los widgets que se quieren usar: un botón para abrir una imagen, el widget del visor de imágenes en sí y la caja que se usará como contenedor.

    </item>

    <item>

    
Las llamadas a pack_start añaden los dos widgets a la caja y definen su comportamiento. La imagen se expandirá en cualquier espacio disponible, mientras que el botón será tan grande como se necesite. Se dará cuenta de que no se establecen tamaños explícitos de los widgets. Generalmente, en GTKmm no se necesita ya que hace que sea mucho más sencillo tener una distribución que se ve bien con diferentes tamaños de la ventana. A continuación, se añade la caja a la ventana.

    </item>

    <item>

    
Se debe definir qué sucede cuando el usuario pulsa el botón. GTKmm usa el concepto de señales. Cuando se pulsa el botón, emite la señal clicked, que se puede conectar a alguna acción. Esto se ha hecho usando el método signal_clicked().connect, que indica a GTKmm que llame a la función on_open_image cuando se pulsa el botón y que pase la imagen como un argumento adicional a la función. El retorno de la llamada se definirá en la siguiente sección.

    </item>

    <item>

    
El último paso es mostrar todos los widgets en la ventana usando show_all_children(). Esto es equivalente a usar el método show() en cada uno de los widgets.

    </item>

  </steps>

</section>

<section id="show">

<title>Mostrar la imagen</title>

Ahora se definirá el manejador de la señal clicked para el botón mencionado anteriormente. Añada este código antes del método main.

Gtk::Image* image = 0;

static void

on_open_image ()

{

	Gtk::FileChooserDialog dialog("Open image",

	                              Gtk::FILE_CHOOSER_ACTION_OPEN);

	dialog.add_button (Gtk::Stock::OPEN,

	                   Gtk::RESPONSE_ACCEPT);

	dialog.add_button (Gtk::Stock::CANCEL,

	                   Gtk::RESPONSE_CANCEL);

	Glib::RefPtr<Gtk::FileFilter> filter =

		Gtk::FileFilter::create();

	filter->add_pixbuf_formats();

	filter->set_name("Images");

	dialog.add_filter (filter);

	const int response = dialog.run();

	dialog.hide();

	switch (response)

	{

		case Gtk::RESPONSE_ACCEPT:

			image->set(dialog.get_filename());

			break;

		default:

			break;

	}

}

  
Esto es un poco más complicado que todo lo que se ha intentado hasta ahora, así que se puede desglosar:

  <list>

      <item>

      
El diálogo para elegir el archivo se crea usando el constructor de Gtk::FileChooserDialog. La función toma el título y el tipo del diálogo. En este caso, es un diálogo de tipo Open.

    </item>

    <item>

    
Las siguientes dos líneas añaden un botón Abrir y Cerrar en el diálogo.

    
Note que se está usando nombres de botones del almacén de GTK, en lugar de escribir manualmente «Cancelar» o «Abrir». La ventaja de usar nombres del almacén es que las etiquetas de los botones ya estarán traducidas en el idioma del usuario.

    
El segundo argumento del método add_button() es un valor para identificar el botón pulsado. Aquí también se usan valores predefinidos proporcionados por GTKmm.

    </item>

    <item>

    
Las dos líneas siguientes restringen el diálogo <gui>Abrir</gui> para que sólo muestre archivos que se puedan abrir con Gtk::Image. Primero se crea un objeto de filtro; luego se añaden los tipos de archivos soportados por el Gdk::Pixbuf (que incluye la mayoría de los formatos de imagen como PNG y JPEG) al filtro. Por último, se establece que este filtro sea el filtro del diálogo <gui>Abrir</gui>.

    
Glib::RefPtr es un puntero inteligente usado aquí que se asegura de que el filtro se destruye cuando ya no se hace ninguna referencia a él.

    </item>

    <item>

    
dialog.run muestra el diálogo <gui>Abrir</gui>. El diálogo esperará a que el usuario seleccione una imagen; cuando lo haga, dialog.run devolverá el valor Gtk::RESPONSE_ACCEPT (devolvería Gtk::RESPONSE_CANCEL si el usuario pulsara <gui>Cancel</gui>). La sentencia switch comprueba esto.

    </item>

    <item>

    
Se oculta el diálogo <gui>Abrir</gui> porque ya no se necesita más. El diálogo se ocultará de todos modos, ya que sólo es una variable local, y se destruye (y por lo tanto se oculta) cuando el ámbito termina.

    </item>

    <item>
Asumiendo que el usuario pulsó <gui>Abrir</gui>, la siguiente línea carga el archivo en la Gtk::Image, por lo que se muestra.

    </item>

  </list>

</section>

<section id="build2">

  <title>Construir y ejecutar la aplicación</title>

  
Todo el código debería estar listo para ejecutarse. Pulse <guiseq><gui>Construir</gui><gui>Construir proyecto</gui></guiseq> para construir todo otra vez y pulse <guiseq><gui>Ejecutar</gui><gui>Ejecutar</gui></guiseq> para iniciar la aplicación.

  
Si todavía no lo ha hecho, elija la aplicación <file>Debug/src/visor-imagenes</file> en el diálogo que aparece. Finalmente, pulse <gui>Ejecutar</gui> y disfrute.

</section>

<section id="impl">

 <title>Implementación de referencia</title>

 
Si tiene problemas con este tutorial, compare su código con este <link href="image-viewer/image-viewer.cc">código de referencia</link>.

</section>

<section id="next">

  <title>Siguientes pasos</title>

  
Aquí hay algunas ideas sobre cómo puede extender esta sencilla demostración:

  <list>

   <item>

   
Haga que el usuario selecciona una carpeta en vez de un archivo, y proporcione controles para moverse por todas las imágenes de una carpeta.

   </item>

   <item>

   
Aplicar filtros aleatorios y efectos a la imagen cuando se carga y permitir al usuario guardar la imagen modificada.

   
<link href="http://www.gegl.org/api.html">GEGL</link> proporciona la capacidad de manipular imágenes de manera potente.

   </item>

   <item>

   
Permitir al usuario cargar imágenes desde recursos de red compartidos, escáneres y otras fuentes más complicadas.

   
Puede usar <link href="http://library.gnome.org/devel/gio/unstable/">GIO</link> para gestionar transferencias de archivos de red y similares, y <link href="http://library.gnome.org/devel/gnome-scan/unstable/">GNOME Scan</link> para gestionar el escaneado.

   </item>

  </list>

</section>

</page>