La clase GtkWidget

Es la clase básica de la que parte cualquier otro widget de GTK+, esta clase en sí misma no hace nada específico (por ejemplo: un cuadro de texto, un botón, …) para ello existen clases específicas, como las ventanas o los contenedores. Estas clases más específicas heredan de la clase GtkWidget las funciones, atributos y señales básicas que les hacen ser clases válidas para poder usarse en GTK+.

Partes esenciales de un widget

Como cualquier clase de cualquier lenguaje de programación orientado a objetos, la clase de un widget se divide en:

• Funciones: Son las funciones que permiten trabajar con dicha clase. Aquí las llamo funciones porque estamos trabajando sobre C, si fuera sobre cualquier lenguaje de programación orientado a objetos las llamaría métodos.
• Atributos (o propiedades): Son variables asociadas a la clase que identifican propiedades de ésta, por ejemplo: el color, la altura, …
• Señales: Muchos lenguajes de programación orientada a objetos no usan señales, pero en GTK+ son necesarias para controlar los eventos.
  Las señales identifican el evento que se ha producido, y se deben asociar a alguna función para que GTK+ al interceptar la señal ejecute dicha función, por ejemplo: al pulsar un botón que se escriba un mensaje en un cuadro de texto, la señal sería la pulsación del botón y la función asociada a ella la escritura del mensaje en el cuadro de texto.

De este modo, en la documentación de la API de GTK+, se puede observar que cada widget se descompone en estas partes para que sepamos claramente qué se puede hacer y/o qué tareas realiza dicho widget.

Las ventanas

Las ventanas son los widgets raíces, ya que sin ellas no podría haber aplicación. Hereda las propiedades de GtkContainer, por lo que puede contener a otro widget (¡cuidado! sólo a uno), por lo que lo normal es que dentro de una ventana se introduzca un GtkBox de algún tipo, en el que se coloquen el resto de widgets de la aplicación.

Como veis en el título digo ventanas, y es que hay varios tipos de ventanas:

• GtkDialog: Crea una ventana emergente. Dentro de este tipo de ventanas existen varios tipos predefinidos como el dialogo de “Acerca de”, el de elección de archivo, el de elección de color, …
• GtkInvisible: Crea una ventana invisible.
• GtkMessageDialog: Crea una ventana con un mensaje personalizado, es uno de los tipos predefinidos del GtkDialog. Son las ventanas que muestran mensajes de error, advertencia, …
• GtkWindow: Crea una ventana normal y corriente. Será el widget que se use como base para cualquier aplicación.
• GtkAssistant: Crea un asistente para guiar al usuario en varios pasos.

Como he dicho, de todos estos tipos el más importante es GtkWindow, que es la ventana normal y corriente que tiene cualquier aplicación.

Como cualquier widget de GTK, GtkWindow es muy fácil de manejar con echar un ojo a la documentación de la API se aprende rápido como funciona todo. A continuación os pongo un trozo de código en el que creo una ventana vacía:

#include <gtk/gtk.h>

int main (int argc, char *argv[]) {

    GtkWindow *window;

    gtk_init (&argc, &argv);

    window = (GtkWindow *) gtk_window_new (GTK_WINDOW_TOPLEVEL);
    gtk_window_set_title (window, "Soy una ventana");

    g_signal_connect (G_OBJECT (window), "destroy",
                      G_CALLBACK (gtk_main_quit), NULL);

    gtk_widget_show_all (GTK_WIDGET (window));
    gtk_main ();

    return 0;
}

Este código muestra una ventana con el título Soy una ventana.

Los contenedores

Una aplicación GTK+ viene definida por un widget de una ventana (que explicaré más adelante) en el cual se colocan los otros widgets (entradas de texto, etiquetas, botones, …) para formar una interfaz gráfica de usuario. La peculiaridad de GTK+ es cómo se colocan dichos widgets, para ello se hacen uso de otros widgets llamados contenedores, éstos sirven para (como su propio nombre indica) contener otros widgets, de modo que para distribuir los widgets por la ventana primero deberemos colocar algún contenedor sobre el cual insertar dichos widgets. Esto hace de GTK+ diferente a otros lenguajes de interfaces gráficas, en los cuales los widgets se colocan por coordenadas.

Hay varios widgets básicos de contenedores:

• GtkHBox: Es un contenedor horizontal, quiere decir que los widgets se colocan horizontalmente.
• GtkVBox: Es un contenedor vertical, quiere decir que los widgets se colocan verticalmente.
• GtkTable: Crea una tabla de MxN contenedores, los widgets se colocan en la posición AxB que queramos dentro de nuestra tabla MxN. Este se diferencia del resto en las funciones usadas para colocar los widgets, usará las suyas propias en lugar de las de GtkBox que explicaré a continuación.

(Como podéis ver os enlazo a la documentación de la API de GTK+ para cada widget, para mí es el mejor recurso de documentación.)

Los widgets GtkHBox y GtkVBox, como podéis ver en la API, sólo tienen una función asociada:

• GtkWidget *gtk_hbox_new (gboolean homogeneous, gint spacing);

  Esta función sirve para crear un GtkHBox (para GtkVBox habría que cambiar hbox por vbox en el nombre de la función). Recibe dos parámetros que sirven para que los widgets se distribuyan en tamaños iguales (homogeneous) y para definir los pixels por defecto entre widgets (spacing).

Hay que entender que para que estos widgets ejerzan de contenedores hay que usar las funciones de GtkBox, que es algo así como una interfaz que define operaciones para sus hijos, entre ellos los anteriores widgets. De GtkBox, las funciones más importantes son:

• gtk_box_pack_start (GtkBox *box, GtkWidget *child, gboolean expand,
  			gboolean fill, guint padding);

  Esta función sirve para colocar widgets de izquierda a derecha (en cualquier GtkHBox) o de arriba a abajo (en cualquier GtkVBox).

• gtk_box_pack_end (GtkBox *box, GtkWidget *child, gboolean expand,
  			gboolean fill, guint padding);

  Esta función sirve para colocar widgets al revés que la anterior.

Donde los parámetros de cada una de estas funciones son:

• box: Es el contenedor en el que se va a colocar el widget pasado como parámetro child.
• child: El widget que queremos colocar en box.
• expand y fill: Estos parámetros no sabría explicarlos bien, ya que lo mejor es ver el resultado de modificar cada uno. En el ejemplo que dejaré al final podréis comprenderlo mejor.
• padding: Este es fácil para cualquiera que haya hecho una web, es el espacio (en pixels) que se dejará entre el widget y los vecinos de éste, o el borde del contenedor si es el primero o último.

También existen otras dos funciones que nos ahorran trabajo si queremos dejar los paráemtros por defecto de los contenedores, éstas son:

• gtk_box_pack_start_defaults (GtkBox *box, GtkWidget *widget);

  Esta función sirve para colocar widgets de izquierda a derecha (en cualquier GtkHBox) o de arriba a abajo (en cualquier GtkVBox).

• gtk_box_pack_end (GtkBox *box, GtkWidget *widget);

  Esta función sirve para colocar widgets al revés que la anterior.

Para que podáis entender esto mejor os dejo este ejemplo, es el que viene en el tutorial oficial de GTK+.

Antes de empezar con otra cosa, voy a explicar como iniciar GTK+ en nuestra aplicación. Los pasos más importantes son los siguientes:

1. Hay que inicializar el toolkit, para ello se llama a la siguiente función:

   gtk_init (int *argc, char **argv[]);

   Esta función se usa para iniciar el toolkit y parsear los parámetros relativos a GTK+ que reciba nuestra aplicación, de modo que GTK+ los use y no nos tengamos de preocupar de parsearlos nosotros, dichos parámetros son eliminados de la lista.

2. Ejecutar el main loop (o bucle principal), éste se encarga de dejar a la aplicación en un bucle, hasta que llamemos a la función de salida de dicho bucle, en el cual se tratan las diferentes señales que se produzcan en nuestra aplicación. Para ello se llama a la siguiente función:

   gtk_main ();

   Para salir del bucle se llama a la siguiente función:

   gtk_main_quit ();

Obviamente, antes de ejecutar el main loop se deberán tener los manejadores de las señales asignados y todas las variables inicializadas, ya que una vez se ejecuta no tendremos control sobre nada de la aplicación.

Señales

Una vez explicado como se inicia y ejecuta GTK+, hay que conocer como se manejan las diferentes señales de los widgets de GTK+. Para ello, se deben conocer las diferentes señales que lanza cada widget y los prototipos de funciones asociadas a cada señal, normalmente todas usan el mismo prototipo pero algunas tienen un prototipo asociado que es diferente a los demás. De todos modos, se usan las mismas funciones para conectar las señales a su manejador.

Las funciones para conectar las señales a un manejador son:

gulong g_signal_connect (gpointer *object, const gchar *name,
          GCallback func, gpointer func_data);

Donde los parámetros son:

• object: El widget que lanza la señal. Aunque se debe pasar como un objeto de GObject, esto no es importante ya que realmente es un mero casting y no hay que saber como funciona GObject.
• name: El nombre de la señal del widget a la que queremos conectar un manejador.
• func: El nombre de la función del manejador.
• func_data: El parámetro de la función del manejador.

Las funciones del manejador de cada señal deben tener un prototipo definido en la documentación de la API de GTK+, aunque normalmente suelen ser uno de estos dos:

void func (GtkWidget *widget, gpointer data);
gboolean func (GtkWidget *widget, GdkEvent *event, gpointer data);

El primer prototipo es el más usado (por lo menos en lo que yo he visto), el segundo se suele usar en algunas señales específicas que cuando se lanzan puede que una vez tratadas lancen otra a continuación o no (de ahí el valor de retorno de tipo gboolean).

Lo importante es saber como se conectan las señales a su manejador, los prototipos siempre es mejor consultarlos en la API de GTK+ para la señal que queremos tratar, por si las moscas.

Hola mundo

#include <gtk/gtk.h>

/* delete_event: Decide si destruir la ventana GTK+ o no */
static gboolean delete_event (GtkWidget *widget,
					GdkEvent *event, gpointer data) {

	/* Si se devuelve TRUE no se lanza la señal "destroy" */
	//g_print ("delete_event: No se destruye la ventana.\n");
	//return TRUE;

	/* Si se devuelve FALSE se lanza la señal "destroy" */
	g_print ("delete_event: Se destruye la ventana.\n");
	return FALSE;
}

/* destroy: Termina la ejecución de la aplicación GTK+ */
static void destroy (GtkWidget *widget, gpointer data) {

	/* Fin de la ejecución de GTK+ */
	gtk_main_quit ();
}

static void hola_mundo (GtkWidget *widget, gpointer data) {

	g_print ("hola mundo\n");
}

int main (int argc, char *argv[]) {

	GtkWidget *window;
	GtkWidget *button;

	gtk_init (&argc, &argv);

	window = gtk_window_new (GTK_WINDOW_TOPLEVEL);
	g_signal_connect (G_OBJECT (window), "delete_event",
				G_CALLBACK (delete_event), NULL);
	g_signal_connect (G_OBJECT (window), "destroy",
				G_CALLBACK (destroy), NULL);

	button = gtk_button_new_with_label ("Hola");
	g_signal_connect (G_OBJECT (button), "clicked",
				G_CALLBACK (hola_mundo), NULL);

	gtk_container_add (GTK_CONTAINER (window), button);
	gtk_widget_show_all (window);

	gtk_main ();

	return 0;
}

En principio, no hace falta que entendáis todo, ya que hay creación de widgets y cosas que todavía no he explicado, pero más o menos podéis ver la idea que hay detrás de usar GTK+.

Para compilarlo, se debe ejecutar lo siguiente (usando gcc como compilador):

gcc -Wall hola.c -o hola `pkg-config --cflags gtk+-2.0 --libs gtk+-2.0`

En esta serie de posts no planeo explicar todo al detalle, ya que existen muy buenos documentos para ello, pero sí quiero dar unas nociones básicas para que cualquiera pueda desenvolverse luego y seguir aumentando sus conocimientos sin mucho esfuerzo, además yo voy a ir aprendiendo paralelamente a estos posts, así que puede que tengan fallos, perdonadme por ello.

Introducción: Diseño de interfaces gráficas

Lo primero que quiero es realizar una pequeña introducción al diseño (desde el punto de vista de la programación, eso siempre) de las interfaces gráficas, desde un punto de vista genérico, es decir, sin relación a un lenguaje o plataforma específica.

Una interfaz gráfica es un medio por el cual el usuario trabaja con la aplicación de una manera gráfica, normalmente usando entornos de ventanas. Se diferencia de una interfaz de texto, en que en éstas el usuario trabaja con la aplicación introduciendo texto, normalmente usando órdenes en consolas.

El diseño de una interfaz gráfica se basa en objetos (en GTK+ se les conoce como widgets) como pueden ser botones, cuadros de texto, menús, etc… que permiten realizar acciones específicas. Estos objetos, a nivel de programación, tendrán unas propiedades y, lo más importante, unos eventos (o señales) que se dispararán cuando se realice algún tipo de acción sobre ellos (por ejemplo: se pulsa un botón, se introduce texto en un cuadro de texto, …)

Para mí, lo más importante es entender que estos eventos deben ser tratados inmediatamente, para ello normalmente se relaciona una función y unos datos a un evento, de este modo cada vez que se produzca dicho evento se ejecutará la función junto a los datos que tenga relacionados.

¿Qué es GTK+?

GTK+ es un toolkit, o una librería, para programar las interfaces gráficas de una aplicación. Está escrito en C, aunque dispone de bindings para bastantes lenguajes (C++, Python, …).

Además, se complementa con otra serie de librerías del proyecto GNOME, como son:

• GLib (no confundir con la librería GNU de C), es una librería que ofrece un montón de funciones y tipos de datos (simples y compuestos) con los que poder trabajar de forma sencilla.
• Pango, es la librería que se encarga de la impresión del texto en pantalla, soporta internacionalización de modo que se pueda escribir en multitud de lenguajes sin alfabeto tradicional.

GTK+ se basa en GObject, del cual no conozco mucho, pero se puede decir que es una manera de programar en C con una orientación a objetos.

Documentación para iniciarse

Para iniciarse lo mejor sin duda es leer documentos que expliquen paso a paso como realizar cosas cada vez más complejas, para ello se pueden usar los siguientes documentos:

• Tutorial oficial de GTK+.
• Documentación de desarrollo en GNOME (por GNOME Hispano). (No está completa, pero van avanzando)
• API de GTK+.