GUI en Python con Glade


Este es un pequeño ejemplo para realizar un programa en Python con una interfaz gráfica de usuario (GUI) clásica; que funcione tanto en Windows como Linux.
He utilizado esto:
Como lo he hecho desde Windows he utilizado los instalables disponibles en los enlaces de arriba. Para quien quiera hacerlo desde Linux:
sudo apt-get install python2.7
sudo apt-get install python-gtk2
sudo apt-get install python-glade2

Para empezar, lo mas sencillo es diseñar la interfaz de usuario con Glade.
Las diferentes partes del entorno son:

  1. Paleta de componentes: los diferentes elementos u objetos que se pueden utilizar (botones, combobox, diálogos, etc)
  2. Panel de edición: donde se van poniendo y distribuyendo los elementos
  3. Panel inspector: aquí aparecen organizados en forma de árbol los diferentes elementos según estén unos dentro de otros
  4. Panel de propiedades: haciendo click en un elemento en el inspector o en edición, aquí aparecerán su diferentes propiedades
Para poner elementos se hace click en la paleta un componente y después en edición en el lugar que se quiere. Para este ejemplo he puesto lo siguiente:
  1. Una "Ventana"
  2. Un contenedor "Caja vertical" de 2 filas dentro de la ventana. Si nos equivocamos con las filas podemos volver a cambiarlas en el panel de propiedades, pestaña "General" y cambiando "Número de elementos".
  3. Una "Etiqueta" en la primera fila.
  4. Un "Botón" en la segunda fila.
He dejado los identificadores de los objetos con su nombre original (label1, button1, etc). Para cambiar el identificador de un objeto se utiliza el campo "Nombre" de la pestaña "Generales" de las propiedades. Se pueden cambiar los textos que aparecen en el botón y en la etiqueta utilizando el campo "Etiqueta":

Después, y lo mas importante, hay que asignar un identificativo a las acciones de los objetos (click en un botón, cerrar ventana, etc) para que ejecuten la parte del código que le corresponda, lo que se conoce como manejadores de eventos.
Esto se encuentra en la pestaña "Señales" de las propiedades. Aquí aparecen los nombres de las diferentes acciones que puede hacerse o que tiene un objeto, por ejemplo "destroy" puede servir cuando se cierra una ventana o "clicked" cuando se hace click en un botón.

En este caso, he empleado los manejadores del "button1" cuando se esta pulsando y cuando se suelta el botón. En la fila de la acción "pressed", dentro del apartado "GtkButton", se hace click donde pone "<Escriba aqui>" y se elige la primera opción del desplegable, "on_button1_pressed". Realmente puede escribirse el identificador que queramos, pero esta opción me parece la mas clara y descriptiva. Despues lo mismo con "released", quedando puesto "on_button1_released". Mas adelante en el código se ve como se utiliza.
Para terminar se guarda la interfaz en Archivo->Guardar como..., yo he utilizado de nombre "guiexample".

Solo queda la lógica de la aplicación. Se puede hacer con el bloc de notas de Windows perfectamente, aunque siempre prefiero utilizar algo mas completo como Atom o Sublime Text, tan solo hay que acordarse de guardar el texto con la extensión .py.

 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
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
#!/usr/bin/env python
import gtk

class GladeExample:

    def __init__(self):
        # Nombre del archivo que contiene la interfaz
        filename = "guiexample.glade"
        builder = gtk.Builder();
        builder.add_from_file(filename)

        # Instanciamos la ventana "window1" y la etiqueta de texto "label1"
        self.window1 = builder.get_object("window1")
        self.label1 = builder.get_object("label1")

        # Diccionario para asignar a cada evento un metodo
        dictio = {
            "on_button1_pressed" : self.btnPressed,
            "on_button1_released" : self.btnReleased
        }

        # En vez de asignar un diccionario, como en la proxima instruccion,
        # se puede hacer esto:
        #       builder.connect_signals(self)
        # en cuyo caso se asignaria automaticamente a cada evento aquel
        # metodo que tenga el mismo nombre, por lo que ademas deberiamos
        # cambiar los nombres de los metodos que hemos creado:
        #       btnPressed por on_button1_pressed y
        #       btnReleased por on_button1_released
        builder.connect_signals(dictio)

        # Esta es otra forma alternativa de asignar un metodo,
        # pero necesitaremos tener una instancia del objeto.
        # Por ejemplo, aqui a la accion de nombre "destroy" de "window1"
        # le asignamos gtk.main_quit, lo que termina la ejecucion del
        # programa al cerrar ventana
        # Este caso es importante porque si no el programa seguiria
        # en ejecucion, aunque estuviera cerrada la ventana
        self.window1.connect("destroy", gtk.main_quit)

        # Muestra la ventana al inicio del programa
        self.window1.show()

    # Metodos que cambian el texto de la etiqueta "label1"
    def btnPressed(self, widget):
        self.label1.set_text(" Estas pulsando el boton")
    def btnReleased(self, widget):
        self.label1.set_text(" Haz click en el boton")


if __name__ == '__main__' :
    app = GladeExample()
    gtk.main()


Todo el ejemplo esta disponible para descargar aquí.

Referencia:
http://python-gtk-3-tutorial.readthedocs.org/en/latest/builder.html
http://www.pygtk.org/articles/pygtk-glade-gui/Creating_a_GUI_using_PyGTK_and_Glade.htm
http://askubuntu.com/questions/56225/is-there-an-gui-designer-for-python/56244
http://stackoverflow.com/questions/2668618/python-glade-could-not-create-gladexml-object
https://www.daniweb.com/programming/software-development/threads/384019/glade-window-doesnt-appear

Comentarios

Entradas populares de este blog

Obtener provincia a traves del codigo postal con Javascript

Conversor de imagenes a Base64