0% encontró este documento útil (0 votos)

52 vistas31 páginas

Tema 05 PDF

El documento presenta un curso sobre diseño de interfaces gráficas utilizando Glade en el contexto de Python avanzado. Se discuten las ventajas de usar Glade, como la capacidad de modificar el diseño sin alterar el código y se introducen las directrices de diseño de la interfaz de usuario de Gnome. Además, se incluye un proyecto práctico para desarrollar una aplicación que visualice archivos FITS.

Cargado por

Jesaja Rostov

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

0% encontró este documento útil (0 votos)

52 vistas31 páginas

Tema 05 PDF

Cargado por

Jesaja Rostov

Derechos de autor

Nos tomamos en serio los derechos de los contenidos. Si sospechas que se trata de tu contenido, reclámalo aquí.

Formatos disponibles

Descarga como PDF, TXT o lee en línea desde Scribd

Tema 5 Diseño con Glade

Curso de Python Avanzado

Juan Pedro Bolı́var Puente

Instituto Andaluz de Astrofı́sica

Mayo de 2011
Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)
Tema 5 Diseño con Glade Mayo de 2011 1 / 24
Índice

1 Introducción
2 Un paseo por Glade
3 Proyecto

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 2 / 24
Introducción

Índice

1 Introducción
2 Un paseo por Glade
3 Proyecto

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 3 / 24
Introducción

¡Yo también quiero botones!

O sea que...
Le damos botones a los usuarios...
¡Y nosotros no paramos de picar código!
¡Esto no es justo!

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 4 / 24
Introducción

... y usuarios

Solución:
¡Editores de interfaces gráficas!
Glade: editor de interfaces gráficas de GTK
Editamos la interfaz visualmente ...
La guardamos en un ficherito XML ...
Luego cargamos la interfaz ...
Conectamos las señales automáticamente ...

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 5 / 24
Introducción

El ficherito de Glade...
Un ficherito editador por Glade
<? xml version = " 1.0 " encoding = " UTF -8 " standalone = " no " ? >
<! DOCTYPE glade - interface SYSTEM " glade -2.0. dtd " >
<! -- Generated with glade3 3.4.0 on Tue Nov 20 14 :05:37 2
< glade - interface >
< widget class = " GtkWindow " id = " window1 " >
< property name = " events " > G D K _ P O I N T E R _ M O T I O N _ M A S K |
GDK_POINTER_MOTION_HINT_MASK | GDK_BUTTON_PRESS_MASK |
G DK _B U TT O N _ R E L E A S E _ M A S K </ property >
< child >
< placeholder / >
</ child >
</ widget >
</ glade - interface >

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 6 / 24
Introducción

Ventajas

¡Todo son ventajas!

Podemos cambiar el diseño sin cambiar el código
Podemos centrarnos en el diseño
⇒ ¡Nuestros usuarios nos lo agradecerán!
Glade ayuda por defecto a seguir las
Gnome Human Interface Guidelines

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 7 / 24
Introducción

Ventajas

¡Todo son ventajas!

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 7 / 24
Introducción

Gnome Human Interface Guidelines

¡El diseño es importante!

Design for People
Don’t Limit Your User Base
Match Between Application → Real World
Make Your Application Consistent
Keep the User Informed
Keep It Simple and Pretty
Put the User in Control
Forgive the User
Provide Direct Manipulation
Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)
Tema 5 Diseño con Glade Mayo de 2011 8 / 24
Introducción

Gnome Human Interface Guidelines

¡El diseño es importante!

Figura: Da recomendaciones estilı́sticas concretas

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 8 / 24
Introducción

Gnome Human Interface Guidelines

¡El diseño es importante!

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 8 / 24
Un paseo por Glade

Índice

1 Introducción
2 Un paseo por Glade
3 Proyecto

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 9 / 24
Un paseo por Glade

Nada más abrir Glade ...

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 10 / 24
Un paseo por Glade

Estructura del editor ...

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 11 / 24
Un paseo por Glade

Cargando la interfaz en el código

¿Cómo cargamos la interfaz en el código?

Antaño ...
Usábamos libglade
http://developer.gnome.org/libglade/stable/
Sigue siendo mantenida por GNOME
Ahora ...
¡GTK nos da todo lo necesario!
Nos ahorramos dependencias

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 12 / 24
Un paseo por Glade

Cargando la interfaz en el código ...

La clase gtk.Builder
add from file (fname) → Carga el fichero fname
connect signals (dic or obj) → Conecta los
manejadores con:
Métodos con ese nombre de un objeto
Funciones especificadas en un diccionario
get object (objname) → Devuelve el objeto con
nombre objname del fichero ...

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 13 / 24
Un paseo por Glade

Conectando señales con un botón ...

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 14 / 24
Un paseo por Glade

Nuestra primera aplicación ...

import gtk
import util

class TutorialApp ( object ):

def __init__ ( self , *a , ** k ):
super ( TutorialApp , self ). __init__ (..

b = gtk . Builder ()
b . add_from_file ( " tutorial . glade " )
b . connect_signals ( self )

self . window = b . get_object ( " window " )

self . window . show ()

Juan Pedro Bolı́var Puente (Instituto Andaluz de Astrofı́sica)

Tema 5 Diseño con Glade Mayo de 2011 15 / 24
Un paseo por Glade

Nuestra primera aplicación ...

def handle_clicked ( self , obj ):

util . show_message_dialog (
" Mmmmmmm .... " ,
" Que gustito ! " )

def handle_window_destroy ( self , obj ):

gtk . main_quit ()

if name == " main " :

app = TutorialApp ()
gtk . main ()