gladethe-eye.eu/public/site-dumps/index-of/index-of.co.uk/...software glade 42 linux+ 9/2007...

8
software Glade 42 Linux+ 9/2007 [email protected] C uando nos planteamos el desarrollo de apli- caciones software con interfaz gráfica de usu- ario es importante elegir una herramienta que permita al equipo ser productivo en este as- pecto, ya que el diseño y producción de la interfaz grá- fica lleva un tiempo elevado de trabajo. Habitualmente la elección de esta herramienta está condicionada por varios factores como son el lenguaje de programación, la experiencia del equipo con ciertas herramientas, el toolkit gráfico que utilizará la aplicación o la disponibilidad de herramientas en función de la plataforma de desarrollo y de producción. En GNU/Linux contamos con una herramienta muy práctica para el desarrollo de software que requiera de interfaz gráfica como son hoy en día muchas aplicacio- nes standalone y/o cliente-servidor. Esta herramienta nos va a permitir, por ejemplo, ser productivos debido a su facilidad de uso, elegir entre distintos lenguajes de pro- gramación y desarrollar y correr en distintas plataformas. Su nombre es Glade, es software libre y utiliza el toolkit gráfico GTK+. La funcionalidad que diferencia a Glade de otras herramientas similares es el hecho de que genera código XML con la definición de toda la interfaz gráfica que crea el diseñador. Los datos de este fichero se cargan dinámicamente cuando la aplicación se ejecuta, lo que nos permite tener claramente separada la interfaz gráfica de la lógica de negocio. Además, podemos utilizar la misma interfaz con distintos lenguajes de programación sin cambiar nada. Quizá este aspecto nos resulte espe- cialmente práctico si necesitamos desarrollar la misma aplicación en dos lenguajes diferentes o si con el tiempo decidimos cambiar de lenguaje por alguna necesidad específica. La perfecta integración con el entorno de escritorio GNOME es otra de las razones para utilizar Glade si desarrollamos aplicaciones que deban correr en este Glade Arturo Fernández Montoro Conocimientos básicos de programación con inter- faces de usuario Conocimientos básicos de programación en C Conocimientos básicos de GTK+ Lo que deberías saber... Glade es una intuitva aplicación que nos permite desarrollar, a golpe de ratón, interfaces gráficas de usuario para el toolkit gráfico de GTK+, el cual se integra a la perfección con el entorno de escritorio GNOME. Posteriormente podemos utilizar estas interfaces con lenguajes de programación como C/C++, Ruby, Python y Java, entre otros.

Upload: others

Post on 23-Mar-2020

7 views

Category:

Documents


0 download

TRANSCRIPT

Page 1: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

softwareGlade

42 Linux+ 9/2007

softwareGlade

43www.lpmagazine.org

linux

@so

ftwar

e.co

m.p

l

Cuando nos planteamos el desarrollo de apli-caciones software con interfaz gráfica de usu-ario es importante elegir una herramienta quepermita al equipo ser productivo en este as-

pecto, ya que el diseño y producción de la interfaz grá-fica lleva un tiempo elevado de trabajo. Habitualmente la elección de esta herramienta está condicionada por varios factores como son el lenguaje de programación, la experiencia del equipo con ciertas herramientas, el toolkit gráfico que utilizará la aplicación o la disponibilidad de herramientas en función de la plataforma de desarrollo y de producción.

En GNU/Linux contamos con una herramienta muy práctica para el desarrollo de software que requiera de interfaz gráfica como son hoy en día muchas aplicacio-nes standalone y/o cliente-servidor. Esta herramienta nosva a permitir, por ejemplo, ser productivos debido a su facilidad de uso, elegir entre distintos lenguajes de pro-gramación y desarrollar y correr en distintas plataformas. Su nombre es Glade, es software libre y utiliza el toolkit gráfico GTK+. La funcionalidad que diferencia a Glade de otras herramientas similares es el hecho de que genera

código XML con la definición de toda la interfaz gráfica que crea el diseñador. Los datos de este fichero se cargan dinámicamente cuando la aplicación se ejecuta, lo que nos permite tener claramente separada la interfaz gráfica de la lógica de negocio. Además, podemos utilizar la misma interfaz con distintos lenguajes de programación sin cambiar nada. Quizá este aspecto nos resulte espe-cialmente práctico si necesitamos desarrollar la misma aplicación en dos lenguajes diferentes o si con el tiempo decidimos cambiar de lenguaje por alguna necesidad específica.

La perfecta integración con el entorno de escritorio GNOME es otra de las razones para utilizar Glade si desarrollamos aplicaciones que deban correr en este

GladeArturo Fernández Montoro

• Conocimientos básicos de programación con inter-faces de usuario

• Conocimientos básicos de programación en C• Conocimientos básicos de GTK+

Lo que deberías saber...

Glade es una intuitva aplicación que nos permite desarrollar, a golpe de ratón, interfaces gráficas de usuario para el toolkit gráfico de GTK+, el cual se integra a la perfección con el entorno de escritorio GNOME. Posteriormente podemos utilizar estas interfaces con lenguajes de programación como C/C++, Ruby, Python y Java, entre otros.

Page 2: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

softwareGlade

42 Linux+ 9/2007

softwareGlade

43www.lpmagazine.org

escritorio. No obstante, las aplicaciones basadas en Glade sólo necesitan GTK+ con independencia del entorno de escritorio, es decir, cualquier aplicación desarrollada con Glade puede correr, por ejemplo, en KDE, WindowMaker o XFCE, siempre y cuando tengamos instaladas las librerías necesarias de GTK+.

Si programamos en C/C++ en Linux uti-lizando el popular IDE Anjuta, la última ver-sión del mismo integra Glade, de forma que no es necesario que usemos dos programas distintos para escribir nuestras aplicacio-nes.

Dado que la mejor forma de conocer Glade es trabajar con él, comenzaremos viendo cómo instalarlo en nuestro PC.

InstalaciónAntes de realizar la instalación debemos decidir con qué versión de Glade vamos a trabajar. Actualmente existen dos versiones diferenciadas listas para producción: Glade2 y Glade3. A nivel interno son muy diferen-tes, ya que la versión 3 se ha reescrito par-tiendo de cero y el código es completamente nuevo. Funcionalmente son muy parecidas con la excepción de que la nueva versión

ya no genera código, sólo la definición en XML de la interfaz. En versiones anteriores era posible generar directamente código en el lenguaje seleccionado, que los progra-madores utilizaban para escribir el resto de la aplicación. Sin embargo, en la nueva versión sólo es posible generar la definición en XML, que posteriormente los programa-dores utilizarán junto a la librería libglade para cargar las interfaces en tiempo de ejecu-ción.

Para la mayoría de las distribuciones de Linux existen paquetes binarios para reali-zar la instalación de la versión 2 de Glade, sin embargo, no es tan común encontrar paquetes de la versión 3. Por ejemplo, la última versión estable liberada de Debian (4.0 alias Etch) no dispone de paquetes para Glade 3, tampoco los incluye la versión Edgy de Ubuntu. Para realizar la instalación desde estos paquetes binarios podemos utilizar la interfaz gráfica de aplicaciones como Sypnatic o la línea de comandos. Por ejemplo, en el caso de Debian ejecutaríamos como usuario root:

# apt-get install glade

Y en el caso de Ubuntu:

$ sudo apt-get install glade

También encontramos paquetes para otras distribuciones como Fedora o SUSE. Por ejemplo, la distro Fedora Core 6, incluye por defecto la versión 2 de Glade. La instalación desde los binarios tiene la ventaja de que el

sistema de instalación detectará las depen-dencias necesarias e instalará los paquetes que proceda de forma automática.

No obstante, si deseamos instalar Glade desde los fuentes podemos hacerlo acce-diendo al sitio web de Glade, descargarnos los mismos y realizar la compilación de for-ma manual. De esta forma podemos elegir la versión que deseemos.

En primer lugar deberemos instalar el software del que depende Glade. Si utili-zamos GNOME podemos obviar este paso, ya que tendremos instalado prácticamente todo, como mucho deberemos instalar las librerías de desarrollo necesarias para la compilación. Glade require el siguiente soft- ware:

• Librerías de GTK+ (mínimo versión 2.10)• GLib• Pango• Atk• libxml (mínimo versión 2.4.1)

Este software puede encontrarse también como paquetes binarios en nuestra distri-bución de Linux. Antes de proceder a ins-talarlo, podemos comprobar si ya lo tene-mos instalado, dado que se trata de libre-rías comunmente utilizadas por muchas de las aplicaciones más populares para Linux.

A continuación veremos cómo instalar la versión 3.2 de Glade que es la última estable liberada hasta el momento y es la que utilizaremos para ilustrar los ejemplos de este artículo.

En primer lugar nos descargaremos el código fuente:

$ wget http://ftp.gnome.org/pub/GNOME

Listado 1. Programa en C que genera la interfaz gráfica desarrollada

previamente con Glade

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

{

gtk_init(&argc, &argv);

glade_init();

6 xml = glade_xml_

new("hello.glade",

"window1", NULL);

8 glade_xml_signal_

autoconnect(xml);

gtk_main();

return 0;

11 }

Figura 1. Iniciando Glade

• Qué es Glade• Cómo construir interfaces gráficas con

Glade• A desarrollar aplicaciones para GTK+

con interfaz gráfica

En este artículo aprenderás...

Page 3: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

44

softwareGlade

Linux+ 9/2007 45

softwareGlade

www.lpmagazine.org

/sources/glade3/3.2/glade3-

3.2.0.tar.gz

Seguidamente descromprimiremos el fichero tarball descargado:

$ tar -zxvf glade3-3.2.0.tar.gz

$ cd glade3-3.2.0

Por último pasaremos a compilar e instalar:

$ ./configure

$ make

# make install

Podemos comprobar la correcta instalación de Glade accediendo a la correspondiente opción de menú de nuestro entorno de es-critorio, habitualmente en Gráficos en GNO-ME, o utilizando la línea de comandos,ejecutando:

$ glade-3

La interfazGlade presenta una interfaz muy intuitiva y fácil de usar gracias a su sistema de drag & drop (arrastrar y soltar) que nos permite directamente seleccionar un componente y posicionarlo en la área de trabajo.

La interfaz gráfica de Glade se encuentra divida en las siguientes áreas:

• Menú: Nos da acceso a las funcionali-dades de Glade referentes a los pro-yectos, ficheros, edición, tipos de vistas y ayuda.

• Área de diseño: Es el espacio utilizado para construir la interfaz gráfica. A esta área de trabajo arrastraremos los dife-rentes elementos de la interfaz.

• Paleta: Aquí encontramos todos loselementos necesarios para contruir una interfaz gráfica que Glade ponea nuestra disposición, como por ejem-plo, distintos tipos de botones, cajas de texto, elementos desplegables (com-bos), etiquetas y barras de desplaza-miento.

• Inspector: Visualiza información sobre los elementos de la interfaz que esta-mos utilizando en nuestro proyecto.

• Editor de propiedades: Aquí fijaremos las propiedades de cada elemento de la interfaz y podremos añadir lo necesa-rio para realizar la conexión a través de eventos.

Para trabajar con Glade es necesario que nos familiaricemos con una serie de conceptos de GTK+ que debemos tener en cuenta a la hora del desarrollo de interfaces. A continuación veremos dichos conceptos.

WidgetsPodemos definir un widget como un elemento de la interfaz gráfica de usuario. Un botón, una caja de texto, un desplegable y una eti-queta son ejemplos de widgets.

GTK+ nos ofrece un rico conjunto de wid-gets, además de los mencionados contamos, entre otros, con barras de scroll horizontal y vertical, pestañas de separación, diferentes tipos de botones, botones de selección múlti-ple y botones de única selección.

ContenedoresPor otro lado, GTK+ utiliza también el concepto de contenedores que son elemen-tos de interfaz que sirven para agrupar y empaquetar a los widgets. Los contenedo-res son necesarios en GTK+ porque todos los widget que forman parte de la interfaz deben encontrarse empaquetados. Esta téc-nica de empaquetado, permite por ejemplo, que para el programador sea transparente la adaptación del tamaño de los widgets como consecuencia de un redimensiona-miento por parte del usuario, ya que, la

Figura 2. Diferentes cuadros de diálogo que podemos crear con Glade

Figura 3. Seleccionando un icono para un botón

Page 4: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

44

softwareGlade

Linux+ 9/2007 45

softwareGlade

www.lpmagazine.org

adaptación es automática gracias a esta téc-nica.

Básicamente, tenemos tres tipos de conte-nedores en GTK+:

• Ventanas: Son parte fundamental de una aplicación. Es el marco donde se situan otros contenedores y otros wid-gets a su vez. Como mínimo una apli-cación debe contener una ventana.

• Caja vertical (Vertical box): Permite agrupar widgets con una orientación vertical. Es práctico, por ejemplo, cuan-do queremos colocar una etiqueta y al lado una caja de texto.

• Caja horizontal (Horizontal box): Similar al anterior pero con orientación hori-zontal. Nos permite agrupar elementos uno debajo del otro.

Debemos tener en cuenta que cuando un widget se sitúa en un contenedor, el widget ocupa todo el espacio que le hemos dado al contenedor.

Utilizando diferentes combinaciones entre contenedores podemos llegar a crear una compleja y completa interfaz de usua-rio.

Tipos de widgets y contenedoresA continuación veremos una clasificación de widgets y contenedores basándonos en la organización que nos da Glade en la venta-na Paleta, dando una pequeña descripción sobre los mismos. Nos ceñiremos a los más habituales, aunque como podremos com-probar en la interfaz de Glade, existen otros a nuestra disposición.

Alto nivel (Top level)

• Ventana (Window): Se trata del conte-nedor básico y representa una ventana típica de aplicación. Utilizaremos este contenedor para alojar la mayoría de los widgets.

• Cuadro de diálogo (Dialog box): Con-tenedor que se utiliza para interactuar con el usuario requiriendo su interven-ción.

• Acerca de (About box): Otro contenedor para crear el típico mensaje de "Acerca de...". También es posible crear este diálogo utilizando el contenedor ante-rior, sin embargo, la ventaja del About box es que ya tenemos unos widgets básicos insertados para crear el mensaje.

• Selección de color (Color Selection Dia-log): Este cuadro de diálogo nos per-

mite seleccionar un color de una paleta dada.

• Selección de ficheros (File Chooser Dialog): Se utiliza para mostrar al usuario el siste-ma de ficheros y que el mismo pueda seleccionar uno o varios ficheros.

• Selección de fuentes (Font Selection Dia-log): A través del mismo podemos el usu-ario puede seleccionar una fuente (tipo de letra) instalada en el sistema.

Otros widgets dentro de este grupo son los cuadro de diálogos que permiten seleccionar el dispostivo de entrada (Input Dialog) y crear un mensaje (Message Dialog).

Contenedores (Containers)

• Caja horizontal (Horizontal box): Este es uno de los contenedores principales de Glade que nos permite situar dentro del mismo diferentes tipos de widgets hori-zontalmente.

• Caja vertical (Vertical box): Al igual que el anterior también es un contenedor básico que nos permite la colocación vertical de los widgets.

• Tabla (Table): Contenedor que crea filas y columnas. Se puede utilizar teniendo en cuenta que es una combinación de los dos anteriores.

• Cuaderno (Notebook): Permite crear va-rias pestañas dentro de una ventana.

• Frame: Tipo de contenedor que nos da la opción de asociarle una etiqueta.

• Barra de menú (Menu Bar): Típica barra de menú de aplicación.

• Barra de herramientas (Tool bar): Permite añadir iconos.

• Ventana con scroll (Scrolled window): Ven-tana que permite realizar desplazamien-tos (scroll).

Visualización y control (Control and Display)

• Botón (Button): Típico botón dónde po-demos seleccionar, entre otras propie-dade, un icono. Existen varios predefe-nidos, como son, por ejemplo, el tick de OK y o la cruz de Cancelar.

• Botón de comprobación (Check button): Bo-tón que tiene dos estados, marcado y sin marcar.

• Botón de selección (Radio button): Permite seleccionar una opción u otra, es mutua-mente excluyente.

• Botón de selección de ficheros (File Choo-ser button): Da acceso a un cuadro de diá-logo para seleccionar uno o varios fiche-ros del sistema.

• Imagen (Image): Permite insertar una imagen desde un fichero.

• Etiqueta (Label): Posibilita la inserción de texto en tiempo de diseño. Se utiliza para textos que el usuario no pueda modificar.

• Caja de texto (Text entry): Da la opción de insertar texto al usuario, sirve como entrada de datos.

• Barra horizontal de scroll (Horizontal scrollball): Barra que permite realizar scroll horizontal.

• Barra vertical de scroll (Vertical scrollball): Similar a la anterior pero para scroll ver-tical.

Figura 4. Conversor

Page 5: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

46

softwareGlade

Linux+ 9/2007

• Desplegable (Combo box): Muestra al usuario un desplegable con varias opcio-nes para que el usuario pueda seleccio-nar una.

• Barra de progreso (Progress bar): Útil para mostrarle al usuario el progreso de una acción.

• Calendario (Calendar): Muestra un calen-dario.

• Área de dibujo (Drawing area): Marca un área para que el usuario pueda dibujar.

Otro grupo son los GTK+ obsolete que re-ferencian a widgets obsoletos de versiones anteriores, pero que se muestran para ga-rantizar la compatibilidad con proyectos antiguos que tengamos desarrollados.

ProyectosGlade utiliza el concepto de proyecto para agrupar todos los elementos de la interfaz que estamos diseñando y que habitulamen-te corresponde a un programa. Además, se genera un fichero XML por proyecto. Para comenzar a trabajar el primer paso es crear un proyecto.

Podemos guardar, borrar y editar pro-yectos de forma similar a como trabajan los IDE's de desarrollo. Desde el menú de Gla-de tenemos acceso a la opción Proyectos.

Señales y eventosGTK+ está orientado a eventos, por lo tan-to es necesario comprender este concepto

para utilizar Glade. Una aplicación GTK+ siempre estará esperando que un evento ocurra. Un evento es la consecuencia de una acción que se realiza sobre un elemen-to de la interfaz y suele ser el usuario quién provoca un dicha acción.

Las señales son mensajes que emite un elemento de la interfaz cuando ocurre un evento. Por ejemplo, si un usuario pulsa un botón se producirá el evento botón_pulsado y él mismo emitirá la señal click.

Bien, ya tenemos señales y eventos pero nos queda responder a los mismos para lograr la interacción entre la aplicacióny el usuario. Para ello necesitaremos mane-jadores de señales que nos ayuden a repon-der a los mismos. Estos se caracterizan por utilizar una función o método callback, que contiene una serie de instrucciones que se ejecutarán para responder al evento.

En GTK+, para responder a un evento es necesario indicar que señales lanzará un widget y que función o método callback debe ejecutarse como respuesta. Este callback será indicado por el correspondiente manejador de señales.

Lenguajes de programaciónDado que Glade genera un fichero XML con la descripción de la interfaz y que gracias a libglade podemos cargar en tiempo de eje-cución dicha interfaz, podemos utilizar dis-tintos lenguajes para escribir aplicaciones GTK+. De hecho, podemos reutilizar la de-

finición de la interfaz con varios lenguajes de programación.

Actualmente es posible combinar Glade con los siguientes lenguajes:

• C: GTK+ está escrito en C, así pues, éste es el lenguaje nativo.

• C++: Existen bindings para este lenguaje, la librería oficial se llama gtkmm.

• C#: En GNU/Linux utilizando la tecno-logía Mono.

• Java: El lenguaje orientado a objetos de-sarrollado por Sun Microsystems.

• Python: Uno de los lenguajes interpreta-dos estrella.

• Pike: Lenguaje interpretado de sintaxis muy similar a C.

• Ruby: Famoso por el framework web Ruby on Rails.

• Haskell: Se caracteriza por su puramente funcional.

• Objective Caml: Lenguaje orientado a ob-jetos y multiplataforma.

• Perl: Un clásico de la programación.• Schem: Dialecto de LISP.

Para utilizar un lenguaje diferente a C nece-sitaremos utilizar un binding, es decir, una librería intermedia que encapsula el acceso a una librería escrita en un lenguaje desde otro. Los lenguajes anteriormente disponi-bles disponen de estos bindings que suelen ser librerías, las cuales podemos encontrar empaquetadas en formato binario para la mayoría de las distribuciones de Linux. Por ejemplo, en el caso de Python contamos con PyGTK, en el caso de Ruby disponemos de Ruby GNOME 2.

A continuación veremos cómo instalar, por línea de comando, los paquetes necesa-rios para cada binding en función del len-guaje, como ejemplo nos ceñiremos a la dis-tribución Debian Etch y a los lenguajes Ru-by, Perl y Python:

# apt-get install libgtk2-ruby

# apt-get install libgtk2-perl

# apt-get install python-gtk2

La elección de un lenguaje u otro dependerá de nuestras necesidades, aunque debemos tener en cuenta que C es el lenguaje nativo y por lo tanto la integración será mayor y no es necesario instalar bindings.

Un ejemplo prácticoEn general, el proceso de desarrollo de aplica-ciones GTK+ utilizando Glade, consta de las siguientes fases:

Figura 5. Detalle del árbol de widgets del proyecto de software libre gtkPod, realizado con Glade

Page 6: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones
Page 7: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

48

softwareGlade

Linux+ 9/2007 49

softwareGlade

www.lpmagazine.org

• Diseño de la interfaz de usuario con Glade.

• Generación del XML con la definición de la interfaz.

• Desarrollo del código de la aplicación con la lógica de negocio.

• Desarrollo del código de la aplicación que interactúa con la interfaz gráfica.

Si el lenguaje es distinto a C, no olvidemos que necesitamos las librerías que hacen de binding.

Vamos a ver un sencillo ejemplo para diseñar una aplicación que realiza una con-versión de euros a libras esterlinas y vice-versa. La interfaz de nuestra aplicación con-tendrá dos etiquetas, dos botones y dos cajas de textos dónde el usuario podrá poner los importes para la conversión.

En primer lugar debemos seleccionar los contenedores que vamos a utilizar, en nuestro caso el primer contenedor será una ventana, así pues hacemos click sobre este widget del grupo Toplevels de la paleta y vermos cómo aparece la ventana en cuestión. El segundo contenedor que agrupará al resto es una caja vertical, cuando pichemos sobre la misma, Glade nos preguntará sobre el número de columnas, le indicamos que vamos a utilizar tres. Seguidamente añadiremos otra caja horizontal con dos columnas, dónde una de ellas nos servirá para añadir la etiqueta con el valor “EUR” y otra la utilizaremos para la caja de texto dónde el usuario introdu-cirá le importe que desee convertir. En la parte central de la ventana añadiremos una caja vertical que contendrá dos botones di-ferentes, uno para realizar la conversión de euros a libras y otro para convertir de libras a euros. Ya sólo nos queda añadir otra caja horizontal con dos columnas con una caja de texto y una etiqueta de manera similar a la anterior.

Resumiendo, tenemos los siguientes widgets:

• Una ventana utilizada como contenedor principal.

• Una caja horizontal con tres columnas.• Dos cajas horizontales con una etiqueta

y una caja de texto cada una.• Una caja vertical con dos filas, cada una

con un botón.

El siguiente paso es fijar las propiedades de los widgets a través de la ventana Pro-piedades. En nuestro ejemplo, sólo fijaremos el texto de las etiquetas y el de los botones. Para ello accedemos a la pestaña General de

la ventana propiedades de cada uno de es-tos widgets y escribimos el texto en cuestión. Cada vez que hacemos click sobre un widget se activa la ventana de propiedades corres-pondiente al mismo.

Respecto al empaquetado mantedremos el que viene por defecto, y veremos que ajus-tando el tamaño de la ventana lograremos ver los widgets de forma proporcional.

El resultado final puede verse en la Figura 4.

Ya sólo nos queda fijar las propieda-des relativas a las señales para los botones que está relacionado con la lógica de nego-cio de la aplicación y escribir la parte que interactúa con la interfaz en el lenguaje que hayamos elegido. En nuestro ejemplo del conversor fijaremos tres señales en la interfaz:

• En la ventana principal, seleccionamos la pestaña Señales y añadimos la señal delete_event. A esta señal le asignaremos el manejador llamado gtk_main_quit. El objetivo es que cuando el usuario pulse sobre el botón de cierre, la aplicación termine su ejecución.

• En el primer botón añadiremos la señal clicked y le asociamos el manejador on_button_clicked. Este será el nombre de la rutina callback que deberemos escribir y que se ejecutará como respuesta al pulsado del botón.

• De forma similar al anterior procede-mos para el otro botón. En este caso cambiaremos el nombre del maneja-

dor, puesto que éste será diferente. Por ejemplo, escribimos el nombre on_button2_clicked.

En este punto estamos en disposición de escribir el código que interactúa con nues-tra interfaz creada con Glade. A modo de ejemplo, utilizaremos el lenguaje C por ser el nativo de GTK+ y la librería libglade que nos permite cargar en tiempo de ejecución los elementos de nuestra interfaz.

En primer lugar debemos incluir las siguientes líneas en nuestro programa:

#include <gtk/gtk.h>

#include <glade/glade.h>

static GladeXML *xml;

La última línea es la declaración de la varia-ble que representa a la interfaz. La hemos declarado como global por simplicidad para poderla utilizar directamente en las rutinas callbacks.

La función principal de nuestro progra-ma contendrá el siguiente código (Lista-do 1).

En la línea 6 cargamos el fichero gene-rado por Glade y que contiene la interfaz. Seguidamente utilizamos una función pa-ra conectar automática y directamente las

Listado 2. Función callback que se ejecuta como respuesta al evento que sucede

cuando se pulsa un botón

void on_button_clicked(GtkButton *button, gpointer user_data)

{

GtkWidget *entry1;

GtkWidget *name_entry;

GtkEntry *txt;

GtkEntry *txt2;

char *cad = NULL;

txt = (GtkEntry *) glade_xml_get_widget(xml, "entry1");

cad = gtk_entry_get_text (txt);

/*

Obviamos la transformación de euros a libras.

El lector interesado puede realizar la implementación

en este punto.

*/

txt2 = (GtkEntry *) glade_xml_get_widget(xml, "entry2");

gtk_entry_set_text (txt2, cad);

}

• GTK: Gimp ToolKit.• IDE: Entorno Integrado de Desarrollo.

Acrónominos y abreviaturas

Page 8: Gladethe-eye.eu/public/Site-Dumps/index-of/index-of.co.uk/...software Glade 42 Linux+ 9/2007 software Glade 43 linux@software.com.pl C uando nos planteamos el desarrollo de apli-caciones

48

softwareGlade

Linux+ 9/2007 49

softwareGlade

www.lpmagazine.org

señales con sus correspondientes maneja-dores.

Ahora debemos escribir las funciones callback, como ejemplo mostraremos sólo una, que será la encargada de leer el valor de la caja de texto dónde se introduce el va-lor de los euros, realizar la conversión a li-bras y mostrar el correspondiente valor en la otra caja de texto. El código correspondiente sería el siguiente (Listado 2).

Obviamente debemos tener instaladas las correspondientes librerías para poder realizar la compilación y ejecución de este ejemplo. En concreto necesitamos las librer-ías de GTK+ y libglade incluyendo sus res-pectivas librerías dependientes. Además, es necesario tanto las librerías de desarrollo co-mo las de ejecución (runtime). Superado este paso ya sólo nos queda compilar nuestro programa ejemplo:

$ gcc -export-dynamic

-o conversor conversor.c

`pkg-config --cflags --libs

libglade-2.0`

Finalmente, podemos ejecutarlo y ver el resul-tado, para ello lo lanzaremos desde la línea de comandos:

$ ./conversor

ConclusionesGlade es una herrramienta práctica y pro-ductiva para escribir interfaces de usuario utilizando GTK+. La curva de aprendizaje no es elevada, gracias a su intuitiva inter-faz.

Una de las claras ventajas de Glade es la generación del fichero XML que permite cargar la interfaz gráfica en tiempo de eje-cución desde distintos lenguajes de progra-mación.

Distintos proyectos de software libre utilizan Glade para generar las interfaces de usuario, un ejemplo es gtkPod el popu-lar programa que emula al iTunes de Apple y que permite sincronizar el iPod con nues-tro PC bajo GNU/Linux.

Si a todo esto sumamos que Glade es multiplataforma y que es software libre, es-tamos ante una complemento ideal para el desarrollo de software con interfaz de usua-rio, especialmente en GNU/Linux y para la integración con el entorno de escritorio GNOME.

Figura 6. Detalle de la interfaz de gtkPod

• Sitio oficial de Glade http://glade.gnome.org• Sitio web de GTK+ http://www.gtk.org• El popular gestor de escritorio

GNOME http://www.gnome.org• Librería binding para C++

de GTK+ http://www.gtkmm.org• Sitio web de PyGTK http://www.pygtk.org• Ruby y GTK+ http://ruby-gnome2.sourceforge.jp

Referencias en Internet

Arturo Fernández Montoro es Ingeniero Técnico en Informática de Gestión. Está especializado en desarrollo web y software libre. Colabora como autor freelance en varias revistas nacionales e internaciona-les sobre GNU/Linux.

Sobre el autor

Figura 7. Sitio oficial de Glade