lf303, SoftwareDevelopment: Programar Interfaces Gráficas de Usuario - GUI - con GTK

<-- | Hogar | Mapa | Indice | Busqueda

Este documento está disponible en los siguientes idiomas: English Castellano Deutsch Francais Italiano Nederlands Russian Turkce

por Özcan Güngör
<ozcangungor(at)netscape.net>

Sobre el autor:
Utilizo Linux desde 1997. Libertad, flexibilidad y Código Abierto, son las características que me gustan.

Traducido al español por:
Carlos González Pérez <charly(at)galpon.org>

Contenidos:

Empaquetando componentes con cajas
Cajas horizontales
Cajas verticales
Propiedades comunes de las cajas
Tablas
Sumario
Formulario de "talkback" para este artículo

Programar Interfaces Gráficas de Usuario - GUI - con GTK - 2da. parte.

Resumen:

En este artículo discutiremos sobre cajas y tablas. Con estas, seremos capaces de establecer los componentes en un orden adecuado en una ventana. Para poder entender estos artificios, debes tener los siguientes conocimientos sobre el lenguaje de programación C:

Variables
Funciones
Punteros

Y adicionalmente se recomienda leer el artículo anterior.

_________________ _________________ _________________

Empaquetando componentes con cajas

Empaquetar componentes significa localizar componentes en un orden establecido sobre las ventanas. Una de las formas de hacer esto en GTK es usando cajas. La idea principal sobre las cajas es empaquetar los componentes ordenados vertical u horizontalmente. Hay dos tipos de cajas: las horizontales y las verticales. Expliquemos estos tipos.

Cajas horizontales

En este tipo de cajas, los componentes son empaquetados horizontalmente. La siguiente función se usa para crear una caja horizontal.

gtk_widget *box;
box=gtk_hbox_new(gboolean homogenous, gint spacing);

donde el parámetro homogeneous se usa para definir si los componentes se distribuyen de modo homogéneo o no: si es TRUE (cierto), entonces los componentes rellenan cada celda de la caja ocupando el mismo espacio; y si es FALSE (falso), entonces los componentes son empaquetados uno a continuación del otro. spacing se usa para elegir la distancia mínima/espacio entre componentes.

Cajas verticales

En este tipo de cajas, los componentes son empaquetados verticalmente. La siguiente función se usa para crear una caja vertical:

gtk_widget *box;
box=gtk_vbox_new(gboolean homogenous, gint spacing);

Los parámetros de esta función tienen el mismo significado que los de la función de la caja horizontal.

Propiedades comunes de las cajas

Se pueden añadir componentes de dos formas: La primera es:

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

Usando esta función podemos añadir componentes en una caja. (en el lado izquierdo para una caja horizontal o en la parte superior de una caja vertical) box es la caja a la que queremos añadir un componente. child es el componente a añadir. expand se usa para expandir el tamaño del componente para que use todo el espacio posible, padding es para añadir espacio adicional a la derecha e izquierda.

La función complementaria a gtk_box_pack_start es gtk_box_pack_end:

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

Esta función nos permite añadir componentes al final (derecha o fondo) de una caja. Los parámetros tienen el mismo significado que en la función anterior.

Para añadir una caja a una ventana, se usa la siguiente función:

gtk_container_add (GtkContainer *container,GtkWidget *component);

container es la ventana a la que la caja será añadida, component es la caja a añadir. Por ejemplo, para añadir la caja debemos crear una ventana sobre la cual añadirla, para ello se usa la siguiente función:

gtk_container_add(GTK_CONTAINER(window),box);

gtk_box_set_homogeneous (GtkBox *box, gboolean homogenous);
gtk_box_set_spacing(GtkBox *box, gint spacing);

La primera de las funciones se usa para cambiar la propiedad homogenous de una caja, y la segunda función se usa para cambiar el tamaño del espaciado de una caja. box es la caja a cambiar.

gtk_box_set_child_packing(GkBox *box,GtkWidget *shild, 
       gboolean expand, gboolean  fill, guint padding, 
       GtkPackType packingtype);

Esta función redefine las propiedades de un componente ya empaquetado. Los parámetros tienen el mismo significado que en la función gtk_box_pack_start. packingtype puede ser GTK_PACK_START o GTK_PACK_END.

GTK_PACK_START hace que el componente sea empaquetado al principio de la caja si el componente se empaqueta usando la función gtk_pack_end. GTK_PACK_END provoca que el componente se empaquete al final de la caja si se empaqueta con la función gtk_pack_start.

Para entender mejor lo aquí expuesto mira el código de kutular.c.

Tablas

Las tablas, como en el código HTML, nos ayudan a fijar componentes en celdas. Para esto, es suficiente con crear una tabla con el número necesario de filas y columnas. Entonces podremos asignarle un componente a una celda o a un grupo de celdas (permitido solo en celdas continuas). Para crear una tabla se usa la siguiente función:

GtkWidget *table;
GtkWidget* gtk_table_new(guint  row, guint column, gboolean homogenous);

row es el número de filas, column es el número de columnas.homogenous se usa para distribuir los componentes de forma homogénea.

Las siguiente función se usa para añadir un componente a una tabla:

void gtk_table_attach (GtkTable *table, GtkWidget *child, 
         guint left_attach, guint left_attach, guint top_attach,
         guint bottom_attach, GtkAttachOptions xoptions, 
         GtkAttachOptions yoptions, guint xpadding, guint ypadding);

table es la tabla donde serán añadidos los componentes y child es el componente que será añadido. left_attach es el número de celdas a la izquierda donde el componente será puesto. right_attach es el número de celdas a la derecha donde el componente será puesto. top_attach es el número de celdas de la posición superior de la tabla y bottom_attach lo mismo de la posición inferior. Los componentes pueden estar en más de una sola celda.

xoptions e yoptions pueden tomar tres valores diferentes: GTK_FILL, GTK_EXPAND, GTK_SHRINK. GTK_FILL provoca que el componente rellene toda(s) la(s) celda(s). GTK_EXPAND provoca que el componente esté localizado en el centro de la(s) celda(s) y GTK_SHRINK provoca que el componente se contraiga en la(s) dimension de la(s) celda(s) si el componente es más grande que la(s) celda(s) .xoptions hace estos cambios solo en el eje x e yoptions lo hace solo en el eje y.

xpadding pone espacios a la izquierda y derecha del componente a lo largo del eje de las x. Donde ypadding lo hace a lo largo del eje y .

Veamos un ejemplo:

#include <gtk/gtk.h>

void delete_event( GtkWidget *widget,GdkEvent  *event,gpointer data )
{
    gtk_main_quit ();
}

int main( int   argc,char *argv[] )
{
    GtkWidget *window;
    GtkWidget *button;
    GtkWidget *table;

    gtk_init (&argc, &argv);

    window = gtk_window_new (GTK_WINDOW_TOPLEVEL);

    gtk_signal_connect (GTK_OBJECT (window), "delete_event",
                        GTK_SIGNAL_FUNC (delete_event), NULL);

    table = gtk_table_new (2, 2, TRUE);

    gtk_container_add (GTK_CONTAINER (window), table);

    button = gtk_button_new_with_label ("button 1");
    gtk_table_attach(GTK_TABLE(table), button, 0, 1, 0, 2,GTK_SHRINK,
                     GTK_SHRINK,0,0);
    gtk_widget_show (button);

    button = gtk_button_new_with_label ("button 2");
    gtk_table_attach (GTK_TABLE(table), button, 1, 2, 1, 2,
                      GTK_SHRINK,GTK_SHRINK,0,0);
    gtk_widget_show (button);
    
    button = gtk_button_new_with_label ("button 3");
    gtk_table_attach (GTK_TABLE(table), button, 1, 2, 0, 1,
                      GTK_SHRINK,GTK_SHRINK,0,0);
    gtk_widget_show (button);

    gtk_widget_show (table);
    gtk_widget_show (window);

    gtk_main ();

    return 0;
}

Como gtk_table attach tiene muchos parámetros, se creó una nueva función más corta: gtk_table_attach_defaults. Esta función realiza el mismo trabajo, pero con menos parámetros.

void gtk_table_attach_defaults (GtkTable *table,GtkWidget *child, 
                guint left_attach, guint right_attach, guint top_attach, 
                guint bottom_attach);

Aquí los parámetros tienen el mismo significado.xoptions e yoptions toman el valor GTK_FILL|GTK_EXPAND. xpadding e ypadding toman como valor 0.

La siguiente función se usa para cambiar el número de filas y columnas de una tabla existente:

void gtk_table_resize(GtkTable *table, guint rows, guint columns);

Usando las siguientes funciones, puedes cambiar el valor de los espacios de una fila o una columna:

void gtk_table_set_row_spacing (GtkTable *table, guint row, 
                               guint spacing);
void gtk_table_set_col_spacing (GtkTable *table, guint column, 
                               guint spacing);

Las siguientes funciones cambian los valores de los espacios de todas las filas o columnas:

void gtk_table_set_row_spacings (GtkTable *table, guint spacing);
void gtk_table_set_col_spacings (GtkTable *table, guint spacing);

La siguiente función cambia el valor homogéneo de una tabla ya existente:

void gtk_table_set_homogeneous (GtkTable *table, gboolean homogenous);

Sumario

En este artículo, hemos aprendido lo que significa empaquetar componentes y hemos mirado funciones que modifican las propiedades de cajas y tablas. Me alegraría recibir preguntas, comentarios e ideas de los lectores. Para ello, lo único que tienes que hacer es enviarme un correo electrónico...

Formulario de "talkback" para este artículo

Cada artículo tiene su propia página de "talkback". A través de esa página puedes enviar un comentario o consultar los comentarios de otros lectores

Ir a la página de "talkback"

<--, regresar al índice de este número

Información sobre la traducción:

tr --> -- : Özcan Güngör <ozcangungor(at)netscape.net>

en --> tr: Özcan Güngör <ozcangungor(at)netscape.net>

en --> es: Carlos González Pérez <charly(at)galpon.org>

2003-07-21, generated by lfparser version 2.41