jueves, 22 de octubre de 2009

Usando Glade (para aromatizar nuestras GUIs) parte I


Glade sirve mas que para darnos un fresco ambiente en la interfaz de usuario. También podemos registrar o prefijar funciones o métodos de retrollamada, atajos de teclado; puede contener mas de una ventana, incluso generar código fuente en C que nos servirá de plantilla para nuestra aplicación.



Aprenderemos a hacer uso de Glade para crear las interfaces gráficas.


Desde el menú de Aplicaciones/programación... Ejecutar Glade


Se despliega la aplicación, típicamente mostrando 3 ventanas.


Vista en detalle, la ventana principal de Glade es así:

La paleta es la caja de selección de widgets.

Se puede ver que sobre uno de los íconos está el mouse. Haga clic ahí para crear una ventana nueva.


Se ve en la esquina superior izquierda una ventana en blanco como esta:


En la ventana de propiedades ahora se ven los detalles de la ventana recien creada:


Contenedores: Anidando widgets.
Tal vez ya le es familiar trabajar con otros editores de GUIs, o incluso con algunos con el mismo paradigma de Glade, que hace uso extensivo de los contenedores jerarquizados.

Un widget es un elemento u objeto gráfico de nuestra interfaz. Anidando widgets en contenedores aprovechamos la característica que permite cambiar de tamaño la ventana mientras los controles adaptan sus tamaños en forma coordinada y planificada, sin una sola línea de código.

Por ejemplo, la ventana es un contenedor. dentro se pueden disponer organizadores verticales, horizontales, tabulares. Algunos widgets mas complejos son compuestos y también actúan como contenedores.

Pero, yo quiero trabajar a la antigua, sin usar contenedores...
De todos modos le servirá aprenderlo; pero si no se siente cómodo aun, hay un contenedor que permite insertar widgets arbitrariamente en cualquier ubicación de la ventana. Lamentablemente haremos énfasis en las técnicas habituales usando los contenedores.

Agregaremos un organizador vertical desde la paleta:

Hacemos clic en "Caja Vertical" y luego dentro de la ventana vacía. Esto resulta en un diálogo emergente:

simplemente hacemos clic en "Aceptar" y tendremos la ventana con 3 divisiones como se muestra:

Ahora Ud. mismo hará lo siguiente: Poner en la primera división una "Barra de menú". ubique entre los widgets de la paleta el icono que le muestra un consejo emergente con esa descripción. Haga clic y a continuación, haga clic en la primera división de la ventana que está modificando. Luego, en la segunda división agregue un widget "vista de texto" y en la última división una "barra de estado". La ventana debe quedar en esta forma:


Ahora, en la ventana principal del proyecto de Glade haga clic en el botón guardar. La primera vez le aparecerá esta ventana:


El proyecto crea un directorio con el nombre asignado; de momento trate de modificar solamente la segunda casilla de texto y cambiando la ubicación con el botón "Examinar". Cuando haga clic en el botón "Aceptar" se creará la carpeta, la ruta y el archivo de proyecto. Ahora puede cerrar la ventana principal de Glade, que tras la confirmación cerrará el entorno de trabajo.

Luego de cerrar Glade, pruebe haciendo doble clic en el archivo del proyecto generado, aquel que tiene una extensión ".glade". si todo está bien configurado, se abrirá el proyecto, pero no se mostrará la ventana creada, para ello tendrá que hacer doble clic en "window1", dentro de la lista de ventanas.

No hay comentarios:

Publicar un comentario