PDF de programación - Desarrollando Aplicaciones Gnome con Glade

Desarrollando Aplicaciones Gnome con Glade

Un Tutorial
Eddy Ahmed

http://eddy.writelinux.com

Traducción al español: Waldo Ramírez Montaño.

Corregido por: José Daniel Muñoz Frías

Introducción
Este tutorial intenta proporcionar una guía paso a paso para comenzar a escribir aplicaciones Gnome usando 
Glade. Para ello necesitará:

 
 

• Librerías Gnome
 
• Glade
  
• Conocimientos básicos de C

Al finalizar el tutorial habrá escrito una aplicación del tipo "Hello World!" con la siguiente apariencia: 

¿Por qué usar Glade?
Glade permite al programador crear rápida y 
eficientemente un interfaz gráfico de usuario de 
forma visual. Esto le permite concentrarse en la 
implementación real del programa en lugar de 
en los múltiples detalles de la interfaz del 
usuario. 
¿Cómo?
1) Arranque glade desde el menú gnome o si lo 
prefiere desde un terminal tecleando glade­2. 
Se le mostrarán las tres ventanas mostradas en 
la Ilustración 1.
La primera ventana controla tu proyecto. La 
paleta te permite añadir widgets (pequeños 
artefactos como botones, cuadros de diálogo, 
etc.) a tu aplicación, mientras que la ventana de 
propiedades permitirá la modificación de 
propiedades del widget elegido y la definición 
de señales (más adelante veremos más sobre 
ellas).
2) Lo primero que necesitaremos es un lugar 
para colocar los widgets. Por tanto en primer 

Ilustración 1: Ventanas de Glade

lugar crearemos una ventana haciendo clic en el icono de ventana ubicado en la paleta.

 Icono de Ventana, en la paleta.

Con esto aparecerá una nueva ventana lista para ser modificada. Mire las propiedades para la ventana, en 
particular que el nombre de la ventana es “window1”.
Modifiquemos ahora el título de esta ventana, el cual se mostrará en su barra de título, por algo un poco más 
descriptivo. Para ello, dentro de la ventana de propiedades, basta con situarse en la pestaña Widget y en el 
apartado Título cambiar “window1” por algo parecido a “Mi Primera Aplicación Gnome”.

3) Muy bien, ahora la ventana está lista. A continuación vamos a añadir algunos botones y etiquetas... ¡pero 
espera! No podemos añadir widgets aún... En las aplicaciones Gnome los Widgets están empaquetados. Al 
principio empaquetar widgets puede parecer una carga adicional, pero realmente es un método ingenioso 
para permitir muchas cosas útiles, siendo la más inmediata el cambio de tamaño automático. Cuando un 
usuario cambia el tamaño de una aplicación, usualmente nos gusta que los widgets en la ventana también 
incrementen el tamaño para aprovechar el aumento de espacio, o lo contrario, que se encojan con el objetivo 
de poder caber en la ventana de acuerdo a su nuevo tamaño. El empaquetado permite realizarlo 
automáticamente, librando al desarrollador de la escritura del código específico para los cambios de 
tamaño. El empaquetado se logra creando cajas o tablas. Estos widgets son invisibles, significando que no 
pueden ser vistos en el tiempo de ejecución, aunque tienen un efecto directo en la aplicación.
Si observas nuevamente la imagen de la aplicación que crearemos (al principio del documento), puedes ver 
que es posible dividir la ventana en tres filas: la etiqueta superior, el campo de texto de entrada en la mitad y 
los dos botones inferiores. Por tanto lo que haremos es crear una Caja Vertical con tres filas. Haz clic sobre 
el icono de Caja Vertical en la paleta y después haz clic en cualquier lugar de la ventana que acabamos de 
crear.

 Icono de Caja Vertical, en la paleta.

Especifica que quieres que sean creadas tres filas y haz clic en Aceptar. La ventana estará ahora dividida en 
tres filas, lista para que puedan ser añadidos más widgets.
En este momento sería bueno abrir la ventana Árbol de Widget eligiendo Mostrar árbol de widgets del menú 
Ver.

Esta ventana te permite fácilmente obtener la visión de la jerarquía de tus widgets y también su selección.

Ahora podemos añadir con facilidad nuestros widgets etiqueta y entrada de texto en la primera y segunda 
fila respectivamente. Para ello basta con hacer un clic en el icono de Etiqueta de la paleta y luego hacer un 
clic en la primer fila de nuestra ventana. De manera similar, añada un widget Entrada de texto en la segunda 
fila.

 Iconos de Etiqueta y Entrada de texto, respectivamente, en la paleta.

Tu ventana de aplicación y el árbol de widget correspondiente deberían de verse como sigue:

Antes de que podamos añadir los botones en la tercera fila debemos crear una caja horizontal dentro de la 
tercera fila de la caja vertical. La nueva caja horizontal tendrá dos columnas, una para cada botón. Hagamos 
esto haciendo clic en el icono de caja horizontal de la paleta y haciendo clic en la tercera fila de nuestra 
ventana.

 Icono de Caja Horizontal, en la paleta.

Especifica dos columnas y haz clic en OK. Ahora la tercera columna se dividirá horizontalmente en dos 
secciones iguales.
Tal vez este sea un buen momento para guardar nuestro proyecto. Por defecto, Glade salvará tu proyecto 
dentro de un directorio de Proyectos en tu directorio home. Dale un nombre simple a tu proyecto como por 
ejemplo hola.
Sigamos con los botones. Cada sección que hemos creado en la tercera fila tendrá un botón. Por tanto vamos 
a añadir un botón a cada sección haciendo clic en el icono de Botón en la paleta y haciendo clic en la 
primera sección. Repite la acción, pero ahora para la segunda sección.

 Icono de Botón, en la paleta.

Listo, entonces nuestros botones están ahí... pero no se ven muy bien. Esto es porque debemos 
empaquetarlos adecuadamente. Hazlo dándole clic al primer botón que creaste y en la ventana de 
Propiedades selecciona la pestaña de Empaquetado. Dale permiso a las propiedades Expandir y Rellenar 
para el botón elegido asignándoles Si a ambas. Deberás notar que el primer botón rellena un poco. Realiza 
lo mismo para el segundo botón y podrás lograr que la aplicación se vea un poco mejor:

Podemos hacer que las cosas se vean aún mejor. Dentro de la ventana de propiedades cambia lo siguiente en 
las pestañas “Widget” de cada uno de los siguientes widgets (Recuerda que puedes elegir fácilmente a los 
widgets en la ventana Árbol de Widgets):

● Cambia la propiedad Homogéneo del widget hbox1 a Si.
● Cambia el Ancho del Borde del widget vbox1 a 4.
● Cambia el Espaciado de los widgets hbox1 y vbox1 a 4.
● Cambia la propiedad Etiqueta del widget button1 a OK.
● Cambia la propiedad Etiqueta del widget button2 a Cerrar.

Lo grandioso del desarrollo con Glade es que puedes ver inmediatamente como se verá tu aplicación... Es 
posible jugar alterando las propiedades hasta que la aplicación se vea justo como quieras.
Falta colocar una última propiedad antes de iniciar la escritura de código. Cambia la propiedad de Etiqueta 
de label1 a "Ingresa tu nombre:".
Sin escribir una sola línea de código, ¡hemos realmente creado una aplicación completamente funcional! 
Dile a Glade que construya código fuente haciendo clic en Construir de la barra de herramientas o 
seleccionando Escribir código fuente del menú Archivo.
Si ahora observas el directorio de tu Proyecto (recuerda que lo guardamos en /home/[tu nombre de 
usuario]/Proyectos/hola) verás todos los archivos que Glade ha creado.
El código fuente real reside en el subdirectorio "src". Algunos archivos como README, ChangeLog y 
otros, probablemente los modifiques tú mismo cuando desarrolles una aplicación real. Por ahora, sin 
embargo, podemos dejarlos vacíos. Para construir los Makefiles es necesario abrir un terminal de 
comandos, situarse dentro del directorio del proyecto y ejecutar ./autogen.sh. Se visualizarán una serie de 
mensajes mientras se comprueba la configuración de tu ordenador y se crean los Makefiles adecuados. 
Cuando finaliza autogen.sh podemos construir nuestra aplicación simplemente ejecutando el comando 
make.
Si todo va bien deberás tener un archivo ejecutable hola en el directorio src. Ejecútalo tecleando ./hola 
¡Voilá! ¡Tu primera aplicación Gnome! Intenta cambiar de tamaño su ventana para observar la magia del 

empaquetado trabajando.
Ahora bien, toda esta diversión es buena y bonita... pero nuestra aplicación es aún algo vacío y en realidad 
no hace nada útil. ¡Entonces vamos empezar a escribir el código!
Como este es sólo un tutorial de introducción, no haremos nada muy lujoso. Lo que nos gustaría lograr es 
que cuando el usuario teclee su nombre en la entrada de texto y después haga clic en OK, la etiqueta cambie 
por un saludo al usuario, consistiendo en un Hola seguido por el nombre que tecleó. También el botón 
Cerrar deberá finalizar la aplicación.
Para lograrlo debes entender el concepto de señales y respuesta a señal (en inglés, callbacks). Una señal 
sucede en cualquier momento en el que ocurra un evento, tal como el apretar un botón del ratón. Por ello, 
primero debemos crear un manejador de señal (en inglés, signal handler) para un evento del cual queramos 
que suceda algo. Una vez que se ha creado el manejador de señal hacemos que corresponda a una función 
de respuesta a señal (en inglés, callback function). Esta función es lo que realmente se ejecuta cada vez que 
sucede el evento. Comencemos por tanto con la creación de dos señales, una para cada botón. Empezaremos 
con el botón Cerrar, ya que es el más fácil de implementar.
Selecciona el botón Cerrar (button2) y en la ventana de Propiedades selecciona la pestaña de Señales. Un 
botón puede generar muchas señales. Sin embargo, en este caso sólo estamos interesados en cuando se hace 
clic sobre el botón. Para ello, haz clic sobre los puntos suspensivos que están a continuación del campo de 
Señal y de la lista que se muestra selecciona clicked y dale a OK. El campo del manejador corresponde al 
nombre de la función que modificarás para este evento en particular (se puede dejar el valor por defecto). 
Finalmente añade esta nueva señal haciendo clic en Añadir.

Añadamos algo de código trivial a nuestro recién creado manejador, justo para ver a nuestro evento e