LiNpOx

Linux y Windows para informáticos

Programar con GTK (Lenguaje C) – Parte V

Posted by oftc007 en 22 marzo 2008

TREEVIEW

El treeview es uno de los widgets mas usados, ya que nos permite mostrar un conjunto de datos de forma ordenada y agradable en nuestra interface. Vamos a diseñar nuestra ventana, a la cual le agregaremos un treeview y un boton.

treepaleta

Luego que ya tenemos nuestra ventana lista con los widgets necesarios, guardamos, generamos el codigo necesario. Antes de empezar a usar el treeview vamos a conocer una de sus principales propiedades que podemos editar en glade.

  • Header Visible: Esta propiedad nos permite seleccionar si queremos que las cabezeras de la columnas este visibles o no. Las cabezeras es el titulo que se le asigna a cada columna.
  • Rules Hint: Si activamos esta propiedad se ira alternando un sombreado en la filas de nuestro treeview.
  • Enable Search: Al activar esta propiedad al pisar ctr+f aparece una entrada de texto donde podemos buscar elementos que queremos ubicar rapidamente dentro del treeview.

Es importante saber que el TreeView solo se encarga de mostrar los datos asociados a un modelo, el cual se asigna al treeview. Existen dos tipos de modelos, los cuales van a definir como se muestra y trata la información dentro del treeview. Los dos tipos de modelos son:

  • ListStore: Este modelo almacena la información en forma de lista o tabla plana.
  • TreeStore: Este modelo almacena la información en forma de arbol, donde existen n filas padres que pueden tener n hijos cada una.

Veamos un ejemplo de un treeview sencillo con un modelo ListStore el cual va a tener dos columnas, una de nombre y otra de edad. Cada columna del modelo puede ser representada con un numero, pero para efecto de ligibilidad del codigo y facilidad de futuras ediciones del modelo, definimos una lista enumerada. Para efecto de nuestro ejemplo nuestra lista enumerada seria:

codigo enum

Donde NOMBRE_COL tiene el valor 0, EDAD_COL tiene el valor 1, por lo cual aprovechamos esta enumeracion para conocer el numero de columnas de nuestro modelo, que en nuestro caso es NUM_COL que tiene el valor 2. El codigo necesario para crear las columnas de nuestro treeview es:

cargar list

Primero vamos explicar con detalle que son cada una de los tipos de datos que estamos usando:

  • TreeVireColumn: Representa las columnas que va a tener nuestro treeview.
  • CellRenderer: Nos permite definir que tipo de objeto se mostrara en una celda (cell). Los tipos de objetos mas útiles que se pueden mostrar en una celda son, cell_renderer_text para mostrar texto en la celda, cell_renderer_pix_bux para mostrar una imagen en la celda y cell_renderer_toggle para mostrar un checkbutton en la celda.
  • TreeModel: Es el apuntador del modelo, en el cual se definira el tipo de modelo, y se cargaran los datos, para posteriormente asociarlo a nuestro treeview.

A continuación definimos el tipo de dato que queremos mostrar asigandolo al apuntador del tipo GtkCellRenderer, para lo cual usamos la función gtk_cell_renderer_text_new() (queremos mostrar texto). Luego de esto insertamos una columna con atributos a nuestro modelo con la función:

gtk_tree_view_insert_column_with_attributes (GtkTreeView *treeview, int posicion, const char *titulo, GtkCellRenderer *renderer, const char *tipo_celda, int numero_columna, NULL);

Esta función aunque parece complicada al recibir tantos parametros, es bastante sencilla. Explicamos cada uno de los parametros que recibe:

  1. El treeview. Que en nuestro caso esta apuntado por la variable listado que inicializamos con la función lookup_widget.
  2. La posicion en la que queremos agregar la columna, mandamos -1 para que se agregue al final.
  3. El titulo que queremos para nuestra columna.
  4. Un apuntador del tipo GtkCellRenderer. Que en nuestro ejemplo es el apuntador renderer que inicializamos con el tipo de dato que queremos mostrar en la celda.
  5. El tipo de dato que queremos mostrar en la columna.
  6. El numero de la columna, para este parametro aprovechamos la variable correspodiente de nuestra lista enumerada, en nuestro caso NOMBRE_COL para la primera columna.
  7. NULL, para indicar el final de paso de parametros para la función.

Para agregar mas columnas hacemos lo mismo, solo que para la segunda columna en adelante necesitamos agregar mas columnas a nuestro apuntador con la siguiente función:

GtkTreeViewColumn *col = gtk_tree_view_column_new();

Luego que ya tenemos todas nuestras columnas definidas, es momento de llenar el modelo, para eso al apuntador del tipo GtkTreeModel que definimos, le asignamos la llamada de la funcion modelo_lista() (podemos ponerle el nombre de nuestro gusto) que retorna el modelo definido y lleno. El codigo de la función modelo_lista() es el siguiente:

modelo lista

Primero definimos el tipo de modelo. Si queremos un ListStore definimos un apuntador del tipo GtkListStore, mientras que para el TreeStore definimos un apuntador del tipo GtkTreeStore. Luego de esto definimos una variable del tipo GtkTreeIter que es una referencia a una fila de nuestro modelo. Antes de llenar nuestro modelo con los datos, necesitamos crearlo y definir sus numero de columnas y tipo de datos que se mostrara en cada una, para esto usamos la función:

gtk_list_store_new (NUM_COL,G_TYPE_STRING, G_TYPE_UINT)

Esta función retorna un apuntador del tipo GtkListStore. La función recibe como primer parametro el numero de columnas, para este parametro aprovechamos la variable NUM_COL de nuestra lista enumerada, y para definir los tipos de datos debemos hacerlo con algunos de los tipos definidos en GType como por ejemplo G_TYPE_STRING (cadena de caracteres), G_TYPE_UINT (entero), GDK_ULONG (enteros largo), entre otros. Ya que tenemos nuestro modelo definido, es hora de llenarlo, para eso usamos la funciones:

gtk_list_store_append (store, &iter);

gtk_list_store_set (store, &iter, NOMBRE_COL, “Pedro”, EDAD_COL, 20,-1);

La función gtk_list_store_append agrega una fila vacia al final al treeview, esta funcion recibe el apuntador del modelo y el GtkTreeIter. Luego con la función gtk_list_store_set es que asginamos los datos a la fila, esta función recibe

  1. El apuntador del modelo.
  2. El GtkTreeIter.
  3. El numero de la columna donde queremos agregar el dato, para este parametro usamos la variable de nuestra lista enumerada correspodiente, seguido del dato que queremos agregar a dicha columna.
  4. Enviamos -1 para indicarle a la función que ya terminamos de llenar las columnas.

Luego de compilar y ejecutar nuestro programa el resultado del treeview lleno es:

corrida liststore

TreeStore

Ahora veamos un ejemplo del treeview usando el modelo TreeStore, primero definimos nuestra lista enumerada y agregamos la columnas a nuestro modelo, esto de la misma manera que hicimos anteriormente.

cargar tree

Veamos la función modelo_arbol() que es lo que cambia con respecto al ejemplo anterior donde usamos un ListStore.

modelo arbol

Primero declaramos el apunador de nuestro modelo del tipo GtkTreeStore, luego de esto declaramos dos variables del tipo GtkTreeIter, que hacen referencia a una fila padre e hijo respectivamente. Creamos nuestro modelo con la función gtk_tree_store_new de la misma forma que en el ejemplo anterior.

En el caso de trabajar con un TreeStore vemos que los parametros de las funciones para agregar una fila vacia y llenarla cambian un poco. Primero cuando queremos crear una fila vacia padre, enviamos el GtkTreeStore y el GtkTreeIter padre. Cuando queremos agregar una fila hijo, enviamos el GtkTreeStore y el GtkTreeIter correspondiente a la fila padre e hijo. Esta fila se creara como hijo de la ultima fila padre agregada al modelo.

Despues de compilar y ejecutar nuestra ventana, el resulta sera:

corrida treestore

ListStore con imagen

El treeview no solo muestra texto, tambien es capaz de mostrar imagenes. Veamos un ejemplo de como hacerlo.

Al igual que en los ejemplos anteriores, creamos nuestra lista enumerada de las columnas, despues de esto agregamos las columnas, veamos cual es el cambio:

carga list img

El primer cambio esta el renderer de la celda, que recuerden es donde se define que tipo de dato se muestra en una celda. Vemos que la función para crear el renderer para mostrar una imagen en la celda es:

gtk_cell_renderer_pixbuf_new();

Otro de los cambios esta en la función gtk_tree_view_insert_column_with_attributes que en el quinto parametro enviamos “pixbuf” en lugar de “text”. Ahora veamos la función modelo_lista_imagen(), encargada de definir y llenar el modelo.

modelo list img

El primer cambio que observamos es un apuntador del tipo GdkPixbuf, que inicializamos con la función:

gdk_pixbuf_new_from_file_at_size (“imagenes/Firefox.png”,100,100,NULL);

La cual retorna un apuntador a la imagen del tipo GdkPixbuf. Esta funcion recibe como primer parametro la ruta de la imgen, el ancho y largo en que queremos mostrar la imagen y NULL.

En cuanto a la funcion gtk_list_store_set nos fijamos que enviamos para la primera columna como dato a agregar la variable pixbuf que es el apuntador a la imagen que queremos mostrar.

Luego de compilar y ejecutar nuestro codigo, el resultado sera:

corrida liststore img

Descarga el codigo fuente de los 3 ejemplos

Anuncios

11 comentarios to “Programar con GTK (Lenguaje C) – Parte V”

  1. sermod said

    Me los he leído todos, son muy buenos, espero que sigas con esto.

    UN saludo

  2. sermod said

    Podrías colgar algun manual de GTK+ porque lo que es la sintáxis de las señales y eso no están muy claras…

    Gracias. Saludos.

  3. oftc007 said

    Si lo que quieres conocer, es bien cada una de la señales de los widgets, te recomiendo descargar la documentancion del GTK y usar “DevHelp” para mirarla. Si no es eso a lo que te refieres, dime a ver en que puedo ayudar.

    Saludos!

  4. sermod said

    Hola, buenas noches.

    Me refiero a algun manual de GTK+ que te enseñe lo que necesitas saber para la programación del entorno grafico etc. Más o menos como la documentación pero esque no me deja acceder a ella.

    ¿Para cuando vas a sacar más tutos de programación? Están muy bien.

    Saludos

  5. fernando sanchez said

    hola ! en primer lugar reconocer el trabajo que estas haciendo excelente. lo s he llevado acabo en la mayoria. pero tengo una duda. si tengo dos cajas entry con valores numericos
    ya sea enteros o flotantes, como puedo operarlos aritmeticamente y guardarlos en una tercera caja entry seguir manipulando los numeros como tales.
    agradeceria si no es mucha molestia el codigo de tales lineas. la verdad he intentado con algunas funciones como g_strtod( ), sscanf( ) y nada.posiblemente estoy mal desde la asignacion de tipos de variables.
    gracias agradezco tu atencion.

  6. oftc007 said

    Bueno primero que nada para poder operar esos valores tienes que transforma el texto extraido del entry que se encuentra en una variable del tipo “cosnt char*” a entero, entero largo o flotante. Para eso debes usar la funcion “atoi” (transformar a int), “atol” (transformar a long) o “atof” (transformar a float). Para usar estas funciones debes incluir la libreria “stdlib.h”. Un ejemplo seria:

    const char *txt; //variable donde esta el contenido del entry.
    int a; //variable donde se alamacena la conversion.
    a = atoi(txt); //convertir la variable “txt” y almacenar la conversion en “a”.

    Luego que hagas la operacion que quieras, debes transformar la variable con el resultado de la operacion a un apuntador de cadena (char*). Para eso usas la funcion “sprintf”. Un ejemplo seria:

    int a = 5;
    char *numero; //variable donde se almacenara la conversion de el entero.
    sprintf(numero, “%d”,a); //almacenar en “numero” el valor que tenga la variable a (el valor 5).

    Solo te quedaria mostrar la variable “numero” en tu entry y listo.

    Saludos!

  7. Sermod said

    Hola, muy buenas, para cuando otro tutorial de programación gráfica en GTK? Acaso ya finalizó el curso?

    Saludos

  8. Merche said

    Hola, en hora buena por el trabajo de acercamiento que estas haciendo al software libre, estos tutoriales que haces me han despertado el gusanillo de hacer una aplicación de gestión, con glade y lenguaje c. Para llevar a cabo esta tarea necesito conocer como conectar a MySQL, y mostrar el resultado en un TreeView. ¿Me puedes pasar un código de ejemplo que lo haga?

    gracias por anticipado.

  9. Jose Miguel Aniorte said

    En hora buena por la aportación que estás haciendo, el tutorial te está saliendo impecable, pero me queda una duda por resolver ¿Como hago para conectar con una base de datos de prueba en MySQL, y llenar el TreeView con los datos de la tabla?.

    gracias por anticipado, y saludos

  10. Hola estoy entrando a la programación con glade y anjuta utilizando GTKmm 2.4, lo que quiero hacer es leer el dato de dos cajas de texto y cada valor respectivo almacenarlo como una variable de algun tipo numerico en los mensages anteriores esta como hacerlo pero no logro entender como lo estan capturando desde la caja de texto

  11. Jorge Abarca said

    Es un muy buen manual, lastima que no explican como tener tareas concurrentes, pq gtk se queda en un loop infinito para poder atender todos los eventos de la interfaz, y sin tareas concurrentes es una interfaz inutil. Pero en general muy bueno

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s

 
A %d blogueros les gusta esto: