Tema: IV.

Interfaces graficos de usuario

Herramientas Avanzadas para el Desarrollo de Aplicaciones
Departamento de Lenguajes y Sistemas Inform
aticos
Universidad de Alicante

Curso 2012-2013 , Copyleft 2011-2013 .

Reproduccion permitida bajo los terminos de la licencia de
documentaci
on libre GNU.

1 / 28

Contenido
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26

Preliminares (I)
Preliminares (II)
Preliminares (III)
MVC (I)
MVC (II)
MVC: Modelo. Capa de la Aplicacion
MVC: Vista. Capa de Presentaci
on
MVC: Controlador. Capa de Interacci
on
MVC: Diagrama de interacci
on entre capas
Gtk+ (I)
Gtk+ (II)
Gtk+ + Vala + signal/handler (I)
Gtk+ + Vala + signal/handler (II)
Gtk+ + Vala + signal/handler (III)
Gtk+ + Vala + signal/handler (IV)
Gtk+ Widgets (I)
Gtk+ Widgets (II)
Glade (I)
Glade (II)
Glade (III)
Glade (IV)
Glade (V)
Glade + Gtk+ (I)
Glade + Gtk+ (II)
Glade + Gtk+ (III)
Glade + Gtk+ (IV)
2 / 28

Preliminares (I)

En este tema vamos a ver c

omo dotar a nuestras aplicaciones de un

Interfaz Grafico de Usuario .

Veremos c
omo se apoya en los conceptos de programacion dirigida

por eventos y ejecuci

on diferida de c
odigo vista en los temas previos.
Daremos una breve introducci
on a la arquitectura

ya que para
escribir el codigo de nuestras aplicaciones haremos uso de la misma.
MVC

El interfaz gr
afico de nuestras aplicaciones de escritorio empleara la

biblioteca Gtk+ .

3 / 28

Preliminares (II)
Veremos como crear gr
aficamente el interfaz de la aplicacion con un

programa dedicado al dise

no de interfaces graficos de usuario. Este se
llama Glade .
Los interfaces gr
aficos creados con glade seran cargados

dinamicamente en tiempo de ejecuci

on y mostrados al usuario para
que pueda interactuar con los mismos.
Glade genera archivos XML que contienen la descripci
on del interfaz

de usuario dise
nado. Estos archivos se pueden leer/cargar desde
diversos lenguajes de programaci
on: C, C++, C#, Vala, Java,
etc. . .
Todo esto lo haremos con el lenguaje de programaci
on Vala empleado

en las practicas de la asignatura para la parte de escritorio.

4 / 28

Preliminares (III)

Vala emplea algunas tecnologas que componen los fundamentos de

Gtk+.
Estas son GLib y Gobject .
Esto influye para que con Vala sea muy sencillo construir aplicaciones

que tengan un interfaz grafico de usuario basado en Gtk+.

Vamos a ver un vdeo donde en menos de cinco minutos se nos

muestra como crear una aplicaci

on sencilla dotada de interfaz grafico
de usuario1 .

En este caso sin hacer uso de Glade.

5 / 28

MVC (I)

MVC surge junto con Smalltalk durante los a

nos 70.
Es aplicable al desarrollo de cualquier aplicaci
on independientemente

del lenguaje de programaci

on elegido.
No es necesario el uso de un lenguaje orientado a objetos para

emplearlo, aunque esta metodologa lo haga mas sencillo.

6 / 28

MVC (II)

La idea clave de MVC consiste en dividir el c

odigo de una aplicacion

en capas, concretamente 3:
1
2
3

Modelo
Vista
Controlador

Cada una de estas capas puede ser sustituida en cualquier momento

sin afectar a las otras, p.e., tener diferentes vistas para un mismo
modelo.
Esta divisi
on del codigo garantiza mayor facilidad de portabilidad y de

adaptacion a los requerimientos del usuario.

7 / 28

MVC: Modelo. Capa de la Aplicacion

Es la representaci
on software del problema a resolver, sus datos,

funciones, etc. . . personas, coches, asientos contables. . .

Proporciona los m
etodos necesarios para que:
Se puedan consultar los datos del modelo ( getters).
Se puedan modificar los datos del modelo ( setters).

Los modelos no se comunican con las vistas2 , de este modo

conseguimos una mayor independencia entre el c

odigo que constituye
cada capa.
Un modelo puede tener asociadas varias vistas.

Aunque en ocasiones determinadas puede resultar interesante.

8 / 28

MVC: Vista. Capa de Presentacion

Sirve para mostrar al usuario los datos del modelo que le interesan

en cada caso el nombre de una persona, la velocidad de un coche, el

importe de un asiento. . .
Una vista no tiene porqu
e ser solamente en modo grafico, puede ser

en modo texto. . .
Las vistas se comunican con los modelos de forma bi-direccional

solicitan informacion, pueden modificar informacion

En la arquitectura MVC original las vistas se pueden anidar dando

lugar a lo que se llama una vista principal top-view compuesta de

subvistas. A efectos de la asignatura s
olo usaremos vistas simples, no
compuestas por otras.

9 / 28

MVC: Controlador. Capa de Interaccion

Contiene el c
odigo que hace de interfaz entre los dispositivos de

entrada teclado, rat

on, etc. . . y las capas de Vistas y Modelos.
Este es el c
odigo que permite al usuario interactuar con las Vistas.
Normalmente no tendremos que escribir c
odigo relacionado con esta

capa ya que el codigo que ira aqu es el que proporciona la biblioteca

grafica utilizada (Gtk+ en nuestro caso).

10 / 28

MVC: Diagrama de interaccion entre capas

Las capas de MVC.

Controlador
Vista
Modelo

La conexion entre el modelo y las vistas asociadas s

olo tiene sentido si los
datos del modelo se van a modificar internamente por alg
un calculo y
queremos que se actualicen las vistas asociadas a ese modelo.

11 / 28

Gtk+ (I)

Gtk+ se desarrolla como toolkit libre para la aplicaci

on gimp de

tratamiento de imagenes. Hoy en da es una de las bases del escritorio

gnome .
Se distribuye con licencia LGPL.
Disponemos de una extensa documentaci
on para Gtk+ y para usarlo

desde Vala en formato electr

onico que se puede consultar en lnea.
Tambi
en consta de un constructor grafico del interfaz de la

aplicacion: glade .

12 / 28

Gtk+ (II)
Gtk+ es actualizado sistem
aticamente un par de veces al a
no, hoy da

podemos encontrarnos con las versiones 2.x.y (en modo

mantenimiento) y, la actualmente activa, 3.x.y. En el laboratorio de
practicas de la EPS tenemos instalado Gtk+ 2.x.y.
Como veremos m
as adelante, esto influye a la hora de las opciones

que hemos de dar al compilador de Vala: --pkg gtk+-2.0 o

--pkg gtk+-3.0 .
Lo que denominamos de forma general Gtk+ es un compendio de una

serie de bibliotecas: Glib, GdkPixbuf, Gdk, Gtk, Atk y Pango.

La estructura interna de Gtk+ es la de una jerarqua de clases

formada por varios arboles (distintas races) con herencia simple.

Estos
arboles representan a cada una de las bibliotecas que hemos

comentado antes (glib, gdk, gtk, etc. . . ).

13 / 28

Gtk+ + Vala + signal/handler (I)

El uso de Gtk+ desde Vala se basa en lo que hemos visto en los

temas anteriores: eventos/se

nales y manejadores/callbacks.
Los elementos de interfaz de usuario (widgets, controles) que

proporciona Gtk+ definen una serie de se

nales que pueden emitir.
Nosotros nos dedicamos a conectarles los m
etodos o funciones de

nuestro codigo que hacen de manejador o callback, p.e. consultando

la documentacion de la clase Button encontramos un apartado
dedicado a se
nales:
1

public v i r t u a l void a c t i v a t e ()

3
5

The a c t i v a t e s i g n a l on G t k B u t t o n i s an a c t i o n s i g n a l and
e m i t t i n g i t causes the button to animate p r e s s then
release . . . .

public v i r t u a l void c l i c k e d ()

E m i t t e d when t h e b u t t o n h a s b e e n a c t i v a t e d ( p r e s s e d and
released ) .

11
...

14 / 28

Gtk+ + Vala + signal/handler (II)

Veamos un ejemplo completo:
2
4

// F i l e : gtkh e l l o . v a l a
u s i n g Gtk ;
i n t main ( s t r i n g [ ] a r g s ) {
Gtk . i n i t ( r e f a r g s ) ;

6
v a r window = new Window ( ) ; // Gtk . Window ( u s i n g Gtk )
window . t i t l e = " First GTK + Program " ;
window . b o r d e r w i d t h = 1 0 ;
window . w i n d o w p o s i t i o n = W i n d o w P o s i t i o n . CENTER ;
window . s e t d e f a u l t s i z e ( 3 5 0 , 7 0 ) ;
window . d e s t r o y . c o n n e c t ( Gtk . m a i n q u i t ) ;

8
10
12
14

v a r b u t t o n = new B u t t o n . w i t h l a b e l ( " Click me ! " ) ;

b u t t o n . c l i c k e d . c o n n e c t ( ( ) => { b u t t o n . l a b e l = " Thank you " ; } ) ;

16
window . add ( b u t t o n ) ;
window . s h o w a l l ( ) ;

18
20
22

Gtk . main ( ) ;
return 0;
}

Se compila as: valac --pkg gtk+-2.0 gtk-hello.vala.

15 / 28

Gtk+ + Vala + signal/handler (III)

Destacar del codigo anterior:

using Gtk: equivalente a un #import de Java o include de C o C++

para tener acceso a declaraciones/definiciones de Gtk+.

Gtk.init (ref args): Inicia la biblioteca Gtk+. Es indispensable hacerlo

siempre al principio del programa principal.

var window = new Window (): Crea un objeto de clase Gtk.Window,

es decir, una ventana sobre la que poder a

nadir otros elementos de
interfaz de usuario.
var button = new Button.with label(Click me!): Crea un objeto de

clase Gtk.Button.

16 / 28

Gtk+ + Vala + signal/handler (IV)

button.clicked.connect(() => {button.label = Thank you;}): La

clase Button dispone de la se

nal clicked, aqu le conectamos un
manejador. En este caso es una funci
on-.
window.add (button): A
nadimos el bot
on creado a la ventana.
window.show all(): La ventana hace visibles todos los widgets que

contenga.
Gtk.main(): Es el bucle de espera de eventos, de
el solo salimos para

finalizar la aplicacion.

17 / 28

Gtk+ Widgets (I)

Gtk+ nos ofrece una colecci

on importante de widgets predefinidos

organizados como una jerarqua de clases con herencia simple.

Podemos verla aqu
La clase base de cualquier elemento de interfaz de usuario es la clase

GtkWidget .
En Vala el prefijo Gtk de cualquier identificador, p.e. GtkWidget se

interpreta como un espacio de nombres, por lo que el identificador en

Vala sera: Gtk Widget.

Disponemos de la documentaci
on equivalente para la adaptacion de

Gtk+ a Vala aqu .

18 / 28

Gtk+ Widgets (II)

En Gtk+ un widget normalmente solo puede contener a otro widget.
Para crear interfaces de usuario funcionales necesitamos solventar esta

limitacion.
Existe un tipo especial de widgets que son los contenedores,

concretamente las clases derivadas de Gtk.Box . Puedes ver mas

informacion sobre sus clases derivadas aqu y en Gtk.HBox y
Gtk.VBox .
Tambi
en es aconsejable que conozcas el contenedor en forma de

tabla: Gtk.Table . Tienes mas informaci

on sobre el en la
documentacion de Gtk.
Visualmente no tienen ninguna apariencia pero tienen como

caracterstica que pueden contener mas de un widget, as como

gestionar el espacio que ocupan y que ocurre cuando cambia el
tama
no de este espacio.
19 / 28

Glade (I)
Glade es el constructor gr
afico oficial de interfaces de usuario para

Gtk+.
El aspecto que presenta es as:

20 / 28

Glade (II)
Creamos las ventanas, dialogos, etc. . . iniciales eligiendolos de entre la
lista de Niveles superiores:

21 / 28

Glade (III)
Le a
nadimos los contenedores necesarios para construir nuestro interfaz:

22 / 28

Glade (IV)
Insertamos en los huecos de los contenedores los widgets que
necesitemos, p.e. botones, etiquetas de texto, campos de texto editable,
etc. . . :

23 / 28

Glade (V)

Una vez tenemos creado el interfaz lo guardamos desde el

men
u Archivo.
Son archivos de texto en formato xml.
Suelen llevar la extensi
on .ui.
Desde nuestra aplicaci
on los cargamos dinamicamente con un objeto

de la clase Gtk.Builder.
Con el m
etodo add from file leemos el archivo .ui.
Con el m
etodo get object cargamos uno a uno por su nombre los

widgets que nos interesan del archivo .ui

24 / 28

Glade + Gtk+ (I)

Veamos c
omo podra quedar un ejemplo de c
odigo similar al visto en

la transparencia 15.
2
4
6
8
10
12
14
16
18
20
22

// v a l a c pkg g t k +2.0 pkg gmodule 2.0 gtkb u i l d e r s a m p l e . v a l a

u s i n g Gtk ;
p u b l i c v o i d o n b u t t o n 1 c l i c k e d ( Button s o u r c e ) {
s o u r c e . l a b e l = " Thank you ! " ;
}
p u b l i c v o i d o n b u t t o n 2 c l i c k e d ( Button s o u r c e ) {
s o u r c e . l a b e l = " Thanks ! " ;
}
i n t main ( s t r i n g [ ] a r g s ) {
Gtk . i n i t ( r e f a r g s ) ;
try {
v a r b u i l d e r = new B u i l d e r ( ) ;
// c a r g a d o r de a r c h i v o s de G l a d e
b u i l d e r . a d d f r o m f i l e ( " sample . ui " ) ;
// c a r g a d e l i n t e r f a z
builder . connect signals ( null ) ;
// a u t o c o n e x i o n de s e n y a l e s
v a r window = b u i l d e r . g e t o b j e c t ( " window " ) a s Window ;
window . s h o w a l l ( ) ;
Gtk . main ( ) ;
} catch ( Error e ) {
s t d e r r . p r i n t f ( " Could not load UI : %s \ n " , e . m e s s a g e ) ;
return 1;
}
return 0;
}

El interfaz de usuario lo podemos descargar de sample.ui

25 / 28

Glade + Gtk+ (II)

Visto sample.ui desde Glade tiene este aspecto:

26 / 28

Glade + Gtk+ (III)

Podemos conectar m
etodos como manejadores de se
nales.
En este caso hay que seguir unas normas para dar nombres a las

se
nales en Glade.
Veamoslo con un ejemplo:
1

u s i n g Gtk ;

namespace Foo {
p u b l i c c l a s s MyBar {

5
[ CCode ( i n s t a n c e p o s = 1) ]
p u b l i c v o i d o n b u t t o n 1 c l i c k e d ( Button s o u r c e ) {
s o u r c e . l a b e l = " Thank you ! " ;
}

7
9

[ CCode ( i n s t a n c e p o s = 1) ]
p u b l i c v o i d o n b u t t o n 2 c l i c k e d ( Button s o u r c e ) {
s o u r c e . l a b e l = " Thanks ! " ;
}

11
13
}

15
}
17
19
21

// . . .
v a r o b j e c t = new Foo . MyBar ( ) ;
builder . connect signals ( object ) ;
// . . .
27 / 28

Glade + Gtk+ (IV)

Si declaramos los m
etodos que haran de callbacks dentro de una clase

y/o dentro de un espacio de nombres. . .

. . . en Glade deberemos preceder el nombre del m
etodo que hara de

callback con el nombre del espacio de nombres y/o la clase a la que

pertenece, en min
usculas y separados por smbolos de subrayado.
Por ejemplo: Foo.MyBar.on button1 clicked en Glade sera:

foo my bar on button1 clicked, como podemos ver en esta

imagen:

28 / 28