PDF de programación - Glade Manual Iniciación

Manual de Glade

(Ver 0.4 Última Modificación 22 de Enero de 2001)

Marcelo Pérez Medel ([email protected])

Glade es un programa gratuito que permite la creación de interfaces gráficas de usuario de manera visual, el
código generado puede ser en uno de varios lenguajes. En este pequeño manual supondremos que usted
tiene instalado Glade en su equipo, de no ser así consulte la página de Glade (http://glade.pn.org)

Inicio
Para iniciar la ejecución de Glade puede escoger la opción "desarrollo" en el menú de inicio y ahí seleccione
glade, o desde una terminal escriba glade y de enter en el prompt, con lo que se desplegaran las siguientes
ventanas:

Ventana Principal

La ventana principal muestra los widgets
usados, el nombre del proyecto y contiene los
menús de donde se seleccionan las opciones
que deseemos para el proyecto, tales como
nombre de la aplicación y el código generado
(C, C++, etc).

Por widget entenderemos cualquier elemento
de la interfaz, por ejemplo botones, barras de
menú, barras de progreso, ventanas, diálogos,
etc.

Paleta de widgets

Editor de Propiedades

La paleta contiene los elemento de la interfaz
que vamos a crear, dichos elementos se
agrupan en tres clases.
Paleta de Widgets
permite seleccionar que elementos agregaremos a nuestra aplicación, típicamente empezaremos con una
ventana o con un "cascarón" de aplicación gnome.

Esta ventana se activa cuando un widget esta
seleccionado y permite modificar sus atributos

Icono para el widget ventana

Icono para el widget cascarón gnome

Sobre esta base iremos agregando más elementos, tales como botones, barras de herramientas, barras de
menus, etc. También es posible agregar más ventanas a un proyecto por ejemplo una ventana para ayuda o
un cuadro de dialogo.

Clases de widgets
Los iconos de los widgets se agrupan en tres clases:

Widgets GTK+

Básicos



Aquí se encuentran los
fundamentales
elementos
para
la creación de
interfaces, con estos es
posible hacer aplicaciones
completas.

Widgets GTK+

Adicionales




se

Aquí
encuentran
elementos más elaborados,
útiles en una gran variedad
de aplicaciones.

Widgets GTK+

Gnome

Esta clase existe en la
versión de Glade
distribuida por Ximian
(http://www.ximian.com
), la distribución del sitio
oficial no la contiene.
Básicamente contiene
ventanas y diálogos con
estilo Gnome.

Widgets Básicos

Icono

Descripción

Ícono

Descripción

Ventana

Barra de Herramientas

Etiqueta

Caja Combo

Barra de Menús

Caja Flotante

Entrada de Texto

Caja de Texto

Botón

Botón de Chequeo

Lista

Lista en Columnas

Menú de Opciones

Barra de Progreso

Separador Horizontal

Mapa de Bits

Dialogo

Botón de Dos Estados

Botón de Radio

Árbol

Árbol en Columna

Botón de Incremento

Barra de Estado

Separador Vertical

Zona de Dibujo

Dialogo de Selección de Archivo

Dialogo de Selección de Color

Dialogo de Selección de Fuente

Caja Horizontal

Tabla

Caja Vertical

Posiciones Estáticas

Caja de Botones Horizontal

Caja de Botones Vertical

Panel Horizontal

Libreta

Ventana de Desplazamiento

Panel Vertical

Marco

Vista

Icon

o

Descripción

Icon

o

Descripción

Widgets Adicionales

Escala Horizontal

Regla Horizontal

Alineación

Etiqueta con Acelerador

Escala Vertical

Regla Vertical

Caja de Eventos

Calendario

Esquema

Aspecto del Marco

Curva

Barra de Desplazamiento
Horizontal
Imágen

Selección de Color

Dialogo de Entrada

Flecha

Empaquetador

Menú Popup

Curva Gamma

Barra de Desplazamiento Vertical

Previsualización

Selección de Fuente

Widget Personalizado

Cada uno de estos elementos esta asociado a cuando menos un evento, así que vale la pena explicar que es
esto para los más nuevos en estos terrenos.

Eventos

Un evento es una acción o suceso, por ejemplo cuando hacemos clic en un botón ocurre un evento, el cual es
"botón ha sido presionado", o cuando escribimos dentro de una caja de texto ocurre un evento que podriamos
denominar "texto de la caja ha cambiado", la interfaz de nuestros programas deberá responder a muchos de
estos eventos.

Si usted ya tiene experiencia en programación visual estará familiarizado con el término, si no tiene experiencia
no se preocupe más adelante encontrará algunos ejemplos que le ayudaran a entender las señales de manera
práctica.

Cada evento esta relacionado con una función que se ejecuta cuando dicho evento acontece, a estas
funciones se les conoce como "callbacks" o retrollamadas, dichas funciones son declaradas como prototipos
en el archivo callbacks.h y llamadas en callbacks.c.

Los nombre de las retrollamadas empiezan con on_ y terminan con _activate, por
ejemplo: si el botón salvar es presionado entonces se llamará a la función
on_boton_save_activate, y encontraremos una función como esta en el archivo
callbacks.c:

on_boton_save_activate()
{
}

y ahi podremos escribir el código que corresponda a lo que queremos que el
programa haga cuando presionemos dicho botón.
Las Opciones de Programa
Glade tiene varias opciones configurables para nuestros proyectos, a continuación se muestran las pantallas
donde se pueden cambiar.

En esta pantalla podemos escoger en que carpeta se guardará nuestro proyecto, con que nombre y en que
directorio se guardaran los fuentes y las imágenes (no es muy recomendable cambiar estos dos ultimos).
Además podemos seleccionar el código fuente en el que se guardará el proyecto, dado que Glade
básicamente se basa en las bibliotecas GTK+ (Gimp Tool Kit - Juego de Herramientas para Gimp) y para estas
bibliotecas se tienen enlaces con los lenguajes "C", "C++", Perl y otros, entonces se puede seleccionar en cual
de estos lenguajes queremos nuestra salida (por defecto es "C").

En la primera pantalla podemos configurar los archivos donde se declararan las funciones que controlan los
eventos, aunque normalmente estos se dejan como estan. En la segunda pantalla podemos indicar si
queremos que las cadenas traducibles se guarden en un archivo y que nombre tendrá dicho archivo, esta
opción es útil se pretende que su aplicación sea traducida a otros idiomas.

Un Pequeño Ejemplo Paso a Paso

Para ejemplificar algunos conceptos realizaremos un pequeño programa.

Primero ejecutamos Glade y en la paleta de iconos presionamos el icono de ventana:
creará una ventana como la que se muestra a continuación:

con lo que se

Esta ventana es el "widget" que contendrá
a los demas elementos o "widgets" de la
Interfaz.

A diferencia de muchos lenguales visua-
les en Glade los elementos deben estar
contenidos dentro de "cajas" para poder
acomodarse, por ejemplo si en este mo-
mento ponemos un botón sobre la ven-
tana el botón ocuparía toda el área de
trabajo.

A continuación presionaremos el icono de
caja vertical:


a continuación aparecerá una dialogo donde indicaremos cuantas cajas queremos (en este caso dos):



Presionaremos el icono de barra de menues:

y daremos un clic en la caja de arriba con lo cual la ventana tomará el siguiente aspecto:

Nuestra aplicación ya tiene una barra de menues, pero no contiene nada todavia, presionando el botón
derecho del ratón sobre la barra de menues aparecerá un menú como el de la derecha:

y presionando en "Editar Menú" aparecerá el editor de Menues:

El manejo del editor de Menues es bastante sencillo, con el botón añadir se crean los elementos de menú y
con las flechas se establece la jerarquia, por ejemplo los elementos que estan indentados un nivel a la derecha

son elementos pertenecientes al elemento inmediato superior que esta un nivel antes.

Posteriormente colocamos otra caja vertical con dos divisiones y colocamos en la superior una caja de
herramientas y una ventana de dialogo nos preguntará cuantos botones colocar, contestamos que cinco, el
aspecto de nuestra ventana queda así:

Al presionar el icono boton y presionar cada uno de los pequeños cuadritos de la barra de herramientas estas
cambiaran a un boton estándar al que se le puede cambiar el mapa de bits, la etiqueta y algunos oros
paramétros por medio del editor de propiedades, ahí puede seleccionar botones prediseñados para funciones
comunes como abrir, guardar, imprimir, pero también puede crear sus propios botones, para lo cual deberá
diseñar una imagen de 24 x 24 pixeles (se puede de otros tamaños pero este es el estándar) en formato XPM.

El aspecto después de agregar los botones:

En el espacio de trabajo que queda sin ocupar podemos colocar mas cajas e irlas anidando hasta formar la
interfaz que se desee, si no se siente muy comodo con esta forma de trabajar puede utilizar un tipo especial de
caja, que es la de "posiciones estáticas" :

El cual le permite colocar los objetos donde usted quiera, de forma muy semejante a como lo hacen los

entornos de programación visual comerciales.

Para terminar esta pequeña interfaz de ejemplo vamos a agregar el widget calendario, el cual se encuentra en

la paleta de widgets, en la parte de los widgets adicionales, último icono del segundo renglón.

El aspecto final de la interfaz es:

Para compilarlo y probarlo, se requiere lo siguiente:

En la ventana principal de Glade presione el icono guardar, y después el icono construir. Guardar graba el
proyecto en un formato propio de Glade (nombre.glade), el cual es una versión de XML, esto se explicará más
adelante. Construir genera los archivos de "C" y las cabeceras y algunos otros archivos:

Vacío, necesariopara cumplir con GNU
Vacío, necesario para cumplir con GNU
Vacío, necesario para cumplir con GNU

AUTHORS
NEWS
README
Makefile.am Utiliza automake con este archivo para producir Makefile.in
acconfig.h
autogen.sh
configure.in Necesitado por Autoconf para producir un guión configure
macros/